From 8e163dc7ff45ecf3f8ee5253ac23051e3fafe8d3 Mon Sep 17 00:00:00 2001 From: ZLY Date: Wed, 17 Sep 2025 14:31:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8=E7=9A=84=E6=A0=91=E5=BD=A2?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 menuData 中添加应用列表的子菜单项 - 在侧边栏中引入 Tree 组件来展示应用列表 - 实现菜单项的点击事件和选中状态的处理 - 优化主菜单的选中状态显示 --- src/pages/ideContainer/config/menuData.ts | 33 +++++++++--- src/pages/ideContainer/index.tsx | 1 + src/pages/ideContainer/sideBar.tsx | 62 ++++++++++++++++++++--- 3 files changed, 83 insertions(+), 13 deletions(-) diff --git a/src/pages/ideContainer/config/menuData.ts b/src/pages/ideContainer/config/menuData.ts index b88a0b2..364d803 100644 --- a/src/pages/ideContainer/config/menuData.ts +++ b/src/pages/ideContainer/config/menuData.ts @@ -1,19 +1,38 @@ export const menuData = [ { title: '应用列表', + path: '', + key: 'appList', children: [ { title: '应用A', + path: 'appFlow', + key: 'appFlow', + parentKey: 'appList', children: [ + { + title: '事件', + children: null + }, { title: '组件列表', - children: null, - path: 'compList' + children: null + } + ] + }, + { + title: '应用B', + path: 'appFlow', + key: 'appFlow', + parentKey: 'appList', + children: [ + { + title: '事件', + children: null }, { - title: '应用实例', - children: null, - path: 'appInstance' + title: '组件列表', + children: null } ] } @@ -21,9 +40,9 @@ export const menuData = [ }, { title: '应用编排', - key: 'appFlow', + key: 'null', children: null, - path: 'appFlow' + path: 'null' }, { title: '事件', diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 5ff08e0..b571811 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -52,6 +52,7 @@ function IDEContainer() { // 当selected.currentPath变化时，添加到已打开的tab集合中 useEffect(() => { if (selected.currentPath) { + console.log(1); setOpenedTabs(prev => new Set(prev).add(selected.currentPath!)); } }, [selected.currentPath]); diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 61c7752..7f60ae7 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react'; import styles from './style/sideBar.module.less'; import { IconApps } from '@arco-design/web-react/icon'; import { menuData, menuData2 } from './config/menuData'; -import { ResizeBox } from '@arco-design/web-react'; +import { ResizeBox, Tree } from '@arco-design/web-react'; + +const TreeNode = Tree.Node; interface MenuItemType { title: string; @@ -22,6 +24,8 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } const [menu, setMenu] = useState([]); const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态 const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态 + const [activeKey, setActiveKey] = useState(0); + const [mainMenuSelectedKey, setMainMenuSelectedKey] = useState(''); function getMenuData(): MenuItemType[] { switch (identity) { @@ -46,8 +50,8 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } }; // 处理菜单项点击事件 - const handleMenuItemClick = (item: MenuItemType) => { - console.log("item:",item); + const handleMenuItemClick = (item: MenuItemType, index: number) => { + setActiveKey(index); // 如果点击的是当前已激活的菜单项，则切换子菜单的展开/收起状态 if (selectedKey === `${item.key}`) { toggleSubMenu(); @@ -60,10 +64,38 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } } } + const mainMenuKey = `${item.key}`; + setMainMenuSelectedKey(mainMenuKey); // 调用外部传入的菜单选择处理函数 onMenuSelect?.({ currentPath: item.path, currentKey: `${item.key}` }); }; + // 渲染子菜单 + const renderMenuItems = (menuItems?: MenuItemType[], parentKey = '0') => { + if (menuItems && menuItems.length) { + return menuItems.map((item, index) => { + const key = `${parentKey}-${index}`; + const treeNodeProps = { + title: item.title, + key: key, + dataRef: item // 传递原始数据，包含 path、key 等信息 + }; + if (item.children && item.children.length > 0) { + return ( + + {renderMenuItems(item.children, key)} + + ); + } + else { + return ; + } + }); + } + return null; + }; + + useEffect(() => { setMenu(getMenuData()); }, [identity]); @@ -76,8 +108,8 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } {menu.map((item, index) => (
handleMenuItemClick(item)} + className={`${styles['menu-item']} ${(selectedKey === `${item.key}` || mainMenuSelectedKey === `${item.key}`) ? styles['menu-item-active'] : ''}`} + onClick={() => handleMenuItemClick(item, index)} >
@@ -106,7 +138,25 @@ const SideBar: React.FC = ({ onMenuSelect, selectedKey, identity } borderRight: '1px solid #ddd', position: 'relative' }}> - 子菜单区域 + { + const selectedNode = info.node; + const originalData = selectedNode.props.dataRef; + + // 保持主菜单的选中状态 + const mainMenuKey = `${menu[activeKey]?.key}`; + setMainMenuSelectedKey(mainMenuKey); + + // 调用外部传入的菜单选择处理函数 + originalData.key && onMenuSelect?.({ + currentPath: originalData.path, + currentKey: originalData.key + }); + }} + > + {renderMenuItems(menu[activeKey]?.children)} +