pref(sidebar): 优化sidebar组件的渲染逻辑,优化点击激活标签时对二级菜单的宽度设置逻辑

master
钟良源 4 months ago
parent 7aa5ed95bf
commit d3da19f695

@ -231,15 +231,18 @@ const SideBar: React.FC<SideBarProps> = ({
// 处理菜单项点击事件
const handleMenuItemClick = (item: MenuItemType, index: number) => {
setActiveKey(index);
// 如果点击的是当前已激活的菜单项,则切换子菜单的展开/收起状态
if (selected.key === `${item.key}`) {
toggleSubMenu();
}
else {
// 如果点击的是其他菜单项,则展开子菜单(如果已收起)
if (isSubMenuCollapsed) {
setIsSubMenuCollapsed(false);
resizeBoxRef.current.style.width = `300px`;
if (showSubMenu) {
// 如果点击的是当前已激活的菜单项,则切换子菜单的展开/收起状态
if (selected.key === `${item.key}`) {
toggleSubMenu();
}
else {
// 如果点击的是其他菜单项,则展开子菜单(如果已收起)
if (isSubMenuCollapsed) {
setIsSubMenuCollapsed(false);
resizeBoxRef.current.style.width = `300px`;
}
}
}
@ -330,9 +333,6 @@ const SideBar: React.FC<SideBarProps> = ({
else if (identity === 'componentDevelopment') setMenu(getMenuData());
}, [subMenuData, identity]);
useEffect(() => {
resizeBoxRef.current.style.width = `${showSubMenu ? 300 : 0}px`;
}, [showSubMenu]);
// 渲染节点的额外操作按钮
const renderNodeExtra = (node) => {
@ -422,7 +422,7 @@ const SideBar: React.FC<SideBarProps> = ({
</div>
))}
</div>
<ResizeBox
{showSubMenu && <ResizeBox
ref={resizeBoxRef}
directions={['right']}
style={{
@ -471,7 +471,7 @@ const SideBar: React.FC<SideBarProps> = ({
{renderMenuItems(menu[activeKey]?.children)}
</Tree>
</div>
</ResizeBox>
</ResizeBox>}
{/* 新增/编辑应用 */}
{showModal && (

@ -7,6 +7,8 @@
}
.menu-container {
border-right: 1px solid #cccc;
.menu-item {
padding: 12px 4px;
text-align: center;

Loading…
Cancel
Save