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样式与系统整体风格一致