# Tasks for add-call-record-viewer

## Task List

### Phase 1: 组件开发
- [x] 1.1 创建通话记录弹窗组件 `CallRecordModal.jsx`
  - 定义组件props接口（visible, onClose, record等）
  - 创建弹窗基本结构
  - 添加加载状态和错误状态处理

- [x] 1.2 实现录音播放器组件 `AudioPlayer.jsx`
  - 使用HTML5 audio标签
  - 添加播放/暂停控制
  - 显示播放进度和时长
  - 处理音频加载错误

- [x] 1.3 实现对话记录列表组件 `ConversationList.jsx`
  - 解析conversations JSON字符串
  - 实现左右布局（AI左侧，当事人右侧）
  - 添加时间戳格式化显示
  - 区分不同说话人的样式

### Phase 2: API集成
- [x] 2.1 确认getConversationLog API参数
  - 检查API service中的参数定义
  - 确认params字段名称（caseId/personId/jobId）

- [x] 2.2 实现API调用逻辑
  - 从URL参数或localStorage获取caseId
  - 从调解记录获取person_id和job_id
  - 调用getConversationLog API
  - 处理API返回数据（取最后一条记录）

- [x] 2.3 实现数据转换函数
  - 将conversations JSON字符串转为对象数组
  - 过滤无效对话记录（script为null）
  - 格式化时间戳显示

### Phase 3: UI集成
- [x] 3.1 在调解记录卡片中添加通话记录按钮
  - 在角色名称后添加胶囊按钮
  - 按钮样式：电话图标 + "通话记录"文字
  - 添加hover效果

- [x] 3.2 实现按钮点击逻辑
  - 点击按钮打开弹窗
  - 传递必要的参数（record数据）
  - 禁用重复点击

- [x] 3.3 实现外呼状态展示
  - 已接通状态：显示完整通话记录
  - 未接通状态：显示提示信息
  - 添加状态判断逻辑

### Phase 4: 样式完善
- [x] 4.1 添加通话记录弹窗样式
  - 设置弹窗尺寸（宽度600px，最大高度80vh）
  - 录音播放器样式
  - 对话记录列表样式
  - 滚动条样式优化

- [x] 4.2 添加对话气泡样式
  - AI调解员气泡（左侧蓝色）
  - 当事人气泡（右侧绿色）
  - 头像样式
  - 时间戳样式

- [x] 4.3 添加响应式适配
  - 小屏幕下弹窗宽度自适应
  - 对话内容过长时的省略处理

### Phase 5: 测试与优化
- [x] 5.1 功能测试
  - 测试已接通状态的通话记录展示
  - 测试未接通状态的提示信息
  - 测试录音播放功能
  - 测试对话记录滚动

- [x] 5.2 边界情况测试
  - API调用失败的错误提示
  - 录音文件加载失败的处理
  - 空对话记录的处理
  - 对话内容过长的情况

- [x] 5.3 性能优化
  - 弹窗内容按需渲染
  - 避免不必要的重渲染
  - 优化长列表滚动性能

### Phase 6: 文档更新
- [x] 6.1 更新相关OpenSpec文档
  - 确保design.md和proposal.md与实现一致
  - 更新项目功能树

## Dependencies
- Task 2.1 依赖 Task 1.1（需要先有组件结构）
- Task 3.1-3.3 依赖 Task 2.2（需要API调用逻辑）
- Task 4.1-4.3 依赖 Task 1.2-1.3（需要有组件才能添加样式）
- Task 5.1-5.3 依赖所有前置任务

## Validation Criteria
每个任务完成后需要满足：
- 代码通过ESLint检查
- 功能在本地开发环境中正常工作
- 不引入新的编译警告或错误
- 符合现有的代码风格和架构模式
- UI样式与系统整体风格一致