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,50 +14,9 @@ interface NodeContentData {
   [key: string]: any;
 }
 
-const NodeContent = ({ data }: { data: NodeContentData }) => {
-  const inputs = data.parameters?.inputs || [];
-  const outputs = data.parameters?.outputs || [];
-  const showFooter = data.showFooter || false;
-
-  // 判断节点类型
-  const isStartNode = data.type === 'start';
-  const isEndNode = data.type === 'end';
-  const isSpecialNode = isStartNode || isEndNode;
-
+// 渲染特殊节点（开始/结束节点）的句柄
+const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, inputs: any[], outputs: any[]) => {
   return (
-    <>
-      {/*content栏*/}
-      <div className={styles['node-content']}>
-        {inputs.length > 0 && !isStartNode && (
-          <div className={styles['node-inputs']}>
-            {inputs.map((input, index) => (
-              <div key={`input-${index}`} className={styles['node-input-label']}>
-                {input.name || `输入${index + 1}`}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {outputs.length > 0 && !isEndNode && (
-          <div className={styles['node-outputs']}>
-            {outputs.map((output, index) => (
-              <div key={`output-${index}`} style={{ fontSize: '12px', padding: '2px 0' }}>
-                {output.name || `输出${index + 1}`}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/*footer栏*/}
-      {showFooter && (
-        <div className={styles['node-footer']}>
-          暂定的footer
-        </div>
-      )}
-
-      {/* 流程传输（开始/结束）只在一侧显示端点 */}
-      {isSpecialNode ? (
     <>
       <Handle
         type={isStartNode ? 'source' : 'target'}
@@ -68,7 +28,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
         }}
       />
 
-          {/* 为流程传输的参数也添加句柄 */}
+      {/* 为特殊节点的参数也添加句柄 */}
       {isStartNode && outputs.map((_, index) => (
         <Handle
           key={`output-handle-${index}`}
@@ -95,9 +55,32 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
         />
       ))}
     </>
-      ) : (
-        /* 普通节点可以在两侧显示多个端点 */
+  );
+};
+
+// 渲染普通节点的句柄
+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
@@ -107,7 +90,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           id={inputs[index].name || `input-${index}`}
           style={{
             background: '#555',
-                top: `${40 + index * 20}px`
+            top: `${40 + (index + 1) * 20}px`
           }}
         />
       ))}
@@ -121,12 +104,60 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           id={outputs[index].name || `output-${index}`}
           style={{
             background: '#555',
-                top: `${40 + index * 20}px`
+            top: `${40 + (index + 1) * 20}px`
           }}
         />
       ))}
     </>
+  );
+};
+
+const NodeContent = ({ data }: { data: NodeContentData }) => {
+  const inputs = data.parameters?.inputs || [];
+  const outputs = data.parameters?.outputs || [];
+  const showFooter = data.showFooter || false;
+
+  // 判断节点类型
+  const isStartNode = data.type === 'start';
+  const isEndNode = data.type === 'end';
+  const isSpecialNode = isStartNode || isEndNode;
+
+  return (
+    <>
+      {/*content栏*/}
+      <div className={styles['node-content']}>
+        {inputs.length > 0 && !isStartNode && (
+          <div className={styles['node-inputs']}>
+            {inputs.map((input, index) => (
+              <div key={`input-${index}`} className={styles['node-input-label']}>
+                {input.name || `输入${index + 1}`}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {outputs.length > 0 && !isEndNode && (
+          <div className={styles['node-outputs']}>
+            {outputs.map((output, index) => (
+              <div key={`output-${index}`} style={{ fontSize: '12px', padding: '2px 0' }}>
+                {output.name || `输出${index + 1}`}
+              </div>
+            ))}
+          </div>
         )}
+      </div>
+
+      {/*footer栏*/}
+      {showFooter && (
+        <div className={styles['node-footer']}>
+          暂定的footer
+        </div>
+      )}
+
+      {/* 根据节点类型渲染不同的句柄 */}
+      {isSpecialNode
+        ? renderSpecialNodeHandles(isStartNode, isEndNode, inputs, outputs)
+        : renderRegularNodeHandles(inputs, outputs)}
     </>
   );
 };

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': {},