diff --git a/frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx b/frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx index f5a88448..7e566559 100644 --- a/frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx +++ b/frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx @@ -16,11 +16,20 @@ const BaseNode: React.FC = ({ data, selected }) => { const config = definition.renderConfig; + // 获取输出字段简要信息 + const getOutputsSummary = () => { + if (!nodeData.outputs || nodeData.outputs.length === 0) { + return null; + } + return nodeData.outputs.map(output => output.name).join(', '); + }; + // shadcn 风格容器类名 const getContainerClass = () => { // 基础样式 - shadcn card 风格 + // 使用 items-start 让图标和文本顶部对齐 const baseClass = ` - relative inline-flex items-center gap-2 px-3 py-2 + relative inline-flex items-start gap-2 px-3 py-2 bg-background border border-border rounded-lg shadow-sm transition-all duration-200 @@ -45,6 +54,8 @@ const BaseNode: React.FC = ({ data, selected }) => { rounded-md transition-transform duration-200 group-hover:scale-110 + flex-shrink-0 + mt-0.5 " style={{ width: '32px', @@ -112,9 +123,19 @@ const BaseNode: React.FC = ({ data, selected }) => { {/* 图标 */} {renderIcon()} - {/* 标签 - shadcn 文本样式 */} -
- {nodeData.label || definition.nodeName} + {/* 标签和输出信息 - 垂直布局 */} +
+ {/* 节点名称 */} +
+ {nodeData.label || definition.nodeName} +
+ + {/* 输出能力简要信息 */} + {getOutputsSummary() && ( +
+ 输出:{getOutputsSummary()} +
+ )}
{/* 输出连接点 */}