# Implementation Tasks ## 1. 数据存储与状态管理 - [ ] 1.1 创建 localStorage 键 `outbound_call_jobs` 用于存储 jobId 数组和状态 - [ ] 1.2 实现 jobId 数据结构设计:`{ jobId, callStatus, startTime, personId, mediationId }` - [ ] 1.3 实现状态过滤逻辑:活跃状态保留,终态清除 ## 2. CaseDataContext 外呼触发逻辑 - [ ] 2.1 在 `loadCaseData` 方法的第 141 行 `saveToStorage(timelineData)` 之后添加外呼触发调用 - [ ] 2.2 检查 localStorage 中是否有活跃的 jobId,如有则跳过发起新外呼 - [ ] 2.3 提取 `mediationId`(timelineData.id)和 `caseId`(timelineData.case_id)构建请求参数 - [ ] 2.4 调用 `OutboundBotAPIService.makeCallV2({ mediationId, caseId, callAuto: 0, callPersonId: null })` - [ ] 2.5 处理 `makeCallV2` 响应: - [ ] 2.5.1 解析 `response.data` 数组,提取所有 `errorCode === 0` 的记录 - [ ] 2.5.2 存储 jobId、callStatus、personId 等信息到 localStorage - [ ] 2.5.3 失败时(errorCode !== 0)展示 `message.error()` 并记录控制台日志 - [ ] 2.6 错误捕获:`makeCallV2` 调用失败时展示友好提示,不阻塞页面加载 ## 3. OutboundCallWidget 轮询改造 - [ ] 3.1 移除现有 `getCallStatus` 基于 `caseRef` 的轮询逻辑 - [ ] 3.2 从 localStorage 读取 `outbound_call_jobs`,过滤活跃状态的 jobId - [ ] 3.3 实现新的轮询逻辑: - [ ] 3.3.1 遍历所有活跃 jobId,调用 `OutboundBotAPIService.getCallStatus({ jobId })` - [ ] 3.3.2 更新 `calls` 状态数组,展示通话人和状态信息 - [ ] 3.3.3 检测终态状态(Succeeded/Failed/Cancelled),从 localStorage 移除对应 jobId - [ ] 3.4 设置轮询间隔为 10 秒(`setInterval(fetchCallStatus, 10000)`) - [ ] 3.5 实现最大轮询时长限制(2小时): - [ ] 3.5.1 记录轮询开始时间 - [ ] 3.5.2 每次轮询检查是否超时,超时则停止轮询并清理 jobId - [ ] 3.6 实现失败重试机制: - [ ] 3.6.1 为每个 jobId 维护重试计数器 - [ ] 3.6.2 单次查询失败时累加计数,最多重试 10 次 - [ ] 3.6.3 超过 10 次失败后展示 `message.error()` 并移除该 jobId ## 4. 气泡组件显示优化 - [ ] 4.1 支持多任务显示:当 `calls.length > 1` 时,纵向堆叠展示多个气泡 - [ ] 4.2 显示字段映射: - [ ] 4.2.1 通话人姓名:从 API 响应的 `personId` 或 Mock 数据获取 - [ ] 4.2.2 通话状态:中文映射(Scheduling→拨号中,Executing→通话中等) - [ ] 4.2.3 通话时长:根据 `startTime` 和当前时间计算(格式:MM:SS) - [ ] 4.3 终态处理:当所有 jobId 均为终态时,自动隐藏气泡(设置 `isVisible=false`) ## 5. 组件卸载与清理 - [ ] 5.1 在 `OutboundCallWidget` 的 `useEffect` 清理函数中停止轮询定时器 - [ ] 5.2 用户离开页面时(如路由切换),确保定时器被清除 - [ ] 5.3 避免内存泄漏:组件卸载时取消所有待处理的 API 请求(如使用 AbortController) ## 6. 错误提示与日志 - [ ] 6.1 `makeCallV2` 失败时:`message.error('发起外呼失败,请稍后重试')` + `console.error(err)` - [ ] 6.2 `getCallStatus` 重试超限时:`message.error('获取通话状态失败,请检查网络连接')` + `console.error()` - [ ] 6.3 所有关键步骤记录 `console.log`,便于前端调试 ## 7. 测试与验证 - [ ] 7.1 测试场景1:首次进入首页,自动发起外呼,气泡正常弹出 - [ ] 7.2 测试场景2:刷新页面,检测到活跃 jobId,继续监听不发起新外呼 - [ ] 7.3 测试场景3:多人外呼(2个jobId),气泡同时展示两条记录 - [ ] 7.4 测试场景4:通话成功(Succeeded),气泡消失,jobId 清除 - [ ] 7.5 测试场景5:通话失败(Failed),展示错误提示,jobId 清除 - [ ] 7.6 测试场景6:API 连续失败 10 次,展示重试超限提示 - [ ] 7.7 测试场景7:轮询超过 2 小时,自动停止并清理 - [ ] 7.8 测试场景8:组件卸载时定时器正常清除,无报错 ## 9. 文档与注释 - [ ] 9.1 为新增代码添加 JSDoc 注释 - [ ] 9.2 更新 `OutboundCallWidget.jsx` 头部组件说明 - [ ] 9.3 在关键逻辑处添加行内注释(jobId 状态判断、轮询逻辑等)