|
|
|
|
@ -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,
|
|
|
|
|
|