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(null); // 记录手动调整的宽度 + const resizeBoxRef1 = useRef(null); // 引用第一个 ResizeBox 容器 + const resizeBoxRef2 = useRef(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' && { } > {activeTab === '2' && { ); }; -export default RightSideBar; +export default RightSideBar; \ No newline at end of file