# 实现计划：H5 → 微信小程序批量迁移

## 概述

基于 33 条需求和技术设计文档，将 17 个 H5 原型页面迁移为原生微信小程序页面。按 A-G 七个批次执行，每页走完 7 步标准流程（含 Step 0 页面分析）。输入物分两批提供：第一批（结构迁移 Step 0-5）、第二批（像素精调 Step 6-7）。

## 任务

- [ ] 1. 全局基础设施搭建
  - [ ] 1.1 创建 AI 图标配色工具模块
    - 文件：`utils/ai-color.ts`
    - 实现 `AI_COLOR_SCHEMES` 常量（6 种配色：red/orange/yellow/blue/indigo/purple）
    - 实现 `getRandomAiColor()` 函数，返回 `{ className, vars }` 对象
    - _需求: 32.1, 32.3, 32.5_

  - [ ] 1.2 创建 AI 图标全局 WXSS 样式
    - 在 `app.wxss` 中添加 `.ai-inline-icon`、`.ai-title-badge`、`.ai-color-*` 6 个配色类
    - 实现 `ai-shimmer`（12s）和 `ai-pulse`（3s）两个 `@keyframes` 动画
    - _需求: 32.1, 32.2_

  - [ ] 1.3 导出小系列机器人 SVG
    - 从 H5 源码提取白色填充版机器人 SVG，保存为 `assets/icons/ai-robot-sm.svg`
    - 复用已有 `assets/icons/ai-robot.svg`（大系列）
    - 更新 `docs/h5_ui/icon-mapping.md`
    - _需求: 32.6, 33.2, 33.3_

  - [ ] 1.4 创建中间生成物目录结构
    - 创建 `docs/h5_ui/mp-screenshots/`（MP 截图，按页面分子目录）
    - 创建 `docs/h5_ui/diffs/`（像素对比结果，按页面分子目录）
    - 创建 `docs/h5_ui/h5-segments/`（H5 逐段截图，按页面分子目录）
    - 确认 `.gitignore` 不排除这些目录
    - _需求: 33.1_

  - [ ] 1.5 验证全局基础设施
    - 编译验证 `app.wxss` 无警告
    - 在任意已有页面中测试 AI 配色工具模块可正常导入和调用
    - _需求: 17.1_

- [ ] 2. A 批次 — board-finance（看板-财务）
  - [ ] 2.1 Step 0: 页面分析
    - 打开 H5 原型截图 + `interactions/board-finance.md`
    - 确认屏数（预计 6 段：经营一览/预收资产/应计收入/现金流入/现金流出/助教分析）
    - 列出所有交互态（时间筛选/区域筛选/指标弹窗/目录面板/长按菜单）
    - 输出工作量估算表
    - _需求: 1.1, 1.3_

  - [ ] 2.2 Step 1-2: 输入物冻结 + 迁移审计
    - 冻结第一批输入物（Playbook + design-tokens + icon-mapping + HTML + CSS + interactions）
    - 输出《迁移审计报告》7 项（页面结构/CSS 风险/样式映射/图标处理/交互映射/外部依赖/缺失信息）
    - _需求: 3.1, 3.2, 4.1, 4.2, 4.3_

  - [ ] 2.3 Step 3: 规则化转换（按屏逐个开发）
    - 创建四文件骨架 → .json 注册组件 → 按屏转换 WXML/WXSS/TS
    - 包含：filter-dropdown 复用、metric-card 复用、ai-float-button 集成
    - filter-bar 高度统一 70 逻辑像素
    - Mock 数据 + 三态处理
    - _需求: 5, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16, 21, 23.1, 32_

  - [ ] 2.4 Step 4-5: 编译验证 + 结构还原验证
    - 7 项编译检查（WXML/WXSS/控制台/图片/组件/路由/TS 类型）
    - 9 项结构核对（按屏逐个验证）
    - _需求: 17, 18_

  - [ ] 2.5 Step 6-7: 像素精调 + 验收签收
    - 补充第二批输入物（computed-styles + 截图）
    - 使用 anchor_compare.py v2 逐段对比
    - H5 逐段截图 → `docs/h5_ui/h5-segments/board-finance/`
    - MP 逐段截图 → `docs/h5_ui/mp-screenshots/board-finance/`
    - Diff 图 → `docs/h5_ui/diffs/board-finance/`
    - 输出 `docs/h5_ui/diffs/board-finance/report.md`（差异率 + 问题区域）
    - 每轮 2-5 处修改，循环至差异率 ≤ 10%
    - 12 项验收清单
    - _需求: 3.3, 19, 20_

- [ ] 3. A 批次 — board-coach（看板-助教）
  - [ ] 3.1 Step 0: 页面分析
    - 确认屏数、交互态（排序筛选/擅长项目筛选/时间筛选）
    - _需求: 1.1, 1.3_

  - [ ] 3.2 Step 1-2: 输入物冻结 + 迁移审计
    - _需求: 3.1, 3.2, 4_

  - [ ] 3.3 Step 3: 规则化转换
    - 包含：board-tab-bar 复用、filter-dropdown 复用
    - _需求: 5-16, 21, 23.2, 23.4, 23.5, 32_

  - [ ] 3.4 Step 4-5: 编译验证 + 结构还原验证
    - _需求: 17, 18_

  - [ ] 3.5 Step 6-7: 像素精调 + 验收签收
    - _需求: 19, 20_

- [ ] 4. A 批次 — board-customer（看板-客户）
  - [ ] 4.1 Step 0: 页面分析
    - 确认屏数、交互态（客户类型筛选/偏爱项目筛选）
    - _需求: 1.1, 1.3_

  - [ ] 4.2 Step 1-2: 输入物冻结 + 迁移审计
    - _需求: 3.1, 3.2, 4_

  - [ ] 4.3 Step 3: 规则化转换
    - 包含：board-tab-bar 复用、filter-dropdown 复用、heart-icon 复用、hobby-tag 复用
    - _需求: 5-16, 21, 23.3, 23.4, 23.5, 32_

  - [ ] 4.4 Step 4-5: 编译验证 + 结构还原验证
    - _需求: 17, 18_

  - [ ] 4.5 Step 6-7: 像素精调 + 验收签收
    - _需求: 19, 20_

- [ ] 5. 检查点 A — 看板批次验收
  - 确认 3 个看板页面全部通过 12 项验收清单
  - 确认共享组件（filter-dropdown、board-tab-bar、metric-card、heart-icon）在实际页面中表现正常
  - 确认 AI 图标配色系统在看板页面中正常工作
  - 总结 A 批次经验，调整后续批次策略（如有）

- [ ] 6. B 批次 — task-list（任务列表）
  - [ ] 6.1 Step 0: 页面分析
    - 确认屏数、交互态（长按菜单/备注弹窗/空状态）
    - _需求: 1.1_

  - [ ] 6.2 Step 1-2: 输入物冻结 + 迁移审计
    - _需求: 3, 4_

  - [ ] 6.3 Step 3: 规则化转换
    - 包含：banner 复用、note-modal 复用、ai-float-button 集成
    - 长按菜单实现（bindlongpress + 黑底圆角浮层）
    - TabBar 页面路由配置
    - _需求: 5-16, 21, 24.1, 13, 32_

  - [ ] 6.4 Step 4-5: 编译验证 + 结构还原验证
    - _需求: 17, 18_

  - [ ] 6.5 Step 6-7: 像素精调 + 验收签收
    - _需求: 19, 20_

- [ ] 7. B 批次 — my-profile（个人中心）
  - [ ] 7.1 Step 0: 页面分析
    - _需求: 1.1_

  - [ ] 7.2 Step 1-2: 输入物冻结 + 迁移审计
    - _需求: 3, 4_

  - [ ] 7.3 Step 3: 规则化转换
    - TabBar 页面路由配置
    - _需求: 5-16, 21, 24.2, 24.3, 32_

  - [ ] 7.4 Step 4-5: 编译验证 + 结构还原验证
    - _需求: 17, 18_

  - [ ] 7.5 Step 6-7: 像素精调 + 验收签收
    - _需求: 19, 20_

- [ ] 8. 检查点 B — 核心批次验收
  - 确认 task-list 和 my-profile 通过验收
  - 确认 TabBar 导航在三个 TabBar 页面间切换正常
  - 确认长按菜单交互正常（长按 vs 点击互不干扰）

- [ ] 9. C 批次 — task-detail（任务详情主页面）
  - [ ] 9.1 Step 0: 页面分析
    - 确认屏数、交互态（放弃弹窗/备注弹窗/底部固定栏）
    - _需求: 1.1_

  - [ ] 9.2 Step 1-2: 输入物冻结 + 迁移审计
    - _需求: 3, 4_

  - [ ] 9.3 Step 3: 规则化转换
    - 包含：note-modal 复用、ai-float-button 集成、底部固定栏
    - _需求: 5-16, 21, 25.1, 32_

  - [ ] 9.4 Step 4-5: 编译验证 + 结构还原验证
    - _需求: 17, 18_

  - [ ] 9.5 Step 6-7: 像素精调 + 验收签收
    - _需求: 19, 20_

- [ ] 10. C 批次 — task-detail 三个变体
  - [ ] 10.1 复制 task-detail 生成 task-detail-callback
    - 复制四文件 → 替换 banner 背景色 + 按钮配色
    - _需求: 22.2, 22.3, 22.4, 25.2_

  - [ ] 10.2 复制 task-detail 生成 task-detail-priority
    - _需求: 22.2, 22.3, 22.4, 25.2_

  - [ ] 10.3 复制 task-detail 生成 task-detail-relationship
    - _需求: 22.2, 22.3, 22.4, 25.2_

  - [ ] 10.4 三个变体编译验证 + 像素校准
    - 对照各自 H5 原型截图校准色值
    - _需求: 17, 19, 20_

- [ ] 11. 检查点 C — 任务批次验收
  - 确认 task-detail + 3 个变体全部通过验收
  - 确认从 task-list 点击卡片可正确跳转到对应变体页面

- [ ] 12. D 批次 — coach-detail（助教详情）
  - [ ] 12.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 12.2 Step 3: 规则化转换
    - 包含：note-modal 复用、ai-float-button 集成、底部固定栏
    - _需求: 5-16, 21, 26.1, 32_

  - [ ] 12.3 Step 4-7: 编译验证 → 结构还原 → 像素精调 → 验收
    - _需求: 17, 18, 19, 20_

- [ ] 13. D 批次 — customer-detail（客户详情）
  - [ ] 13.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 13.2 Step 3: 规则化转换
    - 包含：hobby-tag 复用、ai-float-button 集成、底部固定栏
    - _需求: 5-16, 21, 26.2, 32_

  - [ ] 13.3 Step 4-7: 编译验证 → 结构还原 → 像素精调 → 验收
    - _需求: 17, 18, 19, 20_

- [ ] 14. D 批次 — customer-service-records（客户服务记录）
  - [ ] 14.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 14.2 Step 3-7: 规则化转换 → 编译 → 结构 → 像素 → 验收
    - _需求: 5-21, 26.3, 32_

- [ ] 15. 检查点 D — 详情批次验收
  - 确认 3 个详情页全部通过验收
  - 确认从看板页面点击卡片可正确跳转到对应详情页

- [ ] 16. E 批次 — performance（业绩总览）
  - [ ] 16.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 16.2 Step 3: 规则化转换
    - 包含：banner 复用、metric-card 复用、ai-float-button 集成
    - _需求: 5-16, 21, 27.1, 32_

  - [ ] 16.3 Step 4-7: 编译验证 → 结构还原 → 像素精调 → 验收
    - _需求: 17, 18, 19, 20_

- [ ] 17. E 批次 — performance-records（业绩明细）
  - [ ] 17.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 17.2 Step 3-7: 规则化转换 → 编译 → 结构 → 像素 → 验收
    - _需求: 5-21, 27.2, 32_

- [ ] 18. 检查点 E — 绩效批次验收
  - 确认 2 个绩效页全部通过验收
  - 确认从 task-list Banner 可跳转到 performance 页面

- [ ] 19. F 批次 — chat（AI 对话）
  - [ ] 19.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 19.2 Step 3: 规则化转换
    - 仿微信对话界面（左助手/右用户气泡）
    - 引用内容卡片、输入区（文本框 + 语音按钮 + 发送）
    - scroll-view 消息区（独立滚动）
    - _需求: 5-16, 21, 28.1, 32_

  - [ ] 19.3 Step 4-7: 编译验证 → 结构还原 → 像素精调 → 验收
    - _需求: 17, 18, 19, 20_

- [ ] 20. F 批次 — chat-history（对话历史）
  - [ ] 20.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - _需求: 1.1, 3, 4_

  - [ ] 20.2 Step 3-7: 规则化转换 → 编译 → 结构 → 像素 → 验收
    - _需求: 5-21, 28.2, 32_

- [ ] 21. 检查点 F — 对话批次验收
  - 确认 chat 和 chat-history 通过验收
  - 确认从 ai-float-button 可跳转到 chat 页面
  - 确认从 chat-history 点击可打开对应会话

- [ ] 22. G 批次 — notes（备忘录）
  - [ ] 22.1 Step 0-2: 页面分析 + 输入物冻结 + 迁移审计
    - 已有历史实现，按标准流程重新审计
    - _需求: 1.1, 1.3, 3, 4_

  - [ ] 22.2 Step 3-7: 规则化转换 → 编译 → 结构 → 像素 → 验收
    - 包含：star-rating 复用
    - _需求: 5-21, 29, 32_

- [ ] 23. 检查点 G — 最终验收
  - 确认 notes 通过验收
  - 确认 my-profile 菜单中"备注记录"可跳转到 notes 页面

- [ ] 24. 全局收尾
  - [ ] 24.1 全量导航验证
    - 验证所有页面间的跳转路径正确（TabBar 切换、navigateTo、navigateBack）
    - 验证认证守卫（未登录自动跳转登录页）
    - _需求: 7, 20, 30, 31_

  - [ ] 24.2 全量 AI 图标配色验证
    - 抽查 3-5 个页面，确认 AI 图标随机配色正常
    - 确认 ai-float-button 保持固定渐变（不参与随机）
    - _需求: 32_

  - [ ] 24.3 icon-mapping.md 最终更新
    - 确认所有新导出的 SVG 已记录在 icon-mapping.md 中
    - _需求: 33.3_

  - [ ] 24.4 中间生成物归档验证
    - 确认所有 MP 截图按页面分目录存放在 `docs/h5_ui/mp-screenshots/<page>/`
    - 确认所有 diff 图和 report.md 按页面分目录存放在 `docs/h5_ui/diffs/<page>/`
    - 确认所有 H5 逐段截图按页面分目录存放在 `docs/h5_ui/h5-segments/<page>/`
    - 确认 `docs/h5_ui/screenshots/` 目录未被写入 MP 截图或 diff 图（只读输入物）
    - 清理可能遗留在项目根目录或其他位置的临时截图文件
    - _需求: 33_

## 备注

- 每个页面的 Step 0（页面分析）输出工作量估算表，用户确认后再开始 Step 1
- 输入物分两批：第一批（Step 0-5 结构迁移）、第二批（Step 6-7 像素精调）
- 检查点任务用于批次间的质量门禁，确认通过后再进入下一批次
- 有历史实现的页面（board-coach/customer/finance/notes）走审计→对比→修复→验收流程
- task-detail 变体通过复制+替换主题色实现，不重复走完整流程
- 所有需求编号引用 `requirements.md` 中的需求序号
- 中间生成物（MP 截图/H5 逐段截图/diff 图）按页面分子目录存放，每轮覆盖更新，不保留历史版本
- `docs/h5_ui/screenshots/` 为只读输入物目录，禁止写入迁移过程生成的文件