diff --git a/docs/project_context.md b/docs/project_context.md index dfa5202..2056e53 100644 --- a/docs/project_context.md +++ b/docs/project_context.md @@ -1,5 +1,11 @@ # 项目上下文记录 +## 2026-05-18:修正折叠侧边栏菜单图标居中 + +- `frontend/src/styles.css` 的折叠侧边栏菜单项强制改为 flex 居中布局,避免 Naive Menu 折叠时透明文本列继续占据 grid 空间导致图标偏左。 +- 折叠态下隐藏菜单文本列和箭头列,并让图标容器自身水平垂直居中,保持选中背景和图标中心对齐。 +- 已执行 `npm run build`,构建通过;未启动浏览器或 headless Chrome。 + ## 2026-05-18:优化历史详情弹窗信息布局 - `frontend/src/components/HistoryPanel.vue` 打开历史详情后会自动调用 `/api/history/size` 计算占用,不再需要用户点击“计算占用”按钮。 diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b39935d..a57b124 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -248,6 +248,8 @@ select { } .n-layout-sider--collapsed .app-menu .n-menu-item-content { + display: flex; + align-items: center; justify-content: center; width: 40px; height: 40px; @@ -255,11 +257,19 @@ select { padding: 0 !important; } +.n-layout-sider--collapsed .app-menu .n-menu-item-content-header, +.n-layout-sider--collapsed .app-menu .n-menu-item-content__arrow { + display: none; +} + .n-layout-sider--collapsed .app-menu .n-menu-item-content--selected::before { display: none; } .n-layout-sider--collapsed .app-menu .n-menu-item-content__icon { + display: flex; + align-items: center; + justify-content: center; margin-right: 0 !important; }