| New file |
| | |
|---|
| | | # 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调用成功/失败场景测试 |
|---|
| | | - 状态转换的正确性验证 |
|---|
| | | |
|---|
| | | ### 集成测试 |
|---|
| | | - 完整的用户操作流程测试 |
|---|
| | | - 与现有功能的兼容性测试 |
|---|
| | | - 异常场景的恢复能力测试 |
|---|
| | | |
|---|
| | | ### 用户验收测试 |
|---|
| | | - 实际调解场景下的功能验证 |
|---|
| | | - 易用性和直观性评估 |
|---|
| | | - 性能影响评估 |
|---|
