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结构可复用

验收标准

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

风险评估

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

时间估算

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