diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index a8a9194..168c13d 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -371,6 +371,9 @@ function IDEContainer() { key: menuItem.key, parentKey: menuItem.parentKey }); + + // 将选中的tab添加到已打开的tabs集合中 + setOpenedTabs(prev => new Set(prev).add(menuItem.key)); } } else { diff --git a/src/pages/ideContainer/navBar.tsx b/src/pages/ideContainer/navBar.tsx index 0461c2e..2f8c7ea 100644 --- a/src/pages/ideContainer/navBar.tsx +++ b/src/pages/ideContainer/navBar.tsx @@ -8,8 +8,8 @@ const TabPane = Tabs.TabPane; interface NavBarProps { selected?: Selected; menuData?: any[]; - onTabChange?: (path: string) => void; - onTabClose?: (path: string) => void; + onTabChange?: (key: string) => void; + onTabClose?: (key: string) => void; } // 添加ref类型定义 @@ -55,7 +55,7 @@ const NavBar: React.ForwardRefRenderFunction = ({ const title = selected.title; const pathTitle = selected?.pathTitle || null; // 检查tab是否已存在 - const existingTab = tabs.find(tab => tab.key === (key) && tab.title === title); + const existingTab = tabs.find(tab => tab.key === key); if (!existingTab) { // 创建新tab @@ -76,20 +76,31 @@ const NavBar: React.ForwardRefRenderFunction = ({ setActiveTab(key); } } + else if (!selected?.path && tabs.length > 0) { + // 如果没有选中的路径但有tabs存在,保持当前激活的tab + // 这样可以避免在切换tab时意外清除activeTab + } }, [selected, menuData]); const handleDeleteTab = (key: string) => { const newTabs = tabs.filter(tab => tab.key !== key); setTabs(newTabs); - // 如果删除的是当前激活的tab,激活第一个tab(如果存在) - if (key === activeTab && newTabs.length > 0) { - setActiveTab(newTabs[0].key); - onTabChange?.(newTabs[0].key); - } - else if (key === activeTab && newTabs.length === 0) { - setActiveTab(''); - onTabChange?.(''); + // 如果删除的是当前激活的tab,激活下一个tab(如果存在) + if (key === activeTab) { + if (newTabs.length > 0) { + // 尝试激活相邻的tab + const currentIndex = tabs.findIndex(tab => tab.key === key); + const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0; + const nextTab = newTabs[nextIndex]; + + setActiveTab(nextTab.key); + onTabChange?.(nextTab.key); + } else { + // 如果没有更多tabs,重置状态 + setActiveTab(''); + onTabChange?.(''); + } } // 通知父组件tab已关闭 @@ -143,4 +154,4 @@ const NavBar: React.ForwardRefRenderFunction = ({ ); }; -export default React.forwardRef(NavBar); +export default React.forwardRef(NavBar); \ No newline at end of file diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 4c988f0..f3938b3 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -242,6 +242,20 @@ const SideBar: React.FC = ({ } } + // 监听 subMenuData 和 identity 变化,更新菜单数据 + useEffect(() => { + if (identity === 'scene') { + if (Object.keys(subMenuData).length > 0) { + const newMenu = getMenuData(); + setMenu(newMenu); + } + } + else if (identity === 'componentDevelopment') { + const newMenu = getMenuData(); + setMenu(newMenu); + } + }, [subMenuData, identity]); + // 处理子菜单区域的拖拽调整大小 const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => { resizeBoxRef.current.style.width = `${width}px`; @@ -276,6 +290,59 @@ const SideBar: React.FC = ({ onMenuSelect?.({ ...item }); }; + // 监听 selected 状态变化,更新 activeKey + useEffect(() => { + if (menu.length > 0 && selected?.parentKey) { + // 查找匹配的菜单项索引 + const index = menu.findIndex(item => item.key === selected.parentKey); + if (index !== -1) { + setActiveKey(index); + } + } + }, [selected, menu]); + + // 监听 selected 状态变化,确保子菜单正确显示 + useEffect(() => { + if (selected?.key && menuData[identity]) { + // 确保子菜单区域根据selected状态正确展开或收起 + if (['appList', 'appFlow'].includes(selected.parentKey)) { + // 如果应该显示子菜单但当前是收起状态,则展开 + if (isSubMenuCollapsed) { + setIsSubMenuCollapsed(false); + resizeBoxRef.current.style.width = `300px`; + } + } + + // 强制更新filteredMenu以确保显示正确的子菜单 + setSearchValue(''); // 清空搜索值以显示所有项 + } + }, [selected, menuData, identity]); + + // 当菜单数据变化时更新本地状态 + useEffect(() => { + if (identity && menuData[identity]) { + setMenu(menuData[identity]); + } + }, [menuData, identity]); + + // 当 selected 变化时,检查是否需要更新子菜单数据 + useEffect(() => { + if (selected?.parentKey === 'appList' && selected?.id) { + // 检查当前菜单数据是否已加载 + const currentMenu = menuData[identity] || []; + const appParent = currentMenu.find(item => item.key === 'appList'); + if (appParent && appParent.children) { + const appItem = appParent.children.find((item: any) => item.id === selected.id); + if (appItem) { + // 如果应用项没有子菜单数据或者子菜单数据为空,则获取它 + if (!appItem.children || appItem.children.length === 0) { + getProjectEnvData(selected); + } + } + } + } + }, [selected, identity, menuData]); + // 根据搜索值过滤菜单数据 const filteredMenu = useMemo(() => { if (!searchValue || activeKey === undefined || !menu[activeKey]?.children) { @@ -384,6 +451,7 @@ const SideBar: React.FC = ({ // 渲染子菜单 const renderMenuItems = (menuItems?: MenuItemType[], parentKey = '0') => { + console.log('menuItems sidebar', menuItems); if (menuItems && menuItems.length) { return menuItems.map((item, index) => { const key = `${parentKey}-${index}`; @@ -629,6 +697,8 @@ const SideBar: React.FC = ({ }} style={{ background: 'transparent' }} // 移除背景色 renderExtra={selected?.parentKey === 'appList' ? renderNodeExtra : null} + // 当selected或activeKey变化时,强制Tree组件重新渲染 + key={`tree-${activeKey}-${selected?.key || 'none'}`} > {renderMenuItems(filteredMenu[activeKey]?.children)}