style: 创建子菜单栏，同时使用resizebox对页面进行宽度分割

src/pages/ideContainer/index.tsx

@@ -5,6 +5,7 @@ import LogBar from './logBar';
 import RightSideBar from './rightSideBar';
 import { getUrlParams } from '@/utils/common';
 import ProjectContainer from '@/pages/orchestration/project';
+import { ResizeBox } from '@arco-design/web-react';
 
 interface Selected {
   currentPath?: string;
@@ -31,6 +32,7 @@ function IDEContainer() {
 
   const [selected, setSelected] = useState<Selected>({});
   const [urlParams, setUrlParams] = useState<UrlParamsOptions>({});
+  const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
 
   useEffect(() => {
     setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions);
@@ -65,6 +67,12 @@ function IDEContainer() {
         return <div>点击左侧菜单选择需要查看的功能</div>;
     }
   };
+
+  // 处理子菜单区域的拖拽调整大小
+  const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => {
+    setSubMenuWidth(width);
+  };
+
   return (
     <>
       <div className={styles.IDEContainer}>
@@ -74,6 +82,25 @@ function IDEContainer() {
           identity={urlParams.identity}
         />
         <div className={styles.content}>
+          <ResizeBox
+            directions={['right']}
+            style={{
+              width: subMenuWidth,
+              height: '100%',
+              minHeight: 'calc(100vh - 40px)'
+            }}
+            onMoving={handleSubMenuResize}
+          >
+            {/* 这里是子菜单区域，可以根据需要添加具体内容 */}
+            <div style={{
+              width: '100%',
+              height: '100%',
+              backgroundColor: '#f5f5f5',
+              borderRight: '1px solid #ddd'
+            }}>
+              子菜单区域
+            </div>
+          </ResizeBox>
           <div className={styles.mainContent}>
             {renderContent()}
           </div>

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

@@ -4,20 +4,24 @@
   width: 100%;
   height: 100%;
   padding: 0;
+  display: flex;
+  flex-direction: row;
 
   .content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     height: 100%;
     background-color: var(--color-fill-2);
     min-width: @layout-max-width;
     transition: padding-left 0.2s;
     box-sizing: border-box;
-    padding-left: 200px;
+    flex: 1;
-
+    position: relative;
 
     .mainContent {
+      flex: 1;
       overflow: auto;
+      padding: 16px;
 
       > div {
         flex: 1;