diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 50e4375..7718d60 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styles from './style/sideBar.module.less'; import { ResizeBox, @@ -173,6 +173,7 @@ const SideBar: React.FC = ({ const [showModal, setShowModal] = useState(false); const [modalType, setModalType] = useState<'ADD' | 'EDIT'>('ADD'); const [currentApp, setCurrentApp] = useState(null); + const resizeBoxRef = useRef(null); // 引用第一个 ResizeBox 容器 const { menuData } = useSelector(state => state.ideContainer); const dispatch = useDispatch(); @@ -217,13 +218,14 @@ const SideBar: React.FC = ({ // 处理子菜单区域的拖拽调整大小 const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => { - setSubMenuWidth(width); + resizeBoxRef.current.style.width = `${width}px`; }; // 切换子菜单区域的收起/展开状态 const toggleSubMenu = () => { setIsSubMenuCollapsed(!isSubMenuCollapsed); - setSubMenuWidth(isSubMenuCollapsed ? 300 : 0); + const width = isSubMenuCollapsed ? 300 : 0; + resizeBoxRef.current.style.width = `${width}px`; }; // 处理菜单项点击事件 @@ -237,7 +239,7 @@ const SideBar: React.FC = ({ // 如果点击的是其他菜单项,则展开子菜单(如果已收起) if (isSubMenuCollapsed) { setIsSubMenuCollapsed(false); - setSubMenuWidth(300); + resizeBoxRef.current.style.width = `300px`; } } @@ -420,6 +422,7 @@ const SideBar: React.FC = ({ ))}