edit | blame | history | raw

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调用成功/失败场景测试
  • 状态转换的正确性验证

集成测试

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

用户验收测试

  • 实际调解场景下的功能验证
  • 易用性和直观性评估
  • 性能影响评估