docs(plans): 记录 K22 后台视觉统一回执
This commit is contained in:
Zhou Weidong committed
1 parent
be9e381612
commit
919e749554
2 files changed
+186
-1
No files matched your search
@@ -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. 点击“清除缓存并且重置”后选择取消。
|
||||
预期：先出现二次确认，取消后页面状态不变。
|
||||
|
||||
最终业务验收由用户在浏览器执行。
|
||||
Reference in new issue
Block a user