# Proposal: 增加AI调解实时看板数据展示

## Change ID
`add-mediation-realtime-board`

## 概述
在切换到"AI调解实时看板"Tab页签时，调用 `ProcessAPIService.getProcessRecords` 获取调解记录数据 `recordList`，并将数据动态展示在实时看板列表页面上。同时从 `timeline.mediation.summary` 字段获取沟通情况总结信息。

## 动机
当前"AI调解实时看板"Tab使用的是静态mock数据，无法反映真实的调解沟通过程。需要集成后端API实现：
1. **实时数据展示**：根据案件ID动态获取调解记录列表
2. **沟通总结提取**：从timeline数据中提取调解沟通的核心总结信息
3. **动态UI渲染**：将API返回的记录数据格式化展示在看板中
4. **用户体验优化**：提供Loading状态和错误处理机制

## 影响范围

### 新增文件
- 无新增文件

### 修改文件
- `web-app/src/components/dashboard/TabContainer.jsx` - 修改MediationBoard组件，集成API数据调用和动态渲染

## 用户故事

### 作为调解员
- **我想要**：切换到AI调解实时看板时能看到真实的调解沟通记录
- **以便于**：了解调解进展和双方沟通情况，做出更好的调解决策

### 作为系统使用者
- **我想要**：看到准确的沟通情况总结
- **以便于**：快速掌握案件调解的核心要点

## 关键技术决策

### 1. 数据获取时机
**选择方案**：Tab切换时懒加载
- 仅当用户点击"AI调解实时看板"Tab时才调用API
- 避免不必要的网络请求，提升性能

### 2. 数据结构映射
**recordList字段映射**（基于API文档）：
```javascript
{
  avatar: getAvatarType(record.person_type), // 'ai'|'applicant'|'respondent'|'mediator'
  name: record.creator,
  time: record.create_time,
  content: record.result,
  tags: record.tagList.map(tag => ({ 
    text: tag.tag_name, 
    type: getTagStyleType(tag.tag_style) 
  }))
}
```

**person_type枚举映射**：
- "1" → AI调解员 (avatar: 'ai')
- "2" → 申请人 (avatar: 'applicant') 
- "3" → 被申请人 (avatar: 'respondent')
- "4" → 调解员/管理员 (avatar: 'mediator')

### 3. 沟通总结提取
**字段路径**：`timeline.mediation.summary`

### 4. 错误处理策略
- API调用失败时显示友好的错误提示
- 不保留mock数据，直接显示错误状态
- 控制台输出详细错误信息供调试

## 数据流设计

```
用户点击"AI调解实时看板"Tab
  ↓
触发useEffect监听activeTab变化
  ↓
调用ProcessAPIService.getProcessRecords(mediation_id)
  ↓
获取recordList和timeline数据
  ↓
提取timeline.mediation.summary
  ↓
格式化数据并更新组件状态
  ↓
动态渲染看板列表和沟通总结
```

## 非目标
- 本次不实现实时推送功能（WebSocket等）
- 本次不改变现有UI样式和布局
- 本次不处理分页或无限滚动

## 依赖关系
- ✅ ProcessAPIService.getProcessRecords方法已存在
- ✅ CaseDataContext提供timeline数据
- ✅ 现有MediationBoard UI结构可复用

## 验收标准
1. ✅ 点击"AI调解实时看板"Tab时正确调用getProcessRecords API
2. ✅ 成功获取recordList数据并动态渲染到看板列表
3. ✅ 正确提取并显示timeline.mediation.summary作为沟通情况总结
4. ✅ API调用过程中显示Loading状态
5. ✅ API调用失败时显示错误提示并使用mock数据降级
6. ✅ 数据格式正确映射到现有UI组件结构
7. ✅ 保持现有样式和交互体验不变

## 风险评估
- **低风险**：主要是数据绑定，不涉及复杂业务逻辑变更
- **测试重点**：API数据格式兼容性、错误处理、UI渲染正确性

## 时间估算
- 开发时间：2-3小时
- 测试时间：1小时
- 总计：3-4小时