From b025bfda3622057e165cbd265328ff2294ebc2f3 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Mon, 19 Oct 2026 10:55:46 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E4=B8=8B=E5=8F=91=20K22=20?= =?UTF-8?q?=E5=90=8E=E5=8F=B0=E8=A7=86=E8=A7=89=E4=B8=8E=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BB=BB=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/INBOX.md | 97 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index e9534b7..d021e47 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -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/**` 页面内所有图标** + （含 ``）统一替换为 `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 优化」。