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