diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx index 36dfa8c68f..e94992e469 100644 --- a/web/app/components/base/tab-header/index.tsx +++ b/web/app/components/base/tab-header/index.tsx @@ -14,12 +14,14 @@ type Item = { export type ITabHeaderProps = { items: Item[] value: string + itemClassName?: string onChange: (value: string) => void } const TabHeader: FC = ({ items, value, + itemClassName, onChange, }) => { const renderItem = ({ id, name, icon, extra }: Item) => ( @@ -32,7 +34,7 @@ const TabHeader: FC = ({ onClick={() => onChange(id)} > {icon || ''} -
{name}
+
{name}
{extra || ''} ) diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx similarity index 75% rename from web/app/components/workflow/nodes/_base/panel.tsx rename to web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx index 2ee39a3b06..bd05998c21 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx @@ -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 = ({ saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange) }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory]) + const [tabType, setTabType] = useState(TabType.settings) return (
= ({ onChange={handleDescriptionChange} />
- -
- {cloneElement(children as any, { id, data })} -
- - { - hasRetryNode(data.type) && ( - - ) - } - { - hasErrorHandleNode(data.type) && ( - + - ) - } - { - !!availableNextBlocks.length && ( -
-
- {t('workflow.panel.nextStep').toLocaleUpperCase()} -
-
- {t('workflow.panel.addNextStep')} -
- +
+ + + + {tabType === TabType.settings && ( + <> +
+ {cloneElement(children as any, { id, data })}
- ) - } + + { + hasRetryNode(data.type) && ( + + ) + } + { + hasErrorHandleNode(data.type) && ( + + ) + } + { + !!availableNextBlocks.length && ( +
+
+ {t('workflow.panel.nextStep').toLocaleUpperCase()} +
+
+ {t('workflow.panel.addNextStep')} +
+ +
+ ) + } + + )} + + {tabType === TabType.lastRun && ( +
last run content
+ )} ) diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx new file mode 100644 index 0000000000..09d7ed266d --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx @@ -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 = ({ + value, + onChange, +}) => { + const { t } = useTranslation() + return ( + + ) +} +export default React.memo(Tab) diff --git a/web/app/components/workflow/nodes/index.tsx b/web/app/components/workflow/nodes/index.tsx index bebc140414..d120ed8d37 100644 --- a/web/app/components/workflow/nodes/index.tsx +++ b/web/app/components/workflow/nodes/index.tsx @@ -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 ( <> - + diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index bdad0fdaca..a7ba1e8f21 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -879,6 +879,10 @@ const translation = { updateFailure: 'Failed to update version', }, }, + debug: { + settingsTab: 'Settings', + lastRunTab: 'Last Run', + }, } export default translation diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index 4e63a7b8c3..a5b4393d37 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -880,6 +880,10 @@ const translation = { updateFailure: '更新失败', }, }, + debug: { + settingsTab: '设置', + lastRunTab: '上次运行', + }, } export default translation