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 ProjectContainer from '@/pages/orchestration/project';
import ApplicationContainer from '@/pages/orchestration/application'; import ApplicationContainer from '@/pages/orchestration/application';
import { menuData, menuData2 } from './config/menuData'; import { menuData, menuData2 } from './config/menuData';
import { Selected } from '@/pages/ideContainer/types';
interface Selected {
currentPath?: string;
currentKey?: string;
}
type UrlParamsOptions = { type UrlParamsOptions = {
identity?: string; identity?: string;
@ -50,12 +46,12 @@ function IDEContainer() {
setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions); setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions);
}, []); }, []);
// 当selected.currentPath变化时添加到已打开的tab集合中 // 当selected.path变化时添加到已打开的tab集合中
useEffect(() => { useEffect(() => {
if (selected.currentPath) { if (selected.path) {
setOpenedTabs(prev => new Set(prev).add(selected.currentPath!)); setOpenedTabs(prev => new Set(prev).add(selected.path!));
} }
}, [selected.currentPath]); }, [selected.path]);
// 根据选中的菜单项渲染对应组件 // 根据选中的菜单项渲染对应组件
const renderContent = () => { const renderContent = () => {
@ -65,7 +61,7 @@ function IDEContainer() {
// 检查该路径的组件是否已打开 // 检查该路径的组件是否已打开
const isOpened = openedTabs.has(path); const isOpened = openedTabs.has(path);
// 检查是否是当前选中的路径 // 检查是否是当前选中的路径
const isSelected = selected.currentPath === path; const isSelected = selected.path === path;
// 只有已打开的组件才渲染通过CSS控制显示/隐藏 // 只有已打开的组件才渲染通过CSS控制显示/隐藏
return isOpened ? ( return isOpened ? (
@ -82,7 +78,7 @@ function IDEContainer() {
})} })}
{/* 默认内容当没有选中任何tab时显示 */} {/* 默认内容当没有选中任何tab时显示 */}
{!selected.currentPath && ( {!selected.path && (
<div></div> <div></div>
)} )}
</div> </div>
@ -160,8 +156,8 @@ function IDEContainer() {
if (menuItem) { if (menuItem) {
setSelected({ setSelected({
currentPath: menuItem.path, ...menuItem,
currentKey: menuItem.parentKey || menuItem.key key: menuItem.parentKey || menuItem.key
}); });
} }
} }
@ -179,7 +175,7 @@ function IDEContainer() {
setOpenedTabs(newOpenedTabs); setOpenedTabs(newOpenedTabs);
// 如果关闭的是当前激活的tab则重置selected状态 // 如果关闭的是当前激活的tab则重置selected状态
// if (path === selected.currentPath) { // if (path === selected.path) {
// setSelected({}); // setSelected({});
// } // }
}; };
@ -189,7 +185,7 @@ function IDEContainer() {
<div className={styles.IDEContainer}> <div className={styles.IDEContainer}>
<SideBar <SideBar
onMenuSelect={(select) => setSelected(select)} onMenuSelect={(select) => setSelected(select)}
selectedKey={selected.currentKey} selectedKey={selected.key}
identity={urlParams.identity} identity={urlParams.identity}
/> />
<div className={styles.content}> <div className={styles.content}>

@ -1,11 +1,12 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Tabs } from '@arco-design/web-react'; import { Tabs } from '@arco-design/web-react';
import styles from './style/navbar.module.less'; import styles from './style/navbar.module.less';
import { Selected } from '@/pages/ideContainer/types';
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
interface NavBarProps { interface NavBarProps {
selected?: { currentPath?: string; currentKey?: string; }; selected?: Selected;
menuData?: any[]; menuData?: any[];
onTabChange?: (path: string) => void; onTabChange?: (path: string) => void;
onTabClose?: (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 [activeTab, setActiveTab] = useState<string>('');
// 根据菜单数据和路径查找菜单标题 // 根据菜单数据和路径查找菜单标题
const findMenuTitle = (menu: any[], path?: string): string => { const findMenuTitle = (originData: Selected, menu: any[], path?: string): string => {
if (!path) return '未知页面'; if (!path) return '未知页面';
for (const item of menu) { for (const item of menu) {
if (item.path === path) { if (item.path === path && item.title === originData.title) {
return item.title; return item.title;
} }
if (item.children) { if (item.children) {
const title = findMenuTitle(item.children, path); const title = findMenuTitle(originData, item.children, path);
if (title && title !== '未知页面') { if (title && title !== '未知页面') {
return title; return title;
} }
@ -37,14 +38,15 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
// 当选中的菜单项变化时添加新的tab // 当选中的菜单项变化时添加新的tab
useEffect(() => { useEffect(() => {
if (selected?.currentPath) { if (selected?.path) {
const path = selected.currentPath; const path = selected.path;
const title = selected.title;
// 检查tab是否已存在 // 检查tab是否已存在
const existingTab = tabs.find(tab => tab.path === path); const existingTab = tabs.find(tab => tab.path === path && tab.title === title);
if (!existingTab) { if (!existingTab) {
// 创建新tab // 创建新tab
const title = menuData ? findMenuTitle(menuData, path) : path; const title = menuData ? findMenuTitle(selected, menuData, path) : path;
const newTab = { const newTab = {
key: path, key: path,
title: title, title: title,

@ -3,6 +3,7 @@ import styles from './style/sideBar.module.less';
import { IconApps } from '@arco-design/web-react/icon'; import { IconApps } from '@arco-design/web-react/icon';
import { menuData, menuData2 } from './config/menuData'; import { menuData, menuData2 } from './config/menuData';
import { ResizeBox, Tree } from '@arco-design/web-react'; import { ResizeBox, Tree } from '@arco-design/web-react';
import { Selected } from '@/pages/ideContainer/types';
const TreeNode = Tree.Node; const TreeNode = Tree.Node;
@ -15,7 +16,7 @@ interface MenuItemType {
} }
interface SideBarProps { interface SideBarProps {
onMenuSelect?: ({ currentPath, currentKey }) => void; onMenuSelect?: (selected: Selected) => void;
selectedKey?: string; selectedKey?: string;
identity?: string; identity?: string;
} }
@ -67,7 +68,7 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
const mainMenuKey = `${item.key}`; const mainMenuKey = `${item.key}`;
setMainMenuSelectedKey(mainMenuKey); 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); setMainMenuSelectedKey(mainMenuKey);
// 调用外部传入的菜单选择处理函数 // 调用外部传入的菜单选择处理函数
originalData.key && onMenuSelect?.({ originalData.key && onMenuSelect?.({ ...originalData } as Selected);
currentPath: originalData.path,
currentKey: originalData.key
});
}} }}
> >
{renderMenuItems(menu[activeKey]?.children)} {renderMenuItems(menu[activeKey]?.children)}

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