feat(ideContainer): 实现子节点标签页打开功能

src/pages/flowEditor/components/nodeContextMenu.tsx

@@ -33,8 +33,18 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
   };
 
   const handleEdit = () => {
+    // 判断节点类型，如果是SUB类型则打开新标签页
+    if (node.type === 'SUB') {
+      // 创建自定义事件来通知打开新标签页
+      const openTabEvent = new CustomEvent('openSubNodeTab', {
+        detail: { node }
+      });
+      document.dispatchEvent(openTabEvent);
+    }
+    else {
       onEdit && onEdit(node);
       onCloseOpenModal(true);
+    }
     onCloseMenu(null);
   };
 

src/pages/ideContainer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { getUrlParams } from '@/utils/common';
+import { getUrlParams, isJSON } from '@/utils/common';
 import styles from './style/index.module.less';
 import SideBar from './sideBar';
 import LogBar from './logBar';
@@ -59,7 +59,7 @@ function IDEContainer() {
   // 用于跟踪已打开的tab，保持组件状态
   const [openedTabs, setOpenedTabs] = useState<Set<string>>(new Set());
   const [subMenuData, setSubMenuData] = useState<any>({});
-  const { menuData } = useSelector((state) => state.ideContainer);
+  const { menuData, flowData, currentAppData } = useSelector((state) => state.ideContainer);
   const dispatch = useDispatch();
   const navBarRef = useRef<NavBarRef>(null);
 
@@ -105,6 +105,78 @@ function IDEContainer() {
     }
   });
 
+  // 监听自定义事件，处理打开子节点标签页的逻辑
+  useEffect(() => {
+    const handleOpenSubNodeTab = (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) {
+        const component = node.data.component;
+        const newNodeKey = currentSubComp.flowId;
+
+        // 查找菜单项
+        const findMenuItem = (menuItems: any[]): any => {
+          for (const item of menuItems) {
+            if (item.key === newNodeKey) {
+              return item;
+            }
+            if (item.children) {
+              const found = findMenuItem(item.children);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+
+        const menuItems = menuData[urlParams.identity];
+        const menuItem = findMenuItem(menuItems);
+
+        if (menuItem) {
+          // 更新当前应用数据
+          dispatch(updateCurrentAppData({ ...menuItem }));
+
+          // 设置选中项，触发tab创建
+          setSelected({
+            ...menuItem,
+            key: menuItem.key,
+            parentKey: menuItem.parentKey
+          });
+        }
+        else {
+          // 如果在菜单中找不到对应项，创建一个临时的菜单项
+          const tempMenuItem = {
+            key: newNodeKey,
+            title: currentSubComp.flowName,
+            pathTitle: `${currentAppData.name} / ${currentSubComp.flowName}`,
+            path: 'complexFlow',
+            parentKey: 'appList',
+            compData: currentSubComp,
+            children: null
+          };
+
+          dispatch(updateCurrentAppData({ ...tempMenuItem }));
+
+          setSelected({
+            ...tempMenuItem,
+            key: tempMenuItem.key,
+            parentKey: tempMenuItem.parentKey
+          });
+        }
+      }
+    };
+
+    // 添加事件监听器
+    document.addEventListener('openSubNodeTab', handleOpenSubNodeTab as EventListener);
+
+    // 清理事件监听器
+    return () => {
+      document.removeEventListener('openSubNodeTab', handleOpenSubNodeTab as EventListener);
+    };
+  }, [menuData, urlParams.identity, dispatch]);
+
   const connectWS = async () => {
     const res = await getUserToken();
     const token = res.data;