2026-10-19 K22 后台管理视觉与交互统一

基线

ReelShortWeb develop: 5c087f4
FruitServer develop: b025bfd
只改 Web 视觉/交互与 FruitServer 菜单图标 SQL，不改接口、客户端、main。

图标体系

新增 src/constants/icons.ts：
- AppIcons 保存语义名到 material-symbols:*-rounded 的映射；
- normalizeAppIcon() 兼容后端旧短名和历史 Iconify 名；
- MenuIconOptions 供菜单管理页选择。
新增 src/components/AppIcon：
- 复用现有 Icon 组件；
- 默认尺寸 18，支持颜色/悬停色；
- 全局注册 AppIcon。
替换 src/components/**、src/views/** 的旧图标前缀与 Element Plus 图标组件。
对 node_modules/@iconify/json/json/material-symbols.json 做存在性校验。

任务书要求的 language/view-column/lock/chevron-down 在当前 JSON 中没有对应的 *-rounded 名，实施时使用同语义且存在的 translate-rounded/combine-columns-rounded/lock-person-rounded/keyboard-arrow-down-rounded。

菜单落库

更新 sql/data.sql 与 sql/data-phase1.sql 中 id 1/2/3/6/15/17/20/22/24/26/32：

菜单	图标
工作台	`material-symbols:dashboard-rounded`
内容管理	`material-symbols:video-library-rounded`
后台管理	`material-symbols:settings-rounded`
用户管理	`material-symbols:group-rounded`
创作者管理	`material-symbols:movie-edit-rounded`
内容治理	`material-symbols:policy-rounded`
订单与权益	`material-symbols:payments-rounded`
数据看板	`material-symbols:monitoring-rounded`
创作者中心	`material-symbols:video-camera-front-rounded`
运营管理	`material-symbols:campaign-rounded`

执行两份 SQL，管理员登录后请求 /admin/auth/menus，断言所有 icon 以 material-symbols: 开头。

品牌与登录

复制客户端 splash_mark.png 为 src/assets/imgs/brand-mark.png。
Logo 组件展开/收起统一使用品牌 mark。
删除 admin/admin123 占位、记住密码持久化、固定 FruitShorts Studio。
记住我只保存用户名；store reset 时删除 loginInfo。
表单回车提交、loading 覆盖请求与动态路由、防止重复。
960 以下压缩 hero，登录卡首屏完整。

全局壳与主题

修复深色模式菜单、头部、标签关闭、主题开关、面包屑对比度。
body 去掉 min-width: 980px，补 1200/768 断点。
顶栏、标签页、表格工具栏、弹窗统一 AppIcon。
CSS token：一组字体变量、4/6/12 圆角、#409eff !important 改 var(--el-color-primary)，删除或合并未使用壳层选择器。
用户信息读取 userStore，不再使用固定 avatar/Archer。
清除缓存增加二次确认。

门禁与自查

静态扫描：无旧图标前缀、无 <el-icon>、无页面 @element-plus/icons-vue 引用。
node_modules/@iconify/json/json/material-symbols.json 逐个校验新图标。
pnpm lint:eslint 零错误。
pnpm build:pro 成功。
浏览器自查：登录页、侧边栏展开/折叠、顶栏、标签页、浅/深色、1024/800/375。

风险

图标批量替换可能影响动态图标与右键菜单，保留 normalize 兜底。
窄屏下侧栏与固定内容宽度可能冲突，优先保证内容区不裁切。
登录 loading 必须覆盖动态路由生成，避免二次提交。
本轮不碰表格、筛选、分页、拦截器、删除确认、rules、权限与上传校验。

3.5 KiB Raw Permalink Blame History Unescape Escape