feat(flow): 添加自定义节点类型支持并同步画布数据

src/hooks/useFlowCallbacks.ts

@@ -873,6 +873,12 @@ export const useFlowCallbacks = (
         customDef: { eventId: emptyEvent.id, name: emptyEvent.name, topic: emptyEvent.topic }
       };
     }
+    else if (nodeType === 'BASIC') {
+      newNode.data.component = {
+        type: nodeType,
+        compId: nodeDefinition.id
+      };
+    }
 
     // 将未定义的节点动态追加进nodeTypes
     const nodeMap = Array.from(Object.values(nodeTypeMap).map(key => key));
@@ -1008,6 +1014,12 @@ export const useFlowCallbacks = (
         customDef: { eventId: emptyEvent?.eventId ?? null, name: emptyEvent.name, topic: emptyEvent.topic }
       };
     }
+    else if (nodeType === 'BASIC') {
+      newNode.data.component = {
+        type: nodeType,
+        compId: nodeDefinition.id
+      };
+    }
     // 将未定义的节点动态追加进nodeTypes
     const nodeMap = Array.from(Object.values(nodeTypeMap).map(key => key));
     // 目前默认添加的都是系统组件/本地组件

src/pages/ideContainer/sideBar.tsx

@@ -17,12 +17,19 @@ import { menuData1, menuData2 } from './config/menuData';
 import { IconSearch, IconPlus } from '@arco-design/web-react/icon';
 import { Selected } from '@/pages/ideContainer/types';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateMenuData, updateFlowData, updateCurrentAppData, updateEventListOld } from '@/store/ideContainer';
+import {
+  updateMenuData,
+  updateFlowData,
+  updateCanvasDataMap,
+  updateCurrentAppData,
+  updateEventListOld
+} from '@/store/ideContainer';
 import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps';
 import _ from 'lodash';
 import { getAppInfoNew } from '@/api/appRes';
 import { getAppEventData } from '@/api/appEvent';
 import { queryEventItemBySceneIdOld } from '@/api/event';
+import { convertFlowData } from '@/utils/convertFlowData';
 
 const TreeNode = Tree.Node;
 const FormItem = Form.Item;
@@ -192,7 +199,7 @@ const SideBar: React.FC<SideBarProps> = ({
   }); // 添加右键菜单状态
   const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
   const contextMenuRef = useRef<HTMLDivElement>(null); // 右键菜单引用
-  const { menuData, info } = useSelector(state => state.ideContainer);
+  const { menuData, info, canvasDataMap } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
   function getMenuData(): MenuItemType[] {
@@ -424,6 +431,15 @@ const SideBar: React.FC<SideBarProps> = ({
       // 更新 currentAppData 中的数据
       dispatch(updateCurrentAppData({ ...findMenuItem(menuData[identity], children.key) }));
 
+      // 同步更新到 canvasDataMap
+      if (res.data.main?.components) {
+        const { nodes, edges } = convertFlowData(res.data.main.components, true);
+        dispatch(updateCanvasDataMap({
+          ...canvasDataMap,
+          [data.id]: { nodes, edges }
+        }));
+      }
+
       // 同时更新本地 menu 状态以触发重新渲染
       setMenu(prevMenu => {
         const newMenu = [...prevMenu];

src/utils/convertFlowData.ts

@@ -290,7 +290,8 @@ export const convertFlowData = (flowData: any, useDefault = true) => {
         source: source,
         target: target,
         sourceHandle: finalSourceHandle,
-        targetHandle: finalTargetHandle
+        targetHandle: finalTargetHandle,
+        type: 'custom'
       });
     }
   }
@@ -325,7 +326,8 @@ export const convertFlowData = (flowData: any, useDefault = true) => {
                 source: sourceNodeId,
                 target: targetNodeId,
                 sourceHandle: sourceHandle,
-                targetHandle: targetHandle
+                targetHandle: targetHandle,
+                type: 'custom'
               });
             }
           }
@@ -490,6 +492,7 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: an
         position: node.position || { x: 0, y: 0 }
       };
 
+      console.log('node:', node);
       // 处理 component 信息
       if (node.type === 'SUB' && !node.customDef) {
         nodeConfig.component = {