diff --git a/src/pages/flowEditor/components/nodeContextMenu.tsx b/src/pages/flowEditor/components/nodeContextMenu.tsx index a739018..3849e18 100644 --- a/src/pages/flowEditor/components/nodeContextMenu.tsx +++ b/src/pages/flowEditor/components/nodeContextMenu.tsx @@ -33,8 +33,18 @@ const NodeContextMenu: React.FC = ({ }; const handleEdit = () => { - onEdit && onEdit(node); - onCloseOpenModal(true); + // 判断节点类型,如果是SUB类型则打开新标签页 + if (node.type === 'SUB') { + // 创建自定义事件来通知打开新标签页 + const openTabEvent = new CustomEvent('openSubNodeTab', { + detail: { node } + }); + document.dispatchEvent(openTabEvent); + } + else { + onEdit && onEdit(node); + onCloseOpenModal(true); + } onCloseMenu(null); }; diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 4395fdb..8ecba14 100644 --- a/src/pages/ideContainer/index.tsx +++ b/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>(new Set()); const [subMenuData, setSubMenuData] = useState({}); - const { menuData } = useSelector((state) => state.ideContainer); + const { menuData, flowData, currentAppData } = useSelector((state) => state.ideContainer); const dispatch = useDispatch(); const navBarRef = useRef(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;