From acfb95f9c2ec233cfc213d78d8e998c7cd3f9b49 Mon Sep 17 00:00:00 2001 From: lyzno1 <92089059+lyzno1@users.noreply.github.com> Date: Tue, 19 Aug 2025 14:40:24 +0800 Subject: [PATCH] Refactor Start node UI to User Input and optimize EntryNodeContainer (#24156) --- .../_base/components/entry-node-container.tsx | 50 +++++++++++++++++++ .../_base/components/trigger-container.tsx | 43 ---------------- .../components/workflow/nodes/_base/node.tsx | 17 ++++--- web/i18n/en-US/workflow.ts | 12 +++-- web/i18n/ja-JP/workflow.ts | 4 ++ web/i18n/zh-Hans/workflow.ts | 4 ++ 6 files changed, 77 insertions(+), 53 deletions(-) create mode 100644 web/app/components/workflow/nodes/_base/components/entry-node-container.tsx delete mode 100644 web/app/components/workflow/nodes/_base/components/trigger-container.tsx diff --git a/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx b/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx new file mode 100644 index 0000000000..a9bca24515 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx @@ -0,0 +1,50 @@ +import type { FC, ReactNode } from 'react' +import { useMemo } from 'react' +import { useTranslation } from 'react-i18next' +import cn from '@/utils/classnames' + +export type EntryNodeStatus = 'enabled' | 'disabled' + +type EntryNodeContainerProps = { + children: ReactNode + status?: EntryNodeStatus + customLabel?: string + showIndicator?: boolean + nodeType?: 'start' | 'trigger' +} + +const EntryNodeContainer: FC = ({ + children, + status = 'enabled', + customLabel, + showIndicator = true, + nodeType = 'trigger', +}) => { + const { t } = useTranslation() + + const statusConfig = useMemo(() => { + const isDisabled = status === 'disabled' + const translationKey = nodeType === 'start' ? 'entryNodeStatus' : 'triggerStatus' + + return { + label: customLabel || (isDisabled ? t(`workflow.${translationKey}.disabled`) : t(`workflow.${translationKey}.enabled`)), + dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500', + } + }, [status, customLabel, nodeType, t]) + + return ( +
+
+ {showIndicator && ( +
+ )} + + {statusConfig.label} + +
+ {children} +
+ ) +} + +export default EntryNodeContainer diff --git a/web/app/components/workflow/nodes/_base/components/trigger-container.tsx b/web/app/components/workflow/nodes/_base/components/trigger-container.tsx deleted file mode 100644 index a4c3224eab..0000000000 --- a/web/app/components/workflow/nodes/_base/components/trigger-container.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import type { FC, ReactNode } from 'react' -import { useMemo } from 'react' -import { useTranslation } from 'react-i18next' -import cn from '@/utils/classnames' - -export type TriggerStatus = 'enabled' | 'disabled' - -type TriggerContainerProps = { - children: ReactNode - status?: TriggerStatus - customLabel?: string -} - -const TriggerContainer: FC = ({ - children, - status = 'enabled', - customLabel, -}) => { - const { t } = useTranslation() - - const statusConfig = useMemo(() => { - const isDisabled = status === 'disabled' - - return { - label: customLabel || (isDisabled ? t('workflow.triggerStatus.disabled') : t('workflow.triggerStatus.enabled')), - dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500', - } - }, [status, customLabel, t]) - - return ( -
-
-
- - {statusConfig.label} - -
- {children} -
- ) -} - -export default TriggerContainer diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx index 233b0af42e..3b0f4580ba 100644 --- a/web/app/components/workflow/nodes/_base/node.tsx +++ b/web/app/components/workflow/nodes/_base/node.tsx @@ -43,7 +43,7 @@ import NodeControl from './components/node-control' import ErrorHandleOnNode from './components/error-handle/error-handle-on-node' import RetryOnNode from './components/retry/retry-on-node' import AddVariablePopupWithPosition from './components/add-variable-popup-with-position' -import TriggerContainer from './components/trigger-container' +import EntryNodeContainer from './components/entry-node-container' import cn from '@/utils/classnames' import BlockIcon from '@/app/components/workflow/block-icon' import Tooltip from '@/app/components/base/tooltip' @@ -138,8 +138,6 @@ const BaseNode: FC = ({ return null }, [data._loopIndex, data._runningStatus, t]) - const isTriggerNode = TRIGGER_NODE_TYPES.includes(data.type as any) - const nodeContent = (
= ({
) - return isTriggerNode ? ( - + const isEntryNode = TRIGGER_NODE_TYPES.includes(data.type as any) || data.type === BlockEnum.Start + const isStartNode = data.type === BlockEnum.Start + + return isEntryNode ? ( + {nodeContent} - + ) : nodeContent } diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index e6b1288ea2..6834e45889 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -11,7 +11,7 @@ const translation = { publishUpdate: 'Publish Update', run: 'Test Run', running: 'Running', - chooseStartNodeToRun: 'Choose the start node to run', + chooseStartNodeToRun: 'Choose the entry node to run', inRunMode: 'In Run Mode', inPreview: 'In Preview', inPreviewMode: 'In Preview Mode', @@ -45,7 +45,7 @@ const translation = { needConnectTip: 'This step is not connected to anything', maxTreeDepth: 'Maximum limit of {{depth}} nodes per branch', needEndNode: 'The End node must be added', - needStartNode: 'A start node (Start or Trigger) must be added', + needStartNode: 'An entry node (User Input or Trigger) must be added', needAnswerNode: 'The Answer node must be added', workflowProcess: 'Workflow Process', notRunning: 'Not running yet', @@ -221,7 +221,7 @@ const translation = { }, tabs: { 'searchBlock': 'Search node', - 'start': 'Start', + 'start': 'User Input', 'blocks': 'Nodes', 'searchTool': 'Search tool', 'tools': 'Tools', @@ -239,7 +239,7 @@ const translation = { 'addAll': 'Add all', }, blocks: { - 'start': 'Start', + 'start': 'User Input', 'end': 'End', 'answer': 'Answer', 'llm': 'LLM', @@ -990,6 +990,10 @@ const translation = { enabled: 'TRIGGER', disabled: 'TRIGGER • DISABLED', }, + entryNodeStatus: { + enabled: 'START', + disabled: 'START • DISABLED', + }, tracing: { stopBy: 'Stop by {{user}}', }, diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts index 5abdca79e7..b14d857d4e 100644 --- a/web/i18n/ja-JP/workflow.ts +++ b/web/i18n/ja-JP/workflow.ts @@ -1071,6 +1071,10 @@ const translation = { enabled: 'トリガー', disabled: 'トリガー • 無効', }, + entryNodeStatus: { + enabled: 'スタート', + disabled: '開始 • 無効', + }, } export default translation diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index c1bc252ebe..cc9c453bbd 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -1071,6 +1071,10 @@ const translation = { enabled: '触发器', disabled: '触发器 • 已禁用', }, + entryNodeStatus: { + enabled: '开始', + disabled: '开始 • 已禁用', + }, } export default translation