From 88f6b9f4ebfe09482724392905c685f224a13225 Mon Sep 17 00:00:00 2001 From: ZLY Date: Thu, 28 Aug 2025 16:10:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(flowEditor):=20=E6=96=B0=E5=A2=9E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=8A=82=E7=82=B9=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E7=B1=BB=E5=9E=8B=E6=B3=A8=E5=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 LocalNode 组件用于系统组件节点 - 在 flowEditor/index.tsx 中实现节点类型动态注册 - 更新 sideBar/config/localNodeData.ts，修正 JSON 封装节点类型 - 删除未使用的 handleNode 组件 - 优化 draggableNode 组件，移除冗余代码 --- src/pages/flowEditor/index.tsx | 8 +++--- .../node/draggableNode/DraggableNode.tsx | 3 +-- .../flowEditor/node/handleNode/handleNode.tsx | 14 ----------- src/pages/flowEditor/node/index.tsx | 1 + .../flowEditor/node/localNode/LocalNode.tsx | 25 +++++++++++++++++++ .../sideBar/config/localNodeData.ts | 2 +- 6 files changed, 33 insertions(+), 20 deletions(-) delete mode 100644 src/pages/flowEditor/node/handleNode/handleNode.tsx create mode 100644 src/pages/flowEditor/node/localNode/LocalNode.tsx diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx index 933d17a..c3d0af3 100644 --- a/src/pages/flowEditor/index.tsx +++ b/src/pages/flowEditor/index.tsx @@ -14,10 +14,11 @@ import { SelectionMode } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; -import { nodeTypes } from './node'; +import { nodeTypeMap, nodeTypes, registerNodeType } from './node'; import SideBar from './sideBar/sideBar'; import { convertFlowData } from '@/utils/convertFlowData'; import { exampleFlowData } from '@/pages/flowEditor/test/exampleFlowData'; +import LocalNode from '@/pages/flowEditor/node/localNode/LocalNode'; import CustomEdge from './components/customEdge'; const edgeTypes: EdgeTypes = { @@ -84,10 +85,11 @@ const FlowEditor: React.FC = () => { data: { ...nodeData.data, title: nodeData.nodeName, type: nodeData.nodeType } }; - console.log('newNode:', newNode); + // 将未定义的节点动态追加进nodeTypes + const nodeMap = Array.from(Object.values(nodeTypeMap).map(key => key)); + if (!nodeMap.includes(nodeData.nodeType)) registerNodeType(nodeData.nodeType, LocalNode, nodeData.nodeName); setNodes((nds) => nds.concat(newNode)); - console.log('nodes:', nodes); }, [reactFlowInstance] ); diff --git a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx index e680d8a..2e4c7d6 100644 --- a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx +++ b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { Handle, Position, useStore } from '@xyflow/react'; +import { useStore } from '@xyflow/react'; import styles from '@/pages/flowEditor/node/style/base.module.less'; import NodeContent from '@/pages/flowEditor/components/nodeContent'; const DraggableNode = ({ data, id }: { data: any; id: string }) => { - console.log(data, id ); const title = data.title || '任务节点'; // 获取节点选中状态 - 适配React Flow v12 API diff --git a/src/pages/flowEditor/node/handleNode/handleNode.tsx b/src/pages/flowEditor/node/handleNode/handleNode.tsx deleted file mode 100644 index 99dd2c2..0000000 --- a/src/pages/flowEditor/node/handleNode/handleNode.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Handle, Position } from '@xyflow/react'; - -const CustomNode = ({ data }) => { - return ( - <> -
- {data.label} -
- - ); -}; - -export default CustomNode; \ No newline at end of file diff --git a/src/pages/flowEditor/node/index.tsx b/src/pages/flowEditor/node/index.tsx index 6cce302..7a0a15a 100644 --- a/src/pages/flowEditor/node/index.tsx +++ b/src/pages/flowEditor/node/index.tsx @@ -4,6 +4,7 @@ import StartNode from './startNode/StartNode'; import EndNode from './endNode/EndNode'; import DraggableNode from './draggableNode/DraggableNode'; import BasicNode from './basicNode/BasicNode'; +import LocalNode from './localNode/LocalNode'; // 定义所有可用的节点类型 export const nodeTypes: NodeTypes = { diff --git a/src/pages/flowEditor/node/localNode/LocalNode.tsx b/src/pages/flowEditor/node/localNode/LocalNode.tsx new file mode 100644 index 0000000..291527f --- /dev/null +++ b/src/pages/flowEditor/node/localNode/LocalNode.tsx @@ -0,0 +1,25 @@ +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'; + +const LocalNode = ({ data, id }: { data: any; id: string }) => { + const title = data.title || '系统组件'; + + // 获取节点选中状态 - 适配React Flow v12 API + const isSelected = useStore((state) => + state.nodeLookup.get(id)?.selected || false + ); + + return ( +
+
+ {title} +
+ + +
+ ); +}; + +export default LocalNode; \ No newline at end of file diff --git a/src/pages/flowEditor/sideBar/config/localNodeData.ts b/src/pages/flowEditor/sideBar/config/localNodeData.ts index 33f91a7..431c1f6 100644 --- a/src/pages/flowEditor/sideBar/config/localNodeData.ts +++ b/src/pages/flowEditor/sideBar/config/localNodeData.ts @@ -27,7 +27,7 @@ const nodeDefinitions = [ { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common' }, { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common' }, { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common' }, - { nodeName: 'JSON封装', nodeType: 'JSON_CONVERT', nodeGroup: 'common' }, + { nodeName: 'JSON封装', nodeType: 'JSONCONVERT', nodeGroup: 'common' }, { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common' }, { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common' }, { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common' },