refactor(flowEditor): 重构节点内容组件中的句柄渲染逻辑- 提取通用句柄样式

src/pages/flowEditor/components/nodeContent.tsx

@@ -15,84 +15,103 @@ interface NodeContentData {
   [key: string]: any;
 }
 
+// 定义通用的句柄样式
+const handleStyles = {
+  mainSource: {
+    background: '#2290f6',
+    width: '8px',
+    height: '8px',
+    border: '2px solid #fff',
+    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
+  },
+  mainTarget: {
+    background: '#2290f6',
+    width: '8px',
+    height: '8px',
+    border: '2px solid #fff',
+    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
+  },
+  data: {
+    background: '#555',
+    width: '6px',
+    height: '6px',
+    border: '1px solid #fff',
+    boxShadow: '0 0 2px rgba(0,0,0,0.2)'
+  }
+};
+
 // 渲染特殊节点（开始/结束节点）的句柄
 const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
-  return (
+  const renderStartNodeHandles = () => {
-    <>
+    if (!isStartNode) return null;
-      {isStartNode ?
+
-        apiOuts.map((_, index) => (
+    return (
+      <>
+        {apiOuts.map((_, index) => (
           <Handle
             key={`start-output-handle-${index}`}
             type="source"
             position={Position.Right}
             id={apiOuts[index].name || `start-output-${index}`}
             style={{
-              background: '#2290f6',
+              ...handleStyles.mainSource,
-              top: `${40 + index * 20}px`,
+              top: `${40 + index * 20}px`
-              width: '8px',
+            }}
-              height: '8px',
+          />
-              border: '2px solid #fff',
+        ))}
-              boxShadow: '0 0 4px rgba(0,0,0,0.2)'
+        {dataOuts.map((_, index) => (
+          <Handle
+            key={`output-handle-${index}`}
+            type="source"
+            position={Position.Right}
+            id={dataOuts[index].name || `output-${index}`}
+            style={{
+              ...handleStyles.data,
+              top: `${60 + index * 20}px`
             }}
-            className="node-handle"
           />
-        ))
+        ))}
-        :
+      </>
-        apiIns.map((_, index) => (
+    );
+  };
+
+  const renderEndNodeHandles = () => {
+    if (!isEndNode) return null;
+
+    return (
+      <>
+        {apiIns.map((_, index) => (
           <Handle
             key={`end-input-handle-${index}`}
             type="target"
             position={Position.Left}
             id={apiIns[index].name || `end-input-${index}`}
             style={{
-              background: '#2290f6',
+              ...handleStyles.mainTarget,
-              top: `${40 + index * 20}px`,
+              top: `${40 + index * 20}px`
-              width: '8px',
-              height: '8px',
-              border: '2px solid #fff',
-              boxShadow: '0 0 4px rgba(0,0,0,0.2)'
             }}
-            className="node-handle"
           />
-        ))
+        ))}
-      }
+        {dataIns.map((_, index) => (
-
+          <Handle
-      {/* 为特殊节点的参数也添加句柄 */}
+            key={`input-handle-${index}`}
-      {isStartNode && dataOuts.map((_, index) => (
+            type="target"
-        <Handle
+            position={Position.Left}
-          key={`output-handle-${index}`}
+            id={dataIns[index].name || `input-${index}`}
-          type="source"
+            style={{
-          position={Position.Right}
+              ...handleStyles.data,
-          id={dataOuts[index].name || `output-${index}`}
+              top: `${60 + index * 20}px`
-          style={{
+            }}
-            background: '#555',
+          />
-            top: `${60 + index * 20}px`,
+        ))}
-            width: '6px',
+      </>
-            height: '6px',
+    );
-            border: '1px solid #fff',
+  };
-            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
-          }}
-          className="node-handle"
-        />
-      ))}
 
-      {isEndNode && dataIns.map((_, index) => (
+  return (
-        <Handle
+    <>
-          key={`input-handle-${index}`}
+      {renderStartNodeHandles()}
-          type="target"
+      {renderEndNodeHandles()}
-          position={Position.Left}
-          id={dataIns[index].name || `input-${index}`}
-          style={{
-            background: '#555',
-            top: `${60 + index * 20}px`,
-            width: '6px',
-            height: '6px',
-            border: '1px solid #fff',
-            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
-          }}
-          className="node-handle"
-        />
-      ))}
     </>
   );
 };
@@ -103,74 +122,54 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
     <>
       {apiOuts.map((_, index) => (
         <Handle
-          key={`output-handle-${index}`}
+          key={`api-output-handle-${index}`}
           type="source"
           position={Position.Right}
           id={apiOuts[index].name || `output-${index}`}
           style={{
-            background: '#2290f6',
+            ...handleStyles.mainSource,
-            top: `${40 + index * 20}px`,
+            top: `${40 + index * 20}px`
-            width: '8px',
-            height: '8px',
-            border: '2px solid #fff',
-            boxShadow: '0 0 4px rgba(0,0,0,0.2)'
           }}
-          className="node-handle"
         />
       ))}
       {apiIns.map((_, index) => (
         <Handle
-          key={`input-handle-${index}`}
+          key={`api-input-handle-${index}`}
           type="target"
           position={Position.Left}
           id={apiIns[index].name || `input-${index}`}
           style={{
-            background: '#2290f6',
+            ...handleStyles.mainTarget,
-            top: `${40 + index * 20}px`,
+            top: `${40 + index * 20}px`
-            width: '8px',
-            height: '8px',
-            border: '2px solid #fff',
-            boxShadow: '0 0 4px rgba(0,0,0,0.2)'
           }}
-          className="node-handle"
         />
       ))}
 
       {/* 输入参数连接端点 */}
       {dataIns.map((_, index) => (
         <Handle
-          key={`input-handle-${index}`}
+          key={`data-input-handle-${index}`}
           type="target"
           position={Position.Left}
           id={dataIns[index].name || `input-${index}`}
           style={{
-            background: '#555',
+            ...handleStyles.data,
-            top: `${40 + (index + 1) * 20}px`,
+            top: `${40 + (index + 1) * 20}px`
-            width: '6px',
-            height: '6px',
-            border: '1px solid #fff',
-            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
           }}
-          className="node-handle"
         />
       ))}
 
       {/* 输出参数连接端点 */}
       {dataOuts.map((_, index) => (
         <Handle
-          key={`output-handle-${index}`}
+          key={`data-output-handle-${index}`}
           type="source"
           position={Position.Right}
           id={dataOuts[index].name || `output-${index}`}
           style={{
-            background: '#555',
+            ...handleStyles.data,
-            top: `${40 + (index + 1) * 20}px`,
+            top: `${40 + (index + 1) * 20}px`
-            width: '6px',
-            height: '6px',
-            border: '1px solid #fff',
-            boxShadow: '0 0 2px rgba(0,0,0,0.2)'
           }}
-          className="node-handle"
         />
       ))}
     </>
@@ -206,7 +205,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
         {dataOuts.length > 0 && !isEndNode && (
           <div className={styles['node-outputs']}>
             {dataOuts.map((output, index) => (
-              <div key={`output-${index}`} style={{ fontSize: '12px', padding: '2px 0' }}>
+              <div key={`output-${index}`} className={styles['node-input-label']}>
                 {output.name || `输出${index + 1}`}
               </div>
             ))}