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 = () => { const [tabs] = useState(data); const [activeTab, setActiveTab] = useState('1'); - const [collapsed, setCollapsed] = useState(true); // 添加收起状态,默认为收起 + const [collapsed, setCollapsed] = useState(true); + const resizeBoxRef = useRef(null); // 引用 ResizeBox 容器 // 处理 Tab 点击事件 const handleTabClick = (key: string) => { @@ -49,19 +50,39 @@ const LogBar: React.FC = () => { } }; + // 当 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 ( <> {tabs.map((x) => (