From 919e7495546c0f58ecf0d466c267dffaabb011d1 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Mon, 19 Oct 2026 11:14:21 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E8=AE=B0=E5=BD=95=20K22=20?= =?UTF-8?q?=E5=90=8E=E5=8F=B0=E8=A7=86=E8=A7=89=E7=BB=9F=E4=B8=80=E5=9B=9E?= =?UTF-8?q?=E6=89=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/INBOX.md | 2 +- docs/plans/PROGRESS.md | 185 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+), 1 deletion(-) diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index d021e47..5581148 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -20,7 +20,7 @@ --- -## [待处理] 2026-10-19 | K22 后台管理视觉与交互统一（图标对齐客户端） +## [已处理·待用户验收] 2026-10-19 | K22 后台管理视觉与交互统一（图标对齐客户端） **用户指令（2026-10-19）**：「先优化后台管理 UI 及交互；后台管理图标统一成客户端的；严格执行 specs 文档规范」。 > 只改 `ReelShortWeb` 的视觉/交互 + `FruitServer` 的菜单图标种子 SQL；不改接口契约、业务逻辑、客户端、main。 diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index 3321b96..f317e87 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -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 前缀、`` 或 +`@element-plus/icons-vue`。剩余两处 `` 分别是 `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. 点击“清除缓存并且重置”后选择取消。 + 预期：先出现二次确认，取消后页面状态不变。 + +最终业务验收由用户在浏览器执行。