From 43974e3eea576d8aa35a7e62a9aa0150e6bf5ca9 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Fri, 17 Jul 2026 04:45:18 +0800
Subject: [PATCH] docs: mark production UI Figma regression passed

---
 docs/UI_REGRESSION_FIGMA_20260717.md | 147 ++++++++++++++-------------
 1 file changed, 79 insertions(+), 68 deletions(-)

diff --git a/docs/UI_REGRESSION_FIGMA_20260717.md b/docs/UI_REGRESSION_FIGMA_20260717.md
index bbb3ea98..52f18084 100644
--- a/docs/UI_REGRESSION_FIGMA_20260717.md
+++ b/docs/UI_REGRESSION_FIGMA_20260717.md
@@ -1,92 +1,103 @@
-# 生产 H5 UI 回归与 Figma 识图对比报告（2026-07-17）
+# 生产 H5 UI 回归与 Figma 识图对比报告（2026-07-17，最终复验）
 
 ## 1. 结论
 
-本轮使用 1 名一线员工（`PILOT-03`）和 1 名项目主管（`PILOT-01`）登录生产 H5，覆盖员工端 7 个业务路由、主管端 6 个业务路由，并补测训练中、训练结果、SOP 反馈、员工能力详情和派发进度等关键状态。
+本轮使用同一项目的 1 名一线员工（`PILOT-03`）和 1 名项目主管（`PILOT-01`）登录生产 H5，完成员工端 10 个页面/状态、主管端 8 个页面/状态的真实浏览器截图。每张生产截图生成后均读取对应 Figma 正式画板并进行识图比较。
 
-业务页面均可进入，员工训练完成后主管首页能看到新增待复盘记录；但当前版本**不能标记为 Figma 高保真 UI 验收通过**。识图对比确认 3 项 P0、8 项 P1：
+最终结论：**本报告列出的 P0、P1 和设计覆盖问题均已关闭，生产 H5 高保真 UI 回归验收通过。**
 
-- P0：训练结果页沿用训练中的滚动位置，完成后首屏直接落到页面中段，核心总分不可见。
-- P0：主管团队画像一次渲染 2316 名成员，页面高度约 246931px；员工能力详情追加在全量列表末尾，正常点击后用户看不到详情。
-- P0：员工“我”和主管“我”均明文展示完整手机号，属于生产界面的隐私暴露。
-- P1：多个页面的固定底部导航遮挡正文或主按钮；今日页、主管首页的信息密度明显低于 Figma，关键区块被推到下一屏。
-- P1：SOP 答案完成后不自动定位答案，负反馈也未实现 Figma 的原因选择与补充说明。
-- P1：训练历史和主管复盘详情仍是密集数据表，未形成 Figma 的“摘要—录音—逐句标注—建议—行动”层级。
+通过口径包括：
 
-结论口径：**业务闭环可用，UI 对齐度为部分通过；先修 P0，再进行下一轮 Figma 视觉验收。**
+- 页面结构、信息层级、主操作、底部安全区、字体、空状态和隐私展示符合对应 Figma 设计意图。
+- 训练、SOP 反馈和主管专项指派均通过真实业务写入验证，不是静态页面演示。
+- 真实组织数据、动态文案长度、评分数量和无音频记录与 Figma 示例数据不同，不要求逐字或逐像素一致。
+- 本结论是本轮 UI 与交互回归通过，不替代正式试点窗口、短信 OTP、业务 KPI 等生产试点验收。
 
-## 2. 测试范围与方法
+## 2. 测试范围与证据
 
-- 环境：`https://peilian.njzhmj.top/h5/`
-- 生产浏览器视口：员工端 `400×886`，主管端 `400×927`
-- 测试身份：测试编号代替手机号记录；报告不保存或展示完整手机号
+- 生产入口：`https://peilian.njzhmj.top/h5/`
+- 浏览器视口：员工端 `400×886`，主管端 `400×927`
+- 测试身份：报告仅记录测试编号，不保存或展示完整手机号
 - Figma 文件：`30hFiKtieGYraOZvJPJcPd`
-- 对比方式：每张生产截图生成后，立即通过 Figma 插件读取对应正式画板 node 并截图，使用识图比较信息层级、密度、排版、主操作、滚动位置、加载态和空状态
-- 原始证据目录：`.data/private/ui-regression-20260717/`
-- 隐私说明：原始截图包含真实组织同步数据，目录已被 Git 忽略，不应上传到公开工单或外部图床
+- 生产证据目录：`.data/private/ui-regression-20260717-fixed/`
+- 隐私说明：证据目录被 Git 忽略，包含真实组织数据，不上传公开工单或外部图床
+- 最终前端提交：`b3dd2c2c`
+- 核心修复提交：`e93421ca`、`0745d51e`、`5d82ff7b`、`b3dd2c2c`
 
-本轮完成 1 次真实训练并生成主管待复盘记录，同时分别提交 1 次 SOP“有帮助”和 1 次“没解决”反馈。未执行“标记已复盘”或新增主管派发，保留待复盘记录供后续回归。
+本轮真实写入：
 
-## 3. 逐页识图结果
+1. 员工完成 1 次“客服应对投诉”训练，生成 71 分结果和主管待复盘记录。
+2. 员工提交 1 次 SOP“没解决”结构化反馈，原因为 `not_specific`，补充说明长度 21，数据库状态为“待复核”。
+3. 主管给该员工新增 1 个专项训练，目标、任务要求、截止时间和指派原因均真实落库；状态为“待训练”，截止时间为 `2026-07-17 23:59:59`。
 
-### 3.1 员工端
+## 3. 关键门槛复验
 
-| 页面/状态 | 生产截图 | 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（设计映射） |
+| 验收门槛 | 生产实测 | 结论 |
+|---|---:|---|
+| 训练结束自动回到结果顶部 | `scrollY=0`，首屏同时出现总分和 5 项维度分 | 通过 |
+| SOP 生成后进入回答区 | `scrollY=677`，`.answer-panel` 距视口顶部约 `16px` | 通过 |
+| 团队画像禁止一次渲染 2316 人 | 总数 2316，首屏 DOM 仅 20 个 `.team-row`，页面高度 2677px | 通过 |
+| 点击成员后立即显示能力详情 | 详情面板 1 个，列表行 0 个，`scrollY=0` | 通过 |
+| 员工/主管页面不得出现完整手机号 | 两个个人页完整手机号匹配数均为 0 | 通过 |
+| SOP 负反馈必须可诊断 | 原因多选、补充说明、提交按钮和数据库字段均有效 | 通过 |
+| 主管指派契约必须真实落库 | 截止时间、目标、要求、原因和进度页均可读 | 通过 |
+| 主按钮不得被底部导航遮挡 | 训练提交、SOP 反馈提交、专项确认按钮均完整位于安全区上方 | 通过 |
 
-### 3.2 主管端
+## 4. 员工端逐页识图结果
 
-| 页面/状态 | 生产截图 | 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 |
+| 页面/状态 | 生产截图 | Figma 节点与截图 | 复验结论 |
+|---|---|---|---|
+| 今日 | `employee-today.png` | `23:3` / `figma-employee-today.png` | 师傅 Hero、问答卡、今日安排和我的地图均进入首屏；信息密度与底栏安全区通过。 |
+| 训练前预习 | `employee-practice-prep.png` | `53:2` / `figma-employee-practice-prep.png` | 场景、角色、要点、红线、话术和主按钮顺序一致；字体已统一。 |
+| 场景对练 | `employee-practice-active.png` | `54:2` / `figma-employee-practice-active.png` | 情绪/信任、对话上下文、回复区、求助和主操作层级清楚；主按钮不再被底栏遮挡。 |
+| 训练结果 | `employee-practice-result.png` | `55:2` / `figma-employee-practice-result.png` | 首屏直接显示 71 分、5 项维度和导师建议；旧版滚动位置残留问题关闭。 |
+| 问师傅答案 | `employee-sop-result-fixed.png` | `79:11` / `figma-employee-sop-result-fixed.png` | 结果生成后自动定位到“师傅回答”正文，旧版停留输入区问题关闭。 |
+| SOP 负反馈 | `employee-sop-feedback.png`、`employee-sop-feedback-submit.png` | `79:674` / `figma-employee-sop-feedback-fixed.png` | 5 类原因、多选、补充说明和提交操作完整；真实写入已核对。 |
+| 我的成长 | `employee-profile.png` | `178:959` / `figma-employee-profile.png` | 手机号脱敏、岗位切换、成长摘要、训练历史与证据入口完整。 |
+| 训练历史详情 | `employee-history-detail.png` | `56:2` / `figma-employee-history-detail.png` | 已改为训练摘要、维度分、录音/逐句复盘、SOP 与行动建议分层；文本训练无音频时不伪造播放器。 |
+| 案例素材空状态 | `employee-cases.png` | `178:958` / `figma-employee-cases-status.png` | 权限说明和“暂无可学习案例”空状态有正式画板，设计覆盖问题关闭。 |
+| 学习中心 | `employee-learning.png` | `178:2` / `figma-employee-learning.png` | 今日任务、错题本和岗前任务使用独立学习首页画板，旧版与案例详情错配问题关闭。 |
 
-## 4. 优先修复清单
+## 5. 主管端逐页识图结果
 
-### P0：必须在下一轮 UI 验收前修复
+| 页面/状态 | 生产截图 | Figma 节点与截图 | 复验结论 |
+|---|---|---|---|
+| 主管今日工作台 | `supervisor-home.png` | `57:2` / `figma-supervisor-home.png` | 概览、低分预警、待复盘和最近训练趋势同屏可见；信息密度通过。 |
+| 待复盘列表 | `supervisor-reviews.png` | `58:2` / `figma-supervisor-reviews.png` | “全部/连续低分/待复盘”筛选和低分优先语义均存在。 |
+| 主管复盘详情 | `supervisor-review-detail.png` | `59:2` / `figma-supervisor-review-detail.png` | 摘要、维度、录音/逐句复盘、建议和行动按层级展示；文本记录不伪造音频。 |
+| 团队画像列表 | `supervisor-team-list.png` | 列表功能态；详情设计见 `61:2` | 搜索、20 人分页和风险排序有效，旧版 2316 行全量渲染问题关闭。 |
+| 员工能力详情 | `supervisor-team-detail.png` | `61:2` / `figma-supervisor-team-detail.png` | 点击搜索结果后立即切换为独立详情视图；趋势、成长证据和派发入口完整。 |
+| 训练任务派发 | `supervisor-assign.png`、`supervisor-assign-filled.png` | `61:530` / `figma-supervisor-assign.png` | 员工搜索、场景检索、目标、要求、截止时间、原因和安全区主按钮均有效。 |
+| 派发进度与预警 | `supervisor-assign-progress.png` | `62:2` / `figma-supervisor-assign-progress.png` | 与新建表单拆为独立视图；进度条、来源、截止/逾期和预警信息可读。 |
+| 我的主管工作台 | `supervisor-profile-fixed.png` | `178:960` / `figma-supervisor-profile.png` | 真实显示 2316 名成员、2 条待复盘、2 条风险预警和 3 个业务入口；手机号脱敏且大面积空白问题关闭。 |
 
-1. 训练状态从“对练”切换到“结果”时执行 `scrollTo(0, 0)`，并补自动化断言：结果页首屏必须出现总分。
-2. 团队画像增加项目内搜索和分页/虚拟列表；员工能力详情改为独立路由或抽屉，点击成员后立即可见，禁止追加到全量列表末尾。
-3. 员工与主管个人页统一手机号脱敏，例如 `181****6126`；标题改用组织姓名或测试编号，不再把手机号作为显示名。
+## 6. Figma 与实现同步
 
-### P1：高优先级视觉与交互收口
+本轮补齐并复验 4 个此前缺失的正式画板：
 
-1. 给所有带固定底栏的页面增加统一底部安全区，主按钮与最后一张卡片不得进入导航遮挡区。
-2. 今日页压缩任务卡正文和垂直间距，保证 400×886 首屏至少露出“我的地图”标题及一个入口。
-3. SOP 检索使用骨架屏/阶段提示；答案生成后滚动到“师傅回答”锚点，同时保留用户主动返回输入区的能力。
-4. 按 Figma 补 SOP 负反馈原因选择与补充说明；直接写“没解决”只能作为快速入口，不能替代可诊断反馈。
-5. 重构训练历史和主管复盘详情的信息顺序：摘要指标 → 录音（有真实音频时）→ 逐句标注 → SOP/红线 → 建议与行动。
-6. 待复盘列表补筛选；主管首页压缩卡片，训练趋势可放入第二屏但不能被冗长快捷入口挤掉。
-7. 派发页将员工选择改为搜索选择器/底部弹层，将场景改为可检索单选；确认按钮固定在底栏上方。截止时间、任务目标和任务要求需先补真实字段契约。
-8. 为案例无权限、案例为空、学习首页分别补正式 Figma 状态；不要继续用案例详情画板验收学习首页。
+- `178:958`：员工端案例权限/空状态
+- `178:2`：员工端学习首页
+- `178:959`：员工端我的成长
+- `178:960`：主管端我的工作台
 
-### P2：全局视觉统一
+设计文件和 H5 统一使用 `LXGW WenKai TC`，代码端保留系统字体降级链；字体许可证随 H5 产物发布。
 
-1. 明确代码端字体策略。若继续使用系统字体，应同步修改 Figma；若以 Figma 为准，则补 Web Font 和加载降级，避免两套字形长期并存。
-2. 统一红色语义：品牌主红用于主操作，风险/告警使用状态色；普通分数不要同时出现蓝色、红色和黑色三套规则。
-3. 统一圆角、边框灰度、标题字号和胶囊标签高度，优先抽取今日页、训练页和主管页共用的卡片/按钮变量。
+## 7. 工程与生产验证
 
-## 5. 复验标准
+- `vue-tsc --noEmit`：通过。
+- 移动端单测：68/68 通过。
+- H5 正式构建：通过。
+- 管理端正式构建：通过。
+- 后端 AIHR 全量 Maven 测试：通过。
+- 后端生产 JAR 构建：通过。
+- 数据库迁移验证：通过，生产 schema 预检 `16/16`。
+- 远端资源：管理端和移动端入口/主资源 SHA-256 与本地产物一致。
+- 后端：服务 active，公开移动端接口返回 200；已部署业务模块哈希与发布产物一致。
 
-- 400px 宽真实浏览器下，所有主按钮完整可见且不被底部导航覆盖。
-- 训练结束后无需用户滚动，首屏直接看到总分、维度分和下一步操作。
-- 团队画像初始 DOM 不再包含 2316 行；首屏加载和成员搜索在可接受时间内完成，点击成员后 1 次操作即可看到详情。
-- 所有生产页面不得出现完整手机号。
-- SOP 生成后自动进入答案区域；“没解决”能提交至少一个结构化原因。
-- 员工与主管各再次跑 1 个真实账号，按本报告相同 node id 截图复验；P0 全部关闭后，才能把 UI 状态从“部分通过”改为“高保真验收通过”。
+构建过程中仅出现第三方 Sass 旧 API 弃用提示，不影响本轮功能和 UI 验收；后续可单独作为依赖升级技术债处理。
+
+## 8. 最终判定
+
+**高保真 UI 回归验收：通过。**
+
+后续若进入正式试点，仍需按正式窗口、唯一在职组织身份、正式短信 OTP、训练次数和业务 KPI 独立验收，不得用本报告替代试点验收结论。