refactor(ideContainer): 侧边栏子菜单移至侧边栏组件内并优化相关功能

src/pages/ideContainer/index.tsx

@@ -190,25 +190,6 @@ function IDEContainer() {
           identity={urlParams.identity}
         />
         <div className={styles.content}>
-          <ResizeBox
-            directions={['right']}
-            style={{
-              width: subMenuWidth,
-              height: '100%',
-              minHeight: 'calc(100vh - 60px)'
-            }}
-            onMoving={handleSubMenuResize}
-          >
-            <div style={{
-              width: '100%',
-              height: '100%',
-              backgroundColor: '#f5f5f5',
-              borderRight: '1px solid #ddd'
-            }}>
-              子菜单区域
-            </div>
-          </ResizeBox>
-
           <div className={styles.mainContent}>
             {/*顶部导航栏*/}
             <NavBar

src/pages/ideContainer/sideBar.tsx

@@ -2,6 +2,7 @@ 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';
 
 interface MenuItemType {
   title: string;
@@ -19,6 +20,8 @@ interface SideBarProps {
 
 const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }) => {
   const [menu, setMenu] = useState<MenuItemType[]>([]);
+  const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
+  const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
 
   function getMenuData(): MenuItemType[] {
     switch (identity) {
@@ -31,6 +34,36 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
     }
   }
 
+  // 处理子菜单区域的拖拽调整大小
+  const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => {
+    setSubMenuWidth(width);
+  };
+
+  // 切换子菜单区域的收起/展开状态
+  const toggleSubMenu = () => {
+    setIsSubMenuCollapsed(!isSubMenuCollapsed);
+    setSubMenuWidth(isSubMenuCollapsed ? 200 : 0);
+  };
+
+  // 处理菜单项点击事件
+  const handleMenuItemClick = (item: MenuItemType) => {
+    console.log("item:",item);
+    // 如果点击的是当前已激活的菜单项，则切换子菜单的展开/收起状态
+    if (selectedKey === `${item.key}`) {
+      toggleSubMenu();
+    }
+    else {
+      // 如果点击的是其他菜单项，则展开子菜单（如果已收起）
+      if (isSubMenuCollapsed) {
+        setIsSubMenuCollapsed(false);
+        setSubMenuWidth(200);
+      }
+    }
+
+    // 调用外部传入的菜单选择处理函数
+    onMenuSelect?.({ currentPath: item.path, currentKey: `${item.key}` });
+  };
+
   useEffect(() => {
     setMenu(getMenuData());
   }, [identity]);
@@ -44,9 +77,7 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
           <div
             key={index}
             className={`${styles['menu-item']} ${selectedKey === `${item.key}` ? styles['menu-item-active'] : ''}`}
-            onClick={() => {
+            onClick={() => handleMenuItemClick(item)}
-              onMenuSelect?.({ currentPath: item.path, currentKey: `${item.key}` });
-            }}
           >
             <div className={styles['menu-item-content']}>
               <span className={styles['menu-item-icon']}>
@@ -59,6 +90,25 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
           </div>
         ))}
       </div>
+      <ResizeBox
+        directions={['right']}
+        style={{
+          width: subMenuWidth,
+          height: '100%',
+          minHeight: 'calc(100vh - 60px)'
+        }}
+        onMoving={handleSubMenuResize}
+      >
+        <div style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#f5f5f5',
+          borderRight: '1px solid #ddd',
+          position: 'relative'
+        }}>
+          子菜单区域
+        </div>
+      </ResizeBox>
     </div>
   );
 };

src/pages/ideContainer/style/sideBar.module.less

@@ -1,4 +1,6 @@
 .sider {
+  display: flex;
+
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease-in-out;
   background-color: var(--color-bg-2);