云小调AI智能体前端
edit | blame | history | raw

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)