# Call Record Viewer Specification

## ADDED Requirements

### Requirement: 通话记录查看按钮
系统 SHALL 在AI调解实时看板的每条调解记录角色名称后显示通话记录查看按钮。

#### Scenario: 显示通话记录按钮
- **WHEN** 调解记录加载完成
- **THEN** 在每条记录的角色名称后显示胶囊形状的"通话记录"按钮
- **AND** 按钮包含电话图标和"通话记录"文字

#### Scenario: 点击通话记录按钮
- **WHEN** 用户点击通话记录按钮
- **THEN** 系统应打开通话记录详情弹窗
- **AND** 弹窗标题格式为"AI调解员与[角色名]的通话"
- **AND** 标题后显示任务ID（jobId）

### Requirement: 通话记录弹窗数据加载
系统 SHALL 在打开通话记录弹窗时调用API获取通话记录数据。

#### Scenario: 获取通话记录数据
- **WHEN** 用户点击通话记录按钮
- **THEN** 系统应调用OutboundBotAPIService.getConversationLog API
- **AND** API参数应包含：
  - caseId：从URL参数获取，若为空则从localStorage的case_data_timeline中获取case_id
  - personId：从调解记录的person_id字段获取
  - jobId：从调解记录的job_id字段获取

#### Scenario: API返回多条数据
- **WHEN** API返回的data数组包含多条记录
- **THEN** 系统应只使用最后一条记录进行展示

#### Scenario: API调用失败
- **WHEN** API调用失败或返回错误
- **THEN** 弹窗应显示错误提示信息
- **AND** 提供重试按钮

### Requirement: 外呼状态展示
系统 SHALL 根据外呼状态（callStatus）展示不同的内容。

#### Scenario: 已接通状态展示
- **WHEN** callStatus为已接通状态（值为1, 20-31之一）
- **THEN** 弹窗顶部应显示录音播放器
- **AND** 弹窗中间区域应显示双方对话记录

#### Scenario: 未接通状态展示
- **WHEN** callStatus为未接通状态（值为0, 2-19, 32之一）
- **THEN** 弹窗应显示提示信息"未接通，无通话记录"
- **AND** 不显示录音播放器和对话记录

### Requirement: 录音播放器
系统 SHALL 在已接通状态的通话记录弹窗中提供录音播放功能。

#### Scenario: 录音播放器展示
- **WHEN** 通话记录处于已接通状态且有recordUrl
- **THEN** 弹窗顶部应显示HTML5音频播放器
- **AND** 播放器应支持播放/暂停操作
- **AND** 播放器应显示当前播放进度和总时长

#### Scenario: 录音文件播放
- **WHEN** 用户点击播放按钮
- **THEN** 系统应播放recordUrl指定的.wav格式录音文件
- **AND** 录音文件URL可直接使用，无需拼接

#### Scenario: 录音加载失败
- **WHEN** 录音文件加载失败
- **THEN** 播放器应显示"录音文件加载失败"提示
- **AND** 提供重试按钮

### Requirement: 对话记录展示
系统 SHALL 以类似微信聊天的样式展示双方对话记录。

#### Scenario: 解析对话记录
- **WHEN** 获取到通话记录数据
- **THEN** 系统应将conversations JSON字符串解析为对象数组
- **AND** 每个对话项包含timestamp、speaker、script、action字段

#### Scenario: AI调解员消息展示
- **WHEN** 对话记录的speaker为"Robot"
- **THEN** 消息气泡应显示在左侧
- **AND** 头像应显示机器人图标
- **AND** 头像下方应显示"AI调解员"
- **AND** 消息背景色应为浅蓝色(#e3f2fd)

#### Scenario: 当事人消息展示
- **WHEN** 对话记录的speaker为"Contact"
- **THEN** 消息气泡应显示在右侧
- **AND** 头像应显示当事人名字的首字
- **AND** 头像下方应显示调解记录中的creator字段值
- **AND** 消息背景色应为浅绿色(#e8f5e9)

#### Scenario: 时间戳展示
- **WHEN** 对话记录包含有效timestamp
- **THEN** 应在消息气泡下方显示格式化时间
- **AND** 时间格式应为"YYYY-MM-DD HH:mm"

#### Scenario: 过滤无效对话
- **WHEN** 对话记录的script字段为null或空字符串
- **THEN** 系统不应展示该条对话记录

### Requirement: 对话记录弹窗样式
系统 SHALL 为通话记录弹窗提供清晰美观的样式设计。

#### Scenario: 弹窗尺寸
- **WHEN** 通话记录弹窗打开
- **THEN** 弹窗宽度应为600px
- **AND** 弹窗最大高度应为视口高度的80%
- **AND** 对话记录区域应支持垂直滚动

#### Scenario: 对话区域滚动
- **WHEN** 对话记录内容超过可视区域高度
- **THEN** 对话区域应显示垂直滚动条
- **AND** 滚动条样式应与系统整体风格一致

#### Scenario: 响应式适配
- **WHEN** 屏幕宽度小于600px
- **THEN** 弹窗宽度应自适应屏幕宽度
- **AND** 保持适当的左右边距

## Related Capabilities
- 外呼通话API接口规范 (outbound-call-api)
- AI调解实时看板 (mediation-dashboard)