diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index 524faf1..2c9bac5 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -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,附登录页截图)**: