feat: add settings and last run tab

This commit is contained in:
Joel 2025-04-17 16:19:25 +08:00
parent c2e9056705
commit 17a908fac1
6 changed files with 105 additions and 42 deletions

View File

@ -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>
)

View File

@ -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>
)

View File

@ -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)

View File

@ -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>
</>

View File

@ -879,6 +879,10 @@ const translation = {
updateFailure: 'Failed to update version',
},
},
debug: {
settingsTab: 'Settings',
lastRunTab: 'Last Run',
},
}
export default translation

View File

@ -880,6 +880,10 @@ const translation = {
updateFailure: '更新失败',
},
},
debug: {
settingsTab: '设置',
lastRunTab: '上次运行',
},
}
export default translation