docs(plans): 下发 K23 后台视觉深化任务
This commit is contained in:
Zhou Weidong authored and trae-solo-agent committed
1 parent
ce655ce5db
commit
9c96e18672
1 file changed
+100
@@ -20,6 +20,106 @@
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-19 | K23 后台视觉深化：主色、菜单、编辑弹窗与锁屏
|
||||
|
||||
**用户指令（2026-10-19，附三张截图）**：「现在着重优化 UI 及交互」。
|
||||
截图问题：
|
||||
1. 左侧菜单子项无图标、缩进/行高/选中态不统一；
|
||||
2. 短剧编辑弹窗里封面直接暴露超长 URL，数字输入框布局松散；
|
||||
3. 锁定屏幕弹窗标题被分隔线穿过、右上角图标错位、缺少取消入口。
|
||||
> 只改 `ReelShortWeb` 视觉/交互 + `FruitServer` 菜单图标种子 SQL；不改接口契约、后端业务、客户端、main。
|
||||
|
||||
### 一、主色统一为品牌辣椒红
|
||||
|
||||
- `src/styles/business/theme.css` 的 `--el-color-primary` 由 `#409eff` 改为 `#c4322a`，
|
||||
同步 `light-3/5/7/8/9`、`dark-2`（参考值：`#d3615b / #e19995 / #f0c2c0 / #f5d9d8 / #faeeed / #9d2822`）。
|
||||
- 按钮、开关、链接、选中菜单、标签页激活态、焦点环统一走 `var(--el-color-primary)`；
|
||||
检查白字/红底、红字/白底对比度 ≥ 4.5:1；成功/警告/危险语义色保持不变。
|
||||
- 登录页品牌色已用 `--app-brand`，保持不变；全站不再出现默认 Element 蓝。
|
||||
|
||||
### 二、左侧菜单
|
||||
|
||||
1. **子菜单图标落库**（`sys_menu.icon`，同步 `sql/data.sql` 与 `sql/data-phase1.sql`，并实际执行到开发库）：
|
||||
| 菜单 | id | 图标 |
|
||||
| --- | --- | --- |
|
||||
| 短剧管理 | 4 | `material-symbols:movie-rounded` |
|
||||
| 剧集管理 | 5 | `material-symbols:playlist-play-rounded` |
|
||||
| 轮播图管理 | 12 | `material-symbols:view-carousel-rounded` |
|
||||
| 类型管理 | 13 | `material-symbols:category-rounded` |
|
||||
| 角色权限配置 | 7 | `material-symbols:admin-panel-settings-rounded` |
|
||||
| 管理员用户列表 | 8 | `material-symbols:manage-accounts-rounded` |
|
||||
| 菜单管理 | 9 | `material-symbols:account-tree-rounded` |
|
||||
| 角色分类 | 10 | `material-symbols:label-rounded` |
|
||||
| 系统设置 | 11 | `material-symbols:tune-rounded` |
|
||||
| 操作日志 | 14 | `material-symbols:history-rounded` |
|
||||
| App 用户 | 16 | `material-symbols:person-rounded` |
|
||||
| 创作者入驻 | 18 | `material-symbols:person-add-rounded` |
|
||||
| 内容审核 | 19 | `material-symbols:fact-check-rounded` |
|
||||
| 评论与举报 | 21 | `material-symbols:gavel-rounded` |
|
||||
| 订单管理 | 23 | `material-symbols:receipt-long-rounded` |
|
||||
| 运营大盘 | 25 | `material-symbols:analytics-rounded` |
|
||||
| 我的作品 | 27 | `material-symbols:video-library-rounded` |
|
||||
| 收费配置 | 29 | `material-symbols:sell-rounded` |
|
||||
| 数据看板 | 30 | `material-symbols:analytics-rounded` |
|
||||
| 商品配置 | 31 | `material-symbols:inventory-2-rounded` |
|
||||
| 系统公告 | 33 | `material-symbols:notifications-active-rounded` |
|
||||
所有图标名必须存在于 `node_modules/@iconify/json/json/material-symbols.json`；
|
||||
菜单管理页的图标候选同步补齐。
|
||||
2. **菜单样式**（新增到业务样式，作用域限定 `#v-menu`）：
|
||||
- 行高 44px（不要当前的超高行距），左右 margin 8px，圆角 8px；
|
||||
- 图标 18px，文字 14px，图标与文字间距 8px；
|
||||
- 子菜单统一缩进（图标起始 28px 左右），父子对齐；
|
||||
- 选中态：浅主色底 + 主色文字（暗色模式用深主色 + 白字），悬浮态同色系更淡；
|
||||
- 父级展开/激活、折叠态、popper 子菜单都要一致，不出现“只有文字没有图标”的项。
|
||||
|
||||
### 三、短剧编辑弹窗（`DramaManagementView.vue`）
|
||||
|
||||
1. 弹窗宽 680px，`close-on-click-modal=false`，内容区可滚动、底部按钮固定；
|
||||
表单分三块：`基础信息`（名称/类型/简介）、`付费设置`（免费集数/单集解锁金币/是否热门）、`封面`。
|
||||
2. 数字输入：`el-input-number` 固定宽 180、`controls-position="right"`，两列等宽对齐。
|
||||
3. **封面编辑器重做**：
|
||||
- 左侧 2:3 预览（约 96×128），无封面时显示虚线占位；
|
||||
- 右侧显示状态 chip（已上传/未上传）、文件名（只显示 basename，不显示完整路径）、
|
||||
`更换封面` / `移除` 操作；上传中显示进度遮罩；
|
||||
- **不再展示原始 URL 输入框**；如需查看，提供“查看原图”链接在新窗口打开；
|
||||
- 上传前校验类型（jpg/png/webp）与大小（≤5MB），失败在弹窗内提示并可重试；
|
||||
- `移除` 只清空本地表单，保存后生效。
|
||||
4. 表单加 `:model` + `:rules`（名称必填、类型必选），保存时 `validate()`，错误显示在字段下方；
|
||||
保留现有保存接口与字段，不改 payload。
|
||||
5. 保存按钮 loading/disabled 防重复（已有 `saving`，补齐禁用与关闭保护）。
|
||||
|
||||
### 四、锁定屏幕弹窗（`LockDialog.vue`）
|
||||
|
||||
- 宽度 440，`max-height` 调整到 320–360，去掉全屏按钮（该弹窗不需要全屏）。
|
||||
- 重做头部：标题左对齐、无穿过的分隔线、关闭按钮右对齐；标题下加一行说明“输入密码解锁当前会话”。
|
||||
- 内容居中：头像 64、姓名 14、密码框 100% 宽；密码框支持回车提交。
|
||||
- 底部：`取消`（关闭）+ `锁定`（primary，宽度不小于 96）。
|
||||
- 删除 `console.log('set: ', val)`，不改变锁定逻辑。
|
||||
|
||||
### 五、交互与一致性
|
||||
|
||||
- 弹窗统一：标题/内容/底部间距、圆角、按钮高度（36/40）、暗色模式可读。
|
||||
- 破坏性操作不新增逻辑；本批只做视觉与上述表单交互。
|
||||
- 不修改接口、不新增权限点、不改业务流程。
|
||||
|
||||
### 六、验收与门禁
|
||||
|
||||
- `pnpm lint:eslint` 零错误；`pnpm build:pro` 通过。
|
||||
- 开发库子菜单 icon 已更新；`GET /admin/auth/menus` 自检子菜单 icon 非空且为 `material-symbols:`。
|
||||
- 浏览器自查（不作为用户验收）：登录页/工作台/短剧管理/锁定屏幕；1024 与 375 宽度；
|
||||
暗色/浅色；控制台 0 error、0 404。
|
||||
- 用户浏览器验收：菜单图标与行距、红色主色、短剧编辑弹窗封面、锁屏弹窗。
|
||||
|
||||
### 七、Git 与回执
|
||||
|
||||
- `ReelShortWeb` 从干净 `develop`（基线 `3e8312e`）拉 `feature/web-k23-admin-polish`；
|
||||
`FruitServer` 只改菜单图标 SQL 种子，单独提交并 push。
|
||||
- 完成后各自 `--no-ff` 合并回 `develop` 并 push；作者 `Zhou Weidong <502333560@qq.com>`。
|
||||
- 计划文档 `FruitServer/docs/plans/2026-10-19-K23.md`；留痕写 `PROGRESS.md`。
|
||||
- 回执：主色变量、子菜单图标落库结果、弹窗改动、门禁原始输出、浏览器自查结论。
|
||||
|
||||
---
|
||||
|
||||
## [已处理·待用户验收] 2026-10-19 | K22.1 后台收尾：登录文案、图标残留与文件清理
|
||||
|
||||
**用户反馈（2026-10-19，附登录页截图）**：
|
||||
|
||||
Reference in new issue
Block a user