mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-05 21:06:01 +08:00
feat: add settings and last run tab
This commit is contained in:
parent
c2e9056705
commit
17a908fac1
@ -14,12 +14,14 @@ type Item = {
|
||||
export type ITabHeaderProps = {
|
||||
items: Item[]
|
||||
value: string
|
||||
itemClassName?: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const TabHeader: FC<ITabHeaderProps> = ({
|
||||
items,
|
||||
value,
|
||||
itemClassName,
|
||||
onChange,
|
||||
}) => {
|
||||
const renderItem = ({ id, name, icon, extra }: Item) => (
|
||||
@ -32,7 +34,7 @@ const TabHeader: FC<ITabHeaderProps> = ({
|
||||
onClick={() => onChange(id)}
|
||||
>
|
||||
{icon || ''}
|
||||
<div className='ml-2'>{name}</div>
|
||||
<div className={cn('ml-2', itemClassName)}>{name}</div>
|
||||
{extra || ''}
|
||||
</div>
|
||||
)
|
||||
|
@ -6,6 +6,7 @@ import {
|
||||
cloneElement,
|
||||
memo,
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
RiCloseLine,
|
||||
@ -13,16 +14,16 @@ import {
|
||||
} from '@remixicon/react'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import NextStep from './components/next-step'
|
||||
import PanelOperator from './components/panel-operator'
|
||||
import HelpLink from './components/help-link'
|
||||
import NextStep from '../next-step'
|
||||
import PanelOperator from '../panel-operator'
|
||||
import HelpLink from '../help-link'
|
||||
import {
|
||||
DescriptionInput,
|
||||
TitleInput,
|
||||
} from './components/title-description-input'
|
||||
import ErrorHandleOnPanel from './components/error-handle/error-handle-on-panel'
|
||||
import RetryOnPanel from './components/retry/retry-on-panel'
|
||||
import { useResizePanel } from './hooks/use-resize-panel'
|
||||
} from '../title-description-input'
|
||||
import ErrorHandleOnPanel from '../error-handle/error-handle-on-panel'
|
||||
import RetryOnPanel from '../retry/retry-on-panel'
|
||||
import { useResizePanel } from '../../hooks/use-resize-panel'
|
||||
import cn from '@/utils/classnames'
|
||||
import BlockIcon from '@/app/components/workflow/block-icon'
|
||||
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
||||
@ -46,6 +47,7 @@ import Tooltip from '@/app/components/base/tooltip'
|
||||
import type { Node } from '@/app/components/workflow/types'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
import Tab, { TabType } from './tab'
|
||||
|
||||
type BasePanelProps = {
|
||||
children: ReactNode
|
||||
@ -102,6 +104,7 @@ const BasePanel: FC<BasePanelProps> = ({
|
||||
saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange)
|
||||
}, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
|
||||
|
||||
const [tabType, setTabType] = useState<TabType>(TabType.settings)
|
||||
return (
|
||||
<div className={cn(
|
||||
'relative mr-2 h-full',
|
||||
@ -167,40 +170,56 @@ const BasePanel: FC<BasePanelProps> = ({
|
||||
onChange={handleDescriptionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{cloneElement(children as any, { id, data })}
|
||||
</div>
|
||||
<Split />
|
||||
{
|
||||
hasRetryNode(data.type) && (
|
||||
<RetryOnPanel
|
||||
id={id}
|
||||
data={data}
|
||||
<div className='pl-4'>
|
||||
<Tab
|
||||
value={tabType}
|
||||
onChange={setTabType}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
hasErrorHandleNode(data.type) && (
|
||||
<ErrorHandleOnPanel
|
||||
id={id}
|
||||
data={data}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!availableNextBlocks.length && (
|
||||
<div className='border-t-[0.5px] border-divider-regular p-4'>
|
||||
<div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'>
|
||||
{t('workflow.panel.nextStep').toLocaleUpperCase()}
|
||||
</div>
|
||||
<div className='system-xs-regular mb-2 text-text-tertiary'>
|
||||
{t('workflow.panel.addNextStep')}
|
||||
</div>
|
||||
<NextStep selectedNode={{ id, data } as Node} />
|
||||
</div>
|
||||
<Split />
|
||||
</div>
|
||||
|
||||
{tabType === TabType.settings && (
|
||||
<>
|
||||
<div>
|
||||
{cloneElement(children as any, { id, data })}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<Split />
|
||||
{
|
||||
hasRetryNode(data.type) && (
|
||||
<RetryOnPanel
|
||||
id={id}
|
||||
data={data}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
hasErrorHandleNode(data.type) && (
|
||||
<ErrorHandleOnPanel
|
||||
id={id}
|
||||
data={data}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!availableNextBlocks.length && (
|
||||
<div className='border-t-[0.5px] border-divider-regular p-4'>
|
||||
<div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'>
|
||||
{t('workflow.panel.nextStep').toLocaleUpperCase()}
|
||||
</div>
|
||||
<div className='system-xs-regular mb-2 text-text-tertiary'>
|
||||
{t('workflow.panel.addNextStep')}
|
||||
</div>
|
||||
<NextStep selectedNode={{ id, data } as Node} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tabType === TabType.lastRun && (
|
||||
<div>last run content</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
import TabHeader from '@/app/components/base/tab-header'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export enum TabType {
|
||||
settings = 'settings',
|
||||
lastRun = 'lastRun',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
value: TabType,
|
||||
onChange: (value: TabType) => void
|
||||
}
|
||||
|
||||
const Tab: FC<Props> = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<TabHeader
|
||||
items={[
|
||||
{ id: TabType.settings, name: t('workflow.debug.settingsTab').toLocaleUpperCase() },
|
||||
{ id: TabType.lastRun, name: t('workflow.debug.lastRunTab').toLocaleUpperCase() },
|
||||
]}
|
||||
itemClassName='ml-0'
|
||||
value={value}
|
||||
onChange={onChange as any}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(Tab)
|
@ -10,7 +10,7 @@ import {
|
||||
PanelComponentMap,
|
||||
} from './constants'
|
||||
import BaseNode from './_base/node'
|
||||
import BasePanel from './_base/panel'
|
||||
import BasePanel from './_base/components/workflow-panel'
|
||||
|
||||
const CustomNode = (props: NodeProps) => {
|
||||
const nodeData = props.data
|
||||
@ -18,7 +18,7 @@ const CustomNode = (props: NodeProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<BaseNode { ...props }>
|
||||
<BaseNode {...props}>
|
||||
<NodeComponent />
|
||||
</BaseNode>
|
||||
</>
|
||||
|
@ -879,6 +879,10 @@ const translation = {
|
||||
updateFailure: 'Failed to update version',
|
||||
},
|
||||
},
|
||||
debug: {
|
||||
settingsTab: 'Settings',
|
||||
lastRunTab: 'Last Run',
|
||||
},
|
||||
}
|
||||
|
||||
export default translation
|
||||
|
@ -880,6 +880,10 @@ const translation = {
|
||||
updateFailure: '更新失败',
|
||||
},
|
||||
},
|
||||
debug: {
|
||||
settingsTab: '设置',
|
||||
lastRunTab: '上次运行',
|
||||
},
|
||||
}
|
||||
|
||||
export default translation
|
||||
|
Loading…
x
Reference in New Issue
Block a user