feat(flow):优化复合组件ID处理逻辑

src/hooks/useFlowCallbacks.ts

@@ -39,10 +39,10 @@ import { appFLowHandle } from '@/pages/flowEditor/utils/appFlowhandle';
 import { handelEventNodeList, updateEvent, upDatePublish } from '@/pages/flowEditor/utils/common';
 
 import { Dispatch } from 'redux';
-import { runMainFlow, stopApp } from '@/api/apps';
+import { getAppListBySceneId, runMainFlow, stopApp } from '@/api/apps';
 import store from '@/store';
 import { updateAppEvent, updateAppEventChannel, updateAppFlowData } from '@/api/appEvent';
-import { sleep } from '@/utils/common';
+import { getUrlParams, sleep } from '@/utils/common';
 import { queryEventItemBySceneIdOld, deleteEventSub, deleteEventPub } from '@/api/event';
 
 export const useFlowCallbacks = (
@@ -912,26 +912,10 @@ export const useFlowCallbacks = (
       };
     }
     else if (nodeType === 'SUB') {
-      const flowSubMap = flowData[currentAppData.id]?.subMap || {};
-      const sameData: any = flowSubMap[newNode.data.compId];
-      if (sameData) {
-        newNode.data.component = {
-          type: nodeType,
-          compId: newNode.data.compId,
-          customDef: JSON.stringify({
-            dataIns: newNode.data.parameters.dataIns,
-            dataOuts: newNode.data.parameters.dataOuts,
-            subflowId: sameData,
-            name: newNode.data.title
-          })
-        };
-      }
-      else {
-        newNode.data.component = {
-          type: nodeType,
-          compId: newNode.data.compId
-        };
-      }
+      newNode.data.component = {
+        type: nodeType,
+        compId: newNode.data.compId
+      };
     }
     else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') {
       const { eventList } = store.getState().ideContainer;
@@ -1067,26 +1051,10 @@ export const useFlowCallbacks = (
       };
     }
     else if (nodeType === 'SUB') {
-      const flowSubMap = flowData[currentAppData.id]?.subMap || {};
-      const sameData: any = flowSubMap[newNode.data.compId];
-      if (sameData) {
-        newNode.data.component = {
-          type: nodeType,
-          compId: newNode.data.compId,
-          customDef: JSON.stringify({
-            dataIns: newNode.data.parameters.dataIns,
-            dataOuts: newNode.data.parameters.dataOuts,
-            subflowId: sameData,
-            name: newNode.data.title
-          })
-        };
-      }
-      else {
-        newNode.data.component = {
-          type: nodeType,
-          compId: newNode.data.compId
-        };
-      }
+      newNode.data.component = {
+        type: nodeType,
+        compId: newNode.data.compId
+      };
     }
     else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') {
       const { eventList } = store.getState().ideContainer;
@@ -1181,22 +1149,15 @@ export const useFlowCallbacks = (
             const res1: any = await queryEventItemBySceneIdOld(info.id);
             if (res1.code === 200) dispatch(updateEventListOld(res1.data));
 
-            // 更新缓存数据 - 与主流程保持一致
-            dispatch(updateCanvasDataMap({
-              ...canvasDataMap,
-              [currentAppData.id]: { nodes, edges }
-            }));
-            const appRes: any = await getAppInfoNew(currentAppData.id);
+            const appRes: any = await getAppInfoNew(currentAppData.parentAppId);
             // 更新 flowData 中的数据
-            dispatch(updateFlowData({ [currentAppData.id]: appRes.data }));
+            dispatch(updateFlowData({ [currentAppData.parentAppId]: appRes.data }));
             // 同步更新到 canvasDataMap
             if (appRes.data.main?.components) {
               const { nodes, edges } = convertFlowData(appRes.data.main.components, true);
-              setNodes(nodes);
-              setEdges(edges);
               dispatch(updateCanvasDataMap({
                 ...canvasDataMap,
-                [currentAppData.id]: { nodes, edges }
+                [currentAppData.parentAppId]: { nodes, edges }
               }));
             }
           }
@@ -1213,6 +1174,7 @@ export const useFlowCallbacks = (
             appEventDefinition,
             sceneId: info.id
           };
+
           const res: any = await setMainFlowNew(params, initialData.appId);
           if (res.code === 200) {
             Message.success('保存成功');
@@ -1328,6 +1290,7 @@ export const useFlowCallbacks = (
       }
     }
   }, [nodes, edges, initialData?.appId]);
+
   // 运行处理函数
   const handleRun = useCallback(async (running: boolean) => {
     const { currentAppData, socketId, appRuntimeData } = store.getState().ideContainer;

src/pages/flowEditor/utils/common.ts

@@ -244,8 +244,10 @@ export const upDatePublish = async (revertedData) => {
     publishAppId: []
   };
   revertedData.forEach(item => {
-    if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id
+    // 复合组件的这个compId实际上就是flowHousVO里面的id
+    if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(`${item.component.compId}/${item.nodeId}`);
   });
+
   if (params.publishAppId.length > 0) {
     const res: any = await refPublish(params);
     if (res.code === 200) return res.data;

src/pages/ideContainer/index.tsx

@@ -120,13 +120,14 @@ function IDEContainer() {
 
   // 监听自定义事件，处理打开子节点标签页的逻辑
   useEffect(() => {
-    const handleOpenSubNodeTab = (event: CustomEvent) => {
+    const handleOpenSubNodeTab = async (event: CustomEvent) => {
       const { node } = event.detail;
       const subCompList = flowData[currentAppData.id].subs;
       const customDef = isJSON(node.data.component.customDef) ? JSON.parse(node.data.component.customDef) : {};
       const currentSubComp = subCompList.find((item) => item.flowId === customDef.subflowId);
       // 根据节点信息创建新的标签页
       if (currentSubComp && Object.keys(currentSubComp).length > 0) {
+        await getAppList();
         const newNodeKey = currentSubComp.flowId;
 
         // 查找菜单项

src/utils/convertFlowData.ts

@@ -516,7 +516,7 @@ export const revertFlowData = (nodes: any[], edges: any[]) => {
  * 将 React Flow 的 nodes 和 edges 数据结构反向转换为 convertFlowData 可以处理的格式
  * @param nodes - React Flow 节点数组
  * @param edges - React Flow 边数组
- * @param complexKV - 复合组件使用的组件id对照表 {数字ID：sub_ID}
+ * @param complexKV - 复合组件使用的组件id对照表 {数字ID/nodeId：sub_ID}
  * @returns 可用于 convertFlowData 的数据结构
  */
 export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: any) => {
@@ -537,13 +537,28 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: an
 
       // 处理 component 信息
       if (node.type === 'SUB' && !node.data.component.customDef) {
+        let subflowId = '';
+        if (complexKV && node.data.compId) {
+          // 遍历complexKV找到匹配的条目，使用节点ID进行匹配
+          for (const key in complexKV) {
+            if (key.includes('/')) {
+              const [numericId, nodeId] = key.split('/');
+              // 使用节点ID进行匹配
+              if (nodeId === node.id) {
+                subflowId = complexKV[key];
+                break;
+              }
+            }
+          }
+        }
+
         nodeConfig.component = {
           type: 'SUB',
           compId: node.data.compId,
           customDef: JSON.stringify({
             dataIns: node.data.parameters.dataIns,
             dataOuts: node.data.parameters.dataOuts,
-            subflowId: complexKV[node.data.compId],
+            subflowId: subflowId,
             name: node.data.title
           })
         };
@@ -552,7 +567,9 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: an
         nodeConfig.component = { ...node.data.component };
       }
       else {
-        nodeConfig.component = null;
+        nodeConfig.component = {
+          type: node.type
+        };
       }
 
       // 处理参数信息