prop-ai-hr/docs/UI_REGRESSION_FIGMA_20260717.md

生产 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 状态从“部分通过”改为“高保真验收通过”。