3.5 KiB
3.5 KiB
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、权限与上传校验。