From 2b7b0b31fb76fd1a06cec057fb32c9a87e640cae Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 26 Aug 2025 15:58:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加顶部导航栏组件，实现菜单切换和关闭功能 - 优化页面布局，使用 flex 布局 - 调整日志栏样式，使其覆盖整个底部 --- src/pages/ideContainer/index.tsx | 71 ++++++++++- src/pages/ideContainer/navBar.tsx | 119 ++++++++++++++++++ .../ideContainer/style/index.module.less | 6 +- .../ideContainer/style/logBar.module.less | 3 +- .../ideContainer/style/navbar.module.less | 3 + 5 files changed, 193 insertions(+), 9 deletions(-) create mode 100644 src/pages/ideContainer/navBar.tsx create mode 100644 src/pages/ideContainer/style/navbar.module.less diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index f984653..c22e0a0 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -1,11 +1,13 @@ import React, { useEffect, useState } from 'react'; +import { ResizeBox } from '@arco-design/web-react'; +import { getUrlParams } from '@/utils/common'; import styles from './style/index.module.less'; import SideBar from './sideBar'; import LogBar from './logBar'; import RightSideBar from './rightSideBar'; -import { getUrlParams } from '@/utils/common'; +import NavBar from './navBar'; import ProjectContainer from '@/pages/orchestration/project'; -import { ResizeBox } from '@arco-design/web-react'; +import { menuData, menuData2 } from './config/menuData'; interface Selected { currentPath?: string; @@ -40,7 +42,8 @@ function IDEContainer() { // 根据选中的菜单项渲染对应组件 const renderContent = () => { - switch (selected.currentPath) { + const path = selected.currentPath; + switch (path) { case 'appFlow': return ; case 'compList': @@ -73,6 +76,59 @@ function IDEContainer() { setSubMenuWidth(width); }; + // 根据identity获取对应的菜单数据 + const getCurrentMenuData = () => { + switch (urlParams.identity) { + case 'scene': + return menuData; + case 'componentDevelopment': + return menuData2; + default: + return menuData; + } + }; + + // 处理tab切换 + const handleTabChange = (path: string) => { + if (path) { + // 根据path查找对应的菜单项 + const findMenuItem = (menuItems: any[], path: string): any => { + for (const item of menuItems) { + if (item.path === path) { + return item; + } + if (item.children) { + const found = findMenuItem(item.children, path); + if (found) return found; + } + } + return null; + }; + + const menuItems = getCurrentMenuData(); + const menuItem = findMenuItem(menuItems, path); + + if (menuItem) { + setSelected({ + currentPath: menuItem.path, + currentKey: '' // 这里可以优化为实际的key值 + }); + } + } + else { + // 没有激活的tab，重置selected状态 + setSelected({}); + } + }; + + // 处理tab关闭 + const handleTabClose = (path: string) => { + // 如果关闭的是当前激活的tab，则重置selected状态 + if (path === selected.currentPath) { + setSelected({}); + } + }; + return ( <>
@@ -102,7 +158,16 @@ function IDEContainer() {
+ {/*顶部导航栏*/} + + {/*页面渲染*/} {renderContent()} + {/*底部日志栏*/} {urlParams.identity !== 'componentDevelopment' && }
diff --git a/src/pages/ideContainer/navBar.tsx b/src/pages/ideContainer/navBar.tsx new file mode 100644 index 0000000..a248935 --- /dev/null +++ b/src/pages/ideContainer/navBar.tsx @@ -0,0 +1,119 @@ +import React, { useState, useEffect } from 'react'; +import { Tabs } from '@arco-design/web-react'; +import styles from './style/navbar.module.less'; + +const TabPane = Tabs.TabPane; + +interface NavBarProps { + selected?: { currentPath?: string; currentKey?: string; }; + menuData?: any[]; + onTabChange?: (path: string) => void; + onTabClose?: (path: string) => void; +} + +const NavBar: React.FC = ({ selected, menuData, onTabChange, onTabClose }) => { + const [tabs, setTabs] = useState([]); + const [activeTab, setActiveTab] = useState(''); + + // 根据菜单数据和路径查找菜单标题 + const findMenuTitle = (menu: any[], path?: string): string => { + if (!path) return '未知页面'; + + for (const item of menu) { + if (item.path === path) { + return item.title; + } + if (item.children) { + const title = findMenuTitle(item.children, path); + if (title) return title; + } + } + + return '未知页面'; + }; + + // 当选中的菜单项变化时，添加新的tab + useEffect(() => { + if (selected?.currentPath) { + const path = selected.currentPath; + // 检查tab是否已存在 + const existingTab = tabs.find(tab => tab.path === path); + + if (!existingTab) { + // 创建新tab + const title = menuData ? findMenuTitle(menuData, path) : path; + const newTab = { + key: path, + title: title, + path: path + }; + + setTabs(prev => [...prev, newTab]); + setActiveTab(path); + } + else { + // 如果tab已存在，激活它 + setActiveTab(path); + } + } + }, [selected, menuData]); + + const handleDeleteTab = (key: string) => { + console.log("key:",key); + const newTabs = tabs.filter(tab => tab.key !== key); + setTabs(newTabs); + + // 如果删除的是当前激活的tab，激活第一个tab（如果存在） + if (key === activeTab && newTabs.length > 0) { + console.log("newTabs[0].key:",newTabs[0].key); + setActiveTab(newTabs[0].key); + onTabChange?.(newTabs[0].path); + } + else if (key === activeTab && newTabs.length === 0) { + setActiveTab(''); + onTabChange?.(''); + } + + // 通知父组件tab已关闭 + onTabClose?.(key); + }; + + const handleTabChange = (key: string) => { + setActiveTab(key); + // 查找对应的tab并通知父组件 + const tab = tabs.find(t => t.key === key); + if (tab) { + onTabChange?.(tab.path); + } + }; + + return ( +
+ {tabs.length > 0 ? ( + + {tabs.map(tab => ( + + + ))} + + ) : ( +
+ 请选择左侧菜单项 +
+ )} +
+ ); +}; + +export default NavBar; \ No newline at end of file diff --git a/src/pages/ideContainer/style/index.module.less b/src/pages/ideContainer/style/index.module.less index 6b213bb..b080d54 100644 --- a/src/pages/ideContainer/style/index.module.less +++ b/src/pages/ideContainer/style/index.module.less @@ -19,14 +19,12 @@ position: relative; .mainContent { + display: flex; + flex-direction: column; position: relative; flex: 1; overflow: auto; - padding: 16px; - > div { - height: 100%; - } } } } \ No newline at end of file diff --git a/src/pages/ideContainer/style/logBar.module.less b/src/pages/ideContainer/style/logBar.module.less index 5f8586e..fe5a8b4 100644 --- a/src/pages/ideContainer/style/logBar.module.less +++ b/src/pages/ideContainer/style/logBar.module.less @@ -1,8 +1,7 @@ .logBar { - width: calc(100% - 220px); position: absolute; bottom: 0; - right: 0; + left: 0; background-color: #fff; border-top: 2px solid #ddd; transform: translateZ(0); diff --git a/src/pages/ideContainer/style/navbar.module.less b/src/pages/ideContainer/style/navbar.module.less new file mode 100644 index 0000000..8d8529f --- /dev/null +++ b/src/pages/ideContainer/style/navbar.module.less @@ -0,0 +1,3 @@ +.navbar { + height: 40px; +} \ No newline at end of file