feat(ide): 添加侧边栏折叠功能

master
钟良源 2 months ago
parent 72b8a0f671
commit c126893a38

@ -22,7 +22,8 @@ import {
IconPlus,
IconEyeInvisible,
IconExpand,
IconShrink
IconShrink,
IconLeft
} from '@arco-design/web-react/icon';
import { menuData1, menuData2 } from './config/menuData';
import { Selected } from '@/pages/ideContainer/types';
@ -350,8 +351,7 @@ const SideBar: React.FC<SideBarProps> = ({
}
// 调用外部传入的菜单选择处理函数
// 单独针对这个title过滤
if (item.title !== '应用列表') onMenuSelect?.({ ...item });
onMenuSelect?.({ ...item });
};
// 监听 selected 状态变化,更新 activeKey
@ -879,6 +879,15 @@ const SideBar: React.FC<SideBarProps> = ({
{renderMenuItems(filteredMenu[activeKey]?.children)}
</Tree>
</div>
{/* 底部折叠按钮 */}
{!isSubMenuCollapsed && <div
className={styles['collapse-btn']}
onClick={toggleSubMenu}
title="收起侧边栏"
>
<IconLeft style={{ fontSize: 16 }} />
</div>}
</div>
</ResizeBox>}

@ -65,6 +65,8 @@
border-right: 1px solid #ddd;
position: relative;
border-left: 1px solid #ddd;
display: flex;
flex-direction: column;
.handle-box {
display: flex;
@ -72,6 +74,35 @@
}
}
.collapse-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 10;
&:hover {
background-color: #f5f5f5;
border-color: #d0d0d0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
&:active {
transform: translateX(-50%) scale(0.95);
}
}
.context-menu {
background: #fff;
border-radius: 4px;

Loading…
Cancel
Save