refactor(web): 侧边栏菜单改用 Ant Design Menu 组件
用 Ant Design <Menu mode="inline"> 替代自定义 div 渲染，对齐 ProLayout 体验： - buildMenuItems() 将后端 MenuInfo 树转为 Menu items 格式 - 目录图标渲染（HeartOutlined/FormOutlined 等） - 原生折叠动画 + 侧边栏折叠时 popover 子菜单 - openKeys 自动展开包含当前路由的父级 - 键盘导航 + ARIA 无障碍（Menu 内置） - 插件菜单合并为统一 Menu items - 删除 ~150 行自定义组件，清理对应 CSS Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
iven
@@ -836,6 +836,11 @@ body {
|
||||
* Layout Utilities
|
||||
* ==================================================================== */
|
||||
|
||||
/* Ant Design Menu 主题覆盖 — 侧边栏 */
|
||||
.erp-sidebar-menu {
|
||||
border-inline-end: none !important;
|
||||
}
|
||||
|
||||
.erp-sidebar-menu .ant-menu-item {
|
||||
margin: 1px 8px !important;
|
||||
border-radius: var(--erp-radius-md) !important;
|
||||
@@ -843,6 +848,13 @@ body {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
||||
.erp-sidebar-menu .ant-menu-submenu-title {
|
||||
margin: 1px 8px !important;
|
||||
border-radius: var(--erp-radius-md) !important;
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
||||
.erp-sidebar-menu .ant-menu-item-selected {
|
||||
background: var(--erp-bg-sidebar-active) !important;
|
||||
color: var(--erp-text-sidebar-active) !important;
|
||||
@@ -856,47 +868,6 @@ body {
|
||||
background: var(--erp-bg-sidebar-hover) !important;
|
||||
}
|
||||
|
||||
/* Sidebar group label */
|
||||
.erp-sidebar-group {
|
||||
padding: 16px 20px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--erp-text-tertiary);
|
||||
}
|
||||
|
||||
/* Sidebar collapsible directory group */
|
||||
.erp-sidebar-group-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--erp-text-tertiary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.erp-sidebar-group-toggle:hover {
|
||||
color: var(--erp-text-secondary);
|
||||
}
|
||||
|
||||
.erp-sidebar-group-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.erp-sidebar-group-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ====================================================================
|
||||
* MainLayout — CSS classes replacing inline styles
|
||||
* ==================================================================== */
|
||||
@@ -951,92 +922,6 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sidebar menu item */
|
||||
.erp-sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin: 1px 8px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--erp-radius-md);
|
||||
cursor: pointer;
|
||||
color: var(--erp-text-sidebar);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: background, color;
|
||||
}
|
||||
|
||||
.ant-layout-sider-collapsed .erp-sidebar-item {
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.erp-sidebar-item:hover:not(.erp-sidebar-item-active) {
|
||||
background: var(--erp-bg-sidebar-hover);
|
||||
color: var(--erp-text-primary);
|
||||
}
|
||||
|
||||
.erp-sidebar-item-active {
|
||||
background: var(--erp-bg-sidebar-active);
|
||||
color: var(--erp-text-sidebar-active);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.erp-sidebar-item-icon {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.erp-sidebar-item-label {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Sidebar sub-menu (plugin group) */
|
||||
.erp-sidebar-submenu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
margin: 6px 8px 2px 8px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--erp-radius-md);
|
||||
cursor: pointer;
|
||||
color: var(--erp-text-tertiary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.erp-sidebar-submenu-title:hover {
|
||||
background: var(--erp-bg-sidebar-hover);
|
||||
color: var(--erp-text-secondary);
|
||||
}
|
||||
|
||||
.erp-sidebar-submenu-title-active {
|
||||
color: var(--erp-text-sidebar-active);
|
||||
}
|
||||
|
||||
.erp-sidebar-submenu-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.erp-sidebar-submenu-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.erp-sidebar-item-indented {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
/* Main layout */
|
||||
.erp-main-layout {
|
||||
background: var(--erp-bg-page) !important;
|
||||
|
||||
Reference in New Issue
Block a user