79 lines
3.5 KiB
Markdown
79 lines
3.5 KiB
Markdown
# 2026-10-19 K22 后台管理视觉与交互统一
|
||
|
||
## 基线
|
||
|
||
- ReelShortWeb `develop`: `5c087f4`
|
||
- FruitServer `develop`: `b025bfd`
|
||
- 只改 Web 视觉/交互与 FruitServer 菜单图标 SQL，不改接口、客户端、main。
|
||
|
||
## 图标体系
|
||
|
||
1. 新增 `src/constants/icons.ts`：
|
||
- `AppIcons` 保存语义名到 `material-symbols:*-rounded` 的映射；
|
||
- `normalizeAppIcon()` 兼容后端旧短名和历史 Iconify 名；
|
||
- `MenuIconOptions` 供菜单管理页选择。
|
||
2. 新增 `src/components/AppIcon`：
|
||
- 复用现有 `Icon` 组件；
|
||
- 默认尺寸 18，支持颜色/悬停色；
|
||
- 全局注册 `AppIcon`。
|
||
3. 替换 `src/components/**`、`src/views/**` 的旧图标前缀与 Element Plus 图标组件。
|
||
4. 对 `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、权限与上传校验。
|