pref(ideContainer): 优化数据类型,增加Selected类型

master
钟良源 5 months ago
parent 0d69ca06d5
commit 48b634d29c

@ -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 && (
<div></div>
)}
</div>
@ -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() {
<div className={styles.IDEContainer}>
<SideBar
onMenuSelect={(select) => setSelected(select)}
selectedKey={selected.currentKey}
selectedKey={selected.key}
identity={urlParams.identity}
/>
<div className={styles.content}>

@ -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<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
const [activeTab, setActiveTab] = useState<string>('');
// 根据菜单数据和路径查找菜单标题
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<NavBarProps> = ({ 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,

@ -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<SideBarProps> = ({ 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<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
setMainMenuSelectedKey(mainMenuKey);
// 调用外部传入的菜单选择处理函数
originalData.key && onMenuSelect?.({
currentPath: originalData.path,
currentKey: originalData.key
});
originalData.key && onMenuSelect?.({ ...originalData } as Selected);
}}
>
{renderMenuItems(menu[activeKey]?.children)}

@ -0,0 +1,7 @@
export interface Selected {
title?: string;
path?: string;
key?: string;
parentKey?: string;
children?: Selected[];
}
Loading…
Cancel
Save