云小调AI智能体前端
edit | blame | history | raw

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

任务清单

Phase 1: 准备工作 (0.5小时)

Task 1.1: 分析现有代码结构

  • [x] 查看TabContainer.jsx中MediationBoard组件的当前实现
  • [x] 确认ProcessAPIService.getProcessRecords方法的参数要求
  • [x] 分析现有mock数据结构与API返回数据的映射关系
  • [x] 确认timeline.mediation.summary字段的存在和格式

Phase 2: 核心功能开发 (2-2.5小时)

Task 2.1: 修改MediationBoard组件 - 添加状态管理

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 导入必要的Hook：useState, useEffect, useCaseData
  • [x] 添加组件内部状态：
    • records - 存储API返回的调解记录列表
    • loading - 控制Loading状态显示
    • error - 存储错误信息
  • [x] 从CaseDataContext获取timeline数据和mediation_id

Task 2.2: 实现API数据获取逻辑

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 在useEffect中监听activeTab变化
  • [x] 当activeTab === 'mediation-board'时调用API
  • [x] 实现getProcessRecords调用逻辑

Task 2.3: 实现数据格式化和映射

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 创建数据转换函数，将API返回的数据映射到UI组件需要的格式
  • [x] 实现person_type到avatar类型的映射逻辑
  • [x] 实现tag_style到UI标签样式的映射
  • [x] 提取沟通情况总结：timeline.mediation.summary

Task 2.4: 集成Loading和错误处理

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 在MediationBoard组件中添加Loading状态显示
  • [x] 添加错误提示UI
  • [x] API调用失败时不使用mock数据，直接显示错误状态

Phase 3: UI渲染优化 (0.5-1小时)

Task 3.1: 动态渲染调解记录列表

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 修改现有的boardItems.map逻辑，使用动态records数据
  • [x] 保持现有的UI样式和布局不变
  • [x] 确保数据正确绑定到各个字段

Task 3.2: 动态显示沟通情况总结

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 内容:
  • [x] 修改沟通情况总结区域，从timeline.mediation.summary获取数据
  • [x] 保持现有的样式和布局
  • [x] 添加默认值处理（当summary为空时的显示）

Phase 4: 测试与验证 (1小时)

Task 4.1: 功能测试

  • [x] 测试Tab切换时正确触发API调用
  • [x] 测试API成功返回时数据正确展示
  • [x] 测试API失败时显示错误提示（不使用mock数据）
  • [x] 测试Loading状态正确显示
  • [x] 测试错误提示正确显示

Task 4.2: 数据验证

  • [x] 验证recordList数据格式正确映射
  • [x] 验证timeline.mediation.summary正确提取
  • [x] 验证各种参与者类型(avatar)正确显示
  • [x] 验证时间戳格式正确处理

Task 4.3: UI/UX测试

  • [x] 验证界面布局保持一致
  • [x] 验证交互体验流畅
  • [x] 验证响应式设计不受影响
  • [x] 验证在不同数据量下的显示效果

实施计划

开发顺序

  1. 先实现核心数据获取和状态管理逻辑
  2. 再实现UI渲染和数据绑定
  3. 最后完善错误处理和用户体验

关键检查点

  • ✅ API调用参数正确性
  • ✅ 数据格式映射准确性
  • ✅ 错误处理完整性
  • ✅ UI渲染一致性

风险缓解措施

技术风险

  • API数据格式不匹配：准备详细的字段映射表，预留适配层
  • 网络请求失败：完善的错误处理和降级机制
  • 性能问题：实现懒加载，避免不必要的API调用

质量保证

  • 保留现有功能作为基准对比
  • 逐步验证每个功能点
  • 充分的错误场景测试

验收标准检查清单

  • [x] Tab切换时正确调用API
  • [x] 数据成功获取并正确展示
  • [x] 沟通总结正确显示
  • [x] Loading状态正常工作
  • [x] 错误处理机制完善
  • [x] UI样式保持一致
  • [x] 交互体验流畅自然