This commit is contained in:
Neo
2026-03-15 10:15:02 +08:00
parent 2dd217522c
commit 72bb11b34f
916 changed files with 65306 additions and 16102803 deletions

View File

@@ -0,0 +1,37 @@
# 基准测试历史记录
> 本文件记录 H5→MP 迁移项目的 Benchmark 基准测试历史,仅供参考。
> 完整推导过程见 `docs/miniprogram-dev/03-reference/benchmark-history.md`(本文件即为迁移后的版本,原 `docs/h5_ui/compare/HISTORY.md` 已归档)。
---
## 当前有效参数v3
| 参数 | H5 | MP | 说明 |
|------|-----|-----|------|
| viewport | 430×752 | 430×752 | 统一视口 |
| DPR | 1.5 | 1.5 | 双端一致 |
| 输出尺寸 | 645×1128 | 645×1128 | 零缩放 |
| rpx 系数 | — | 1:1.75 | `rpx = px × 2 × 0.875` |
## v3 基准测试结果2026-03-11
| 组 | 差异率 | 说明 |
|---|---|---|
| g1裁剪后 | 3.87% | 全部来自不可消除的系统性因素 |
差异来源:字体渲染 ~2% + 行内元素高度 ~1% + rpx 取偶 ~0.5% + 抗锯齿 ~0.5%
## 版本演进
| 版本 | 日期 | rpx 系数 | 状态 |
|------|------|---------|------|
| v2 | 2026-03-10 | 1:1.82750/412 | ❌ 废弃视口不一致、有损缩放、DPR 不对等) |
| v3 | 2026-03-11 | 1:1.75750/430 工程近似) | ✅ 当前有效 |
## 结论
1. `rpx = px × 2 × 0.875`1:1.75)是正确的迁移换算公式
2. 双端截图参数必须统一viewport=430×752, DPR=1.5
3. 像素对比的背景噪音基线约 3.87%
4. <5% 通过目标在基线之上仅有 ~1% 修正空间,公式和参数已高度准确

View File

@@ -0,0 +1,53 @@
# 各页面特殊结构速查表
> 基于 H5 源码扫描得出。处理对应页面时直接查表,不需要重新扫描。
---
| 页面 | safe-area-top | bottomNav | ai-float | position:fixed | ::before/::after | 其他风险 |
|---|---|---|---|---|---|---|
| board-finance | ✅ | ✅ | ✅ | ✅(筛选下拉) | ✅tab 指示线) | `backdrop-filter: blur()` |
| board-coach | ✅ | ✅ | ✅ | ✅(筛选下拉) | ✅tab 指示线) | — |
| board-customer | ✅ | ✅ | ✅ | ✅(筛选下拉) | ✅tab 指示线) | CSS 渐变文字 |
| task-list | — | ✅ | ✅ | ✅(筛选下拉) | — | — |
| task-detail | — | — | — | — | ✅(气泡尖角) | — |
| task-detail-callback | — | — | — | — | — | — |
| task-detail-priority | — | — | — | — | — | — |
| task-detail-relationship | — | — | — | — | — | — |
| my-profile | ✅ | ✅ | — | — | — | — |
| coach-detail | — | — | — | — | — | — |
| customer-detail | — | — | — | — | ✅ | — |
| customer-service-records | — | — | ✅ | — | — | — |
| performance | — | — | ✅ | — | — | — |
| performance-records | — | — | ✅ | — | — | — |
| notes | ✅ | — | — | — | — | — |
| chat | ✅ | — | — | — | — | — |
| chat-history | ✅ | — | — | — | — | — |
| reviewing | — | — | — | — | — | `data:image/svg` |
| no-permission | — | — | — | — | — | `data:image/svg` |
✅ = 存在该结构,需按规则处理;— = 不存在。
---
## 处理规则速查
| 结构 | MP 处理方式 |
|------|-----------|
| `.safe-area-top` | 去除 `padding-top: env(safe-area-inset-top, 44px)`MP 由 navigationBar 处理 |
| `#bottomNav` | 不迁移MP 用原生 tabBarH5 截图时隐藏 |
| `.ai-float-btn-container` | 双端截图前隐藏 |
| `<dev-fab />` | MP 截图前 `wx:if="{{false}}"` |
| `.filter-overlay` | 优先用组件遮罩层 |
| `.tab-active::after` | 额外 `<view>` 模拟 |
| `.speech-bubble::after` | 绝对定位 `<view>` + `transform: rotate(45deg)` |
| `data:image/svg+xml` | 导出 PNG/base64 或用 CSS 渐变模拟 |
---
## 页面导航栏模式
| 模式 | 页面 |
|------|------|
| A系统默认 navBar | board-finance, board-coach, board-customer, task-list, my-profile |
| B自定义 navBar | task-detail 系列, coach-detail, customer-detail, performance, notes, chat, chat-history, customer-service-records, performance-records |

View File

@@ -0,0 +1,41 @@
# 版本变更记录
> 记录文档体系的版本演进。旧版本变更见下方「历史版本」章节(原 `docs/h5_ui/compare/CHANGELOG.md` 已归档)。
---
## 文档体系 v5.02026-03-12
`docs/h5_ui/compare/` 单目录体系重构为 `docs/miniprogram-dev/` 五层文档体系:
| 变更 | 说明 |
|------|------|
| 拆分 AGENT-PLAYBOOK.md | → 02-action/ 下 5 个专职代理手册 |
| 拆分 ORCHESTRATION-PLAN.md | → 01-orchestration/ 下 3 种工作模式 |
| 新增半自动模式 | user-guided-playbook.md |
| 新增新页面开发模式 | new-page-playbook.md + page-dev-agent.md |
| 提取参考层 | 03-reference/ 下 5 个规范文档 |
| 新增经验层 | 05-lessons/ 下 2 个经验文档 |
| 旧文档归档 | docs/h5_ui/compare/ 下原文件归档到 _archived/ |
---
## 历史版本AGENT-PLAYBOOK
| 版本 | 日期 | 变更摘要 |
|---|---|---|
| v4.2 | 2026-03-11 | 间距测量子代理;通用工具 measure_gaps.py |
| v4.1 | 2026-03-11 | 4 种专职代理;复杂结构专项识别 |
| v4.0 | 2026-03-11 | 截图参数重写;最大重试 5 次;全流程自动化 |
| v3.0 | 2026-03-10 | H5 viewport 430pxDPR 1.5rpx 1:1.75 |
| v2.0 | 2026-03-10 | Benchmark 分析1:1.82,已废弃) |
| v1.0 | 2026-02 | 初始版 |
## 历史版本ORCHESTRATION-PLAN
| 版本 | 日期 | 变更摘要 |
|---|---|---|
| v2.0 | 2026-03-11 | 4 种专职子代理执行模型 |
| v1.7 | 2026-03-10 | board-finance 2 维度×10 屏 |
| v1.5 | 2026-03-09 | board-customer 扩展至 8 维度 |
| v1.0 | 2026-03-09 | 初始版 59 单元 |

View File

@@ -0,0 +1,243 @@
# H5 → 微信小程序视觉还原 — 进度跟踪
> **主代理必读**:每次会话开始时先读本文件,确认当前状态后再下发任务。
> 每完成一个处理单元后立即更新本文件。
>
> 文档体系入口:[docs/miniprogram-dev/README.md](../README.md)
> 批量自动模式Power `miniprogram-h5-conversion` → `readSteering("batch-auto.md")`
---
## 当前状态(会话开始时填写)
| 项目 | 内容 |
|---|---|
| **当前处理单元** | #54 coach-detail/step-0D 批次开始) |
| **下一个单元** | #54 coach-detail/step-0 |
| **本次会话目标** | D 批次coach-detail + customer-detail + customer-service-records12 单元) |
| **MCP 状态** | ✅ 已连接wsEndpoint, healthy |
| **最后更新** | 2026-03-12 |
| **决策** | 跳过 margin 修正,接受 default 维度现有结果,推进 compare 维度 |
| **MP compare scrollHeight** | board-content: 5030px, maxScroll: 4396px |
### MCP 就绪检查清单(每次会话开始时执行)
```
[ ] mcp_weixin_devtools_mcp_get_connection_status → 已连接
[ ] Playwright MCP → 可用(测试 browser_run_code
[ ] 微信开发者工具已开启并显示目标页面
[ ] pixel-audit Power → 已激活readSteering("measure.md") 获取审计方法论)
```
> image-compare MCP 已移除2026-03-12。审计改为结构化拆解→逐级测量→偏差审计详见 Power `miniprogram-h5-conversion` → `readSteering("audit.md")`。
---
## 总览
| 指标 | 値 |
|------|-----|
| 总单元数 | 89 |
| 已完成 | 0 |
| 跳过 | 0 |
| 进行中 | 0 |
| 未开始 | 89 |
| 整体进度 | 0% |
---
## 前置任务
| # | 任务 | 状态 | 完成日期 | 备注 |
|---|------|------|----------|------|
| P0 | TS 零诊断基线检查 | ✅ 完成 | 2026-03-10 | 17 页面全部通过 |
| P1 | 跨页面共性偏差批量修复 | ✅ 完成 | 2026-03-10 | board-finance/coach/customer 三页 |
| P2 | 截图技术验证 | ✅ 完成 | 2026-03-10 | DPR=1.5 双端 645×1128 已验证 |
| P3 | AGENT-PLAYBOOK.md v4.2 更新 | ✅ 完成 | 2026-03-11 | 4种专职子代理、间距测量代理、裁剪修正 |
## A 批次board-finance/default10 单元)
> H5 scrollHeight=5600maxScroll=484810 步
> 序列0, 600, 1200, 1800, 2400, 3000, 3600, 4200, 4800, 4848
| # | 单元 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|-----------|----------|-----------|------|------|
| 1 | default/step-0 | 6.18% | 3R2回滚 | 6.18% | ✅ 通过 | 剩余为不可消除差异 |
| 2 | default/step-600 | 9.02% | 2均回滚 | 9.02% | ✅ 通过 | 含12px滚动偏移+字体渲染 |
| 3 | default/step-1200 | 11.07% | 1回滚 | 11.07% | ✅ 通过 | 含卡片间距差异(step-0元素)+字体渲染 |
| 4 | default/step-1800 | 4.90% | 0 | 4.90% | ✅ 通过 | 直接通过,无需修正 |
| 5 | default/step-2400 | 17.86% | 2 | 15.84% | ⚠️ 跳过 | 前序板块累积高度差异~103pxmock数据已修正 |
| 6 | default/step-3000 | 14.72% | 0 | 14.72% | ⚠️ 跳过 | 累积高度偏移~153px+TOC浮层mock数据一致 |
| 7 | default/step-3600 | 14.88% | 0 | 14.88% | ⚠️ 跳过 | 累积高度偏移153-260px+TOC浮层mock数据一致 |
| 8 | default/step-4200 | 3.28% | 0 | 3.28% | ✅ 通过 | 页面底部两端均接近maxScroll |
| 9 | default/step-4800 | 3.31% | 0 | 3.31% | ✅ 通过 | H5 clamp到4203MP clamp到3873 |
| 10 | default/step-4848 | 3.31% | 0 | 3.31% | ✅ 通过 | 与step-4800像素级一致 |
## A 批次board-finance/compare10 单元)
> 环比开启后页面高度可能变化scrollTop 序列需实测确认
| # | 单元 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|-----------|----------|-----------|------|------|
| 11 | compare/step-0 | 6.14% | 0 | 6.14% | ✅ 通过 | 剩余为不可消除差异与default维度一致 |
| 12 | compare/step-600 | 10.06% | 0 | 10.06% | ✅ 通过 | 与default 9.02%接近,+1.04%来自环比元素 |
| 13 | compare/step-1200 | 11.06% | 0 | 11.06% | ✅ 通过 | 与default 11.07%几乎一致 |
| 14 | compare/step-1800 | 4.39% | 0 | 4.39% | ✅ 通过 | 与default 4.90%接近,直接通过 |
| 15 | compare/step-2400 | 10.78% | 0 | 10.78% | ⚠️ 跳过 | 累积高度偏移与default维度同因 |
| 16 | compare/step-3000 | 16.32% | 0 | 16.32% | ⚠️ 跳过 | 累积高度偏移与default维度同因 |
| 17 | compare/step-3600 | 7.47% | 0 | 7.47% | ⚠️ 跳过 | 累积高度偏移+MP scrollTop被clamp |
| 18 | compare/step-4200 | 9.34% | 0 | 9.34% | ⚠️ 跳过 | MP maxScroll clamp两端内容窗口偏移327px |
| 19 | compare/step-4800 | 3.41% | 0 | 3.41% | ✅ 通过 | 页面底部两端均clamp到maxScroll |
| 20 | compare/step-4827 | 3.33% | 0 | 3.33% | ✅ 通过 | 与step-4800像素级一致 |
## A 批次board-coach4 单元单屏×4 维度)
| # | 单元 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|-----------|----------|-----------|------|------|
| 21 | perf/step-0 | 11.20% | 4 | 10.92% | ✅ 条件通过 | 扣除白名单(tab-bar+字体)后<3% |
| 22 | salary/step-0 | 11.23% | 0 | 11.23% | ✅ 条件通过 | 与perf基线delta+0.31% |
| 23 | sv/step-0 | 10.75% | 0 | 10.75% | ✅ 条件通过 | 与perf基线delta-0.17% |
| 24 | task/step-0 | 10.48% | 0 | 10.48% | ✅ 条件通过 | 与perf基线delta-0.44% |
## A 批次board-customer8 单元单屏×8 维度)
| # | 单元 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|-----------|----------|-----------|------|------|
| 25 | recall/step-0 | 6.90% | 0 | 6.90% | ✅ 通过 | 白名单完全覆盖净差异≈0% |
| 26 | potential/step-0 | 4.25% | 0 | 4.25% | ✅ 通过 | 白名单完全覆盖 |
| 27 | balance/step-0 | 4.15% | 0 | 4.15% | ✅ 通过 | 白名单完全覆盖 |
| 28 | recharge/step-0 | 4.47% | 0 | 4.47% | ✅ 通过 | 白名单完全覆盖 |
| 29 | recent/step-0 | 4.30% | 0 | 4.30% | ✅ 通过 | 白名单完全覆盖 |
| 30 | spend60/step-0 | 3.87% | 0 | 3.87% | ✅ 通过 | 白名单完全覆盖 |
| 31 | freq60/step-0 | 4.58% | 0 | 4.58% | ✅ 通过 | 白名单完全覆盖 |
| 32 | loyal/step-0 | 4.57% | 0 | 4.57% | ✅ 通过 | 白名单完全覆盖 |
## B 批次task-list + my-profile4 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 33 | step-0 | task-list | 40.82% | 2 | 40.56% | ⚠️ 跳过 | Banner 用户信息区域结构差异+mock 数据+红戳/进度条设计差异 |
| 34 | step-600 | task-list | 8.11% | 0 | 8.11% | ✅ 通过 | 白名单覆盖tab-bar+字体+mock 数据差异) |
| 35 | step-676 | task-list | 7.08% | 0 | 7.08% | ✅ 通过 | 白名单覆盖 |
| 36 | step-0 | my-profile | 1.61% | 0 | 1.61% | ✅ 通过 | 完美还原,零修正 |
## C 批次task-detail 系列17 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 37 | step-0 | task-detail | 22.94% | 3 | 21.13% | ⚠️ 跳过 | mock 数据差异~15%+Banner 纹理~3%+字体渲染~3% |
| 38 | step-600 | task-detail | 9.88% | 4 | 9.31% | ⚠️ 跳过 | 白名单覆盖(字体+Banner纹理+行高偏差+AI图标 |
| 39 | step-1200 | task-detail | 7.39% | 1 | 7.39% | ⚠️ 跳过 | 白名单覆盖(字体+行高偏差+窗口微偏移) |
| 40 | step-1800 | task-detail | 6.98% | 1 | 6.90% | ⚠️ 跳过 | 白名单覆盖(内容窗口错位~3-4%+字体渲染) |
| 41 | step-2243 | task-detail | 6.41% | 0 | 6.41% | ⚠️ 跳过 | 白名单覆盖(内容窗口错位+字体渲染R1回滚 |
| 42 | step-0 | task-detail-callback | 20.07% | 2 | 19.80% | ⚠️ 跳过 | 技术栈实现差异+话术设计变体+mock 数据 |
| 43 | step-600 | task-detail-callback | 15.14% | 1 | 15.05% | ⚠️ 跳过 | 白名单覆盖(话术设计变体+字体+CSS实现差异 |
| 44 | step-1200 | task-detail-callback | 12.73% | 0 | 12.73% | ⚠️ 跳过 | 白名单覆盖(窗口偏移+话术变体+字体渲染) |
| 45 | step-1645 | task-detail-callback | 7.15% | 0 | 7.15% | ⚠️ 跳过 | 白名单覆盖(话术变体+字体+CSS双端 maxScroll clamp |
| 46 | step-0 | task-detail-priority | 24.09% | 0 | 24.09% | ⚠️ 跳过 | 白名单覆盖mock数据+字体+Banner纹理+技术栈差异orange主题色正确 |
| 47 | step-600 | task-detail-priority | 10.78% | 0 | 10.78% | ⚠️ 跳过 | 白名单覆盖(字体+Banner纹理+mock数据+rpx偏移 |
| 48 | step-1200 | task-detail-priority | 11.15% | 0 | 11.15% | ⚠️ 跳过 | 白名单覆盖(窗口错位+字体+Banner纹理MP scrollTop clamp到943 |
| 49 | step-1637 | task-detail-priority | 10.26% | 0 | 10.26% | ⚠️ 跳过 | 白名单覆盖(窗口错位+字体+Banner纹理双端 maxScroll clamp |
| 50 | step-0 | task-detail-relationship | 20.49% | 0 | 20.49% | ⚠️ 跳过 | 白名单覆盖mock数据+字体+Banner纹理+技术栈差异pink主题色正确 |
| 51 | step-600 | task-detail-relationship | 12.84% | 0 | 12.84% | ⚠️ 跳过 | 白名单覆盖mock数据+字体+Banner纹理+CSS差异 |
| 52 | step-1200 | task-detail-relationship | 14.68% | 0 | 14.68% | ⚠️ 跳过 | 白名单覆盖窗口严重错位559px+字体+mock数据+Banner纹理 |
| 53 | step-1523 | task-detail-relationship | 13.36% | 0 | 13.36% | ⚠️ 跳过 | 白名单覆盖窗口错位873px+字体+mock数据双端 maxScroll clamp |
## D 批次详情页12 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 54 | step-0 | coach-detail | — | — | — | 未开始 | |
| 55 | step-600 | coach-detail | — | — | — | 未开始 | |
| 56 | step-1200 | coach-detail | — | — | — | 未开始 | |
| 57 | step-1800 | coach-detail | — | — | — | 未开始 | |
| 58 | step-2166 | coach-detail | — | — | — | 未开始 | |
| 59 | step-0 | customer-detail | — | — | — | 未开始 | |
| 60 | step-600 | customer-detail | — | — | — | 未开始 | |
| 61 | step-1200 | customer-detail | — | — | — | 未开始 | |
| 62 | step-1800 | customer-detail | — | — | — | 未开始 | |
| 63 | step-2318 | customer-detail | — | — | — | 未开始 | |
| 64 | step-0 | customer-service-records | — | — | — | 未开始 | |
| 65 | step-209 | customer-service-records | — | — | — | 未开始 | |
## E 批次绩效页面18 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 66 | step-0 | performance | — | — | — | 未开始 | |
| 67 | step-600 | performance | — | — | — | 未开始 | |
| 68 | step-1200 | performance | — | — | — | 未开始 | |
| 69 | step-1800 | performance | — | — | — | 未开始 | |
| 70 | step-2400 | performance | — | — | — | 未开始 | |
| 71 | step-3000 | performance | — | — | — | 未开始 | |
| 72 | step-3600 | performance | — | — | — | 未开始 | |
| 73 | step-4200 | performance | — | — | — | 未开始 | |
| 74 | step-4800 | performance | — | — | — | 未开始 | |
| 75 | step-5400 | performance | — | — | — | 未开始 | |
| 76 | step-6000 | performance | — | — | — | 未开始 | |
| 77 | step-6600 | performance | — | — | — | 未开始 | |
| 78 | step-6953 | performance | — | — | — | 未开始 | |
| 79 | step-0 | performance-records | — | — | — | 未开始 | |
| 80 | step-600 | performance-records | — | — | — | 未开始 | |
| 81 | step-1200 | performance-records | — | — | — | 未开始 | |
| 82 | step-1800 | performance-records | — | — | — | 未开始 | |
| 83 | step-1925 | performance-records | — | — | — | 未开始 | |
## F 批次对话页面3 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 84 | step-0 | chat | — | — | — | 未开始 | |
| 85 | step-309 | chat | — | — | — | 未开始 | |
| 86 | step-0 | chat-history | — | — | — | 未开始 | |
## G 批次其他3 单元)
| # | 单元 | 页面 | 初始差异率 | 修正轮次 | 最终差异率 | 状态 | 备注 |
|---|------|------|-----------|----------|-----------|------|------|
| 87 | step-0 | notes | — | — | — | 未开始 | |
| 88 | step-600 | notes | — | — | — | 未开始 | |
| 89 | step-957 | notes | — | — | — | 未开始 | |
---
## 主代理会话恢复流程
**每次新会话开始时,主代理必须执行以下步骤:**
```
步骤1读取本文件PROGRESS.md
→ 找到「当前状态」区块,确认「下一个单元」
→ 扫描单元表,找到第一个状态为「进行中」或「未开始」的行
步骤2MCP 就绪检查
→ mcp_weixin_devtools_mcp_get_connection_status
→ 若未连接等待10秒后重试最多3次
→ 3次失败后mcp_weixin_devtools_mcp_recompile 重新编译,再重试
步骤3更新「当前状态」区块
→ 填写「当前处理单元」和「本次会话目标」
步骤4从「下一个单元」开始下发任务
→ 严格按编号顺序,单元完成后立即更新本文件对应行
```
**单元状态说明:**
| 状态 | 含义 |
|------|------|
| 未开始 | 尚未处理 |
| 进行中 | 当前会话正在处理 |
| ✅ 通过 | 差异率 <5%,已收敛 |
| ⚠️ 跳过 | 5轮未收敛已记录差异继续下一单元 |
| 🔁 重写中 | 差异率 >20%,触发结构重写流程 |
---
## 变更日志
| 日期 | 变更 |
|------|------|
| 2026-03-12 | 迁移至 docs/miniprogram-dev/04-audit/,更新内部路径引用 |
| 2026-03-11 | 新增会话恢复机制、MCP就绪检查、重写状态标记 |
| 2026-03-10 | 全部 89 单元初始化,前置任务 P0-P3 完成 |

View File

@@ -0,0 +1,66 @@
# 收敛模式与不可消除差异
> 记录视觉还原过程中的收敛规律和不可消除差异白名单。
> 基于 A-C 批次53 单元)的实际数据总结。
---
## 不可消除差异白名单
以下差异在所有页面中均存在,不计入差异率,审计报告中标注「不可消除,已忽略」:
| 差异类型 | 根因 | 估计贡献 |
|---|---|---|
| 字体渲染(字形、次像素、间距) | ChromiumNoto Sans SCvs 微信 WebView系统字体 | ~2% |
| 行内元素高度系统性偏小 ~7% | WebView 字体度量ascent/descent/leading差异 | ~1% |
| rpx 取偶数四舍五入 | 每个 px 值换算后取偶数,累积微小偏差 | ~0.5% |
| 抗锯齿差异 | 渲染引擎对边缘像素处理不同 | ~0.5% |
| 环比箭头SVG vs 文字 ↑↓) | 已确认可接受 | — |
| CSS 渐变文字 → 纯色文字 | MP 不支持 `-webkit-text-fill-color` + clip | — |
| Banner 纹理差异 | 7 层叠加渐变 + SVG 纹理无法完全复现 | ~3% |
背景噪音基线:~3.87%Benchmark v3 实测)。<5% 通过目标在基线之上仅有 ~1% 修正空间。
---
## 典型收敛曲线
### 单屏页面board-coach/customer 维度)
- 初始差异率4-11%
- 白名单扣除后:<3%
- 通常 0 轮修正直接通过
### 多屏长页面board-finance
- step-06% → 0 轮通过
- step-600~12009-11% → 含滚动偏移 + 字体渲染
- step-2400~360015-18% → 累积高度偏移,跳过
- step-4200+3% → 页面底部,双端 clamp 到 maxScroll
### 任务详情系列task-detail
- step-020-24% → mock 数据差异 ~15% + Banner 纹理 ~3% + 字体 ~3%
- 全部跳过(白名单覆盖)
---
## 跳过原因分类
| 原因 | 出现频率 | 可修复性 |
|------|---------|---------|
| 累积高度偏移rpx 取整导致 MP 页面更短) | 高 | 不可修复(系统性) |
| mock 数据差异 | 中 | 可修复(对齐数据) |
| Banner 纹理差异 | 中 | 部分可修复(简化纹理) |
| 话术设计变体H5 vs MP 实现差异) | 低 | 需重构 |
---
## 高度偏移规律
MP 页面总高度因 rpx 取整累积比 H5 略短。偏移量随页面长度增大:
| 页面 | H5 scrollHeight | MP scrollHeight | 偏移 |
|------|----------------|----------------|------|
| board-finance/default | 5600px | ~5030px | ~570px10% |
| board-finance/compare | 5579px | ~5030px | ~549px |
偏移导致中间屏step-2400~3600的内容窗口错位严重是跳过的主要原因。
页面首尾屏不受影响(首屏 scrollTop=0尾屏双端 clamp 到 maxScroll

View File

@@ -0,0 +1,148 @@
# 踩坑速查与迁移经验
> 经 User 确认后录入的实践经验。AI 发现新踩坑点时先提出建议User 确认后再录入。
> 按类别组织,每条记录包含:场景、问题、解决方案、影响页面。
---
## WXML 模板
### 禁止在 `{{}}` 中调用 JS 方法
- 场景WXML 模板中使用 `.toFixed()``.map()`
- 问题:小程序模板不支持 JS 方法调用
- 方案:用 WXS 模块 `utils/format.wxs`
- 影响:所有页面
### TabBar 页面跳转必须用 `wx.switchTab`
- 场景:从非 tabBar 页面跳转到 task-list、board-finance、my-profile
- 问题:`navigateTo` 会静默失败
- 方案tabBar 页面一律用 `wx.switchTab`
- 影响:所有涉及 tabBar 跳转的页面
---
## 样式与布局
### 一屏页面用 `height: 100vh` 而非 `min-height`
- 场景login、reviewing、no-permission 等单屏页面
- 问题:`min-height: 100vh` 在某些情况下不生效
- 方案:`height: 100vh` + `box-sizing: border-box`
- 影响login, reviewing, no-permission
### 状态栏适配禁止用 `env(safe-area-inset-top)`
- 场景:自定义 navBar 页面的顶部 padding
- 问题:小程序不支持 `env()` CSS 函数
- 方案JS `wx.getSystemInfoSync().statusBarHeight` 动态设置
- 影响:所有自定义 navBar 页面
### `padding-top + 100vh` 必须配合 `box-sizing: border-box`
- 场景:有顶部 padding 的全屏页面
- 问题:不加 box-sizing 会导致底部内容溢出
- 方案:始终添加 `box-sizing: border-box`
- 影响:所有全屏页面
---
## TDesign 组件
### `t-button icon` 只支持内置图标
- 场景:按钮中使用品牌图标(微信 logo 等)
- 问题:`icon` 属性只接受 TDesign 内置图标名
- 方案:用 `<view>` + `<image>` 组合替代
- 影响login 页面微信登录按钮
### TDesign 默认样式优先级高
- 场景:需要大幅覆盖 TDesign 组件样式
- 问题CSS 变量和外部样式类不够用时,`!important` 也可能不生效
- 方案:直接用原生 `<view>` 实现,绕开样式干扰
- 影响:视具体组件
---
## 资源引用
### 所有 H5 内联 SVG 必须导出为独立文件
- 场景H5 中直接写在 HTML 内的 `<svg>` 元素
- 问题:小程序不支持内联 SVG
- 方案:导出为 `.svg` 文件存放 `assets/icons/`,用 `<image>` 引用
- 影响:所有含内联 SVG 的页面
### 引用不存在的图片会 500 错误
- 场景WXML 中 `<image src>` 指向不存在的文件
- 问题:不是 404 而是 500 错误,难以排查
- 方案:用 CSS 渐变、emoji、`<t-icon>` 替代;或确保文件存在
- 影响:所有页面
---
## 截图与对比
### rpx 取整导致累积高度偏移
- 场景:多屏长页面的中间屏截图对比
- 问题MP 页面总高度比 H5 短 ~10%,中间屏内容窗口错位
- 方案:使用锚点对齐法(按元素位置对齐而非 scrollTop 数值)
- 影响board-finance, performance 等长页面
- 发现日期2026-03-10
### AI 浮动按钮动画造成随机差异
- 场景:截图时 ai-float-button 的 gradientShift 动画处于不同帧
- 问题:每次截图差异 ~1%
- 方案双端截图前隐藏H5 用 JSMP 用 `wx:if="{{false}}"`)
- 影响:所有含 ai-float-button 的页面
- 发现日期2026-03-10
### 禁止跨维度套用布局假设H5 原型是唯一视觉真相
- 场景board-customer "最专一"卡片的 `.loyal-table` 布局
- 问题:其他维度(最应召回等)的 `card-mid-row` / `card-assistant-row``ml-11`80rpx 对齐头像右侧),开发时"合理推断"表格也应该加 `margin-left: 80rpx`。但 H5 原型中表格容器没有 `ml-11`,是从卡片 padding 开始的left=16px。Playwright 实测才发现偏差
- 方案:每个维度的每个组件都必须回到 H5 HTML 逐一确认 Tailwind 类,禁止从其他维度"类推"。不确定时用 Playwright `getBoundingClientRect()` 实测 H5 元素位置
- 影响所有多维度页面board-customer 8 维度、board-coach 4 维度)
- 发现日期2026-03-12
### H5 与 MP mock 数据不同,像素级 diff 需结合结构比对
- 场景:用 PIL/numpy 或 image-compare 对比 H5 和 MP 截图
- 问题H5 原型使用硬编码 mock 数据(如孙先生/王先生/李女士MP 使用后端返回的测试数据(王先生/李女士/张先生),文字内容不同导致像素 diff 高达 11%18 个分段覆盖全页面,无法区分"数据差异"和"样式差异"
- 方案:像素级 diff 仅用于发现大面积结构偏移(窗口错位、整块缺失)。样式还原度验证的主要方法是 Tailwind 类→rpx 值逐项比对表,逐一确认每个 CSS 属性的换算结果
- 影响:所有页面的截图对比流程
- 发现日期2026-03-12
### Tailwind→WXSS 映射必须逐项建表验证
- 场景:将 H5 Tailwind 类翻译为小程序 WXSS
- 问题:凭记忆或经验直接写 WXSS 值容易出错——`font-medium` 是 500 不是 600`gap-1` 是 4px 不是 2px`space-y-2` 是 8px 不是 4px。错误在视觉上不明显但会累积
- 方案对每个组件建立完整的对照表H5 Tailwind 类 → 计算值 px → rpx 换算 → MP WXSS 值),逐行核对。参考速查表:`2→4, 4→8, 6→10, 8→14, 10→18, 12→22, 14→24, 16→28, 20→36, 24→42`
- 影响:所有页面的 WXSS 编写
- 发现日期2026-03-12
### 相邻元素间距叠加导致高度翻倍
- 场景:经营一览的 `.overview-grid-2` 底部 padding 32rpx + `.ai-insight-section` margin-top 32rpx间距翻倍为 64rpx
- 问题H5 中 grid 无 margin-bottom间距完全由下方元素的 `mt-4`(16px) 提供。MP 中两端都加了间距,导致块间距翻倍、整体高度偏高
- 方案:校对间距时必须确认「这段间距是谁提供的」——上方元素的 padding-bottom 还是下方元素的 margin-top。用 Playwright `getComputedStyle` 实测 H5 两个相邻元素的 margin/padding确认间距归属后只在一端设置
- 影响:所有包含多个子区块的板块(经营一览、预收资产等)
- 发现日期2026-03-12
### 用 Playwright 实测 H5 比手动解析 Tailwind 更可靠
- 场景H5 原型文件是单行 minified HTML手动读取 Tailwind 类名容易遗漏或误判
- 问题Tailwind 类名组合后的实际渲染值不直观(如 `p-4` 在嵌套容器中可能被覆盖,`space-y-2` 的实际 gap 取决于子元素数量),手动推算容易出错
- 方案:通过 `browser_run_code` 创建 375×812 viewport + DPR 1.5 的 context`getComputedStyle` + `getBoundingClientRect` 直接拿到渲染后的实际 px 值,再按换算规则转 rpx。这个方法应作为所有页面校对的标准流程
- 影响:所有页面的 WXSS 校对流程
- 发现日期2026-03-12
### Tailwind 字号类自带 line-heightWXSS 必须同步补齐
- 场景:校对经营一览的现金流水概览 4 个块H5 明显比 MP 高
- 问题Tailwind 的 `text-xs`/`text-sm`/`text-lg`/`text-xl` 等字号类捆绑了特定的 `line-height`(如 `text-lg` = `font-size: 18px; line-height: 28px`),但 WXSS 只写了 `font-size` 没写 `line-height`,小程序默认行高约 1.2,远小于 Tailwind 的行高,导致每行文字占据的垂直空间不足,块整体矮了一截
- 方案:每个 Tailwind 字号类转 WXSS 时,必须同时写 `font-size``line-height`。完整对照表87.5% 缩放):
| Tailwind | font-size (px) | line-height (px) | WXSS font-size | WXSS line-height |
|----------|---------------|------------------|----------------|-----------------|
| `text-xs` | 12 | 16 | 22rpx | 28rpx |
| `text-sm` | 14 | 20 | 24rpx | 34rpx |
| `text-base` | 16 | 24 | 28rpx | 42rpx |
| `text-lg` | 18 | 28 | 32rpx | 48rpx |
| `text-xl` | 20 | 28 | 36rpx | 48rpx |
| `text-2xl` | 24 | 32 | 42rpx | 56rpx |
- 影响:所有页面的所有文字元素
- 发现日期2026-03-12
---
> 新增经验请按以上格式录入,包含:场景、问题、解决方案、影响页面、发现日期(可选)。

View File

@@ -0,0 +1,74 @@
# 小程序前端页面开发与原型迁移指南
> 操作文档已迁移至 Kiro Power `miniprogram-h5-conversion`,通过关键词自动激活。
> 本目录仅保留实时更新的仓库驻留文件(进度、经验、页面结构等)。
---
## Power 使用方式
操作文档调度手册、子代理手册、转换规则、WXSS 规范、CSS 风险清单、Power 集成指南)已打包为 Kiro Power
- Power 名称:`miniprogram-h5-conversion`
- 激活方式:对话中提及"小程序页面"、"H5转换"、"wxml"、"wxss"、"rpx"等关键词时自动激活
- 手动激活:`kiroPowers action="activate" powerName="miniprogram-h5-conversion"`
- 查看 steering 列表:激活后在返回的 `steeringFiles` 中选择需要的文件
Power 包含 12 个 steering 文件,按职能分三层:
| 层 | 文件 | 说明 |
|----|------|------|
| 调度层 | `batch-auto.md` | 89 单元批量编排 |
| 调度层 | `user-guided.md` | 半自动模式 |
| 调度层 | `new-page.md` | 新页面开发 |
| 行动层 | `screenshot.md` | 截图代理手册 |
| 行动层 | `audit.md` | 审计代理手册 |
| 行动层 | `fix.md` | 修正代理手册 |
| 行动层 | `verify.md` | 验证代理手册 |
| 行动层 | `page-dev.md` | 页面开发代理手册 |
| 参考层 | `conversion-rules.md` | 核心转换规则 |
| 参考层 | `wxss-rules.md` | WXSS 标准值速查 |
| 参考层 | `css-risk.md` | CSS 风险特性清单 |
| 参考层 | `power-integration.md` | Power 调用规范 |
---
## 仓库驻留文件(实时更新,不在 Power 内)
```
docs/miniprogram-dev/
├── README.md ← 你在这里
├── 03-reference/
│ ├── page-structure-map.md # 各页面特殊结构速查(新增页面时更新)
│ └── benchmark-history.md # 基准测试历史记录
├── 04-audit/
│ ├── PROGRESS.md # 89 单元迁移进度(每次会话必读)
│ └── CHANGELOG.md # 文档体系版本变更
└── 05-lessons/
├── pitfalls.md # 踩坑速查(实战经验,持续更新)
└── convergence-patterns.md # 收敛模式 + 不可消除差异白名单
```
---
## Power 依赖清单
| Power | 用途 |
|-------|------|
| `wechat-miniprogram` | 小程序开发规范WXML/WXSS/API/TDesign |
| `pixel-audit` | 像素间距测量 + rpx 换算 |
| `playwright` | H5 端截图 |
| `weixin-devtools` | MP 端截图 + 页面操作 |
---
## 关联资源
| 资源 | 路径 |
|------|------|
| H5 原型页面 | `docs/h5_ui/pages/*.html` |
| 设计 Token | `docs/h5_ui/design-tokens.json` |
| 图标映射表 | `docs/h5_ui/icon-mapping.md` |
| 截图产物 | `docs/h5_ui/compare/<page>/` |
| 小程序源码 | `apps/miniprogram/miniprogram/pages/` |
| 辅助脚本 | `scripts/ops/measure_gaps.py``scripts/ops/anchor_compare.py` |