refactor(ideContainer): 优化右侧边栏的展开和收起逻辑

src/pages/ideContainer/rightSideBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styles from './style/rightSideBar.module.less';
 import { Tabs, ResizeBox } from '@arco-design/web-react';
 import { IconApps, IconRobot } from '@arco-design/web-react/icon';
@@ -10,40 +10,35 @@ const TabPane = Tabs.TabPane;
 const RightSideBar: React.FC = () => {
   const [activeTab, setActiveTab] = useState('1');
   const [isExpanded, setIsExpanded] = useState(false);
-  const [manualWidth, setManualWidth] = useState<number | null>(null); // 记录手动调整的宽度
+  const resizeBoxRef1 = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
+  const resizeBoxRef2 = useRef<HTMLDivElement>(null); // 引用第二个 ResizeBox 容器
 
   const handleTabClick = (key: string) => {
     if (key === activeTab) {
-      // 如果有手动调整的宽度，点击时重置为自动控制
-      if (manualWidth !== null) {
-        setManualWidth(null);
-      }
       setIsExpanded(!isExpanded);
     }
     else {
       setActiveTab(key);
       setIsExpanded(true);
-      // 切换标签时重置手动宽度
-      setManualWidth(null);
     }
   };
 
-  const getResizeBoxWidth = (tabKey: string) => {
+  // 当 isExpanded 或 activeTab 状态改变时，直接更新对应元素的样式
-    // 如果有手动调整的宽度且当前标签是激活状态，则使用手动宽度
+  useEffect(() => {
-    if (manualWidth !== null && activeTab === tabKey && isExpanded) {
+    const width = isExpanded ? 350 : 0;
-      return manualWidth;
+
+    if (activeTab === '1' && resizeBoxRef1.current) {
+      resizeBoxRef1.current.style.width = `${width}px`;
     }
 
-    if (!isExpanded || activeTab !== tabKey) {
+    if (activeTab === '2' && resizeBoxRef2.current) {
-      return 0;
+      resizeBoxRef2.current.style.width = `${width}px`;
     }
-    return 350;
+  }, [isExpanded, activeTab]);
-  };
 
   // 处理 ResizeBox 拖动事件
   const handleResize = (e: MouseEvent, { width }: { width: number }) => {
     if (width > 0) {
-      setManualWidth(width);
       // 如果之前是收起状态，拖动后应该展开
       if (!isExpanded) {
         setIsExpanded(true);
@@ -70,10 +65,11 @@ const RightSideBar: React.FC = () => {
             }
           >
             {activeTab === '1' && <ResizeBox
+              ref={resizeBoxRef1}
               className={styles['right-resize-box']}
               directions={['left']}
               style={{
-                width: getResizeBoxWidth('1'),
+                width: isExpanded ? 350 : 0,
                 maxWidth: '100%',
                 minWidth: 0
               }}
@@ -92,10 +88,11 @@ const RightSideBar: React.FC = () => {
             }
           >
             {activeTab === '2' && <ResizeBox
+              ref={resizeBoxRef2}
               className={styles['right-resize-box']}
               directions={['left']}
               style={{
-                width: getResizeBoxWidth('2'),
+                width: isExpanded ? 350 : 0,
                 maxWidth: '100%',
                 minWidth: 0
               }}
@@ -110,4 +107,4 @@ const RightSideBar: React.FC = () => {
   );
 };
 
-export default RightSideBar;
+export default RightSideBar;