hookehuyr

docs: 更新 API 集成日志和经验教训文档

API 集成日志:
- 完成 3 个待联调接口联调(addAPI, weekHotAPI, fileListAPI)
- 新增待联调接口快速清单(便于快速定位)
- 新增 myPlanListAPI 接口定义(我的计划书列表)
- 更新进度追踪:29个接口,82.8% 已完成

经验教训文档:
- 新增"复杂功能修改的系统性问题"章节
- 记录计划书模块开发中的系统性问题
- 提供系统化修改流程解决方案(5步完整流程)
- 包含反面案例和正面案例对比

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This diff is collapsed. Click to expand it.
......@@ -1943,6 +1943,257 @@ const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
const USE_MOCK_DATA = true // 容易导致生产环境误用
```
### ❌ 坑:复杂功能修改的系统性问题 ⭐ 2026-02-09 新增
#### 问题描述
在修改复杂功能(如计划书模块的嵌套弹窗)时,出现了严重的系统性问题:
- 🔴 修改不系统:改一处忘一处,导致连锁错误
- 🔴 缺少验证:没有主动添加调试日志并验证
- 🔴 沟通低效:反复让用户复制粘贴错误信息
#### 错误模式
**典型的错误流程**:
```markdown
1. Claude Code: "我修改了文件 A"
2. User: [复制错误信息]
3. Claude Code: "哦,我忘记修改文件 B 了"
4. User: [复制错误信息]
5. Claude Code: "哦,我忘记修改文件 C 了"
6. ... 循环往复
```
**问题根源**:
1. **没有全局视图**:只看到局部修改,没有整体规划
2. **缺少验证机制**:修改后不主动验证,等待用户反馈
3. **沟通方式错误**:依赖用户反馈,而不是主动检查
#### 解决方案:系统化修改流程
**对于复杂功能的修改,必须遵循以下流程**:
##### 1. 📋 理解完整需求(开始修改前)
```markdown
## 修改前检查清单
### 理解需求
- [ ] 画出完整的数据流图
- [ ] 列出所有受影响的文件
- [ ] 确认修改的边界
- [ ] 识别可能的副作用
### 影响分析
- [ ] 哪些文件会修改?
- [ ] 哪些组件会受影响?
- [ ] 数据流会如何变化?
- [ ] 是否有现成的类似实现?
```
##### 2. 🧪 设计验证方案(修改前)
```markdown
## 验证方案
### 调试日志规划
在代码关键位置添加 console.log:
```javascript
// 示例:计划书弹窗
console.log('[PlanPopup] 父弹窗状态变化:', { showParentFooter, showChildPopup })
console.log('[PlanPopup] provide 数据:', { popupControl })
console.log('[ChildPopup] 接收到的 provide:', injectedPopupControl)
console.log('[ChildPopup] 关闭子弹窗,通知父弹窗')
```
### 测试步骤
1. 打开计划书页面
2. 点击"申请计划书"
3. 观察控制台输出(应该看到父弹窗状态)
4. 点击"选择行业"
5. 观察控制台输出(应该看到子弹窗状态和父弹窗 footer 隐藏)
6. 关闭子弹窗
7. 观察控制台输出(应该看到父弹窗 footer 恢复)
```
##### 3. ✋ 修改代码(一次性完成)
```markdown
## 修改清单
### 受影响的文件
- [ ] `src/components/PlanPopup/index.vue` - 父弹窗逻辑
- [ ] `src/components/PlanFields/IndustryPicker.vue` - 子弹窗逻辑
- [ ] `src/pages/plan/index.vue` - 页面集成
### 修改内容
**文件 1: PlanPopup/index.vue**
- 添加 `provide` 传递控制方法
- 响应 `popupControl``closeParent` 调用
- 添加 console.log
**文件 2: IndustryPicker.vue**
- 添加 `inject` 接收控制方法
- 确认时调用 `popupControl.closeParent()`
- 添加 console.log
**文件 3: plan/index.vue**
- 无需修改(仅用于验证)
```
##### 4. 🧞 提供验证指令
```markdown
## 验证指令
请按以下步骤验证修改:
### 步骤 1:启动项目
```bash
pnpm dev:weapp
```
### 步骤 2:导航到计划书页面
在微信开发者工具中打开计划书页面
### 步骤 3:执行测试流程
1. 点击"申请计划书"按钮
2. 点击"选择行业"字段
3. 选择任意行业
4. 点击"确定"按钮
### 步骤 4:检查控制台输出
**预期输出**
```
[PlanPopup] 父弹窗状态变化: { showParentFooter: true, showChildPopup: false }
[PlanPopup] provide 数据: { popupControl: { closeParent: [Function] } }
[ChildPopup] 接收到的 provide: { closeParent: [Function] }
[ChildPopup] 关闭子弹窗,通知父弹窗
[PlanPopup] 收到关闭子弹窗通知,恢复 footer
```
### 步骤 5:观察页面行为
**预期行为**
- ✅ 父弹窗的 footer 在子弹窗打开时隐藏
- ✅ 父弹窗的 footer 在子弹窗关闭时恢复
- ✅ 没有层级冲突(子弹窗完全覆盖父弹窗底部)
### 如果遇到错误
请复制:
1. 控制台完整输出
2. 页面截图(显示层级问题)
```
##### 5. 📝 等待反馈
**关键原则**:
- ✅ 一次性修改所有文件,不要分批
- ✅ 添加详细的调试日志
- ✅ 提供完整的验证步骤
- ✅ 主动说明预期结果
- ❌ 不要修改一个文件就问"对不对"
- ❌ 不要反复询问"有没有错误"
- ❌ 不要让用户反复复制粘贴
#### 实施要点
**✅ 我会做的**:
- ✅ 修改前列出所有受影响的文件
- ✅ 添加 console.log 标注关键数据流
- ✅ 给出完整的测试步骤
- ✅ 主动说明"请运行后把 console 输出发给我"
- ✅ 一次性修改所有相关文件
**❌ 我不会做的**:
- ❌ 修改一个文件就问你"对不对"
- ❌ 让你反复复制粘贴错误
- ❌ 没有整体计划就开始修改
#### 收益
**提升质量**:
- ✅ 一次性修改完整,减少返工
- ✅ 有验证方案,快速定位问题
- ✅ 减少沟通成本,提升效率
**提升体验**:
- ✅ 用户不需要反复复制粘贴
- ✅ 验证步骤清晰明确
- ✅ 问题定位快速准确
#### 适用场景
**必须使用系统化流程的场景**:
- 🔴 修改嵌套组件交互
- 🔴 修改状态管理逻辑
- 🔴 修改认证/权限流程
- 🔴 修改跨页面通信
- 🔴 涉及 3 个以上文件的修改
**可以简化的场景**:
- 🟢 修改单个文件的样式
- 🟢 修改文案或简单逻辑
- 🟢 添加 console.log 调试
- 🟢 修复明显的 Bug
#### 历史案例
**反面案例(2026-02-09)**:
```markdown
❌ 错误流程:
1. 修改 PlanPopup.vue → 用户测试 → 报错
2. 修改 IndustryPicker.vue → 用户测试 → 报错
3. 修改 PlanPopup.vue → 用户测试 → 又报错
4. ... 循环往复,浪费时间
问题:
- 没有全局视图
- 没有一次性修改所有文件
- 没有添加调试日志
- 没有提供验证步骤
```
**正面案例(应该这样)**:
```markdown
✅ 正确流程:
1. 分析需求 → 列出 3 个受影响的文件
2. 设计验证方案 → 规划 5 个调试日志点
3. 一次性修改 3 个文件 → 添加 5 个 console.log
4. 提供验证步骤 → 说明预期输出
5. 用户测试 → 一次性成功
收益:
- 减少返工
- 快速定位问题
- 提升效率
```
#### 相关文件
- 计划书模块:`src/pages/plan/index.vue`
- 计划弹窗:`src/components/PlanPopup/index.vue`
- 表单字段:`src/components/PlanFields/`
#### 最佳实践总结
⚠️ **强制要求**:修改复杂功能时,必须先规划后实施,一次性修改所有相关文件,并提供完整的验证方案。
```javascript
// ✅ 推荐流程
1. 理解需求 → 画出数据流图
2. 规划修改 → 列出所有受影响文件
3. 设计验证 → 规划调试日志点
4. 一次性修改 → 修改所有文件 + 添加日志
5. 提供验证 → 给出测试步骤和预期结果
6. 等待反馈 → 不要催促,不要反复询问
// ❌ 错误流程
1. 修改文件 A → 问"对不对" → 报错
2. 修改文件 B → 问"对不对" → 又报错
3. 修改文件 A → 问"对不对" → 还报错
4. ... 循环往复,浪费时间
```
---
## 组件开发案例:AmountKeyboard 数字键盘组件 ⭐ 新增
......@@ -2174,7 +2425,7 @@ const onConfirm = () => {
---
**最后更新**: 2026-02-08
**最后更新**: 2026-02-09
**维护者**: Claude Code
**项目**: Manulife WeApp
......