diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index 2c9bac5..8225558 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -37,40 +37,23 @@ 检查白字/红底、红字/白底对比度 ≥ 4.5:1;成功/警告/危险语义色保持不变。 - 登录页品牌色已用 `--app-brand`,保持不变;全站不再出现默认 Element 蓝。 -### 二、左侧菜单 +### 二、左侧菜单(口径更正:子菜单统一不用图标) -1. **子菜单图标落库**(`sys_menu.icon`,同步 `sql/data.sql` 与 `sql/data-phase1.sql`,并实际执行到开发库): - | 菜单 | id | 图标 | - | --- | --- | --- | - | 短剧管理 | 4 | `material-symbols:movie-rounded` | - | 剧集管理 | 5 | `material-symbols:playlist-play-rounded` | - | 轮播图管理 | 12 | `material-symbols:view-carousel-rounded` | - | 类型管理 | 13 | `material-symbols:category-rounded` | - | 角色权限配置 | 7 | `material-symbols:admin-panel-settings-rounded` | - | 管理员用户列表 | 8 | `material-symbols:manage-accounts-rounded` | - | 菜单管理 | 9 | `material-symbols:account-tree-rounded` | - | 角色分类 | 10 | `material-symbols:label-rounded` | - | 系统设置 | 11 | `material-symbols:tune-rounded` | - | 操作日志 | 14 | `material-symbols:history-rounded` | - | App 用户 | 16 | `material-symbols:person-rounded` | - | 创作者入驻 | 18 | `material-symbols:person-add-rounded` | - | 内容审核 | 19 | `material-symbols:fact-check-rounded` | - | 评论与举报 | 21 | `material-symbols:gavel-rounded` | - | 订单管理 | 23 | `material-symbols:receipt-long-rounded` | - | 运营大盘 | 25 | `material-symbols:analytics-rounded` | - | 我的作品 | 27 | `material-symbols:video-library-rounded` | - | 收费配置 | 29 | `material-symbols:sell-rounded` | - | 数据看板 | 30 | `material-symbols:analytics-rounded` | - | 商品配置 | 31 | `material-symbols:inventory-2-rounded` | - | 系统公告 | 33 | `material-symbols:notifications-active-rounded` | - 所有图标名必须存在于 `node_modules/@iconify/json/json/material-symbols.json`; - 菜单管理页的图标候选同步补齐。 -2. **菜单样式**(新增到业务样式,作用域限定 `#v-menu`): - - 行高 44px(不要当前的超高行距),左右 margin 8px,圆角 8px; - - 图标 18px,文字 14px,图标与文字间距 8px; - - 子菜单统一缩进(图标起始 28px 左右),父子对齐; - - 选中态:浅主色底 + 主色文字(暗色模式用深主色 + 白字),悬浮态同色系更淡; - - 父级展开/激活、折叠态、popper 子菜单都要一致,不出现“只有文字没有图标”的项。 +> 用户 2026-10-19 更正:**不是子菜单图标为空,而是子菜单统一不要图标;当前问题是没对齐、视觉不好看。** +> 不要给子菜单加图标,也不要在子菜单预留图标位置。 + +1. **子菜单图标一律清空**: + - `sys_menu` 中所有 `type='MENU'` 的子菜单 `icon` 置为空串(含 id 4/5/7/8/9/10/11/12/13/14/16/18/19/21/23/25/27/29/30/31/33); + - 同步 `sql/data.sql` 与 `sql/data-phase1.sql`,并实际执行到开发库; + - 菜单管理页保存子菜单时也不落图标(或保存后清空),避免以后又出现图标; + - 渲染层对嵌套菜单项强制不渲染图标(即使库里有历史值也只显示文字)。 +2. **对齐与视觉**(新增 `src/styles/business/menu.css`,作用域 `#v-menu`): + - 一级菜单:行高 44px,左侧 padding 16px,图标 18px,图标与文字间距 8px; + - 二级菜单:行高 40px,**文字左边缘与一级菜单文字左边缘对齐**(即一级 padding + 图标 18 + 间距 8 = 42px), + 不出现“子项文字比父项文字更靠左/更靠右”的错位; + - 二级菜单不渲染图标,也不保留空白图标位;选中/悬浮背景从文字左边缘开始,圆角 8px; + - 一级/二级的选中态、悬浮态、展开箭头、折叠态、popper 子菜单保持一致; + - 深色模式选中态用深主色底 + 白字,浅色模式浅主色底 + 主色文字;行距紧凑,不出现大块空白。 ### 三、短剧编辑弹窗(`DramaManagementView.vue`) @@ -105,7 +88,7 @@ ### 六、验收与门禁 - `pnpm lint:eslint` 零错误;`pnpm build:pro` 通过。 -- 开发库子菜单 icon 已更新;`GET /admin/auth/menus` 自检子菜单 icon 非空且为 `material-symbols:`。 +- 开发库子菜单 `icon` 已全部置空;`GET /admin/auth/menus` 自检:一级菜单有图标,二级菜单 icon 为空。 - 浏览器自查(不作为用户验收):登录页/工作台/短剧管理/锁定屏幕;1024 与 375 宽度; 暗色/浅色;控制台 0 error、0 404。 - 用户浏览器验收:菜单图标与行距、红色主色、短剧编辑弹窗封面、锁屏弹窗。