From c9cd23039e2a828d206603d943c8cf95c7b368e5 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 27 Aug 2025 14:56:35 +0800
Subject: [PATCH] =?UTF-8?q?pref(flowEditor):=20=E4=BC=98=E5=8C=96=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E5=86=85=E5=AE=B9=E7=BB=84=E4=BB=B6=E5=B9=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整节点输入标签样式，减少垂直间距
- 重构节点内容组件，提高代码可读性和可维护性
- 优化特殊节点和普通节点的句柄渲染逻辑
- 更新示例流程数据，为开始节点添加输出端口
---
 .../flowEditor/components/nodeContent.tsx     | 175 +++++++++++-------
 .../flowEditor/node/style/base.module.less    |   2 +-
 src/pages/flowEditor/test/exampleFlowData.ts  |  10 +-
 3 files changed, 113 insertions(+), 74 deletions(-)

diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx
index 6030255..5f22324 100644
--- a/src/pages/flowEditor/components/nodeContent.tsx
+++ b/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 ? (
-        <>
-          <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`
-              }}
-            />
-          ))}
-        </>
-      ) : (
-        /* 普通节点可以在两侧显示多个端点 */
-        <>
-          {/* 输入参数连接端点 */}
-          {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`
-              }}
-            />
-          ))}
-        </>
-      )}
+      {/* 根据节点类型渲染不同的句柄 */}
+      {isSpecialNode
+        ? renderSpecialNodeHandles(isStartNode, isEndNode, inputs, outputs)
+        : renderRegularNodeHandles(inputs, outputs)}
     </>
   );
 };
diff --git a/src/pages/flowEditor/node/style/base.module.less b/src/pages/flowEditor/node/style/base.module.less
index 611bcb4..77e5afb 100644
--- a/src/pages/flowEditor/node/style/base.module.less
+++ b/src/pages/flowEditor/node/style/base.module.less
@@ -23,7 +23,7 @@
 
       .node-input-label {
         font-size: 12px;
-        padding: 2px 0;
+        padding: 1px 0;
       }
     }
 
diff --git a/src/pages/flowEditor/test/exampleFlowData.ts b/src/pages/flowEditor/test/exampleFlowData.ts
index 68da610..20fc420 100644
--- a/src/pages/flowEditor/test/exampleFlowData.ts
+++ b/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': {},