延迟退休计算器 — 开发复盘
复盘时间：2026-05-09 | 从 PRD 到开发完成 + 调试
📊 项目总览
| 维度 | 详情 | |------|------| | 启动日期 | 2026-05-09 | | PRD → 代码完成 | 约1小时（Claude Code 全流程） | | 调试修复 | 约30分钟 | | 当前状态 | 开发完成，待填 AppID + 提交审核 | | 技术栈 | 原生小程序，纯前端，无云开发 | | 页面数 | 3个（计算首页 + 政策说明 + 隐私政策） |
✅ 做得好的
1. PRD 评审流程有效
- 两轮独立评审：第一轮发现算法 bug（ceil vs floor），第二轮验证修复后 30 组测试全部通过
- 评审 agent 引用了权威来源（gov.cn / 人社部 / 全国人大），不是凭记忆
- 结论：涉及精确计算的逻辑，必须派独立 agent 用权威数据验证，不能信任 AI 一次生成
2. 选题决策快
- 你在微信搜一搜验证后拍板"延迟退休计算器仍值得做"
- 6月备选里提上来替代排班日历（搜一搜发现实际有 10+ 竞品）
- 教训：竞品数量必须以微信搜一搜实际结果为准，不能看网页搜索推断
3. 全流程自动化
- PRD → 评审 → 开发 → 代码提交，全程 agent 自动完成
- Claude Code 一次跑通，代码质量不错（结构清晰、主题变量系统、隐私政策完整）
⚠️ 踩过的坑 & 教训
坑1：text 组件在 flex 容器里无法垂直居中 ⭐⭐⭐
场景：出生年月选择器的文字在 flex 容器里偏上/偏下，反复调 line-height、padding-top、margin 都不行。
根因：微信小程序已知 bug（2018年就有人反馈，至今未修复）。<text> 组件在 flex 容器里的 baseline 对齐行为异常，不同机型表现不同。
修复：用 <view> 替代 <text>。view 在 flex 里垂直居中正常。
教训：
- 小程序里需要居中的文字，优先用
<view>而不是<text> <text>只在需要 selectable 等特性时使用- CSS 反复改不好时应该立即搜索，不要盲目试错。这次浪费了约 15 分钟在错误方向上
坑2：Canvas roundRect 不兼容
场景：生成分享图片时报错 "The provided value cannot be converted to a sequence"。
根因：ctx.roundRect() 是较新的 Canvas API，部分基础库版本不支持数组参数。
修复：用自定义 roundRect(ctx, x, y, w, h, r) 方法（基于 arcTo），兼容所有基础库版本。
教训：之前问问今天项目踩过同样的坑，应该在 PRD 或模板里写死这条规则。
坑3：WXML 不支持数字索引访问对象属性
场景：政策说明页的折叠面板用了 expandedIds[1]，报 _getData is not a function。
修复：改为 expandedIds.id1 字符串键。
教训：小程序 WXML 模板不支持 obj[1] 数字索引语法，只能用 obj.key。
坑4：PRD 算法有系统性偏差
场景：Claude Code 生成的退休年龄计算算法对所有结果少算 1 个月。
根因：用了 0-indexed（2025年1月 = 第0个月）+ floor 除法，正确应该是 1-indexed + ceil。
修复：两轮评审后修正，17 组测试全部通过。
教训：AI 生成的计算逻辑必须用权威数据交叉验证，不能信任一次输出。
📈 流程改进建议
应该固化到模板/SOP 的规则
- text vs view：居中场景必须用 view，不用 text
- Canvas roundRect：必须用自定义 arcTo 版本，不用原生 roundRect
- WXML 模板语法：不用数字索引，用字符串键
- 计算逻辑：PRD 完成后必须派 agent 用权威数据验证算法
- 竞品验证：选题调研必须在微信搜一搜里实际搜索，不能只看网页搜索
应该加到脚手架（miniprogram-starter）的资产
- 自定义
roundRect方法 - 全局 CSS 重置（去掉 page line-height 继承问题）
- Canvas 分享图导出模板
- 隐私政策弹窗组件
📌 下一步
- [ ] 填入 AppID（
project.config.json） - [ ] 提交备案（如果还没备案的话）
- [ ] 真机测试（计算准确性 + 分享功能 + 各机型兼容性）
- [ ] 提交审核
- [ ] 更新 README 状态
复盘人：喵喵 | 项目：延迟退休计算器 #8