pref(flowEditor): 优化节点内容组件并调整样式

- 调整节点输入标签样式，减少垂直间距
- 重构节点内容组件，提高代码可读性和可维护性
- 优化特殊节点和普通节点的句柄渲染逻辑
- 更新示例流程数据，为开始节点添加输出端口

src/pages/flowEditor/components/nodeContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from '@/pages/flowEditor/node/style/base.module.less';
 import { Handle, Position } from '@xyflow/react';
+import { Divider } from '@arco-design/web-react';
 
 interface NodeContentData {
   parameters?: {
@@ -13,6 +14,104 @@ interface NodeContentData {
   [key: string]: any;
 }
 
+// 渲染特殊节点（开始/结束节点）的句柄
+const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, inputs: any[], outputs: any[]) => {
+  return (
+    <>
+      <Handle
+        type={isStartNode ? 'source' : 'target'}
+        position={isStartNode ? Position.Right : Position.Left}
+        id={isStartNode ? 'start-source' : 'end-target'}
+        style={{
+          background: '#555',
+          top: '40px'
+        }}
+      />
+
+      {/* 为特殊节点的参数也添加句柄 */}
+      {isStartNode && outputs.map((_, index) => (
+        <Handle
+          key={`output-handle-${index}`}
+          type="source"
+          position={Position.Right}
+          id={outputs[index].name || `output-${index}`}
+          style={{
+            background: '#555',
+            top: `${60 + index * 20}px`
+          }}
+        />
+      ))}
+
+      {isEndNode && inputs.map((_, index) => (
+        <Handle
+          key={`input-handle-${index}`}
+          type="target"
+          position={Position.Left}
+          id={inputs[index].name || `input-${index}`}
+          style={{
+            background: '#555',
+            top: `${60 + index * 20}px`
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+// 渲染普通节点的句柄
+const renderRegularNodeHandles = (inputs: any[], outputs: any[]) => {
+  return (
+    <>
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="start-source"
+        style={{
+          background: '#555',
+          top: '40px'
+        }}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="end-target"
+        style={{
+          background: '#555',
+          top: '40px'
+        }}
+      />
+
+      {/* 输入参数连接端点 */}
+      {inputs.map((_, index) => (
+        <Handle
+          key={`input-handle-${index}`}
+          type="target"
+          position={Position.Left}
+          id={inputs[index].name || `input-${index}`}
+          style={{
+            background: '#555',
+            top: `${40 + (index + 1) * 20}px`
+          }}
+        />
+      ))}
+
+      {/* 输出参数连接端点 */}
+      {outputs.map((_, index) => (
+        <Handle
+          key={`output-handle-${index}`}
+          type="source"
+          position={Position.Right}
+          id={outputs[index].name || `output-${index}`}
+          style={{
+            background: '#555',
+            top: `${40 + (index + 1) * 20}px`
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
 const NodeContent = ({ data }: { data: NodeContentData }) => {
   const inputs = data.parameters?.inputs || [];
   const outputs = data.parameters?.outputs || [];
@@ -55,78 +154,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
         </div>
       )}
 
-      {/* 流程传输（开始/结束）只在一侧显示端点 */}
+      {/* 根据节点类型渲染不同的句柄 */}
-      {isSpecialNode ? (
+      {isSpecialNode
-        <>
+        ? renderSpecialNodeHandles(isStartNode, isEndNode, inputs, outputs)
-          <Handle
+        : renderRegularNodeHandles(inputs, outputs)}
-            type={isStartNode ? 'source' : 'target'}
-            position={isStartNode ? Position.Right : Position.Left}
-            id={isStartNode ? 'start-source' : 'end-target'}
-            style={{
-              background: '#555',
-              top: '40px'
-            }}
-          />
-
-          {/* 为流程传输的参数也添加句柄 */}
-          {isStartNode && outputs.map((_, index) => (
-            <Handle
-              key={`output-handle-${index}`}
-              type="source"
-              position={Position.Right}
-              id={outputs[index].name || `output-${index}`}
-              style={{
-                background: '#555',
-                top: `${60 + index * 20}px`
-              }}
-            />
-          ))}
-
-          {isEndNode && inputs.map((_, index) => (
-            <Handle
-              key={`input-handle-${index}`}
-              type="target"
-              position={Position.Left}
-              id={inputs[index].name || `input-${index}`}
-              style={{
-                background: '#555',
-                top: `${60 + index * 20}px`
-              }}
-            />
-          ))}
-        </>
-      ) : (
-        /* 普通节点可以在两侧显示多个端点 */
-        <>
-          {/* 输入参数连接端点 */}
-          {inputs.map((_, index) => (
-            <Handle
-              key={`input-handle-${index}`}
-              type="target"
-              position={Position.Left}
-              id={inputs[index].name || `input-${index}`}
-              style={{
-                background: '#555',
-                top: `${40 + index * 20}px`
-              }}
-            />
-          ))}
-
-          {/* 输出参数连接端点 */}
-          {outputs.map((_, index) => (
-            <Handle
-              key={`output-handle-${index}`}
-              type="source"
-              position={Position.Right}
-              id={outputs[index].name || `output-${index}`}
-              style={{
-                background: '#555',
-                top: `${40 + index * 20}px`
-              }}
-            />
-          ))}
-        </>
-      )}
     </>
   );
 };

src/pages/flowEditor/node/style/base.module.less

@@ -23,7 +23,7 @@
 
       .node-input-label {
         font-size: 12px;
-        padding: 2px 0;
+        padding: 1px 0;
       }
     }
 

src/pages/flowEditor/test/exampleFlowData.ts

@@ -62,7 +62,15 @@ export const exampleFlowData = {
         'component': null,
         'dataIns': [],
         'dataOfPrevNodeMap': {},
-        'dataOuts': [],
+        'dataOuts': [
+          {
+            'arrayType': null,
+            'dataType': null,
+            'defaultValue': null,
+            'desc': '',
+            'id': 'output'
+          }
+        ],
         'defaultValues': [],
         'description': '',
         'joinLines': {},