style(ideContainer): 增加侧边栏搜索和添加功能并调整子菜单宽度

src/pages/ideContainer/sideBar.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import styles from './style/sideBar.module.less';
 import { IconApps } from '@arco-design/web-react/icon';
 import { menuData1, menuData2 } from './config/menuData';
-import { ResizeBox, Tree } from '@arco-design/web-react';
+import { ResizeBox, Tree, Input, Button } from '@arco-design/web-react';
+import { IconSearch, IconPlus } from '@arco-design/web-react/icon';
 import { Selected } from '@/pages/ideContainer/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateMenuData, updateFlowData } from '@/store/ideContainer';
@@ -35,7 +36,7 @@ const compTypeMap = {
 
 const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, onMenuSelect }) => {
   const [menu, setMenu] = useState<MenuItemType[]>([]);
-  const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
+  const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
   const [activeKey, setActiveKey] = useState(0);
   const [mainMenuSelectedKey, setMainMenuSelectedKey] = useState<string>('');
@@ -86,7 +87,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
   // 切换子菜单区域的收起/展开状态
   const toggleSubMenu = () => {
     setIsSubMenuCollapsed(!isSubMenuCollapsed);
-    setSubMenuWidth(isSubMenuCollapsed ? 200 : 0);
+    setSubMenuWidth(isSubMenuCollapsed ? 300 : 0);
   };
 
   // 处理菜单项点击事件
@@ -100,7 +101,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
       // 如果点击的是其他菜单项，则展开子菜单（如果已收起）
       if (isSubMenuCollapsed) {
         setIsSubMenuCollapsed(false);
-        setSubMenuWidth(200);
+        setSubMenuWidth(300);
       }
     }
 
@@ -217,6 +218,21 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
         <div
           className={styles['sub-menu']}
         >
+          {/* 搜索/添加 */}
+          <div className={styles['handle-box']}>
+            <Input
+              prefix={<IconSearch />}
+              placeholder={'搜索'}
+              style={{ width: '90%' }}
+            />
+            <Button
+              type="primary"
+              icon={<IconPlus />}
+              style={{ marginLeft: 5 }}
+            />
+          </div>
+
+          {/* 子菜单 */}
           <Tree
             defaultExpandedKeys={['0-0']}
             onSelect={async (_selectedKeys, info) => {

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

@@ -63,4 +63,9 @@
   border-right: 1px solid #ddd;
   position: relative;
   border-left: 1px solid #ddd;
+
+  .handle-box {
+    display: flex;
+    padding: 10px;
+  }
 }