1

.kiro/specs/h5-miniprogram-migration-subsequent/.config.kiro

@@ -0,0 +1 @@
+{"specId": "cd30e87b-ce7a-4ff5-8587-f5ae75013e58", "workflowType": "requirements-first", "specType": "feature"}

.kiro/specs/h5-miniprogram-migration-subsequent/design.md

@@ -0,0 +1,498 @@
+# 技术设计文档：H5 → 微信小程序像素精调
+
+## 1. 概述
+
+本设计文档为 17 个页面（共 79 个对照处理单元）的 Step 6-7 像素精调提供技术方案。所有页面已完成 Step 0-5 结构迁移（TS 零诊断、路由注册、四态处理）。
+
+核心设计思路：以「对照处理单元」为最小粒度，通过两阶段收敛流程（结构级修正 → 像素级精调）系统性消除视觉差异。
+
+参考文档（不重复，仅索引）：
+- 迁移规则与转换公式：`docs/prd/MIGRATION-PLAYBOOK.md`
+- 样式标准值：`docs/h5_ui/design-tokens.json`（颜色灰阶、字号、圆角、阴影的标准 rpx 值）
+- 工具链源码：`scripts/ops/anchor_compare.py`
+
+## 2. 截图策略
+
+### 2.1 双端参数对齐
+
+| 参数 | H5 | MP | 对比基准 |
+|------|-----|-----|---------|
+| viewport | 430×752 | 430×752（windowHeight） | 统一 |
+| DPR | 1.5 | 1.5（MCP 有效 DPR） | 统一 |
+| 输出尺寸 | 645×1128 | 645×1128 | 统一，无需缩放 |
+
+> 验证数据（2026-03-10 board-finance 实测）：H5 Playwright DPR=1.5 输出 645×1128；MP MCP screenshot 输出 645×1128。两端尺寸完全一致，无需任何缩放处理。
+
+### 2.2 固定步长滚动方案
+
+采用固定 600px 步长滚动截图，替代锚点方案。两端使用完全相同的 scrollTop 序列（0, 600, 1200, ...），不依赖锚点位置，消除 H5/MP 元素位置差异导致的对齐问题。
+
+核心参数：
+- 步长：600px（逻辑像素）
+- scrollTop 序列：从 0 开始，每次 +600，最后一屏 clamp 到 `maxScroll = scrollHeight - viewportHeight`
+- 段数计算：`N = floor(maxScroll / 600) + 1`（首屏 step-0 + 每 600px 一步 + 最后一步 clamp 到 maxScroll）；`maxScroll ≤ 10` 的页面视为单屏（N=1）
+
+实测精度（board-finance，2026-03-10）：
+- H5 端：Playwright `window.scrollTo` 精确命中目标值（偏差 0px）
+- MP 端：`wx.pageScrollTo` 精确命中目标值
+
+### 2.3 底部浮动元素处理
+
+H5 端存在 `#bottomNav`（64px fixed 底部导航）和 `.ai-float-btn-container`（56px 浮动按钮），MP 端使用原生 tabBar（不在 webview 截图中）。
+
+处理方式：H5 截图前用 JS 隐藏所有底部浮动元素：
+```javascript
+document.getElementById('bottomNav').style.display = 'none';
+document.querySelectorAll('.ai-float-btn-container').forEach(el => el.style.display = 'none');
+```
+MP 端原生 tabBar 本来不在截图中，无需处理。MP 端如果存在 AI 浮动按钮，因 H5 端已隐藏，该区域的差异在对比时可忽略，不计入差异率。
+
+### 2.4 浮动元素专项检测（结构校验阶段）
+
+长页面滚动截图中，sticky/fixed 元素（如 sticky 导航栏、筛选栏）在每一屏的相同位置出现。通过滚屏上下页对比，可以精准识别这些浮动元素的差异并专项修复。
+
+检测方法：
+1. 对同一页面的相邻屏截图进行对比，在不同屏中持续出现在相同位置的差异区域即为 sticky/fixed 元素
+2. 对 H5 vs MP 的 sticky 区域做像素对比，差异即为浮动元素的样式偏差
+3. sticky 元素差异在每一屏都会重复出现，修复一次即可消除所有屏的该区域差异
+
+适用场景：
+- board-finance：`.safe-area-top`(45px) + `#filterBar`(71px) = 116px sticky
+- board-coach/board-customer：`.board-tabs`(42px) + `.filter-bar`(68px) = 110px sticky
+- 所有带 sticky 头部的长页面
+
+优化效果：修复 sticky 区域差异后，所有屏的差异率会同步下降（因为每屏都包含相同的 sticky 区域）。
+
+### 2.5 截图操作指南
+
+#### 2.5.1 H5 截图
+
+底层技术：Playwright + Chromium，viewport 430×752，DPR=1.5，headless=True。
+
+流程：
+1. 打开 Live Server 提供的 H5 页面（`http://localhost:5500/docs/h5_ui/<page>.html`）
+2. 等待 Tailwind CDN JIT 渲染（1500ms）
+3. 隐藏滚动条 + 底部浮动元素（`#bottomNav` + `.ai-float-btn-container`）
+4. 按 scrollTop 序列逐屏截图：先 `scrollTo(0,0)` 再 `scrollTo(0, target)`
+
+截图脚本：`scripts/ops/anchor_compare.py extract-h5 <page>`（固定 600px 步长模式）
+
+输出：`docs/h5_ui/compare/<page>/h5--step-<scrollTop>.png`（645×1128）
+
+#### 2.5.2 MP 截图
+
+前置条件：微信开发者工具已打开，MCP 已连接。
+
+流程：
+1. 导航到目标页面（tabBar 页面用 `switch_tab`，其他用 `navigate_to`）
+2. 等待页面加载（2000ms）
+3. 按相同 scrollTop 序列逐屏截图：
+   ```javascript
+   // 每屏：先回顶再滚到目标，确保精确
+   wx.pageScrollTo({ scrollTop: 0, duration: 0 })
+   // 等待 200ms
+   wx.pageScrollTo({ scrollTop: target, duration: 0 })
+   // 等待 500ms，读取实际 scrollTop，截图
+   ```
+
+输出：`docs/h5_ui/compare/<page>/mp--step-<scrollTop>.png`（645×1128）
+
+#### 2.5.3 多维度页面 MP 截图
+
+board-coach 和 board-customer 为多维度页面，每个维度的卡片模板不同，需逐维度截图。
+
+board-coach（4 种排序维度）：
+- 维度通过筛选栏下拉切换（`onSortChange`），对应 4 种卡片模板：`perf`（定档业绩）、`salary`（工资）、`sv`（客源储值）、`task`（任务完成）
+- MP 操作：获取页面快照 → 点击排序筛选下拉 → 选择目标维度 → 等待列表刷新 → 截图
+- H5 操作：通过 JS 调用 `selectType('perf_desc')` 等切换 dim-container 显隐 → 截图
+- 子目录：`board-coach/perf/`、`board-coach/salary/`、`board-coach/sv/`、`board-coach/task/`
+
+board-customer（8 种客户维度）：
+- 维度通过筛选栏下拉切换（`onDimensionChange`），对应 8 种卡片模板：`recall`（最应召回）、`potential`（消费潜力）、`balance`（最高余额）、`recharge`（最近充值）、`recent`（最近到店）、`spend60`（最高消费）、`freq60`（最频繁）、`loyal`（最专一）
+- MP 操作：获取页面快照 → 点击维度筛选下拉 → 选择目标维度 → 等待列表刷新 → 截图
+- H5 操作：通过 JS 调用 `selectType('recall')` 等切换 dim-container 显隐 → 截图
+- 子目录：`board-customer/recall/`、`board-customer/potential/` ... `board-customer/loyal/`
+
+> 交互文档参考：`docs/h5_ui/interactions/board-coach.md`、`docs/h5_ui/interactions/board-customer.md`
+
+#### 2.5.4 逐屏对比
+
+对同一 scrollTop 的 H5/MP 截图做像素对比：
+```
+mcp_image_compare_compare_images
+  image1_path: "docs/h5_ui/compare/<page>/h5--step-<N>.png"
+  image2_path: "docs/h5_ui/compare/<page>/mp--step-<N>.png"
+  diff_output_path: "docs/h5_ui/compare/<page>/diff--step-<N>.png"
+  threshold: 0.1
+```
+
+### 2.5.5 双端高度不一致处理
+
+MP 端页面高度可能与 H5 不一致（样式差异导致内容更短或更长）。如果直接按 H5 的 scrollTop 序列去滚 MP，可能滚过头（scrollTo 被 clamp）或漏截（页面更长）。
+
+处理流程：
+1. 先截双端 step-0（首屏），对比确认基线
+2. 再截 step-600（第二屏），读取 MP 端实际 scrollTop：
+   - 如果 MP 实际 scrollTop 远小于 600（被 clamp），说明 MP 页面比 H5 短，后续步骤需按 MP 实际 maxScroll 调整序列
+   - 如果 MP 实际 scrollTop ≈ 600，说明双端高度接近，继续按 H5 序列推进
+3. 之后逐屏推进，每屏截图前先读取 MP 端实际 scrollTop，确认到达预期位置
+4. 如果 MP 页面比 H5 长（MP 还能继续滚但 H5 序列已结束），追加额外步骤直到 MP 也到达 maxScroll
+
+> 此规则防止因双端高度差异导致后续屏截图错位或遗漏。
+
+### 2.6 长页面级联影响与修正规则
+
+修正某一屏的 WXSS 时，可能影响后续屏的布局。因此：
+
+1. 修正后必须重新截取所有屏的截图（因为固定步长方案下，布局变化会影响每屏内容）
+2. 优先修复 sticky 区域差异（一次修复，所有屏受益）
+3. 从 step-0 开始顺序审查差异，确保前序屏达标后再处理后续屏
+4. 如果修正引入回归，回退到受影响的最早屏重新验证
+
+### 2.7 结构级视觉元素识别清单（阶段一修正范围）
+
+以下元素类型在双端截图中容易产生大面积差异（>10%），属于阶段一优先识别和修正的对象。严重缺失时可能导致 >15% 触发重写。
+
+#### 2.7.1 大面积背景
+
+| 背景类型 | MP 支持 | 处理方式 |
+|----------|---------|---------|
+| 纯色 / `linear-gradient` / `radial-gradient` / `repeating-linear-gradient` | ✅ | 直接迁移，查 `docs/h5_ui/design-tokens.json` 取精确色值和方向 |
+| `backdrop-filter: blur()` | ❌ | 改用 `background: rgba(255,255,255,0.95)` 半透明纯色 |
+| `url("data:image/svg+xml,...")` | ❌ | 用 CSS 渐变模拟，或导出为 PNG/base64 引用 |
+
+精调要点：
+- 渐变方向和色值必须与 H5 完全一致，大面积色差肉眼极其明显
+- 半透明背景透明度差 0.1 在大面积上可见
+
+#### 2.7.2 复杂图标与 SVG
+
+Step 0-5 已完成所有 SVG 迁移决策（详见 `MIGRATION-PLAYBOOK.md` 3.5 节）。精调阶段关注：
+
+| 图标类型 | 精调关注点 | 已审计案例 |
+|----------|-----------|-----------|
+| TDesign `<t-icon>` | `size`（rpx）和 `color` 与 H5 原始 SVG 一致 | 目录按钮 `view-list`、筛选箭头 `caret-down-small` |
+| 导出 SVG + `<image>` | `width`/`height`（rpx）与 H5 显示尺寸一致 | AI 悬浮按钮、底部导航栏图标 |
+| 文字/Emoji 替代 | 可接受差异，不计入差异率 | 环比箭头 ↑↓、AI 机器人 🤖 |
+| CSS 渐变 + 文字组合（如头像） | 渐变方向、色值、圆角、文字大小一致 | 客户头像（8 种渐变色 135deg） |
+| 帮助"?"图标（文字+圆形背景） | 圆形背景 size/color、文字 font-size 一致 | board-finance 指标标签旁 |
+
+图标缺失或尺寸严重偏差属于阶段一结构级问题；尺寸/颜色微调属于阶段二。
+
+#### 2.7.3 带文字的标签（Badge / Tag）
+
+标签是高频偏差元素，涉及背景色、圆角、字号、内边距的组合，任一偏差都会在截图中明显可见：
+
+| 标签类型 | 精调维度 | 已审计偏差案例 |
+|----------|---------|---------------|
+| 状态 Badge（跟/弃） | 背景渐变、font-size、min-width、height、border-radius | 弃 badge radius 10rpx→应为 12rpx |
+| 超期标签（超期>7天/≤7天） | 背景透明度、padding、border-radius、文字色 | radius 6rpx→应为 8rpx |
+| 潜力标签（高频/高客单/高余额） | 背景色、文字色、font-weight | 已正确迁移 |
+| 高消费标签 | `bg-warning/10` + `text-warning` + `font-bold` | 已正确迁移 |
+| 板块标题标签（Emoji + 文字） | Emoji 渲染、font-size、间距 | 板块 Emoji 📈💳💰🧾📤🎱 已正确 |
+
+标签精调规则：
+- 背景色优先查 `docs/h5_ui/design-tokens.json`，禁止使用非标准色值
+- `border-radius` 是标签最常见偏差（±2rpx），必须逐个核对
+- `padding` 注意 H5 Tailwind 的 `px-1.5 py-0.5` 换算（×2×0.875）
+- 渐变背景标签（如跟/弃 badge）的渐变方向和双色值必须精确
+
+#### 2.7.4 组合元素（图标+文字+背景）
+
+多个基础元素组合成的复合 UI 单元，整体偏差会被放大：
+
+| 组合元素 | 构成 | 精调关注点 |
+|----------|------|-----------|
+| 筛选按钮 | 文字 + 下拉箭头 + 背景 + 圆角 | 整体高度、内边距、箭头与文字间距 |
+| 环比指标 | 数值 + 箭头(↑↓) + 百分比 + 颜色 | 上升色 #e34d59 / 下降色 #00a870、font-size |
+| 确认收入横条 | 标签 + 金额 + 半透明背景 | `bg-white/10` 透明度、padding、border-radius |
+| 迷你柱状图 | 柱条 + 数字 + 标签 | 柱条高度/gap/圆角/透明度渐变、数字 font-size |
+| 助教服务行 | 头像 + 姓名 + 分隔符 + 跟/弃 badge | 分隔符颜色/间距、badge 与文字对齐 |
+| AI 悬浮按钮 | 图标 + 渐变背景 + 圆角 + 阴影 | 整体 size、border-radius、渐变色 |
+
+组合元素精调策略：先确认整体布局（flex 方向、对齐方式）正确，再逐个子元素微调。
+
+## 3. 两阶段收敛流程
+
+### 3.1 流程图
+
+```
+获取双端截图
+    ↓
+image_compare 对比 → 初始差异率
+    ↓
+首轮审计报告（截图 + H5 源码 + MP 源码 三方对照）
+    ↓
+┌─ 差异率 > 10% ──→ 阶段一：结构级修正（每轮 2-5 处）
+│                      ↓ 循环直到 ≤ 10%
+├─ 差异率 5%~10% ─→ 阶段二：像素级精调（每轮 1-3 处）
+│                      ↓ 循环直到 < 5%
+├─ 差异率 < 5% ───→ ✅ 通过
+└─ > 15% 且无法收敛 → 🔄 触发重写
+```
+
+### 3.2 首轮审计报告（强制）
+
+第一轮对比完成后，必须同时读取 H5 源码（HTML + 内联 CSS 的 Tailwind 类名和 `<style>` 块）和 MP 源码（WXML + WXSS），结合 diff 截图三方对照，产出一份完整的审计报告。此报告是后续所有修改的指导依据。
+
+审计报告格式包含：
+
+| 章节 | 内容 | 数据来源 |
+|------|------|---------|
+| A. 结构对照 | 页面区域结构是否完整、顺序是否一致 | diff 截图 + H5 HTML 结构 |
+| B. CSS 风险点 | 不支持的 CSS 特性（`::after` 复杂场景、`clip-path`、`backdrop-filter` 等） | H5 `<style>` 块 |
+| C. 关键样式映射 | 逐元素核对：Tailwind 类名 → computed 值 → WXSS 现值 → 是否一致 | H5 源码 + MP WXSS |
+| D. 图标处理 | 每个 SVG/图标的迁移决策和当前状态 | H5 源码 + MP WXML |
+| E. 偏差清单 | 所有 ⚠️ 偏差项汇总，按优先级排序 | C/D 节中标记的偏差 |
+
+审计报告输出到 `docs/h5_ui/compare/<page>/audit.md`。
+
+关键原则：
+- 不能只看 diff 图猜测问题，必须回溯到 H5 源码确认正确值
+- Tailwind 类名是唯一可信的样式来源（不是肉眼估算）
+- 每个偏差项必须记录：H5 值（含 Tailwind 类名）→ 换算后的 rpx 值 → MP 现值 → 差异
+- 审计报告完成后，阶段一/二的修正严格按报告中的偏差清单执行
+
+### 3.3 阶段一：结构级修正
+
+目标：消除明显的视觉差异，将差异率从 >10% 降到 ≤10%。
+
+修正重点（按优先级）：
+1. 区域缺失或顺序错误
+2. 整块背景色/渐变色不匹配
+3. 字号明显偏差（≥4rpx）
+4. 间距明显偏差（≥4rpx）
+
+操作模式：
+- 按审计报告偏差清单逐项修正，不靠肉眼猜测
+- 对照 H5 源码 Tailwind 类名 + `docs/h5_ui/design-tokens.json` 确认正确值
+- 修改 WXSS → 重新截图 → 重新对比
+
+### 3.4 阶段二：像素级精调
+
+目标：消除细微差异，将差异率从 5%~10% 降到 <5%。
+
+修正重点（按优先级）：
+1. 小边距偏差（padding/margin/gap ±2rpx，如卡片 30→28rpx、列表容器 24→28rpx、分隔符 margin 6→10rpx）
+2. 圆角（border-radius）偏差（±2rpx，如标签 6→8rpx、卡片 28→32rpx）
+3. 颜色色值微调（灰阶偏差如 #c5c5c5→#a6a6a6、透明度差 0.1）
+4. 行高（line-height）缺失或偏差、字重（font-weight）微调（如 600→500）
+5. 阴影（box-shadow）参数微调
+
+操作模式：
+- 使用 image_compare 精确定位差异像素区域
+- 参考 computed-styles.json（如有）或 H5 源码精确值
+- 每次只改 1-3 处，验证不引入新差异
+
+### 3.5 收敛停滞处理
+
+当差异率连续 3 轮未下降超过 1% 时：
+1. 分析剩余差异是否为不可消除的结构性差异（字体渲染、抗锯齿、头部区域）
+2. 若是 → 标注为可接受差异，记录到 report.md，停止该区域精调
+3. 若否 → 尝试不同修正策略（如换用 flex 布局替代绝对定位）
+
+## 4. 修改优先级规则（经验提炼）
+
+基于 board-finance（17 项偏差）、board-coach（17 项偏差）、board-customer（42 项偏差）的实际审计经验，提炼出以下规则：
+
+### 4.1 高频偏差类型
+
+| 偏差类型 | 出现频率 | 典型案例 | 修正策略 |
+|----------|---------|---------|---------|
+| font-size 偏差 | 极高 | Tab 26rpx→24rpx, 金额 28rpx→32rpx | 查 Tailwind 类名换算 |
+| border-radius 偏差 | 高 | 标签 6rpx→8rpx, 卡片 28rpx→32rpx, 头像 14rpx→24rpx | 查 `design-tokens.json` |
+| padding/margin 偏差 | 高 | 卡片 30rpx→28rpx, 列表容器 24rpx→28rpx | 查 Tailwind 类名换算 |
+| line-height 缺失 | 中 | Tab 文字未写 line-height | 补 `line-height: 36rpx` |
+| 颜色偏差 | 中 | 灰色 #c5c5c5→#a6a6a6, 边框 #eeeeee→#e7e7e7 | 查 `design-tokens.json` 灰阶 |
+| font-weight 偏差 | 低 | 数据行 600→500 | 查 Tailwind 类名 |
+| flex 比例偏差 | 低 | 筛选按钮 1.8→2 | 查 H5 源码 |
+
+### 4.2 跨页面共性偏差
+
+以下偏差在三个看板页面中重复出现，修正一个页面后应同步检查其他页面：
+
+- Tab 导航：font-size 26→24rpx, padding 24→22rpx, line-height 缺失→36rpx
+- 筛选栏内层：border-radius 14→16rpx（或 32rpx，取决于页面）
+- 卡片：padding-top/bottom 30→28rpx, margin-bottom 20→22rpx
+- 标签：border-radius 6→8rpx
+
+### 4.3 不修复的差异
+
+以下差异属于结构性差异或设计决策差异，不计入差异率：
+- 头部区域（H5 safe-area-top vs MP 状态栏+胶囊）
+- 字体渲染差异（H5 Noto Sans SC vs MP 系统字体）
+- 环比箭头（H5 SVG vs MP 文字 ↑↓，已确认可接受）
+- AI 浮动按钮区域（H5 已隐藏，MP 端如存在则忽略该区域差异）
+
+## 5. 页面清单与截图参数
+
+所有页面统一使用固定 600px 步长滚动截图，不依赖锚点。步数基于 Playwright 实测的 `maxScroll = scrollHeight - viewportHeight`，公式：`N = floor(maxScroll / 600) + 1`；`maxScroll ≤ 10` 视为单屏（N=1）。
+
+> 以下数据基于 2026-03-10 Playwright 实测（430×752 视口，DPR=1.5，展开所有折叠区域），验证脚本 `scripts/ops/_verify_step_counts.py`，原始数据 `export/SYSTEM/REPORTS/h5_page_heights/step_counts_verified.json`。
+
+| # | 页面 | scrollHeight | maxScroll | 实测步数 | scrollTop 序列 | 主要内容区域 |
+|---|------|-------------|-----------|---------|---------------|-------------|
+| 1 | board-finance | 5600 | 4848 | 10 | 0,600,...,4800,4848 | 经营一览 / 预收资产 / 应计收入确认 / 现金流入 / 现金流出 / 助教分析 |
+| 2 | board-coach | 754 | 2 | 1★ | 0 | 助教卡片列表（×4 排序维度：perf/salary/sv/task） |
+| 3 | board-customer | 752 | 0 | 1 | 0 | 客户卡片列表（×8 客户维度：recall/potential/balance/recharge/recent/spend60/freq60/loyal） |
+| 4 | task-detail | 2995 | 2243 | 5 | 0,600,1200,1800,2243 | Banner / 关系 / 建议 / 线索 / 备注 |
+| 5 | task-detail-callback | 2397 | 1645 | 4 | 0,600,1200,1645 | 同上（teal 主题） |
+| 6 | task-detail-priority | 2389 | 1637 | 4 | 0,600,1200,1637 | 同上（orange 主题） |
+| 7 | task-detail-relationship | 2275 | 1523 | 4 | 0,600,1200,1523 | 同上（pink 主题） |
+| 8 | coach-detail | 2918 | 2166 | 5 | 0,600,1200,1800,2166 | Banner / 绩效概览 / 收入明细 / 前10客户 |
+| 9 | customer-detail | 3070 | 2318 | 5 | 0,600,1200,1800,2318 | Banner / AI洞察 / 线索 / 任务 / 最爱助教 / 消费记录 |
+| 10 | performance | 7705 | 6953 | 13 | 0,600,...,6600,6953 | Banner / 收入 / 本月业绩 / 上月收入 / 新客 / 常客（最长页面） |
+| 11 | task-list | 1428 | 676 | 3 | 0,600,676 | Banner业绩卡 / 任务列表 |
+| 12 | my-profile | 752 | 0 | 1 | 0 | 整页（单屏） |
+| 13 | customer-service-records | 961 | 209 | 2 | 0,209 | Banner统计 / 记录列表 |
+| 14 | performance-records | 2677 | 1925 | 5 | 0,600,1200,1800,1925 | Banner / 统计概览 / 记录列表 |
+| 15 | chat | 1061 | 309 | 2 | 0,309 | 对话区 / 输入区 |
+| 16 | chat-history | 752 | 0 | 1 | 0 | 整页（单屏） |
+| 17 | notes | 1709 | 957 | 3 | 0,600,957 | 导航 / 备注列表 |
+
+> ★ board-coach maxScroll=2px，按实用主义规则（≤10px）视为单屏。
+> 单屏页面（board-coach、board-customer、my-profile、chat-history）只需 step-0 一张截图。多维度页面需切换维度后分别截图：board-coach ×4 排序维度（通过排序筛选下拉切换）、board-customer ×8 客户维度（通过维度筛选下拉切换）。
+
+### 5.1 对照处理单元计算
+
+对照处理单元 = 每页实测步数 × 维度数（无维度的页面维度数=1）。数据来源：2026-03-10 Playwright 实测（`scripts/ops/_verify_step_counts.py`）。
+
+| 页面 | 步数 | 维度数 | 单元数 |
+|------|------|--------|--------|
+| board-finance | 10 | 1 | 10 |
+| board-coach | 1★ | 4 | 4 |
+| board-customer | 1 | 8 | 8 |
+| task-detail | 5 | 1 | 5 |
+| task-detail-callback | 4 | 1 | 4 |
+| task-detail-priority | 4 | 1 | 4 |
+| task-detail-relationship | 4 | 1 | 4 |
+| coach-detail | 5 | 1 | 5 |
+| customer-detail | 5 | 1 | 5 |
+| performance | 13 | 1 | 13 |
+| task-list | 3 | 1 | 3 |
+| my-profile | 1 | 1 | 1 |
+| customer-service-records | 2 | 1 | 2 |
+| performance-records | 5 | 1 | 5 |
+| chat | 2 | 1 | 2 |
+| chat-history | 1 | 1 | 1 |
+| notes | 3 | 1 | 3 |
+| **合计** | | | **79** |
+
+> ★ board-coach maxScroll=2px，按实用主义规则（≤10px）视为单屏。
+
+## 6. 产出物归档结构
+
+所有截图、diff、审计报告统一归入 `docs/h5_ui/compare/`，按页面分子目录。
+
+```
+docs/h5_ui/compare/
+├── board-finance/
+│   ├── h5--step-0.png          # H5 截图（645×1128）
+│   ├── h5--step-600.png
+│   ├── mp--step-0.png          # MP 截图（645×1128）
+│   ├── mp--step-600.png
+│   ├── diff--step-0.png        # 像素对比 diff 图
+│   ├── diff--step-600.png
+│   ├── report.md               # 差异率汇总 + 对比分析
+│   └── audit.md                # 三方对照审计报告
+├── board-coach/
+│   ├── perf/                   # 多维度页面按排序维度分子目录
+│   │   ├── h5--step-0.png
+│   │   ├── mp--step-0.png
+│   │   └── diff--step-0.png
+│   ├── salary/
+│   ├── sv/
+│   ├── task/
+│   ├── report.md
+│   └── audit.md
+├── board-customer/
+│   ├── recall/                 # 8 种客户维度各一个子目录
+│   ├── potential/
+│   ├── balance/
+│   ├── recharge/
+│   ├── recent/
+│   ├── spend60/
+│   ├── freq60/
+│   ├── loyal/
+│   ├── report.md
+│   └── audit.md
+├── my-profile/                 # 单屏页面
+│   ├── h5--step-0.png
+│   ├── mp--step-0.png
+│   ├── diff--step-0.png
+│   ├── report.md
+│   └── audit.md
+...（17 个页面各一个子目录）
+```
+
+文件命名规则：
+- `h5--step-<scrollTop>.png` / `mp--step-<scrollTop>.png` / `diff--step-<scrollTop>.png`
+- scrollTop 值：0, 600, 1200, 1800 ...
+- 文件名不含页面名（已在子目录中）
+- 单屏页面只有 `--step-0` 一组
+- 多维度页面（board-coach ×4 排序维度、board-customer ×8 客户维度）按维度分子目录
+
+废弃目录（不再使用）：
+- `docs/h5_ui/screenshots/` → 已清理
+- `docs/h5_ui/mp-screenshots/` → 已清理
+- `docs/h5_ui/h5-segments/` → 已清理
+- `docs/h5_ui/diffs/` → 已清理
+- `docs/h5_ui/anchors/` → 已清理
+- `docs/h5_ui/analysis/` → 审计报告迁入各页面子目录
+
+## 7. 风险与依赖
+
+### 7.1 外部依赖
+
+| 依赖项 | 风险等级 | 说明 | Fallback |
+|--------|---------|------|----------|
+| 微信开发者工具 MCP 连接 | 中 | MCP 连接偶尔断开（超时/端口占用），需重连 | `reconnect_devtools` 重连；若反复失败，手动截图后放入 `compare/<page>/` |
+| Playwright 浏览器 | 低 | 首次运行需 `playwright install chromium` | `uv run playwright install chromium` |
+| image_compare MCP | 低 | MCP server 未启动时 compare_images 不可用 | 使用 `anchor_compare.py compare` 命令行替代 |
+
+### 7.2 已知限制
+
+- 字体渲染引擎差异（Chromium vs 微信 webview）可能引入约 1-2% 的固有差异率
+- 字体渲染差异（H5 Noto Sans SC vs MP 系统字体）不可消除，属于可接受差异
+- 微信开发者工具截图不支持指定 DPR，实际 DPR 取决于模拟器设置（当前 iPhone 15 Pro Max 有效 DPR=1.5）
+- board-coach/board-customer 的多维度截图验证（4/8 种维度）需要 Mock 数据支持不同维度的展示
+
+## 8. 页面执行顺序
+
+### 8.0 前置任务：TS 零诊断基线检查与共性偏差批量修复
+
+在进入 A 批次之前，需完成两项前置工作：
+
+#### 8.0.1 TS 零诊断基线检查
+
+对 17 个页面的 `.ts` 文件运行 `getDiagnostics`，确认全部为零诊断。这是 Step 0-5 结构迁移的交付基线，如果此时已有 TS 错误，必须先修复再进入像素精调，否则精调过程中引入的新错误会与历史错误混淆。
+
+#### 8.0.2 跨页面共性偏差批量修复
+
+基于 4.2 节已识别的跨页面共性偏差，在 `app.wxss` 或共享组件样式中统一修正：
+
+| 共性偏差 | 涉及页面 | 修正方案 |
+|----------|---------|---------|
+| Tab 导航 font-size 26→24rpx | board-finance/coach/customer | 统一修正各页面 Tab 样式 |
+| Tab 导航 padding 24→22rpx | board-finance/coach/customer | 同上 |
+| Tab 导航 line-height 缺失→36rpx | board-finance/coach/customer | 同上 |
+| 筛选栏内层 border-radius 14→16rpx | board-finance/coach/customer | 统一修正筛选栏样式 |
+| 卡片 padding-top/bottom 30→28rpx | board-finance/coach/customer | 统一修正卡片容器样式 |
+| 标签 border-radius 6→8rpx | board-finance/coach/customer | 统一修正标签样式 |
+
+先批量修复共性偏差，再进入各页面的个性化精调，可显著减少重复工作量。修复后需对三个看板页面快速截图验证，确认共性修正未引入新问题。
+
+### 8.1 批次执行顺序
+
+按原批次顺序，简单页面优先积累经验：
+
+| 批次 | 页面 | 预估复杂度 | 对照单元总数 |
+|------|------|-----------|------------|
+| A | board-finance, board-coach, board-customer | 高 | 22 |
+| B | task-list, my-profile | 低-中 | 4 |
+| C | task-detail（主页面 5 单元）+ 3 变体（各 4 单元，仅验证主题色） | 中 | 17 |
+| D | coach-detail, customer-detail, customer-service-records | 中 | 12 |
+| E | performance, performance-records | 高 | 18 |
+| F | chat, chat-history | 低 | 3 |
+| G | notes | 低 | 3 |
+| | **合计** | | **79** |

.kiro/specs/h5-miniprogram-migration-subsequent/requirements.md

@@ -0,0 +1,147 @@
+# 需求文档：H5 → 微信小程序像素精调
+
+## 简介
+
+本 spec 承接 `h5-miniprogram-migration` 的 Step 0-5 结构迁移成果。17 个页面已全部完成结构迁移、编译验证和结构还原验证。本 spec 专注于 Step 6-7：像素级视觉还原与验收签收。
+
+核心单位是「对照处理单元」——每个页面被分解为多个可独立截图、独立对比、独立修正的最小区域段。17 个页面共分解为 79 个对照处理单元（详见 design.md §5.1，基于 2026-03-10 Playwright 实测校准）。
+
+权威参考：
+- 迁移规则：`docs/prd/MIGRATION-PLAYBOOK.md`
+- 样式标准：`docs/h5_ui/design-tokens.json`（颜色、字号、圆角、阴影的标准值）
+- 工具链：`scripts/ops/anchor_compare.py`（固定步长截图 + 逐屏对比）
+
+## 术语表
+
+| 术语 | 定义 |
+|------|------|
+| 对照处理单元 | 一个页面内可独立截图、独立对比、独立修正的最小区域段（如"经营一览"板块、"助教卡片列表"区域） |
+| 差异率 | pixelmatch / image_compare 输出的像素差异百分比，仅针对内容区域计算（头部导航栏/状态栏不计入） |
+| 结构级修正 | 差异率 > 10% 时的修正阶段，修复明显的布局/颜色/缺失问题 |
+| 像素级精调 | 差异率 5%~10% 时的精调阶段，微调 padding/font-size/color 等 |
+| 固定步长 | 600px 逻辑像素为一步，两端使用完全相同的 scrollTop 序列逐屏截图 |
+| 双端截图 | 同一页面的 H5 截图（DPR=1.5, 645×1128）和 MP 截图（DPR=1.5, 645×1128），两端参数完全一致，无需缩放 |
+
+## 需求
+
+### 需求 1：页面分解与对照处理单元建立
+
+**用户故事：** 作为迁移执行者，我希望每个页面被分解为可独立处理的最小对照单元，以便逐屏精确对比和修正。
+
+#### 验收标准
+
+1. THE 分解流程 SHALL 对每个页面执行以下步骤：分析 H5 原型结构 → 识别语义区域 → 按固定 600px 步长计算截图屏数 → 建立对照处理单元清单
+2. THE 对照处理单元 SHALL 满足以下条件：每屏为一个对照单元（645×1128 像素），语义完整性由审计报告人工确认
+3. THE 步数计算 SHALL 基于 Playwright 实测的 `maxScroll = scrollHeight - viewportHeight`：`N = floor(maxScroll / 600) + 1`；`maxScroll ≤ 10` 的页面视为单屏（N=1）
+4. WHEN 页面为多维度页面（如 board-coach ×4 排序维度、board-customer ×8 客户维度）时，THE 分解流程 SHALL 按维度分子目录，每个维度独立截图和对比。维度切换通过页面筛选栏下拉操作完成（board-coach 通过排序筛选切换 perf/salary/sv/task 四种卡片模板；board-customer 通过维度筛选切换 recall/potential/balance/recharge/recent/spend60/freq60/loyal 八种卡片模板）
+5. THE 分解结果 SHALL 输出为每页一份的对照单元清单，包含：单元编号（step-N）、scrollTop 值、预估复杂度
+
+### 需求 2：双端截图标准
+
+**用户故事：** 作为迁移执行者，我希望 H5 和 MP 的截图在尺寸、视口、DPR 上严格统一，以确保像素对比结果有意义。
+
+#### 验收标准
+
+1. THE H5 截图 SHALL 使用以下参数：viewport 430×752, DPR=1.5, 输出 645×1128；通过 Playwright 截取（Live Server `http://localhost:5500`），等待 Tailwind CDN JIT 渲染 1500ms
+2. THE MP 截图 SHALL 使用以下参数：viewport 430×752, DPR=1.5（MCP 有效 DPR）, 输出 645×1128；通过微信开发者工具 MCP 截取。两端输出尺寸完全一致，无需任何缩放
+3. WHEN 对比页面时，THE 截图流程 SHALL 使用固定 600px 步长滚动截图，两端使用完全相同的 scrollTop 序列（0, 600, 1200, ...），不依赖锚点
+4. THE H5 截图前 SHALL 隐藏底部浮动元素：`#bottomNav`（64px fixed 底部导航）和 `.ai-float-btn-container`（56px 浮动按钮），通过 JS 设置 `display: none`。MP 端原生 tabBar 不在截图中，无需处理
+5. THE 头部区域（H5 safe-area-top ~46px / MP 状态栏+胶囊 ~88px）SHALL 不计入像素差异率，属结构性差异
+6. WHEN 截图流程中发现 H5 页面或 MP 页面无法正常渲染时，THE 流程 SHALL 暂停并报告问题，禁止使用异常截图进行对比
+7. WHEN MP 端页面高度与 H5 不一致时，THE 截图流程 SHALL 先截双端 step-0（首屏）确认基线，再截 step-600（第二屏）校准双端高度差异，之后逐屏推进。每屏截图前读取 MP 端实际 scrollTop，确认到达预期位置
+
+### 需求 3：两阶段收敛流程
+
+**用户故事：** 作为迁移执行者，我希望像素精调按差异率分阶段处理——先修大问题再调细节——以高效收敛到达标标准。
+
+#### 验收标准
+
+1. THE 收敛流程 SHALL 分为两个阶段：
+   - 阶段一（结构级修正）：差异率 > 10%，每轮修复 2-5 处明显差异（布局/颜色/缺失/字号）
+   - 阶段二（像素级精调）：差异率 5%~10%，每轮修复 1-3 处精细差异（padding ±2rpx / line-height / border-radius / 色值）
+2. THE 达标标准 SHALL 为：差异率 < 5% 标记通过；差异率 > 15% 且多轮无法收敛则触发重写
+3. WHEN 进入每轮修正时，THE 流程 SHALL 先截图对比 → 肉眼审查 diff 图 → 定位差异区域 → 修改 WXSS/WXML → 重新截图验证
+4. THE 每轮修正 SHALL 控制修改范围（阶段一 2-5 处、阶段二 1-3 处），避免一次改太多难以定位效果
+5. WHEN 差异率在连续 3 轮内未下降超过 1% 时，THE 流程 SHALL 评估是否为结构性差异（如头部区域、字体渲染差异），若是则标注为可接受差异并停止该区域的精调
+
+### 需求 4：分析报告持久化
+
+**用户故事：** 作为项目管理者，我希望每个页面的对比分析结果持久化为 MD 文件，以便追溯和复查。
+
+#### 验收标准
+
+1. THE 每个页面 SHALL 在 `docs/h5_ui/compare/<page>/report.md` 输出对比分析报告
+2. THE 报告 SHALL 包含：初始差异率、每轮修正记录（轮次/修改内容/修正后差异率）、最终差异率、遗留的可接受差异说明
+3. THE 报告 SHALL 在每轮修正后更新，记录收敛过程
+4. THE 截图产出物 SHALL 统一归入 `docs/h5_ui/compare/<page>/`，按页面分子目录：
+   - H5 截图：`h5--step-<scrollTop>.png`
+   - MP 截图：`mp--step-<scrollTop>.png`
+   - Diff 图：`diff--step-<scrollTop>.png`
+   - 审计报告：`audit.md`
+   - 对比报告：`report.md`
+   - 多维度页面按维度再分子目录（如 `board-coach/perf/`）
+5. THE 每轮新截图 SHALL 覆盖上一轮同名文件，不保留历史版本（依赖 git 追溯）
+
+### 需求 5：修改优先级规则
+
+**用户故事：** 作为迁移执行者，我希望有明确的修改优先级指导，以便在每轮修正中优先处理影响最大的差异。
+
+#### 验收标准
+
+1. THE 修改优先级 SHALL 按以下顺序排列（从高到低）：
+   - P0：区域缺失或顺序错误（结构性问题）
+   - P1：整块背景色/渐变色不匹配
+   - P2：字号（font-size）明显偏差（≥4rpx）
+   - P3：间距（padding/margin/gap）明显偏差（≥4rpx）
+   - P4：圆角（border-radius）偏差
+   - P5：颜色色值微调（灰阶偏差、透明度）
+   - P6：行高（line-height）/ 字重（font-weight）微调
+   - P7：阴影（box-shadow）参数微调
+2. WHEN 阶段一修正时，THE 流程 SHALL 优先处理 P0-P3 级别的差异
+3. WHEN 阶段二精调时，THE 流程 SHALL 处理 P4-P7 级别的差异
+4. THE 修改 SHALL 优先使用 `docs/h5_ui/design-tokens.json` 中定义的标准值，禁止使用非标准灰色（#333/#666/#999 等）
+5. THE 修改 SHALL 优先使用 flex/盒模型的确定性方案，禁止使用"碰运气"的魔法数
+
+### 需求 6：验收签收标准
+
+**用户故事：** 作为项目管理者，我希望每个页面有明确的验收标准，以确保交付质量一致。
+
+#### 验收标准
+
+1. THE 单页验收 SHALL 满足以下条件：
+   - 内容区差异率 < 5%
+   - TS 编译零诊断
+   - 所有对照处理单元均已逐屏对比
+   - report.md 已归档且记录完整
+2. THE 批次验收 SHALL 满足以下条件：
+   - 批次内所有页面单页验收通过
+   - 共享组件在批次内所有页面中表现一致
+   - 所有截图和 diff 图已按目录归档
+3. THE 全局验收 SHALL 满足以下条件：
+   - 17 个页面（79 个对照处理单元）全部单页验收通过
+   - 差异率汇总表已输出（页面名 / 初始差异率 / 最终差异率 / 修正轮数）
+   - TS 编译零诊断复查通过
+
+### 需求 7：工具链使用规范
+
+**用户故事：** 作为迁移执行者，我希望工具链的使用有明确规范，以确保截图和对比结果的一致性和可复现性。
+
+#### 验收标准
+
+1. THE H5 截图 SHALL 统一通过 `scripts/ops/anchor_compare.py extract-h5 <page>` 获取（固定 600px 步长滚动截图，viewport 430×752, DPR=1.5；通过 Live Server `http://localhost:5500` 访问页面）
+2. THE MP 截图 SHALL 通过微信开发者工具 MCP 截取，按相同的 scrollTop 序列（0, 600, 1200, ...）逐屏截图
+3. THE 像素对比 SHALL 使用 `image_compare` power 的 `compare_images` 工具，或 `anchor_compare.py compare <page>` 命令
+4. WHEN 页面需要逐屏对比时，THE 流程 SHALL 使用 anchor_compare.py 的两步流程：`extract-h5` → `compare`（MP 截图通过 MCP 工具独立获取）
+5. THE 工具链输出 SHALL 统一存放到 `docs/h5_ui/compare/<page>/`（见需求 4），禁止散放在项目根目录或临时位置
+
+### 需求 8：风险与异常处理
+
+**用户故事：** 作为迁移执行者，我希望在工具链故障或环境异常时有明确的 Fallback 方案，以避免流程阻塞。
+
+#### 验收标准
+
+1. WHEN 微信开发者工具 MCP 连接断开时，THE 流程 SHALL 先尝试 `reconnect_devtools` 重连，若连续 3 次失败则暂停该页面任务并报告问题
+2. WHEN Live Server 端口 5500 被占用时，THE 流程 SHALL 检查端口占用并提示用户释放端口，不得使用其他端口截图（避免 URL 不一致）
+3. WHEN image_compare MCP 不可用时，THE 流程 SHALL 使用 `anchor_compare.py compare` 命令行作为替代
+4. WHEN 某页面差异率 > 15% 且连续 5 轮无法收敛时，THE 流程 SHALL 暂停并输出问题分析报告，由用户决定是否触发重写
+5. THE 每个批次任务 SHALL 在开始前验证页面 TS 零诊断基线，如有编译错误则先修复再进入精调

.kiro/specs/h5-miniprogram-migration-subsequent/tasks.md

@@ -0,0 +1,135 @@
+# 实现计划：H5 → 微信小程序视觉还原
+
+## 概述
+
+17 个页面（共 79 个对照处理单元）已完成 Step 0-5 结构迁移。本计划覆盖 Step 6-7：视觉还原与验收。
+
+采用固定 600px 步长滚动截图方案：两端使用完全相同的 scrollTop 序列（0, 600, 1200, ...），不依赖锚点，消除 H5/MP 元素位置差异导致的对齐问题。
+
+采用混合组织方式：前置阶段按流程批量操作（截图→对比→共性修复），修正阶段按页面逐个完成（审计→修正→验收）。
+
+## 截图方案要点
+
+- 双端参数：viewport 430×752, DPR=1.5, 输出 645×1128, 无需缩放
+- 步长：600px（逻辑像素）
+- H5 截图：`scripts/ops/anchor_compare.py extract-h5 <page>`（Playwright + Live Server localhost:5500）
+- MP 截图：MCP 工具（`wx.pageScrollTo` + `screenshot`）
+- 产出物根目录：`docs/h5_ui/compare/<page>/`
+- 文件命名：`h5--step-<scrollTop>.png` / `mp--step-<scrollTop>.png` / `diff--step-<scrollTop>.png`
+- 审计报告：`docs/h5_ui/compare/<page>/audit.md`
+- 对比报告：`docs/h5_ui/compare/<page>/report.md`
+- 多维度页面：`docs/h5_ui/compare/<page>/<dimension>/`（如 board-coach/perf/、board-customer/recall/）
+- 维度切换：board-coach 通过排序筛选下拉切换 perf/salary/sv/task；board-customer 通过维度筛选下拉切换 recall/potential/balance/recharge/recent/spend60/freq60/loyal
+
+## 逐页视觉还原流程（阶段 3 每页统一流程）
+
+每个页面子任务按以下步骤执行：
+
+1. **截图**：先截双端 step-0（首屏）确认基线，再截 step-600（第二屏）校准双端高度差异，之后按固定步长序列逐屏推进。每屏读取 MP 端实际 scrollTop 确认到达预期位置
+2. **审计报告**：同时读取 H5 源码（HTML + Tailwind 类名）、MP 源码（WXML + WXSS）、diff 截图，三方对照产出 `docs/h5_ui/compare/<page>/audit.md`
+3. **浮动元素检测**（长页面）：对比多屏截图中持续相同位置的差异，识别 sticky/fixed 元素，优先修复（一次修复所有屏受益）
+4. **阶段一修正循环**（差异率 > 10%）：按审计报告偏差清单修正 → 每轮修 2-5 处 → 重新截图对比 → 循环至 ≤ 10%
+5. **阶段二精调循环**（差异率 5%~10%）：精确定位差异区域 → 每轮修 1-3 处 → 重新截图对比 → 循环至 < 5%
+6. **验收**：差异率 < 5% → 更新 report.md → 标记通过
+
+### 长页面级联规则
+
+修正某一屏的 WXSS 后，所有屏必须重新截图对比（布局变化会影响每屏内容）。优先修复 sticky 区域差异，从 step-0 开始顺序审查。
+
+---
+
+## 任务
+
+### 阶段 0 — 前置准备
+
+- [x] 0. 工具链验证与基线检查
+  - [x] 0.1 验证截图工具链：确认 Playwright 可通过 Live Server (localhost:5500) 截图 H5 页面、微信开发者工具 MCP 可连接截图、image_compare 可对比
+  - [x] 0.2 TS 零诊断基线检查：对 17 个页面的 .ts 文件运行 getDiagnostics，确认全部为零诊断
+  - [x] 0.3 固定步长方案验证：board-finance 实测 10 屏（step 0-4848，scrollHeight=5600, maxScroll=4848），两端精确命中目标 scrollTop，截图 645×1128 完全一致
+
+---
+
+### 阶段 1 — 批量截图与初始对比
+
+- [ ] 1. 批量获取 H5 截图（board-finance 已完成 10 屏验证）
+  - [ ] 1.1 board-finance H5 固定步长截图（10 屏，step 0-4848）— 已通过 test_fixed_step.py 完成
+  - [x] 1.2 重构 anchor_compare.py 为固定步长模式，支持 `extract-h5 <page>` 自动计算页面高度和步数
+  - [ ] 1.3 对剩余 16 个页面运行 H5 固定步长截图
+
+- [ ] 2. 批量获取 MP 截图（board-finance 已完成 10 屏验证）
+  - [x] 2.1 board-finance MP 固定步长截图（10 屏，step 0-4848）— 已通过 MCP 工具完成
+  - [ ] 2.2 对剩余 16 个页面通过 MCP 工具截取 MP 固定步长截图
+
+- [ ] 3. 批量初始对比与差异率采集
+  - [x] 3.1 board-finance 逐屏对比完成（差异率 5.01%~17.71%，差异来自组件未精校）
+  - [ ] 3.2 对剩余 16 个页面运行逐屏对比，输出 diff 图到 `docs/h5_ui/compare/<page>/`
+  - [ ] 3.3 汇总差异率表（页面名 / 屏数 / 各屏差异率），按差异率降序排列
+
+---
+
+### 阶段 2 — 共性偏差批量修复
+
+- [ ] 4. 跨页面共性偏差修复
+  - [ ] 4.1 根据阶段 1 差异率和 design.md §4.2 已识别的共性偏差（Tab 导航 font-size/padding/line-height、筛选栏 border-radius、卡片 padding、标签 border-radius），在各页面 WXSS 或共享组件中统一修正
+  - [ ] 4.2 共性修复后重新截图验证：对涉及修改的页面重新截图 + 对比，确认共性修正未引入新问题
+
+---
+
+### 阶段 3 — 逐页视觉还原
+
+按批次组织，每页按「逐页视觉还原流程」执行（截图→审计→浮动元素检测→修正循环→验收）。
+
+#### A 批次 — 看板页面
+
+- [ ] 5. board-finance 视觉还原（长页面，10 屏 step 0-4848）。含 sticky 区域检测（safe-area-top 45px + filterBar 71px = 116px）
+- [ ] 6. board-coach 视觉还原（短页面，4 种排序维度 perf/salary/sv/task 需逐维度截图验证，通过排序筛选下拉切换）
+- [ ] 7. board-customer 视觉还原（短页面，8 种客户维度 recall/potential/balance/recharge/recent/spend60/freq60/loyal 需逐维度截图验证，通过维度筛选下拉切换）
+- [ ] 8. A 批次检查点：3 页全部差异率 < 5%，共享组件跨页表现一致
+
+#### B 批次 — 核心页面
+
+- [ ] 9. task-list 视觉还原（约 3 屏）
+- [ ] 10. my-profile 视觉还原（单屏页面）
+- [ ] 11. B 批次检查点：2 页全部差异率 < 5%
+
+#### C 批次 — 任务详情页面
+
+> task-detail 系列 4 个页面共享相同布局，仅 Banner 主题色不同。主页面做完整还原，3 个变体只验证主题色差异。
+
+- [ ] 12. task-detail 视觉还原（主页面，约 5 屏，完整审计→修正→验收）
+- [ ] 13. task-detail 变体主题色验证（callback=teal / priority=orange / relationship=pink）：逐个截图 → 仅对比含主题色的屏 → 确认主题色正确应用
+- [ ] 14. C 批次检查点：4 页全部差异率 < 5%
+
+#### D 批次 — 详情页面
+
+- [ ] 15. coach-detail 视觉还原（约 5 屏）
+- [ ] 16. customer-detail 视觉还原（约 5 屏）
+- [ ] 17. customer-service-records 视觉还原（约 2 屏）
+- [ ] 18. D 批次检查点：3 页全部差异率 < 5%
+
+#### E 批次 — 绩效页面
+
+- [ ] 19. performance 视觉还原（约 13 屏，本 spec 最长页面）
+- [ ] 20. performance-records 视觉还原（约 5 屏）
+- [ ] 21. E 批次检查点：2 页全部差异率 < 5%
+
+#### F 批次 — 对话页面
+
+- [ ] 22. chat 视觉还原（约 2 屏）
+- [ ] 23. chat-history 视觉还原（单屏页面）
+- [ ] 24. F 批次检查点：2 页全部差异率 < 5%
+
+#### G 批次 — 其他页面
+
+- [ ] 25. notes 视觉还原（约 3 屏）
+- [ ] 26. G 批次检查点：差异率 < 5%
+
+---
+
+### 阶段 4 — 全局验收
+
+- [ ] 27. 全局验收
+  - [ ] 27.1 汇总 17 页面差异率表（页面名 / 屏数 / 初始差异率 / 共性修复后差异率 / 最终差异率 / 修正轮数），共 79 个对照处理单元
+  - [ ] 27.2 确认所有 `compare/<page>/report.md` 已归档
+  - [ ] 27.3 TS 编译零诊断复查（17 个页面）
+  - [ ] 27.4 标记 spec 完成