diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 5bddca1..9603378 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -9,11 +9,7 @@ import NavBar from './navBar'; import ProjectContainer from '@/pages/orchestration/project'; import ApplicationContainer from '@/pages/orchestration/application'; import { menuData, menuData2 } from './config/menuData'; - -interface Selected { - currentPath?: string; - currentKey?: string; -} +import { Selected } from '@/pages/ideContainer/types'; type UrlParamsOptions = { identity?: string; @@ -50,12 +46,12 @@ function IDEContainer() { setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions); }, []); - // 当selected.currentPath变化时,添加到已打开的tab集合中 + // 当selected.path变化时,添加到已打开的tab集合中 useEffect(() => { - if (selected.currentPath) { - setOpenedTabs(prev => new Set(prev).add(selected.currentPath!)); + if (selected.path) { + setOpenedTabs(prev => new Set(prev).add(selected.path!)); } - }, [selected.currentPath]); + }, [selected.path]); // 根据选中的菜单项渲染对应组件 const renderContent = () => { @@ -65,7 +61,7 @@ function IDEContainer() { // 检查该路径的组件是否已打开 const isOpened = openedTabs.has(path); // 检查是否是当前选中的路径 - const isSelected = selected.currentPath === path; + const isSelected = selected.path === path; // 只有已打开的组件才渲染,通过CSS控制显示/隐藏 return isOpened ? ( @@ -82,7 +78,7 @@ function IDEContainer() { })} {/* 默认内容,当没有选中任何tab时显示 */} - {!selected.currentPath && ( + {!selected.path && (
点击左侧菜单选择需要查看的功能
)} @@ -160,8 +156,8 @@ function IDEContainer() { if (menuItem) { setSelected({ - currentPath: menuItem.path, - currentKey: menuItem.parentKey || menuItem.key + ...menuItem, + key: menuItem.parentKey || menuItem.key }); } } @@ -179,7 +175,7 @@ function IDEContainer() { setOpenedTabs(newOpenedTabs); // 如果关闭的是当前激活的tab,则重置selected状态 - // if (path === selected.currentPath) { + // if (path === selected.path) { // setSelected({}); // } }; @@ -189,7 +185,7 @@ function IDEContainer() {
setSelected(select)} - selectedKey={selected.currentKey} + selectedKey={selected.key} identity={urlParams.identity} />
diff --git a/src/pages/ideContainer/navBar.tsx b/src/pages/ideContainer/navBar.tsx index 3c309c2..93bd615 100644 --- a/src/pages/ideContainer/navBar.tsx +++ b/src/pages/ideContainer/navBar.tsx @@ -1,11 +1,12 @@ import React, { useState, useEffect } from 'react'; import { Tabs } from '@arco-design/web-react'; import styles from './style/navbar.module.less'; +import { Selected } from '@/pages/ideContainer/types'; const TabPane = Tabs.TabPane; interface NavBarProps { - selected?: { currentPath?: string; currentKey?: string; }; + selected?: Selected; menuData?: any[]; onTabChange?: (path: string) => void; onTabClose?: (path: string) => void; @@ -16,15 +17,15 @@ const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabC const [activeTab, setActiveTab] = useState(''); // 根据菜单数据和路径查找菜单标题 - const findMenuTitle = (menu: any[], path?: string): string => { + const findMenuTitle = (originData: Selected, menu: any[], path?: string): string => { if (!path) return '未知页面'; for (const item of menu) { - if (item.path === path) { + if (item.path === path && item.title === originData.title) { return item.title; } if (item.children) { - const title = findMenuTitle(item.children, path); + const title = findMenuTitle(originData, item.children, path); if (title && title !== '未知页面') { return title; } @@ -37,14 +38,15 @@ const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabC // 当选中的菜单项变化时,添加新的tab useEffect(() => { - if (selected?.currentPath) { - const path = selected.currentPath; + if (selected?.path) { + const path = selected.path; + const title = selected.title; // 检查tab是否已存在 - const existingTab = tabs.find(tab => tab.path === path); + const existingTab = tabs.find(tab => tab.path === path && tab.title === title); if (!existingTab) { // 创建新tab - const title = menuData ? findMenuTitle(menuData, path) : path; + const title = menuData ? findMenuTitle(selected, menuData, path) : path; const newTab = { key: path, title: title, diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 07c6bc8..7949b1c 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -3,6 +3,7 @@ import styles from './style/sideBar.module.less'; import { IconApps } from '@arco-design/web-react/icon'; import { menuData, menuData2 } from './config/menuData'; import { ResizeBox, Tree } from '@arco-design/web-react'; +import { Selected } from '@/pages/ideContainer/types'; const TreeNode = Tree.Node; @@ -15,7 +16,7 @@ interface MenuItemType { } interface SideBarProps { - onMenuSelect?: ({ currentPath, currentKey }) => void; + onMenuSelect?: (selected: Selected) => void; selectedKey?: string; identity?: string; } @@ -67,7 +68,7 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } const mainMenuKey = `${item.key}`; setMainMenuSelectedKey(mainMenuKey); // 调用外部传入的菜单选择处理函数 - onMenuSelect?.({ currentPath: item.path, currentKey: `${item.key}` }); + onMenuSelect?.({ ...item }); }; // 渲染子菜单 @@ -152,10 +153,7 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } setMainMenuSelectedKey(mainMenuKey); // 调用外部传入的菜单选择处理函数 - originalData.key && onMenuSelect?.({ - currentPath: originalData.path, - currentKey: originalData.key - }); + originalData.key && onMenuSelect?.({ ...originalData } as Selected); }} > {renderMenuItems(menu[activeKey]?.children)} diff --git a/src/pages/ideContainer/types/index.ts b/src/pages/ideContainer/types/index.ts new file mode 100644 index 0000000..cdc985a --- /dev/null +++ b/src/pages/ideContainer/types/index.ts @@ -0,0 +1,7 @@ +export interface Selected { + title?: string; + path?: string; + key?: string; + parentKey?: string; + children?: Selected[]; +} \ No newline at end of file