| | |
|---|
| | | ## 组件设计 |
|---|
| | | |
|---|
| | | ### 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. 确认对话框设计 |
|---|
| | | **触发条件**：用户点击状态控制按钮 |
|---|
| | |
|---|
| | | - 操作按钮：确认/取消 |
|---|
| | | |
|---|
| | | ### 3. 状态管理集成 |
|---|
| | | **数据来源**：从localStorage中的`case_data_timeline`获取案件状态 |
|---|
| | | **数据来源**：从CaseDataContext获取案件状态 |
|---|
| | | **更新机制**：API调用成功后重新加载案件数据 |
|---|
| | | |
|---|
| | | ### 4. 外呼气泡联动关闭 |
|---|
| | | **触发条件**：终止操作API调用成功后 |
|---|
| | | **实现机制**： |
|---|
| | | 1. FloatingControlPanel触发自定义事件`mediation-terminated` |
|---|
| | | 2. OutboundCallWidget监听该事件 |
|---|
| | | 3. 事件处理： |
|---|
| | | - 设置isVisible=false关闭气泡 |
|---|
| | | - 设置isMinimized=true最小化 |
|---|
| | | - 清空localStorage外呼任务数据 |
|---|
| | | - 清空组件状态中的通话列表 |
|---|
| | | |
|---|
| | | ## API集成设计 |
|---|
| | | |
|---|
| | |
|---|
| | | ## 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`)完全隔离 |
|---|
| | | |
|---|
| | | ### 交互设计 |
|---|
| | | **加载状态**： |
|---|
