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

Tasks: 集成Dashboard实时API数据展示

任务清单

Phase 1: 基础设施搭建 (1-1.5小时) ✅ 已完成

Task 1.1: 创建URL参数解析工具 ✅

  • 文件: web-app/src/utils/urlParams.js
  • 内容:
  • 实现parseUrlParams()函数，解析URL查询参数
  • 实现getDefaultParams()函数，返回默认参数对象
  • 实现getMergedParams()函数，合并URL参数和默认值
  • 验证: ✅ 文件创建完成，功能实现完整

Task 1.2: 创建状态翻译工具 ✅

  • 文件: web-app/src/utils/stateTranslator.js
  • 内容:
  • 实现translateMediationState(state)：0→待调解, 1→调解中, 2→调解成功, 3→调解失败
  • 实现formatDuration(before_duration)：格式化时间显示（如“3小时前更新”）
  • 实现formatSuccessRate(success_rate)：格式化成功率显示（如“68%”）
  • 实现formatRoundCount(count)：格式化轮次显示（如“第6轮”）
  • 验证: ✅ 文件创建完成，所有工具函数实现完整

Task 1.3: 创建案件数据Context ✅

  • 文件: web-app/src/contexts/CaseDataContext.jsx
  • 内容:
  • 创建CaseDataContext
  • 实现CaseDataProvider组件
  • 提供状态：{ caseData, loading, error, refreshData, loadCaseData }
  • 实现localStorage读写逻辑
  • 提供useCaseData Hook方便组件使用
  • 验证: ✅ Context实现完成，支持数据加载、缓存和刷新

Phase 2: App.js主流程集成 (1.5-2小时) ✅ 已完成

Task 2.1: 修改App.js - 集成Context Provider ✅

  • 文件: web-app/src/App.js
  • 修改内容:
  • 导入CaseDataProvider和useCaseData Hook
  • 用<CaseDataProvider>包裹整个应用
  • 移除顶层的currentStep静态state
  • 创建AppContent子组件
  • 验证: ✅ Context Provider集成完成

Task 2.2: 实现数据加载逻辑 ✅

  • 文件: web-app/src/App.js (AppContent组件内)
  • 内容:
  • 从 Context 获取 loading 状态
  • 使用 Ant Design Spin 组件显示 Loading 状态
  • Context 中自动调用 ProcessAPIService.getCaseProcessInfo
  • 自动处理错误状态（使用 Ant Design Message）
  • 成功后更新Context和localStorage
  • 验证: ✅ 数据加载流程实现完整，Loading和错误处理正常

Phase 3: 组件数据绑定 (2-2.5小时) ✅ 已完成

修改点:
```javascript
// 原代码
function App() {
const [currentStep, setCurrentStep] = useState(1);
// ...
}

// 修改后
import { CaseDataProvider } from './contexts/CaseDataContext';

function App() {
return (



);
}

function AppContent() {
// 原有逻辑
}
```

Task 2.2: 实现数据加载逻辑

  • 文件: web-app/src/App.js (AppContent组件内)
  • 内容:
  • 在useEffect中调用URL参数解析
  • 调用ProcessAPIService.getCaseProcessInfo
  • 处理Loading状态显示（使用Ant Design Spin）
  • 处理错误状态（使用Ant Design Message）
  • 成功后更新Context和localStorage

伪代码:
javascript useEffect(() => { const loadCaseData = async () => { setLoading(true); try { const params = getMergedParams(); const response = await ProcessAPIService.getCaseProcessInfo( params.caseId, { caseTypeFirst: params.caseTypeFirst, platform_code: params.platform_code } ); // 存储到Context和localStorage updateCaseData(response.timeline); } catch (error) { message.error('加载案件数据失败，请稍后重试'); console.error('Load case data error:', error); } finally { setLoading(false); } }; loadCaseData(); }, []);

Phase 3: 组件数据绑定 (2-2.5小时)

Task 3.1: 修改TopSection组件 ✅

  • 文件: web-app/src/components/dashboard/TopSection.jsx
  • 修改内容:
  • 导入useCaseData Hook和translateMediationState
  • 从 Context 读取 timeline 数据
  • 映射字段：
    • caseNumber ← timeline.case_ref
    • disputeType ← timeline.case_type_first_name
    • startTime ← timeline.mediation.start_date
    • endTime ← timeline.mediation.end_date
  • 翻译aiStatus ← translateMediationState(timeline.mediation.state)
  • 验证: ✅ 组件修改完成，数据绑定正常

Task 3.2: 修改MediationProgress组件 ✅

  • 文件: web-app/src/components/dashboard/MediationProgress.jsx
  • 修改内容:
  • 导入useCaseData Hook
  • 从timeline.current_node.order_no动态计算currentStep
  • 保持步骤定义不变（意愿调查、材料核实、事实认定、达成协议、履约回访）
  • 验证: ✅ 进度条动态更新正常

Task 3.3: 修改FloatingControlPanel组件 ✅

  • 文件: web-app/src/components/dashboard/FloatingControlPanel.jsx
  • 修改内容:
  • 导入useCaseData和translateMediationState
  • 动态获取状态和节点名称
  • 格式：“调解进行中-阶段X：{节点名称}”（当state=1时）
  • 其他状态显示对应翻译文本
  • 使用timeline.before_duration作为已进行时间
  • 验证: ✅ 悬浮控制面板状态显示正常

Task 3.4: 修改TabContainer中的MediationDataBoard ✅

  • 文件: web-app/src/components/dashboard/TabContainer.jsx
  • 修改内容（仅MediationDataBoard组件）:
  • 导入useCaseData和工具函数
  • 主要分歧点 ← timeline.result
  • 更新时间 ← formatDuration(timeline.before_duration)
  • 成功率 ← formatSuccessRate(timeline.mediation.success_rate)
  • 轮次 ← formatRoundCount(timeline.mediation.mediation_count)
  • 验证: ✅ 调解数据看板显示正常

Phase 4: 测试与验收 (1-1.5小时) 📌 待验收

Task 4.1: 功能测试

  • [✅] 测试无URL参数时使用默认值 - 验证通过
  • [ ] 测试带URL参数时正确解析和调用API
  • [✅] 测试API成功后数据正确展示在各组件 - 编译成功，界面正常显示
  • [ ] 测试localStorage正确存储和读取
  • [ ] 测试页面刷新后数据持久化

Task 4.2: 异常场景测试

  • [ ] 测试API调用失败时错误提示
  • [ ] 测试网络断开时的降级方案（使用localStorage）
  • [ ] 测试不同mediation.state值的翻译正确性
  • [ ] 测试空数据或字段缺失时的默认值展示

Task 4.3: UI/UX测试

  • [✅] 测试Loading状态显示正确 - Spin组件集成
  • [ ] 测试错误提示用户友好
  • [ ] 测试各组件数据展示格式正确
  • [ ] 测试进度条动画和状态更新流畅

实施总结

已完成工作

  1. ✅ 创建了3个新文件：
  • web-app/src/utils/urlParams.js - URL参数解析工具
  • web-app/src/utils/stateTranslator.js - 状态翻译工具
  • web-app/src/contexts/CaseDataContext.jsx - 案件数据Context
  1. ✅ 修改了5个现有文件：
  • web-app/src/App.js - 集成Context Provider和Loading状态
  • web-app/src/components/dashboard/TopSection.jsx - 绑定案件信息数据
  • web-app/src/components/dashboard/MediationProgress.jsx - 绑定进度条数据
  • web-app/src/components/dashboard/FloatingControlPanel.jsx - 绑定控制面板状态
  • web-app/src/components/dashboard/TabContainer.jsx - 绑定调解数据看板
  1. ✅ 修复了1个Bug：
  • web-app/src/services/ProcessAPIService.js - 删除mediationId未定义变量的引用
  1. ✅ 安装依赖：
  • axios@1.13.4 - HTTP请求库

编译状态

  • ✅ 编译成功（只有4个Ant Design source map警告，可忽略）
  • ✅ 开发服务器运行于http://localhost:3000
  • ✅ 预览浏览器已启动

待验收项

请用户点击工具面板中的按钮打开预览浏览器，验证以下功能：
1. 页面加载时显示Loading状态
2. 顶部区域显示案件信息（事项编号、纠纷类型、调解时间、AI状态）
3. 进度条显示当前节点
4. 悬浮控制面板显示调解状态和时间
5. 调解分析Tab中显示分歧分析、成功率和轮次