style(sidebar): 优化ResizeBox行内样式覆盖setSubMenu导致拖动后无法修改宽度的问题

master
钟良源 4 months ago
parent e9fee3c0ab
commit 93d9997fee

@ -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<SideBarProps> = ({
const [showModal, setShowModal] = useState(false);
const [modalType, setModalType] = useState<'ADD' | 'EDIT'>('ADD');
const [currentApp, setCurrentApp] = useState<any>(null);
const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
const { menuData } = useSelector(state => state.ideContainer);
const dispatch = useDispatch();
@ -217,13 +218,14 @@ const SideBar: React.FC<SideBarProps> = ({
// 处理子菜单区域的拖拽调整大小
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<SideBarProps> = ({
// 如果点击的是其他菜单项,则展开子菜单(如果已收起)
if (isSubMenuCollapsed) {
setIsSubMenuCollapsed(false);
setSubMenuWidth(300);
resizeBoxRef.current.style.width = `300px`;
}
}
@ -420,6 +422,7 @@ const SideBar: React.FC<SideBarProps> = ({
))}
</div>
<ResizeBox
ref={resizeBoxRef}
directions={['right']}
style={{
width: subMenuWidth,

Loading…
Cancel
Save