feat(ideContainer): 实现应用列表的树形结构展示

- 在 menuData 中添加应用列表的子菜单项
- 在侧边栏中引入 Tree 组件来展示应用列表
- 实现菜单项的点击事件和选中状态的处理
- 优化主菜单的选中状态显示

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: '事件',

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]);

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<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
   const [menu, setMenu] = useState<MenuItemType[]>([]);
   const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
+  const [activeKey, setActiveKey] = useState(0);
+  const [mainMenuSelectedKey, setMainMenuSelectedKey] = useState<string>('');
 
   function getMenuData(): MenuItemType[] {
     switch (identity) {
@@ -46,8 +50,8 @@ const SideBar: React.FC<SideBarProps> = ({ 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<SideBarProps> = ({ 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 (
+            <TreeNode {...treeNodeProps} title={item.title} key={key}>
+              {renderMenuItems(item.children, key)}
+            </TreeNode>
+          );
+        }
+        else {
+          return <TreeNode  {...treeNodeProps} title={item.title} key={key} />;
+        }
+      });
+    }
+    return null;
+  };
+
+
   useEffect(() => {
     setMenu(getMenuData());
   }, [identity]);
@@ -76,8 +108,8 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
         {menu.map((item, index) => (
           <div
             key={index}
-            className={`${styles['menu-item']} ${selectedKey === `${item.key}` ? styles['menu-item-active'] : ''}`}
-            onClick={() => handleMenuItemClick(item)}
+            className={`${styles['menu-item']} ${(selectedKey === `${item.key}` || mainMenuSelectedKey === `${item.key}`) ? styles['menu-item-active'] : ''}`}
+            onClick={() => handleMenuItemClick(item, index)}
           >
             <div className={styles['menu-item-content']}>
               <span className={styles['menu-item-icon']}>
@@ -106,7 +138,25 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
           borderRight: '1px solid #ddd',
           position: 'relative'
         }}>
-          子菜单区域
+          <Tree
+            defaultExpandedKeys={['0-0']}
+            onSelect={(_selectedKeys, info) => {
+              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)}
+          </Tree>
         </div>
       </ResizeBox>
     </div>