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 ( + <> + + + {/* 为特殊节点的参数也添加句柄 */} + {isStartNode && outputs.map((_, index) => ( + + ))} + + {isEndNode && inputs.map((_, index) => ( + + ))} + + ); +}; + +// 渲染普通节点的句柄 +const renderRegularNodeHandles = (inputs: any[], outputs: any[]) => { + return ( + <> + + + + {/* 输入参数连接端点 */} + {inputs.map((_, index) => ( + + ))} + + {/* 输出参数连接端点 */} + {outputs.map((_, index) => ( + + ))} + + ); +}; + const NodeContent = ({ data }: { data: NodeContentData }) => { const inputs = data.parameters?.inputs || []; const outputs = data.parameters?.outputs || []; @@ -55,78 +154,10 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { )} - {/* 流程传输(开始/结束)只在一侧显示端点 */} - {isSpecialNode ? ( - <> - - - {/* 为流程传输的参数也添加句柄 */} - {isStartNode && outputs.map((_, index) => ( - - ))} - - {isEndNode && inputs.map((_, index) => ( - - ))} - - ) : ( - /* 普通节点可以在两侧显示多个端点 */ - <> - {/* 输入参数连接端点 */} - {inputs.map((_, index) => ( - - ))} - - {/* 输出参数连接端点 */} - {outputs.map((_, index) => ( - - ))} - - )} + {/* 根据节点类型渲染不同的句柄 */} + {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': {},