# Design Document: AI调解状态控制功能

## 架构概述
本功能将在现有的调解看板界面中添加状态控制能力，允许用户暂停或恢复AI自动调解流程。设计遵循现有系统的组件结构和交互模式。

## 组件设计

### 1. 状态控制按钮组件
**位置**：位于人工接管按钮右侧
**显示逻辑**：
```
if (caseState === 0 || caseState === 1) {
  // 显示"终止"按钮，蓝色样式
  buttonText = "终止";
  buttonStyle = "primary";
} else if (caseState === 5) {
  // 显示"恢复"按钮，绿色样式
  buttonText = "恢复";
  buttonStyle = "success";
} else {
  // 不显示按钮
  showButton = false;
}
```

### 2. 确认对话框设计
**触发条件**：用户点击状态控制按钮
**内容结构**：
- 标题：根据操作类型显示"确认终止调解"或"确认恢复调解"
- 描述文本：说明操作的影响
- 输入框：可选的备注信息
- 操作按钮：确认/取消

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

## API集成设计

### 请求流程
```
1. 用户点击按钮
2. 显示确认对话框
3. 用户确认操作
4. 调用ProcessAPIService.updateMediationState
5. 处理API响应
6. 成功：刷新页面数据
7. 失败：显示错误提示
```

### 错误处理策略
- 网络错误：显示通用网络错误提示
- 业务错误：显示具体的错误信息
- 状态冲突：提示当前状态不允许该操作

## UI/UX设计

### 视觉设计
**终止按钮**：
- 背景色：#1A6FB8（项目主题蓝色，与人工接管按钮相同）
- 文字颜色：白色
- 悬停效果：背景色加深至#0d4a8a

**恢复按钮**：
- 背景色：#52c41a（Ant Design success green，区别于人工接管的蓝色）
- 文字颜色：白色
- 悬停效果：背景色加深

### 交互设计
**加载状态**：
- 按钮显示loading状态
- 禁用其他相关操作
- 显示操作进度提示

**反馈机制**：
- 操作成功：显示成功消息，自动刷新数据
- 操作失败：显示错误消息，保持当前界面状态

## 技术实现考虑

### 性能优化
- 状态检查在组件渲染时进行，避免不必要的重渲染
- API调用使用现有的请求拦截器和错误处理机制
- 页面刷新采用增量更新而非全页面重载

### 安全考虑
- 操作前进行身份验证检查
- 记录操作日志用于审计
- 防止重复提交同一操作

### 可维护性
- 遵循现有的组件命名和结构规范
- 复用现有的样式和交互组件
- 保持与人工接管功能的一致性

## 测试策略

### 单元测试
- 按钮显示逻辑的边界条件测试
- API调用成功/失败场景测试
- 状态转换的正确性验证

### 集成测试
- 完整的用户操作流程测试
- 与现有功能的兼容性测试
- 异常场景的恢复能力测试

### 用户验收测试
- 实际调解场景下的功能验证
- 易用性和直观性评估
- 性能影响评估