From 0c8432f4ff5c95faca4ca62d6a4ec4618feba627 Mon Sep 17 00:00:00 2001
From: tony.cheng <chengmingwei_1984122@126.com>
Date: Tue, 17 Mar 2026 15:31:29 +0800
Subject: [PATCH] feat: 完善AI调解状态控制功能及相关文档更新
---
openspec/changes/implement-mediation-state-control/design.md | 60 ++++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/openspec/changes/implement-mediation-state-control/design.md b/openspec/changes/implement-mediation-state-control/design.md
index 2e0d4dc..b70d824 100644
--- a/openspec/changes/implement-mediation-state-control/design.md
+++ b/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`)完全隔离
### 交互设计
**加载状态**：
--
Gitblit v1.8.0