From 7d969d570acf16481b5575c508d5fddee27f78c4 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Mon, 25 Aug 2025 17:32:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ideContainer):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E6=A0=8F=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

- 添加引用 ResizeBox 容器，用于手动调整大小
- 使用 useEffect 直接更新元素样式，当收起状态改变时
- 实现 handleResize 函数，同步更新收起状态
- 调整日志栏高度的字符串表示，提高代码可读性
---
 src/pages/ideContainer/logBar.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx
index 24a05f5..84178a1 100644
--- a/src/pages/ideContainer/logBar.tsx
+++ b/src/pages/ideContainer/logBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { ResizeBox, Tabs } from '@arco-design/web-react';
 import styles from './style/logBar.module.less';
 
@@ -34,7 +34,8 @@ const data = [
 const LogBar: React.FC<LogBarProps> = () => {
   const [tabs] = useState(data);
   const [activeTab, setActiveTab] = useState('1');
-  const [collapsed, setCollapsed] = useState(true); // 添加收起状态，默认为收起
+  const [collapsed, setCollapsed] = useState(true);
+  const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
@@ -49,19 +50,39 @@ const LogBar: React.FC<LogBarProps> = () => {
     }
   };
 
+  // 当 collapsed 状态改变时，直接更新元素的样式
+  useEffect(() => {
+    if (resizeBoxRef.current) {
+      resizeBoxRef.current.style.height = collapsed ? '40px' : '250px';
+    }
+  }, [collapsed]);
+
+  // 处理 ResizeBox 手动调整大小事件
+  const handleResize = (e: number, size) => {
+    // 当高度接近收起状态的高度时，同步更新 collapsed 状态
+    if (size.height <= 40) {
+      setCollapsed(true);
+    }
+    else {
+      setCollapsed(false);
+    }
+  };
+
   return (
     <>
       <ResizeBox
+        ref={resizeBoxRef}
         className={styles.logBar}
         directions={['top']}
         style={{
-          height: collapsed ? 40 : 250 // 收起时只显示 tab 高度，展开时显示完整高度
+          height: collapsed ? '40px' : '250px'
         }}
+        onMoving={handleResize}
       >
         <Tabs
           type="card-gutter"
           activeTab={activeTab}
-          onClickTab={handleTabClick} // 使用自定义点击处理函数
+          onClickTab={handleTabClick}
         >
           {tabs.map((x) => (
             <TabPane destroyOnHide key={x.key} title={x.title}>