docs(plans): 记录 K22 后台视觉统一回执

2026-10-19 11:14:21 +08:00
1 parent be9e381612
commit 919e749554
@@ -20,7 +20,7 @@

 ---

-## [待处理] 2026-10-19 | K22 后台管理视觉与交互统一（图标对齐客户端）
+## [已处理·待用户验收] 2026-10-19 | K22 后台管理视觉与交互统一（图标对齐客户端）

 **用户指令（2026-10-19）**：「先优化后台管理 UI 及交互；后台管理图标统一成客户端的；严格执行 specs 文档规范」。
 > 只改 `ReelShortWeb` 的视觉/交互 + `FruitServer` 的菜单图标种子 SQL；不改接口契约、业务逻辑、客户端、main。
@@ -4266,3 +4266,188 @@ cf03178 feat(flutter): 首页改为两列全部剧目网格
   预期：标题最多 2 行、类型最多 1 行，不横向溢出；空态和失败重试文案保留。

 设备侧截图、日志与最终验收结论由用户执行。
+
+## K22 后台管理视觉与交互统一
+
+### 分支与提交
+
+```text
+ReelShortWeb:
+  5c087f4 chore(admin): 合并注册限流配置项
+  97fbeda style(web): 统一后台图标与全局视觉
+  8f3447e chore(web): 合并 K22 后台视觉统一
+
+FruitServer:
+  5e55171 docs(plans): 增加 K22 后台视觉统一计划
+  c14b4cb fix(sql): 统一后台菜单图标
+  be9e381 chore(sql): 合并 K22 菜单图标
+```
+
+功能提交与合并提交 author/committer 均为
+`Zhou Weidong <502333560@qq.com>`。未修改 main、客户端业务代码与 Web 接口契约。
+
+### 图标体系与扫描
+
+新增 `src/constants/icons.ts`、`src/components/AppIcon/`，并将客户端品牌图标
+复制为 `src/assets/imgs/brand-mark.png`。
+
+```text
+before-old-prefix=22
+before-el-icon=15
+before-element-plus-icons=16
+
+old-prefix=0
+el-icon=0
+element-plus-icons=0
+AppIcons unique=54 missing=0
+```
+
+页面与共享组件已不再直接引用旧 Iconify 前缀、`<el-icon>` 或
+`@element-plus/icons-vue`。剩余两处 `<Icon>` 分别是 `AppIcon` 的底层包装与
+`Icon` 自身的在线图标实现。
+
+任务书列出的 `language-rounded`、`view-column-rounded`、`lock-rounded`、
+`chevron-down-rounded` 在当前 Material Symbols JSON 中不存在，使用同语义且
+通过存在性校验的 `translate-rounded`、`combine-columns-rounded`、
+`lock-person-rounded`、`keyboard-arrow-down-rounded`。
+
+### 菜单 SQL 与接口自检
+
+已幂等执行：
+
+```text
+$ psql -d fruitshorts -v ON_ERROR_STOP=1 -f sql/data.sql
+INSERT 0 3
+INSERT 0 4
+INSERT 0 19
+INSERT 0 13
+...
+INSERT 0 4
+
+$ psql -d fruitshorts -v ON_ERROR_STOP=1 -f sql/data-phase1.sql
+DO
+INSERT 0 0
+...
+UPDATE 5
+...
+INSERT 0 0
+```
+
+目标菜单回查：
+
+```text
+ id |   title    |                    icon
+----+------------+---------------------------------------------
+  1 | 工作台     | material-symbols:dashboard-rounded
+  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
+(11 rows)
+```
+
+管理员登录后调用 `/admin/auth/menus`：
+
+```text
+工作台        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:campaign-rounded
+menus=28 icons=9 allMaterial=true
+```
+
+解读：超级管理员可见菜单接口返回的图标全部为 `material-symbols:` 前缀。
+`创作者中心`（id 26）按既有规则对超级管理员隐藏，未出现在该菜单树，但数据库
+回查已确认其图标正确。
+
+### 登录页与全局壳
+
+登录页：
+
+- 删除 `admin` / `admin123` 占位，改为三语占位文案。
+- “记住我”默认关闭，只保存用户名；退出和恢复时清理历史密码字段。
+- 支持密码框回车提交；请求与动态路由生成完成前保持 loading，防重复。
+- 品牌统一使用客户端 `splash_mark.png`，登录页与侧边栏同一资源。
+- ≤960px 压缩品牌区；实测登录卡在 1024×768、800×768、375×812 首屏完整可见。
+
+全局壳：
+
+- 深色选中菜单、当前标签、主题开关轨道统一使用主色派生 token；
+  深色选中白字对比度由 `2.78:1` 提升到 `5.00:1`。
+- 面包屑深色对比度 `11.13:1`，顶栏 `16.70:1`。
+- 标签关闭图标改用 `var(--el-text-color-secondary)`。
+- 删除 `body { min-width: 980px }` 和未使用的旧壳层死选择器。
+- 补 1200/768 断点；1024、800、375 下 `documentElement.scrollWidth`
+  分别等于视口宽度，顶栏无越界元素。
+- 用户头像/姓名读取 `userStore`，不再写死 `avatar.jpg` / `Archer`。
+- “清除缓存并且重置”弹出二次确认，取消后保持当前状态。
+- 字体、圆角、主色变量收敛；`#409eff !important` 已清零。
+
+### 门禁
+
+```text
+$ pnpm lint:eslint
+
+> fruitshorts-admin@1.0.0 lint:eslint /Users/jianghaifeng/Desktop/ReelShort/ReelShortWeb
+> eslint --fix --ext .js,.ts,.vue ./src
+```
+
+```text
+$ pnpm build:pro
+
+> fruitshorts-admin@1.0.0 build:pro /Users/jianghaifeng/Desktop/ReelShort/ReelShortWeb
+> VITE_CJS_IGNORE_WARNING=1 vite build --mode pro
+
+[warn] Circular chunk: element-plus -> vue-chunks -> element-plus. Please adjust the manual chunk logic for these chunks.
+[warn] node_modules/.pnpm/mockjs@1.1.0/node_modules/mockjs/dist/mock.js (537:22): Use of eval in "node_modules/.pnpm/mockjs@1.1.0/node_modules/mockjs/dist/mock.js" is strongly discouraged as it poses security risks and may cause issues with minification.
+
+Build successful. Please see dist-pro directory
+```
+
+解读：ESLint 零错误；构建成功。两条 warning 来自既有 chunk 配置与 mockjs 依赖，
+本批未改构建配置。
+
+### 浏览器自查
+
+Codex 已在本地开发服务完成以下自查，不作为用户验收：
+
+- 登录页：三档宽度无横向溢出；800×768 登录卡底边 `754.40`，375×812 底边
+  `772.77`，均在首屏内。
+- 登录交互：占位为“请输入用户名/请输入密码”；“记住我”默认未勾选；
+  密码框回车可进入工作台。
+- 侧边栏：1024 展开 200px、收起 64px；375 抽屉展开 200px、遮罩关闭正常。
+- 顶栏、标签页、面包屑、短剧管理工具栏均正常渲染 Material Symbols Rounded。
+- 深色/浅色切换正常；深色选中菜单与当前标签均为白字压深主色，对比度 `5.00:1`。
+- 清除缓存按钮显示“确认清除本地缓存并重新加载后台吗？”，取消有效。
+- 浏览器控制台 0 个 error；动态路由刷新期间出现 2 条既有 `No match found`
+  router warning，随路由生成完成消失，不影响页面。
+
+### 用户验收步骤与预期
+
+1. 运行 `pnpm dev`，打开 `http://127.0.0.1:3005/#/login`。
+   预期：暖色品牌登录页；用户名/密码为中文占位；“记住我”默认关闭。
+2. 输入管理员账号，在密码框直接回车。
+   预期：按钮进入 loading，随后只跳转一次工作台。
+3. 检查左侧菜单、顶栏、标签页和短剧管理页工具栏。
+   预期：图标均为 Material Symbols Rounded，无旧图标混用。
+4. 展开/收起侧栏，并打开右侧“项目配置”。
+   预期：品牌 mark 一致；主题开关边界清楚；布局无跳动。
+5. 切换到深色再切回浅色。
+   预期：菜单、面包屑、当前标签、关闭图标与开关均清晰可辨。
+6. 分别以 1024、800、375 宽度查看工作台、短剧管理和登录页。
+   预期：内容区与顶栏不横向裁切；375 可通过菜单按钮打开侧栏抽屉。
+7. 点击“清除缓存并且重置”后选择取消。
+   预期：先出现二次确认，取消后页面状态不变。
+
+最终业务验收由用户在浏览器执行。