From 6d12c24e10e9a09c16cc4cd8fd0b33c688f359f2 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Mon, 25 Aug 2025 17:35:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ideContainer):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=9A=84=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=92=8C=E6=94=B6=E8=B5=B7=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ideContainer/rightSideBar.tsx | 37 ++++++++++++-------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/pages/ideContainer/rightSideBar.tsx b/src/pages/ideContainer/rightSideBar.tsx
index b809cb9..588484a 100644
--- a/src/pages/ideContainer/rightSideBar.tsx
+++ b/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) => {
-    // 如果有手动调整的宽度且当前标签是激活状态，则使用手动宽度
-    if (manualWidth !== null && activeTab === tabKey && isExpanded) {
-      return manualWidth;
+  // 当 isExpanded 或 activeTab 状态改变时，直接更新对应元素的样式
+  useEffect(() => {
+    const width = isExpanded ? 350 : 0;
+
+    if (activeTab === '1' && resizeBoxRef1.current) {
+      resizeBoxRef1.current.style.width = `${width}px`;
     }
 
-    if (!isExpanded || activeTab !== tabKey) {
-      return 0;
+    if (activeTab === '2' && resizeBoxRef2.current) {
+      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;
\ No newline at end of file