feat(flow): 增加对复合组件的数据外壳处理逻辑

src/hooks/useFlowCallbacks.ts

@@ -617,6 +617,7 @@ export const useFlowCallbacks = (
   }, [nodes, edges]);
   // 在边上添加节点的具体实现
   const addNodeOnEdge = useCallback((nodeType: string, node: any) => {
+    const { currentAppData, flowData } = store.getState().ideContainer;
     if (!edgeForNodeAdd || !reactFlowInstance) return;
 
     // 查找节点定义
@@ -801,6 +802,22 @@ export const useFlowCallbacks = (
         })
       };
     }
+    else if (nodeType === 'SUB') {
+      const flowMainData = flowData[currentAppData.id]?.main?.components;
+      const sameData: any = Object.values(flowMainData).filter((item: any) => {
+        if (item?.component?.compId === newNode.data.compId) return item;
+      });
+      if (sameData.length) {
+        newNode.data.component = {
+          ...sameData[0].component
+        };
+      }
+      else {
+        newNode.data.component = {
+          type: nodeType
+        };
+      }
+    }
     else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') {
       const { eventList } = store.getState().ideContainer;
       const emptyEvent = eventList.find(item => item.topic.includes('**empty**'));
@@ -885,6 +902,7 @@ export const useFlowCallbacks = (
   }, [edgeForNodeAdd, nodes, reactFlowInstance, edges, addLoopNodeWithStartEnd]);
   // 在画布上添加节点
   const addNodeOnPane = useCallback((nodeType: string, position: { x: number; y: number }, node?: any) => {
+    const { currentAppData, flowData } = store.getState().ideContainer;
     if (!reactFlowInstance) return;
 
     // 查找节点定义
@@ -919,6 +937,22 @@ export const useFlowCallbacks = (
         })
       };
     }
+    else if (nodeType === 'SUB') {
+      const flowMainData = flowData[currentAppData.id]?.main?.components;
+      const sameData: any = Object.values(flowMainData).filter((item: any) => {
+        if (item?.component?.compId === newNode.data.compId) return item;
+      });
+      if (sameData.length) {
+        newNode.data.component = {
+          ...sameData[0].component
+        };
+      }
+      else {
+        newNode.data.component = {
+          type: nodeType
+        };
+      }
+    }
     else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') {
       const { eventList } = store.getState().ideContainer;
       const emptyEvent = eventList.find(item => item.topic.includes('**empty**'));
@@ -1023,16 +1057,21 @@ export const useFlowCallbacks = (
       updateAppEvent(initialData.appId, params);
     }
   };
-  const upDatePublish = (revertedData) => {
+  const upDatePublish = async (revertedData) => {
     const { currentAppData } = store.getState().ideContainer;
     const params = {
       appId: currentAppData.id,
       publishAppId: []
     };
     revertedData.forEach(item => {
-      if (item?.component && item.component.type === 'SUB') params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id
+      if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id
     });
-    if (params.publishAppId.length > 0) refPublish(params);
+    if (params.publishAppId.length > 0) {
+      const res: any = await refPublish(params);
+      if (res.code === 200) return res.data;
+      else return {};
+    }
+    else return {};
   };
   const saveFlowDataToServer = useCallback(async () => {
     if (useDefault) {
@@ -1050,19 +1089,18 @@ export const useFlowCallbacks = (
           showValidationErrors(edgeValidation.errors);
           return;
         }
-
         // 转换会原始数据类型
         const revertedData = revertFlowData(nodes, edges);
-        const newRevertedData = reverseConvertFlowData(nodes, edges);
+        const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs);
+        const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB);
         const { flowData, currentAppData } = store.getState().ideContainer;
-        // console.log('revertedData(中断):', revertedData);
+        // console.log('revertedData:', revertedData);
-        // console.log('newRevertedData(中断):', newRevertedData);
+        // console.log('newRevertedData:', newRevertedData);
         const params = {
           ...flowData[currentAppData.id]?.main || {},
           components: newRevertedData
         };
         // return;
-        upDatePublish(revertedData.nodeConfigs);
         updateEvent(revertedData.nodeConfigs);
         // 旧版数据结构
         // const res: any = await setMainFlow(revertedData, initialData.appId);

src/utils/convertFlowData.ts

@@ -471,9 +471,10 @@ 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}
  * @returns 可用于 convertFlowData 的数据结构
  */
-export const reverseConvertFlowData = (nodes: any[], edges: any[]) => {
+export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: any) => {
   // 初始化返回的数据结构
   const flowData: any = {};
 
@@ -490,7 +491,19 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[]) => {
       };
 
       // 处理 component 信息
-      if (node.data?.component) {
+      if (node.type === 'SUB' && !node.customDef) {
+        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],
+            name: node.data.title
+          })
+        };
+      }
+      else if (node.data?.component) {
         nodeConfig.component = { ...node.data.component };
       }
       else {