feat: 完善AI调解状态控制功能及相关文档更新

tony.cheng

2026-03-17 0c8432f4ff5c95faca4ca62d6a4ec4618feba627

 openspec/changes/implement-mediation-state-control/design.md

@@ -6,22 +6,33 @@
## 组件设计

### 1. 状态控制按钮组件
**位置**：位于人工接管按钮右侧
**位置**：位于FloatingControlPanel组件中，人工接管按钮左侧
**显示逻辑**：
```
if (caseState === 0 || caseState === 1) {
  // 显示"终止"按钮，蓝色样式
const stateNum = Number(state);
if (stateNum === 1) {
  // 显示"终止"按钮，红色渐变样式
  buttonText = "终止";
  buttonStyle = "primary";
} else if (caseState === 5) {
  // 显示"恢复"按钮，绿色样式
  buttonClass = "state-control-btn--terminate";
} else if (stateNum === 5) {
  // 显示"恢复"按钮，绿色渐变样式
  buttonText = "恢复";
  buttonStyle = "success";
  buttonClass = "state-control-btn--resume";
} else {
  // 不显示按钮
  showButton = false;
}
```

### 2. 状态显示规则
**状态文本显示**：
- state=1: "调解进行中-阶段X：节点名称"
- state=5: "AI调解暂停中"
- 其他状态: 使用translateMediationState翻译

**状态圆点颜色**：
- state=5: 红色 (#e63946)
- 其他状态: 默认绿色 (var(--success-color))

### 2. 确认对话框设计
**触发条件**：用户点击状态控制按钮
@@ -32,8 +43,19 @@
- 操作按钮：确认/取消

### 3. 状态管理集成
**数据来源**：从localStorage中的`case_data_timeline`获取案件状态
**数据来源**：从CaseDataContext获取案件状态
**更新机制**：API调用成功后重新加载案件数据

### 4. 外呼气泡联动关闭
**触发条件**：终止操作API调用成功后
**实现机制**：
1. FloatingControlPanel触发自定义事件`mediation-terminated`
2. OutboundCallWidget监听该事件
3. 事件处理：
   - 设置isVisible=false关闭气泡
   - 设置isMinimized=true最小化
   - 清空localStorage外呼任务数据
   - 清空组件状态中的通话列表

## API集成设计

@@ -56,15 +78,25 @@
## UI/UX设计

### 视觉设计
**终止按钮**：
- 背景色：#1A6FB8（项目主题蓝色，与人工接管按钮相同）
**终止按钮**（红色渐变主题）：
- 背景：linear-gradient(135deg, #e63946 0%, #c1121f 100%)
- 阴影：0 2px 8px rgba(230, 57, 70, 0.3)
- 文字颜色：白色
- 悬停效果：背景色加深至#0d4a8a
- 悬停效果：背景变为linear-gradient(135deg, #f04a57 0%, #d41926 100%)
- 悬停阴影：0 4px 16px rgba(230, 57, 70, 0.4)

**恢复按钮**：
- 背景色：#52c41a（Ant Design success green，区别于人工接管的蓝色）
**恢复按钮**（绿色渐变主题）：
- 背景：linear-gradient(135deg, #52c41a 0%, #389e0d 100%)
- 阴影：0 2px 8px rgba(82, 196, 26, 0.3)
- 文字颜色：白色
- 悬停效果：背景色加深
- 悬停效果：背景变为linear-gradient(135deg, #5fd42b 0%, #42b417 100%)
- 悬停阴影：0 4px 16px rgba(82, 196, 26, 0.4)

**样式类名规范**：
- 基础类：`.state-control-btn`
- 终止变体：`.state-control-btn--terminate`
- 恢复变体：`.state-control-btn--resume`
- 与人工接管按钮样式(`.floating-control-btn`)完全隔离

### 交互设计
**加载状态**：