docs(plans): 更正 K23 子菜单图标口径

This commit is contained in:
Zhou Weidong authored and trae-solo-agent committed 2026-10-19 11:52:29 +08:00
1 parent 5356f24632
commit 91bbfd5622
1 file changed
+17 -34
+17 -34
View File
@@ -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。
- 用户浏览器验收:菜单图标与行距、红色主色、短剧编辑弹窗封面、锁屏弹窗。