1

frontend/src/pages/Workflow/Design/nodes/components/BaseNode.tsx

@@ -16,11 +16,20 @@ const BaseNode: React.FC<NodeProps> = ({ 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<NodeProps> = ({ 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<NodeProps> = ({ data, selected }) => {
                 {/* 图标 */}
                 {renderIcon()}
                 
-                {/* 标签 - shadcn 文本样式 */}
+                {/* 标签和输出信息 - 垂直布局 */}
-                <div className="text-sm font-medium text-foreground whitespace-nowrap">
+                <div className="flex flex-col gap-0.5 min-w-0">
-                    {nodeData.label || definition.nodeName}
+                    {/* 节点名称 */}
+                    <div className="text-sm font-medium text-foreground whitespace-nowrap">
+                        {nodeData.label || definition.nodeName}
+                    </div>
+                    
+                    {/* 输出能力简要信息 */}
+                    {getOutputsSummary() && (
+                        <div className="text-[10px] text-muted-foreground">
+                            输出：{getOutputsSummary()}
+                        </div>
+                    )}
                 </div>
                 
                 {/* 输出连接点 */}