# Tasks: integrate-call-status-update

## 任务分解

### 阶段 1: TabContainer 改造（10分钟）
- [x] **Task 1.1**: 使用 useImperativeHandle 暴露 switchTab 方法
  - 添加 forwardRef 包装组件
  - 暴露 switchTab(tabKey) 方法供父组件调用
  - 保持内部 activeTab 状态管理不变

### 阶段 2: App.js 集成（10分钟）
- [x] **Task 2.1**: 创建 TabContainer 的 ref 引用
  - 使用 useRef 创建 tabContainerRef
  - 传递 ref 给 TabContainer 组件

- [x] **Task 2.2**: 创建回调函数并传递给 OutboundCallWidget
  - 创建 handleSwitchTab 回调函数
  - 创建 handleRefreshData 回调函数
  - 传递 props 给 OutboundCallWidget

### 阶段 3: OutboundCallWidget 核心逻辑（30分钟）
- [x] **Task 3.1**: 添加 props 接收
  - 解构接收 onSwitchTab 和 onRefreshData
  - 添加默认值（空函数）防止报错

- [x] **Task 3.2**: 实现 updateCallStatus 调用逻辑
  - 在 fetchCallStatus 中检测状态变化
  - 排除原状态为 Scheduling 的情况
  - 调用 OutboundBotAPIService.updateCallStatus

- [x] **Task 3.3**: 实现多任务并行更新
  - 收集所有需要更新的任务
  - 使用 Promise.all 并行调用
  - 错误处理：记录日志但不中断流程

- [x] **Task 3.4**: 实现成功后的回调和状态更新
  - API 成功后调用 onRefreshData
  - API 成功后调用 onSwitchTab('mediation-board')
  - 更新 localStorage 中的任务状态

### 阶段 4: 测试验证（15分钟）
- [x] **Task 4.1**: 功能测试
  - 测试状态从 Scheduling 变化时不调用 API
  - 测试状态从非 Scheduling 变化时调用 API
  - 测试多任务并行更新

- [x] **Task 4.2**: 集成测试
  - 测试 API 成功后数据刷新
  - 测试 API 成功后 Tab 切换
  - 测试 API 失败时不影响用户体验

### 阶段 5: 代码优化（10分钟）
- [x] **Task 5.1**: 代码审查
  - 检查代码规范
  - 添加必要注释
  - 移除调试日志

## 任务依赖关系

```
阶段1(TabContainer) ─┐
                     ├─→ 阶段2(App.js) ─→ 阶段3(OutboundCallWidget) ─→ 阶段4(测试) ─→ 阶段5(优化)
阶段4(测试) ─────────┘
```

## 验收检查清单

### 功能验收
- [x] 状态从 Scheduling 变化时不触发 updateCallStatus
- [x] 状态从非 Scheduling 变化时触发 updateCallStatus
- [x] API 调用成功后刷新案件数据
- [x] API 调用成功后切换到 AI调解实时看板
- [x] 多任务并行时正确处理

### 代码质量
- [x] 代码符合项目规范
- [x] 无 ESLint 警告（仅有未使用变量警告，不影响功能）
- [x] 注释清晰完整

## 预估工时

总计：**1.25 小时**
- TabContainer 改造：10 分钟
- App.js 集成：10 分钟
- OutboundCallWidget 核心：30 分钟
- 测试验证：15 分钟
- 代码优化：10 分钟

## 实际完成时间

**2026-02-04** - 所有任务已完成

### 修改的文件
1. `web-app/src/components/dashboard/TabContainer.jsx` - 添加 forwardRef 和 useImperativeHandle
2. `web-app/src/App.js` - 创建 ref 和回调函数
3. `web-app/src/components/common/OutboundCallWidget.jsx` - 实现状态更新逻辑