From 6bb08c2297be1b6415c8bc02e6917eba6ee355e5 Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Fri, 03 Apr 2026 10:42:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test/tony.cheng/260312' into test/shimai.huang/260309
---
openspec/changes/implement-mediation-state-control/design.md | 143 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 143 insertions(+), 0 deletions(-)
diff --git a/openspec/changes/implement-mediation-state-control/design.md b/openspec/changes/implement-mediation-state-control/design.md
new file mode 100644
index 0000000..b70d824
--- /dev/null
+++ b/openspec/changes/implement-mediation-state-control/design.md
@@ -0,0 +1,143 @@
+# Design Document: AI调解状态控制功能
+
+## 架构概述
+本功能将在现有的调解看板界面中添加状态控制能力，允许用户暂停或恢复AI自动调解流程。设计遵循现有系统的组件结构和交互模式。
+
+## 组件设计
+
+### 1. 状态控制按钮组件
+**位置**：位于FloatingControlPanel组件中，人工接管按钮左侧
+**显示逻辑**：
+```
+const stateNum = Number(state);
+if (stateNum === 1) {
+ // 显示"终止"按钮，红色渐变样式
+ buttonText = "终止";
+ buttonClass = "state-control-btn--terminate";
+} else if (stateNum === 5) {
+ // 显示"恢复"按钮，绿色渐变样式
+ buttonText = "恢复";
+ buttonClass = "state-control-btn--resume";
+} else {
+ // 不显示按钮
+ showButton = false;
+}
+```
+
+### 2. 状态显示规则
+**状态文本显示**：
+- state=1: "调解进行中-阶段X：节点名称"
+- state=5: "AI调解暂停中"
+- 其他状态: 使用translateMediationState翻译
+
+**状态圆点颜色**：
+- state=5: 红色 (#e63946)
+- 其他状态: 默认绿色 (var(--success-color))
+
+### 2. 确认对话框设计
+**触发条件**：用户点击状态控制按钮
+**内容结构**：
+- 标题：根据操作类型显示"确认终止调解"或"确认恢复调解"
+- 描述文本：说明操作的影响
+- 输入框：可选的备注信息
+- 操作按钮：确认/取消
+
+### 3. 状态管理集成
+**数据来源**：从CaseDataContext获取案件状态
+**更新机制**：API调用成功后重新加载案件数据
+
+### 4. 外呼气泡联动关闭
+**触发条件**：终止操作API调用成功后
+**实现机制**：
+1. FloatingControlPanel触发自定义事件`mediation-terminated`
+2. OutboundCallWidget监听该事件
+3. 事件处理：
+ - 设置isVisible=false关闭气泡
+ - 设置isMinimized=true最小化
+ - 清空localStorage外呼任务数据
+ - 清空组件状态中的通话列表
+
+## API集成设计
+
+### 请求流程
+```
+1. 用户点击按钮
+2. 显示确认对话框
+3. 用户确认操作
+4. 调用ProcessAPIService.updateMediationState
+5. 处理API响应
+6. 成功：刷新页面数据
+7. 失败：显示错误提示
+```
+
+### 错误处理策略
+- 网络错误：显示通用网络错误提示
+- 业务错误：显示具体的错误信息
+- 状态冲突：提示当前状态不允许该操作
+
+## UI/UX设计
+
+### 视觉设计
+**终止按钮**（红色渐变主题）：
+- 背景：linear-gradient(135deg, #e63946 0%, #c1121f 100%)
+- 阴影：0 2px 8px rgba(230, 57, 70, 0.3)
+- 文字颜色：白色
+- 悬停效果：背景变为linear-gradient(135deg, #f04a57 0%, #d41926 100%)
+- 悬停阴影：0 4px 16px rgba(230, 57, 70, 0.4)
+
+**恢复按钮**（绿色渐变主题）：
+- 背景：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`)完全隔离
+
+### 交互设计
+**加载状态**：
+- 按钮显示loading状态
+- 禁用其他相关操作
+- 显示操作进度提示
+
+**反馈机制**：
+- 操作成功：显示成功消息，自动刷新数据
+- 操作失败：显示错误消息，保持当前界面状态
+
+## 技术实现考虑
+
+### 性能优化
+- 状态检查在组件渲染时进行，避免不必要的重渲染
+- API调用使用现有的请求拦截器和错误处理机制
+- 页面刷新采用增量更新而非全页面重载
+
+### 安全考虑
+- 操作前进行身份验证检查
+- 记录操作日志用于审计
+- 防止重复提交同一操作
+
+### 可维护性
+- 遵循现有的组件命名和结构规范
+- 复用现有的样式和交互组件
+- 保持与人工接管功能的一致性
+
+## 测试策略
+
+### 单元测试
+- 按钮显示逻辑的边界条件测试
+- API调用成功/失败场景测试
+- 状态转换的正确性验证
+
+### 集成测试
+- 完整的用户操作流程测试
+- 与现有功能的兼容性测试
+- 异常场景的恢复能力测试
+
+### 用户验收测试
+- 实际调解场景下的功能验证
+- 易用性和直观性评估
+- 性能影响评估
\ No newline at end of file
--
Gitblit v1.8.0