docs(plans): 下发 K22 后台视觉与图标统一任务

2026-10-19 10:55:46 +08:00
1 parent 81c1bbb1e5
commit b025bfda36
@@ -20,6 +20,103 @@

 ---

+## [待处理] 2026-10-19 | K22 后台管理视觉与交互统一（图标对齐客户端）
+
+**用户指令（2026-10-19）**：「先优化后台管理 UI 及交互；后台管理图标统一成客户端的；严格执行 specs 文档规范」。
+> 只改 `ReelShortWeb` 的视觉/交互 + `FruitServer` 的菜单图标种子 SQL；不改接口契约、业务逻辑、客户端、main。
+> 用户会直接在浏览器验收结果。
+
+### 一、必读规范（严格执行）
+
+按顺序读：`AGENTS.md` → `CODING_STANDARDS.md` → `GIT_WORKFLOW.md` → `FruitServer/docs/api-phase1.md` §2 →
+`docs/plans/codex-研发任务清单.md` → 本 INBOX。
+
+Vue/TS 硬约束：沿用 vue-element-plus-admin 结构；eslint 零错误；`pnpm build:pro` 通过；
+新增手写源码首行 `// Author: fruit.com.cn`；函数 ≤50 行、参数 ≤5、类/文件规模红线、禁止魔法值；
+提交作者统一 `Zhou Weidong <502333560@qq.com>`。
+
+### 二、图标统一（核心）
+
+**目标**：后台所有图标统一为客户端同款 **Material Symbols Rounded**（客户端使用 Material `*_rounded`），
+不再混用 `ep:`、`ant-design:`、`mdi:`、`zmdi:`、`ion:`、`bi:`、`radix-icons:` 与 Element Plus 图标组件。
+
+1. 新增 `src/constants/icons.ts`（语义名 → Iconify 全名）与 `src/components/AppIcon`：
+   - `AppIcon` 基于现有 `Icon` 组件，默认 `material-symbols:*`，统一尺寸/颜色/描边风格；
+   - 图标名禁止散落在页面里，统一从 `AppIcons` 取。
+2. 菜单图标（`sys_menu.icon`）按以下映射落库，并同步 `FruitServer/sql/data.sql` 与 `sql/data-phase1.sql`：
+   | 菜单 | id | 新图标 |
+   | --- | --- | --- |
+   | 工作台 | 1 / 2 | `material-symbols:dashboard-rounded` |
+   | 内容管理 | 3 | `material-symbols:video-library-rounded` |
+   | 后台管理 | 6 | `material-symbols:settings-rounded` |
+   | 用户管理 | 15 | `material-symbols:group-rounded` |
+   | 创作者管理 | 17 | `material-symbols:movie-edit-rounded` |
+   | 内容治理 | 20 | `material-symbols:policy-rounded` |
+   | 订单与权益 | 22 | `material-symbols:payments-rounded` |
+   | 数据看板 | 24 | `material-symbols:monitoring-rounded` |
+   | 创作者中心 | 26 | `material-symbols:video-camera-front-rounded` |
+   | 运营管理 | 32 | `material-symbols:campaign-rounded` |
+3. 更新完 SQL 后**实际执行到开发库**（`psql -f sql/data.sql`、`psql -f sql/data-phase1.sql`，脚本必须幂等），
+   并用管理员登录后的 `GET /admin/auth/menus` 自检返回的 icon 全部为 `material-symbols:` 前缀。
+4. 菜单管理页图标候选改为上述合法 Iconify 名；保存时统一存全名；旧的短名（`Document` 等）渲染时做映射兜底。
+5. 顶栏、标签页、表格工具栏、弹窗等共享组件 **以及 `src/views/**` 页面内所有图标**
+   （含 `<el-icon><Plus/></el-icon>`）统一替换为 `AppIcon`；移除页面内对 `@element-plus/icons-vue` 的直接引用。
+   语义映射至少包含：`menu-rounded` / `menu-open-rounded`、`fullscreen-rounded` / `fullscreen-exit-rounded`、
+   `format-size-rounded`、`language-rounded`、`dark-mode-rounded` / `light-mode-rounded`、
+   `refresh-rounded`、`close-rounded`、`chevron-left-rounded` / `chevron-right-rounded`、
+   `search-rounded`、`restart-alt-rounded`、`view-column-rounded`、`help-rounded`、`add-rounded`、
+   `edit-rounded`、`delete-rounded`、`upload-rounded`、`download-rounded`、`visibility-rounded`、
+   `arrow-upward-rounded` / `arrow-downward-rounded`、`check-rounded`、`cancel-rounded`。
+6. **品牌图标**：把客户端 `ReelShort/assets/icon/splash_mark.png` 复制为
+   `ReelShortWeb/src/assets/imgs/brand-mark.png`，侧边栏（展开/收起）与登录页统一使用该图；
+   不再使用框架默认 logo 或自绘图标。保留原 `logo.png` 文件但不再引用。
+
+### 三、登录页（`src/views/Login/**`）
+
+1. 删除默认账号/密码占位提示（`admin` / `admin123`），改走 i18n 占位文案。
+2. “记住我”默认关闭；只记住用户名，**不把密码写入 localStorage**；同步清理 user store 中登录信息的密码字段。
+3. 表单支持回车提交；登录/注册按钮在请求与动态路由生成完成前保持 loading，防止重复提交。
+4. 窄屏（≤960px）压缩品牌装饰区，保证登录卡在首屏完整可见。
+5. 登录页品牌名/副标题与侧边栏共用同一来源（环境变量 + i18n），不再写死 `FruitShorts Studio`。
+6. 视觉与客户端一致：深色暖底、辣椒红强调只用于按钮/焦点（**不整体改后台主题色**），品牌 mark 与侧边栏同尺寸同圆角。
+
+### 四、全局壳与主题
+
+1. 修复深色模式：菜单/头部浅色主题下的文字对比度、标签页关闭图标、主题开关轨道/边框、
+   面包屑当前项颜色；所有颜色走 `var(--el-*)` 或业务 token。
+2. 去掉 `body` 的 `min-width: 980px` 强约束，补 1200/768 断点；保证 1024、800、375 宽度下顶栏右侧与内容区不被裁切。
+3. 顶栏、标签页、表格工具栏、弹窗图标全部换成 Material Symbols Rounded；同一语义只用一个图标。
+4. 清理全局 CSS 冲突：
+   - 只保留一处 `:root` 字体声明（`--font-display` / `--font-body`）；
+   - 圆角收敛为 `--app-radius-sm/md/lg`（4/6/12），登录卡可单独 18；
+   - 把硬编码 `#409eff !important` 改为 `var(--el-color-primary)`；
+   - 删除/改名未使用的 `.app-shell/.sidebar/.main-area/.topbar/.brand/...` 死选择器，避免“改了不生效”。
+5. 用户信息区头像/姓名从 `userStore` 读取，不再写死 `avatar.jpg` 与 `Archer`。
+6. “清除缓存并重置”增加二次确认。
+
+### 五、明确不做（留给 K23）
+
+业务页的表格/筛选/分页统一、拦截器 reject、删除/上下架二次确认、行内防重复、表单 rules、
+权限按钮补齐、上传校验、状态标签/日期格式统一。**本批不碰这些业务交互逻辑**，避免与视觉批次混在一起。
+
+### 六、验收与门禁
+
+- `pnpm build:pro` 通过；`pnpm lint:eslint` 零错误（只跑改动文件也可，但最终全量通过）。
+- 开发库菜单 icon 已更新；`GET /admin/auth/menus` 自检全部为 `material-symbols:`。
+- 浏览器自查（Codex 自检，不作为用户验收）：登录页、侧边栏折叠/展开、顶栏、标签页、
+  深色/浅色、1024/800/375 宽度；控制台无报错。
+- 用户浏览器验收：图标风格、登录页、全局壳、深色模式、窄屏。
+
+### 七、Git 与回执
+
+- `ReelShortWeb` 从干净 `develop`（基线 `5c087f4`）拉 `feature/web-k22-admin-visual`；
+  `FruitServer` 只改 SQL 种子，单独提交并 push。
+- 完成后各自 `--no-ff` 合并回 `develop` 并 push；不动 main。
+- 计划文档 `FruitServer/docs/plans/2026-10-19-K22.md`；留痕写 `PROGRESS.md`。
+- 回执：图标映射与落库结果、登录页/全局壳改动、扫描前后对比、门禁原始输出、浏览器自查结论。
+
+---
+
 ## [已处理·待用户验收] 2026-10-19 | K21 登录页 UI 优化

 **用户指令（2026-10-19）**：「现在主要做登录页面 ui 优化」。