docs: add production UI Figma regression report

This commit is contained in:
2026-07-17 02:29:21 +08:00
parent 6edff99b08
commit a822b22116
2 changed files with 93 additions and 0 deletions
+1
View File
@@ -11,6 +11,7 @@
| [FIGMA_DESIGN_SYSTEM_GUIDE.md](FIGMA_DESIGN_SYSTEM_GUIDE.md) | 员工端通用视觉元素、业务元素、状态映射和 LLM 组页规则 | | [FIGMA_DESIGN_SYSTEM_GUIDE.md](FIGMA_DESIGN_SYSTEM_GUIDE.md) | 员工端通用视觉元素、业务元素、状态映射和 LLM 组页规则 |
| [FIGMA_IMPLEMENTATION_MATRIX.md](FIGMA_IMPLEMENTATION_MATRIX.md) | 70 张正式画板与代码/线上实现状态、二期边界和剩余动作 | | [FIGMA_IMPLEMENTATION_MATRIX.md](FIGMA_IMPLEMENTATION_MATRIX.md) | 70 张正式画板与代码/线上实现状态、二期边界和剩余动作 |
| [FIGMA_ONLINE_DELTA.md](FIGMA_ONLINE_DELTA.md) | Figma 目标与线上 H5 实测差异矩阵、当前实施边界和验收口径 | | [FIGMA_ONLINE_DELTA.md](FIGMA_ONLINE_DELTA.md) | Figma 目标与线上 H5 实测差异矩阵、当前实施边界和验收口径 |
| [UI_REGRESSION_FIGMA_20260717.md](UI_REGRESSION_FIGMA_20260717.md) | 员工/主管生产 H5 逐页截图与 Figma 识图回归、P0/P1 差异和复验标准 |
| [DEMO_ACCEPTANCE.md](DEMO_ACCEPTANCE.md) | 一期 MVP 演示脚本、录屏兜底、MVP 演示流验收清单 | | [DEMO_ACCEPTANCE.md](DEMO_ACCEPTANCE.md) | 一期 MVP 演示脚本、录屏兜底、MVP 演示流验收清单 |
| [API_INTEGRATION.md](API_INTEGRATION.md) | 后端 API 对接顺序、正式试点 CSV、移动端训练记录/复盘详情、候选资料上传/审核、SOP 上传解析接口 | | [API_INTEGRATION.md](API_INTEGRATION.md) | 后端 API 对接顺序、正式试点 CSV、移动端训练记录/复盘详情、候选资料上传/审核、SOP 上传解析接口 |
| [RUOYI_AI_INCREMENTAL_MIGRATION.md](RUOYI_AI_INCREMENTAL_MIGRATION.md) | 从 `ageerle/ruoyi-ai` 分片迁移知识库、模型能力、文档解析、Qdrant/RAG 和 chat 的执行边界 | | [RUOYI_AI_INCREMENTAL_MIGRATION.md](RUOYI_AI_INCREMENTAL_MIGRATION.md) | 从 `ageerle/ruoyi-ai` 分片迁移知识库、模型能力、文档解析、Qdrant/RAG 和 chat 的执行边界 |
+92
View File
@@ -0,0 +1,92 @@
# 生产 H5 UI 回归与 Figma 识图对比报告(2026-07-17)
## 1. 结论
本轮使用 1 名一线员工(`PILOT-03`)和 1 名项目主管(`PILOT-01`)登录生产 H5,覆盖员工端 7 个业务路由、主管端 6 个业务路由,并补测训练中、训练结果、SOP 反馈、员工能力详情和派发进度等关键状态。
业务页面均可进入,员工训练完成后主管首页能看到新增待复盘记录;但当前版本**不能标记为 Figma 高保真 UI 验收通过**。识图对比确认 3 项 P0、8 项 P1:
- P0:训练结果页沿用训练中的滚动位置,完成后首屏直接落到页面中段,核心总分不可见。
- P0:主管团队画像一次渲染 2316 名成员,页面高度约 246931px;员工能力详情追加在全量列表末尾,正常点击后用户看不到详情。
- P0:员工“我”和主管“我”均明文展示完整手机号,属于生产界面的隐私暴露。
- P1:多个页面的固定底部导航遮挡正文或主按钮;今日页、主管首页的信息密度明显低于 Figma,关键区块被推到下一屏。
- P1:SOP 答案完成后不自动定位答案,负反馈也未实现 Figma 的原因选择与补充说明。
- P1:训练历史和主管复盘详情仍是密集数据表,未形成 Figma 的“摘要—录音—逐句标注—建议—行动”层级。
结论口径:**业务闭环可用,UI 对齐度为部分通过;先修 P0,再进行下一轮 Figma 视觉验收。**
## 2. 测试范围与方法
- 环境:`https://peilian.njzhmj.top/h5/`
- 生产浏览器视口:员工端 `400×886`,主管端 `400×927`
- 测试身份:测试编号代替手机号记录;报告不保存或展示完整手机号
- Figma 文件:`30hFiKtieGYraOZvJPJcPd`
- 对比方式:每张生产截图生成后,立即通过 Figma 插件读取对应正式画板 node 并截图,使用识图比较信息层级、密度、排版、主操作、滚动位置、加载态和空状态
- 原始证据目录:`.data/private/ui-regression-20260717/`
- 隐私说明:原始截图包含真实组织同步数据,目录已被 Git 忽略,不应上传到公开工单或外部图床
本轮完成 1 次真实训练并生成主管待复盘记录,同时分别提交 1 次 SOP“有帮助”和 1 次“没解决”反馈。未执行“标记已复盘”或新增主管派发,保留待复盘记录供后续回归。
## 3. 逐页识图结果
### 3.1 员工端
| 页面/状态 | 生产截图 | Figma 对照 | 识图结论 | 优先级 |
|---|---|---|---|---|
| 今日 | `employee-today-viewport.png` | `23:3`,`figma-employee-today.png` | 品牌头部、师傅 Hero、问答卡和任务卡结构一致;生产首屏只显示到“今日安排”,Figma 同高度已完整展示“我的地图”和底部导航。生产任务卡过高、正文过长,首屏核心入口密度不足。 | P1 |
| 训练前预习 | `employee-practice-entry-viewport.png` | `53:2`,`figma-employee-practice-prep.png` | 页面标题、场景标签、角色、要点、红线、话术和主按钮顺序基本一致,是本轮对齐度最高的页面。生产使用系统无衬线字体,Figma 使用统一设计字体;动态岗位与场景内容差异不作为 UI 缺陷。 | 通过,P2 微调 |
| 场景对练 | `employee-practice-active.png`、`employee-practice-active-round3.png` | `54:2`,`figma-employee-practice-active.png` | 情绪/信任、对话、求助和风格重生成能力已存在;生产首轮以大文本框和工具按钮为主,Figma 以对话上下文、红线提示和大录音控件为主。生产主按钮与固定底栏发生遮挡,且回合上下文的视觉层级偏弱。 | P1 |
| 训练结果 | `employee-practice-result.png`、`employee-practice-result-top.png` | `55:2`,`figma-employee-practice-result.png` | 结束评分后未重置滚动位置,首屏直接落在老师傅建议/反馈中段;手动回到顶部后仅显示总分和建议,缺少 Figma 的四维评分、问题/建议/标准、导师改写对照。 | **P0** |
| 问师傅答案 | `employee-sop-result.png`、`employee-sop-result-settled.png` | `79:11`,`figma-employee-sop-result.png` | 提交 1.8 秒后仍停留“检索中”,结果随后生成,但答案从首屏下方开始,页面不自动定位。Figma 直接把“我的问题—答案—步骤—话术—引用—反馈”放入结果首屏,信息路径更短。 | P1 |
| SOP 反馈 | `employee-sop-feedback.png`、`employee-sop-negative-feedback.png` | `79:674`,`figma-employee-sop-feedback.png` | 生产点击“没解决”后直接写入反馈,仅展示成功提示;Figma 要求选择“没有回答问题/步骤不具体/引用不准/过期/不适合现场”等原因并可补充说明。当前反馈无法支撑知识库复核定位。 | P1 |
| 我的成长 | `employee-profile.png` | 无独立正式“我”画板;参考 `89:9` 工作量化看板 | 账号、岗位切换、成长分和历史入口可用;完整手机号同时作为标题和账号展示,需掩码。成长摘要采用密集文字和数字格,缺少趋势、行为分组和清晰的证据入口。 | **P0(隐私)** / P1 |
| 训练历史详情 | `employee-history-detail.png` | `56:2`,`figma-employee-history-detail.png` | 生产将五项评分和对话全文按表格纵向展开;Figma 使用顶部指标、录音、逐句标注、SOP 命中和主管建议。模拟文本训练没有录音可隐藏,但仍应保留逐句分组和摘要层级。 | P1 |
| 案例素材 | `employee-cases.png` | `79:706`,`figma-employee-cases.png` | 当前一线账号没有案例录入权限,生产展示“暂无入库案例”;Figma 只有有权限时的录音上传态。权限判断正确,但缺少正式的无权限/无案例空状态画板。 | P1(设计覆盖) |
| 学习中心 | `employee-learning.png` | `80:2`,`figma-employee-learning.png` | 生产路由是“今日任务/错题本/岗前任务”学习首页,Figma `80:2` 是单个优秀案例详情,二者不是同一页面状态。当前矩阵把学习首页和案例详情合并映射,无法做像素级验收。 | P1(设计映射) |
### 3.2 主管端
| 页面/状态 | 生产截图 | Figma 对照 | 识图结论 | 优先级 |
|---|---|---|---|---|
| 主管今日工作台 | `supervisor-home.png` | `57:2`,`figma-supervisor-home.png` | 四项概览、连续低分预警、待复盘和快捷入口结构一致;生产卡片更高、文案更长,同高度下看不到 Figma 的训练趋势,底栏覆盖快捷入口下部。 | P1 |
| 待复盘列表 | `supervisor-reviews.png` | `58:2`,`figma-supervisor-reviews.png` | 单条待办展示清楚,低分优先语义存在;缺少 Figma 的“全部/连续低分/待复盘”筛选,数据增多后无法快速定位。 | P1 |
| 主管复盘详情 | `supervisor-review-detail.png` | `59:2`,`figma-supervisor-review-detail.png` | 生产能看评分、对话、建议、贡献分和派发选项,但首屏是五项评分表,录音/逐句标注/主要行动均在下方或缺失;固定底栏覆盖对话区。 | P1 |
| 团队画像列表 | `supervisor-team.png` | `61:2`,`figma-supervisor-team-detail.png` | 生产一次渲染 2316 行、2316 个派发按钮,DOM 页面高度约 246931px;无搜索、分页或虚拟列表。Figma 是单员工能力详情,不是全量无限列表。 | **P0** |
| 员工能力详情 | `supervisor-team-detail.png` | `61:2`,`figma-supervisor-team-detail.png` | 详情确实可生成,但被追加在 2316 行列表末尾,点击后不自动定位;本轮只能通过浏览器脚本定位到详情。应改为独立详情页或抽屉,并在点击后立即进入。 | **P0** |
| 训练任务派发 | `supervisor-assign.png` | `61:530`,`figma-supervisor-assign.png` | 生产使用手机号/外部 ID、姓名、15 个场景按钮和原因输入,整页约 2255px;确认按钮被固定底栏遮挡。Figma 的员工标签、截止时间、目标和任务要求层级更清楚,但部分字段需要先补后端契约,不能只做静态 UI。 | P1 |
| 派发进度与预警 | `supervisor-assign-progress.png` | `62:2`,`figma-supervisor-assign-progress.png` | 生产已有待训练/完成/低分再练计数和真实预警,但与派发表单堆在同一长页,任务列表缺少进度条、状态筛选和逾期信息。建议拆成“新建任务/派发进度”两个视图。 | P1 |
| 我的主管工作台 | `supervisor-profile.png` | 无独立正式画板;参考 `57:2` 主管视觉系统 | 角色和可操作范围明确,但完整手机号以大号品牌红明文展示,且页面大面积空白。建议改为姓名/项目/角色主信息,手机号仅显示后四位。 | **P0(隐私)** / P1 |
## 4. 优先修复清单
### P0:必须在下一轮 UI 验收前修复
1. 训练状态从“对练”切换到“结果”时执行 `scrollTo(0, 0)`,并补自动化断言:结果页首屏必须出现总分。
2. 团队画像增加项目内搜索和分页/虚拟列表;员工能力详情改为独立路由或抽屉,点击成员后立即可见,禁止追加到全量列表末尾。
3. 员工与主管个人页统一手机号脱敏,例如 `181****6126`;标题改用组织姓名或测试编号,不再把手机号作为显示名。
### P1:高优先级视觉与交互收口
1. 给所有带固定底栏的页面增加统一底部安全区,主按钮与最后一张卡片不得进入导航遮挡区。
2. 今日页压缩任务卡正文和垂直间距,保证 400×886 首屏至少露出“我的地图”标题及一个入口。
3. SOP 检索使用骨架屏/阶段提示;答案生成后滚动到“师傅回答”锚点,同时保留用户主动返回输入区的能力。
4. 按 Figma 补 SOP 负反馈原因选择与补充说明;直接写“没解决”只能作为快速入口,不能替代可诊断反馈。
5. 重构训练历史和主管复盘详情的信息顺序:摘要指标 → 录音(有真实音频时)→ 逐句标注 → SOP/红线 → 建议与行动。
6. 待复盘列表补筛选;主管首页压缩卡片,训练趋势可放入第二屏但不能被冗长快捷入口挤掉。
7. 派发页将员工选择改为搜索选择器/底部弹层,将场景改为可检索单选;确认按钮固定在底栏上方。截止时间、任务目标和任务要求需先补真实字段契约。
8. 为案例无权限、案例为空、学习首页分别补正式 Figma 状态;不要继续用案例详情画板验收学习首页。
### P2:全局视觉统一
1. 明确代码端字体策略。若继续使用系统字体,应同步修改 Figma;若以 Figma 为准,则补 Web Font 和加载降级,避免两套字形长期并存。
2. 统一红色语义:品牌主红用于主操作,风险/告警使用状态色;普通分数不要同时出现蓝色、红色和黑色三套规则。
3. 统一圆角、边框灰度、标题字号和胶囊标签高度,优先抽取今日页、训练页和主管页共用的卡片/按钮变量。
## 5. 复验标准
- 400px 宽真实浏览器下,所有主按钮完整可见且不被底部导航覆盖。
- 训练结束后无需用户滚动,首屏直接看到总分、维度分和下一步操作。
- 团队画像初始 DOM 不再包含 2316 行;首屏加载和成员搜索在可接受时间内完成,点击成员后 1 次操作即可看到详情。
- 所有生产页面不得出现完整手机号。
- SOP 生成后自动进入答案区域;“没解决”能提交至少一个结构化原因。
- 员工与主管各再次跑 1 个真实账号,按本报告相同 node id 截图复验;P0 全部关闭后,才能把 UI 状态从“部分通过”改为“高保真验收通过”。