Tasks: 首页任务时间实时展示API对接

任务清单

Phase 1: 基础设施搭建 (0.5小时)

Task 1.1: 创建时间格式化工具

• 文件: web-app/src/utils/timeFormatter.js
• 内容:
• 实现 formatMinutes(durationInSeconds)：将秒数格式化为"XX分钟"
• 实现 calculateDuration(startTime)：计算从startTime到现在的分钟数
• 实现 getFallbackStartTime()：获取页面加载时间作为降级方案
• 验证: 单元测试各种时间格式场景

Task 1.2: 创建任务计时Hook

• 文件: web-app/src/hooks/useTaskTimer.js
• 内容:
• 实现 useTaskTimer(startTime)
• 内部使用 setInterval 每10秒更新一次duration
• 返回 { duration, isFallback } 状态
• 组件卸载时自动清理定时器
• 验证: Hook正确管理定时器生命周期

Phase 2: API服务层完善 (0.5小时)

Task 2.1: 完善ProcessAPIService文档

• 文件: web-app/src/services/ProcessAPIService.js
• 内容:
• 补充 getTaskTime(mediation_id, node_id) 方法的JSDoc注释
• 明确参数类型和返回值结构
• 验证: JSDoc生成文档完整准确

Phase 3: 数据层集成 (1小时)

Task 3.1: 修改CaseDataContext集成任务时间

• 文件: web-app/src/contexts/CaseDataContext.jsx
• 修改内容:
• 在 loadCaseData 成功后，提取 timeline.id 和 timeline.current_node.id
• 调用 ProcessAPIService.getTaskTime(mediation_id, node_id)
• 将返回的 startTime 存储到Context状态中
• API失败时使用 getFallbackStartTime() 作为降级方案
• 验证: Context正确提供startTime数据

Phase 4: UI组件集成 (1小时)

Task 4.1: 修改FloatingControlPanel展示实时时间

• 文件: web-app/src/components/dashboard/FloatingControlPanel.jsx
• 修改内容:
• 导入 useTaskTimer Hook
• 从Context获取 startTime
• 使用 useTaskTimer 获取实时duration
• 将 "已进行：25分钟" 替换为动态时间显示
• 显示降级状态提示（如需要）
• 验证: 时间每10秒正确更新，格式正确

依赖关系

Task 1.1 (时间工具) ─┐
Task 1.2 (计时Hook) ─┤
                     ├→ Task 3.1 (Context集成) → Task 4.1 (UI展示)
Task 2.1 (API文档) ──┘

可并行任务

• Task 1.1 和 Task 1.2 可以并行开发
• Task 2.1 可以独立完成

回滚策略

如果集成过程中出现问题，可以：
1. 注释掉FloatingControlPanel中的动态时间显示
2. 恢复为固定的"25分钟"显示
3. 删除新增的hooks和utils文件

预计工作量

• Phase 1: 0.5小时
• Phase 2: 0.5小时
• Phase 3: 1小时
• Phase 4: 1小时
• 总计: 3小时