From 3510a2d01172d7fd8394dc277e0aec114d8084ec Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 29 Aug 2025 14:55:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E4=B8=BA=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -为不同类型的节点添加相应的图标- 实现节点图标自动设置功能 - 更新节点数据配置，增加 REST 调用节点 - 优化流程编辑器界面和功能 --- .../flowEditor/components/nodeWrapper.tsx | 0 src/pages/flowEditor/index.tsx | 1 + .../flowEditor/node/localNode/LocalNode.tsx | 56 +++++++- .../sideBar/config/localNodeData.ts | 2 +- src/pages/flowEditor/test/exampleFlowData.ts | 134 +++++++++--------- 5 files changed, 124 insertions(+), 69 deletions(-) delete mode 100644 src/pages/flowEditor/components/nodeWrapper.tsx diff --git a/src/pages/flowEditor/components/nodeWrapper.tsx b/src/pages/flowEditor/components/nodeWrapper.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx index c3d0af3..514de2d 100644 --- a/src/pages/flowEditor/index.tsx +++ b/src/pages/flowEditor/index.tsx @@ -66,6 +66,7 @@ const FlowEditor: React.FC = () => { event.preventDefault(); if (!reactFlowInstance) return; + console.log("1"); const callBack = event.dataTransfer.getData('application/reactflow'); const nodeData = JSON.parse(callBack); diff --git a/src/pages/flowEditor/node/localNode/LocalNode.tsx b/src/pages/flowEditor/node/localNode/LocalNode.tsx index 291527f..41383fe 100644 --- a/src/pages/flowEditor/node/localNode/LocalNode.tsx +++ b/src/pages/flowEditor/node/localNode/LocalNode.tsx @@ -2,6 +2,60 @@ import React from 'react'; import { useStore } from '@xyflow/react'; import styles from '@/pages/flowEditor/node/style/base.module.less'; import NodeContent from '@/pages/flowEditor/components/nodeContent'; +import DynamicIcon from '@/components/DynamicIcon'; + + +const setIcon = (nodeType: string) => { + let type = 'IconApps'; + switch (nodeType) { + case 'CONDITION': + type = 'IconBranch'; + break; + case 'AND': + type = 'IconShareAlt'; + break; + case 'OR': + type = 'IconPause'; + break; + case 'WAIT': + type = 'IconClockCircle'; + break; + case 'LOOP': + type = 'IconSync'; + break; + case 'CYCLE': + type = 'IconSchedule'; + break; + case 'EVENTLISTENE': + type = 'IconImport'; + break; + case 'EVENTSEND': + type = 'IconExport'; + break; + case 'JSON2STR': + type = 'IconCodeBlock'; + break; + case 'STR2JSON': + type = 'IconCodeSquare'; + break; + case 'JSONCONVERT': + type = 'IconTranslate'; + break; + case 'RESULT': + type = 'IconInteraction'; + break; + case 'IMAGE': + type = 'IconImage'; + break; + case 'CODE': + type = 'IconCode'; + break; + case 'REST': + type = 'IconCloudDownload'; + break; + } + return ; +}; const LocalNode = ({ data, id }: { data: any; id: string }) => { const title = data.title || '系统组件'; @@ -14,9 +68,9 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => { return (
+ {setIcon(data.type)} {title}
-
); diff --git a/src/pages/flowEditor/sideBar/config/localNodeData.ts b/src/pages/flowEditor/sideBar/config/localNodeData.ts index 9df864d..ed62eb6 100644 --- a/src/pages/flowEditor/sideBar/config/localNodeData.ts +++ b/src/pages/flowEditor/sideBar/config/localNodeData.ts @@ -31,7 +31,7 @@ const nodeDefinitions = [ { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' }, { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' }, { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' }, - { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' } + { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' }, ]; // 通过映射生成完整的节点数据数组 diff --git a/src/pages/flowEditor/test/exampleFlowData.ts b/src/pages/flowEditor/test/exampleFlowData.ts index 6f5d290..f482220 100644 --- a/src/pages/flowEditor/test/exampleFlowData.ts +++ b/src/pages/flowEditor/test/exampleFlowData.ts @@ -2,32 +2,32 @@ export const exampleFlowData = { 'main': { 'id': 'main', 'lineConfigs': [ - // { - // 'id': '606f71c3-2051-4775-92a0-835d75b9ab91', - // 'lineType': 'API', - // 'next': { - // 'endpointId': 'start', - // 'nodeId': 'node_49' - // }, - // 'prev': { - // 'endpointId': 'start', - // 'nodeId': 'start' - // }, - // 'x6': '{"vertices":[]}' - // }, - // { - // 'id': '480b362e-45c6-4d9f-b55c-532703ff64ec', - // 'lineType': 'API', - // 'next': { - // 'endpointId': 'end', - // 'nodeId': 'end' - // }, - // 'prev': { - // 'endpointId': 'done', - // 'nodeId': 'node_49' - // }, - // 'x6': '{"vertices":[]}' - // } + { + 'id': '606f71c3-2051-4775-92a0-835d75b9ab91', + 'lineType': 'API', + 'next': { + 'endpointId': 'start', + 'nodeId': 'node_49' + }, + 'prev': { + 'endpointId': 'start', + 'nodeId': 'start' + }, + 'x6': '{"vertices":[]}' + }, + { + 'id': '480b362e-45c6-4d9f-b55c-532703ff64ec', + 'lineType': 'API', + 'next': { + 'endpointId': 'end', + 'nodeId': 'end' + }, + 'prev': { + 'endpointId': 'done', + 'nodeId': 'node_49' + }, + 'x6': '{"vertices":[]}' + } ], 'name': '', 'nodeConfigs': [ @@ -44,47 +44,47 @@ export const exampleFlowData = { 'nodeName': '', 'x6': '{"position":{"x":-250,"y":0}}' }, - // { - // 'apiId': '', - // 'component': { - // 'compIdentifier': 'admin_connect_test', - // 'compInstanceIdentifier': 'admin_connect_test', - // 'customDef': '', - // 'type': 'BASIC' - // }, - // 'dataIns': [ - // { - // 'arrayType': null, - // 'dataType': null, - // 'defaultValue': null, - // 'desc': '', - // 'id': 'input' - // } - // ], - // 'dataOfPrevNodeMap': {}, - // 'dataOuts': [ - // { - // 'arrayType': null, - // 'dataType': null, - // 'defaultValue': null, - // 'desc': '', - // 'id': 'output' - // }, - // { - // 'arrayType': null, - // 'dataType': 'STRING', - // 'defaultValue': null, - // 'desc': '返回数据', - // 'id': 'returnData' - // } - // ], - // 'defaultValues': [], - // 'description': '', - // 'joinLines': {}, - // 'nodeId': 'node_49', - // 'nodeName': '连接test', - // 'x6': '{"position":{"x":-90,"y":-60}}' - // }, + { + 'apiId': '', + 'component': { + 'compIdentifier': 'admin_connect_test', + 'compInstanceIdentifier': 'admin_connect_test', + 'customDef': '', + 'type': 'BASIC' + }, + 'dataIns': [ + { + 'arrayType': null, + 'dataType': null, + 'defaultValue': null, + 'desc': '', + 'id': 'input' + } + ], + 'dataOfPrevNodeMap': {}, + 'dataOuts': [ + { + 'arrayType': null, + 'dataType': null, + 'defaultValue': null, + 'desc': '', + 'id': 'output' + }, + { + 'arrayType': null, + 'dataType': 'STRING', + 'defaultValue': null, + 'desc': '返回数据', + 'id': 'returnData' + } + ], + 'defaultValues': [], + 'description': '', + 'joinLines': {}, + 'nodeId': 'node_49', + 'nodeName': '连接test', + 'x6': '{"position":{"x":-90,"y":-60}}' + }, { 'apiId': '', 'component': null,