From f084c93b394bb9b0c61bb4f76cdc413d39950f54 Mon Sep 17 00:00:00 2001 From: ZLY Date: Wed, 27 Aug 2025 14:42:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor(flowEditor):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91=E5=B9=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构了 DraggableNode 组件，使用新设计的 NodeContent组件来渲染节点内容 -优化了节点类型判断和处理逻辑，支持开始和结束节点的特殊处理 - 改进了节点参数的渲染方式，根据节点类型动态显示输入和输出端点 - 新增 convertFlowData 工具函数，用于将原始数据结构转换为 flow editor 可用的节点和边数据 --- .../flowEditor/components/nodeContent.tsx | 118 ++++++++++++------ .../node/draggableNode/DraggableNode.tsx | 29 ++--- src/pages/flowEditor/utils/convertFlowData.ts | 81 ++++++++++++ src/utils/convertFlowData.ts | 2 +- 4 files changed, 169 insertions(+), 61 deletions(-) create mode 100644 src/pages/flowEditor/utils/convertFlowData.ts diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx index f0fc7f9..6030255 100644 --- a/src/pages/flowEditor/components/nodeContent.tsx +++ b/src/pages/flowEditor/components/nodeContent.tsx @@ -2,7 +2,6 @@ import React from 'react'; import styles from '@/pages/flowEditor/node/style/base.module.less'; import { Handle, Position } from '@xyflow/react'; - interface NodeContentData { parameters?: { inputs?: any[]; @@ -18,11 +17,17 @@ 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栏*/}
- {inputs.length > 0 && ( + {inputs.length > 0 && !isStartNode && (
{inputs.map((input, index) => (
@@ -32,7 +37,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
)} - {outputs.length > 0 && ( + {outputs.length > 0 && !isEndNode && (
{outputs.map((output, index) => (
@@ -50,45 +55,78 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
)} - {/* 默认连接端点*/} - + {/* 流程传输（开始/结束）只在一侧显示端点 */} + {isSpecialNode ? ( + <> + - {/*输入参数连接端点*/} - {inputs.map((_, index) => ( - - ))} + {/* 为流程传输的参数也添加句柄 */} + {isStartNode && outputs.map((_, index) => ( + + ))} - {/*输出参数连接端点*/} - {outputs.map((_, index) => ( - - ))} + {isEndNode && inputs.map((_, index) => ( + + ))} + + ) : ( + /* 普通节点可以在两侧显示多个端点 */ + <> + {/* 输入参数连接端点 */} + {inputs.map((_, index) => ( + + ))} + + {/* 输出参数连接端点 */} + {outputs.map((_, index) => ( + + ))} + + )} ); }; diff --git a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx index d1a2a8e..09c9ae7 100644 --- a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx +++ b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx @@ -1,28 +1,17 @@ import React from 'react'; import { Handle, Position } from '@xyflow/react'; +import styles from '@/pages/flowEditor/node/style/base.module.less'; +import NodeContent from '@/pages/flowEditor/components/nodeContent'; const DraggableNode = ({ data }: { data: any }) => { + const title = data.title || '任务节点'; return ( -
-
{data.label || '任务节点'}
- - +
+
+ {title} +
+ +
); }; diff --git a/src/pages/flowEditor/utils/convertFlowData.ts b/src/pages/flowEditor/utils/convertFlowData.ts new file mode 100644 index 0000000..7501f4b --- /dev/null +++ b/src/pages/flowEditor/utils/convertFlowData.ts @@ -0,0 +1,81 @@ +/** + * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges + * @param flowData - 原始数据结构 + * @returns 包含 nodes 和 edges 的对象 + */ +export const convertFlowData = (flowData: any) => { + const nodes: any[] = []; + const edges: any[] = []; + + // 处理节点配置 + const nodeConfigs = flowData.main?.nodeConfigs || []; + for (const nodeConfig of nodeConfigs) { + // 确定节点类型 + let nodeType = 'draggable'; + if (nodeConfig.nodeId === 'start') { + nodeType = 'start'; + } else if (nodeConfig.nodeId === 'end') { + nodeType = 'end'; + } + + // 解析位置信息 + let position = { x: 0, y: 0 }; + try { + const x6Data = JSON.parse(nodeConfig.x6); + position = x6Data.position || { x: 0, y: 0 }; + } catch (e) { + console.warn('Failed to parse position for node:', nodeConfig.nodeId); + } + + // 构造节点数据 + const node: any = { + id: nodeConfig.nodeId, + type: nodeType, + position, + data: { + title: nodeConfig.nodeName || nodeConfig.nodeId, + type: nodeType, // 添加节点类型到data中，供NodeContent使用 + parameters: { + inputs: nodeConfig.dataIns?.map((input: any) => ({ + name: input.id, + desc: input.desc, + dataType: input.dataType, + defaultValue: input.defaultValue + })) || [], + outputs: nodeConfig.dataOuts?.map((output: any) => ({ + name: output.id, + desc: output.desc, + dataType: output.dataType, + defaultValue: output.defaultValue + })) || [] + } + } + }; + + // 如果是机械臂节点，添加组件标识信息 + if (nodeConfig.component) { + node.data.component = { + compIdentifier: nodeConfig.component.compIdentifier, + compInstanceIdentifier: nodeConfig.component.compInstanceIdentifier + }; + } + + nodes.push(node); + } + + // 处理连线配置 + const lineConfigs = flowData.main?.lineConfigs || []; + for (const lineConfig of lineConfigs) { + const edge: any = { + id: lineConfig.id, + source: lineConfig.prev.nodeId, + target: lineConfig.next.nodeId, + sourceHandle: lineConfig.prev.endpointId, + targetHandle: lineConfig.next.endpointId + }; + + edges.push(edge); + } + + return { nodes, edges }; +}; \ No newline at end of file diff --git a/src/utils/convertFlowData.ts b/src/utils/convertFlowData.ts index 821a766..7c3d69d 100644 --- a/src/utils/convertFlowData.ts +++ b/src/utils/convertFlowData.ts @@ -52,7 +52,7 @@ export const convertFlowData = (flowData: any) => { defaultValue: output.defaultValue })) || [] }, - type: nodeType, + type: nodeType } };