From 6bb08c2297be1b6415c8bc02e6917eba6ee355e5 Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Fri, 03 Apr 2026 10:42:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test/tony.cheng/260312' into test/shimai.huang/260309

---
 openspec/changes/add-call-record-viewer/tasks.md |  107 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 107 insertions(+), 0 deletions(-)

diff --git a/openspec/changes/add-call-record-viewer/tasks.md b/openspec/changes/add-call-record-viewer/tasks.md
new file mode 100644
index 0000000..7f50128
--- /dev/null
+++ b/openspec/changes/add-call-record-viewer/tasks.md
@@ -0,0 +1,107 @@
+# 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样式与系统整体风格一致

--
Gitblit v1.8.0