Tasks: 集成类案与法条推荐API数据展示

任务清单

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

Task 1.1: 分析现有代码结构

• [x] 查看SimilarCaseContent.jsx组件的当前实现
• [x] 确认RecommendAPIService.getComprehensiveRecommendations方法的参数要求
• [x] 分析现有mock数据结构与API返回数据的映射关系
• [x] 确认CaseDataContext中timeline数据的结构和字段

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

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

• [x] 文件: web-app/src/components/tools/SimilarCaseContent.jsx
• [x] 导入必要的依赖：useState, useEffect, useCallback, useCaseData, RecommendAPIService
• [x] 添加组件内部状态：
• cases - 存储API返回的类案推荐列表
• laws - 存储API返回的法条推荐列表
• loading - 控制Loading状态显示
• error - 存储错误信息
• [x] 从CaseDataContext获取timeline数据

Task 2.2: 实现参数构建和API调用逻辑

• [x] 文件: web-app/src/components/tools/SimilarCaseContent.jsx
• [x] 实现参数构建函数
• [x] 实现API调用函数

Task 2.3: 集成useEffect自动加载

• [x] 文件: web-app/src/components/tools/SimilarCaseContent.jsx
• [x] 在组件挂载时自动调用API
• [x] 监听timeline数据变化，必要时重新加载

Task 2.4: 集成Loading和错误处理UI

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

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

Task 3.1: 动态渲染类案推荐列表

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

Task 3.2: 动态渲染法条推荐列表

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

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

Task 4.1: 功能测试

• [x] 测试工具点击时正确触发API调用
• [x] 测试API成功返回时数据正确展示
• [x] 测试API失败时显示错误提示（不使用mock数据）
• [x] 测试Loading状态正确显示
• [x] 测试错误提示正确显示
• [x] 测试无数据时显示空状态提示（暂无类案推荐/暂无法条推荐）
• [x] 测试API参数格式正确性（已修复BUG，已重新验证）
• [x] 测试类案推荐数据字段映射（已修复 similarCases 字段）
• [x] 测试法条推荐数据字段映射（已修复 provisions 字段）

Task 4.2: 数据验证

• [x] 验证timeline数据正确提取caseDes、case_claim、case_id字段
• [x] 验证参数正确构建并传递给API（已修复参数格式，已重新验证）
• [x] 验证API返回的cases数据格式正确映射（similarCases → cpwsCaseTextId, caseName, caseNumber等）
• [x] 验证API返回的laws数据格式正确映射（provisions → lawProvisionId, lawInfoId, provisionIndex等）

Task 4.3: UI/UX测试

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

实施计划

开发顺序

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

关键检查点

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

风险缓解措施

技术风险

• API数据格式不匹配：准备详细的字段映射表，预留适配层
• 网络请求失败：完善的错误处理和降级机制
• 性能问题：实现合理的缓存策略，避免重复请求

质量保证

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

验收标准检查清单

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

BUG修复记录

BUG #1: TypeError - displayLaws.find is not a function

发现时间: 2026-02-04
问题描述: displayLaws.find is not a function 运行时错误
根本原因: displayLaws变量在某些情况下不是数组类型
修复方法:
- 添加 Array.isArray() 类型检查确保 displayCases 和 displayLaws 始终为数组
- 添加长度检查 displayLaws.length > 0 避免在空数组上操作
- 当没有数据时 activeLaw 设置为 null
状态: ✅ 已修复

BUG #2: 类案推荐数据不显示

发现时间: 2026-02-04
问题描述: API返回了类案数据，但页面没有显示
根本原因: API返回的是 data.similarCases，而不是 data.cases
修复方法:
- 修改数据提取路径：casesResult.data?.similarCases || casesResult.data?.cases || []
- 更新字段映射：
- ID: cpwsCaseTextId → id / caseId
- 标题: caseName → title / caseTitle
- 概述: basicCaseInfo → overview / caseOverview
- 添加新字段显示：caseNumber、judgmentDate、court、caseType
状态: ✅ 已修复

BUG #3: 法条推荐数据不显示

发现时间: 2026-02-04
问题描述: API返回了法条数据，但页面没有显示
根本原因: API返回的是 data.provisions，而不是 data.laws
修复方法:
- 修改数据提取路径：lawsResult.data?.provisions || lawsResult.data?.laws || []
- 更新字段映射：
- ID: lawProvisionId → id / lawId
- 标题: provisionIndex → name / lawName
- 添加 lawInfoId 显示
- 添加数组类型检查防止 (law.articles || law.content).map() 报错
- 空内容时显示“暂无详细内容”
状态: ✅ 已修复

BUG #4: Cannot read properties of undefined (reading 'map')

发现时间: 2026-02-04
问题描述: Cannot read properties of undefined (reading 'map') 运行时错误
根本原因: 逻辑运算符使用错误，Array.isArray(...) && ...map() 会将布尔值 true 与 .map() 连接
问题代码:
javascript {Array.isArray(law.articles || law.content) && (law.articles || law.content).map(...)} // 当 Array.isArray 返回 true 时，表达式变成：true && array.map() // 结果是：true.map() → 错误！
修复方法: 将 && 改为三元运算符 ? :
javascript {Array.isArray(law.articles || law.content) ? ( (law.articles || law.content).map(...) ) : null}
状态: ✅ 已修复

BUG #5: 类案详情展开时多处map错误

发现时间: 2026-02-04
问题描述: 展开类案详情时报错 Cannot read properties of undefined (reading 'map')
根本原因: API返回的类案数据中 plaintiffDemand、mediationScheme、mediationResult 字段可能不存在或不是数组
修复方法: 为所有 .map() 调用添加 Array.isArray() 检查
```javascript
// 修复前
{item.mediationScheme && item.mediationScheme.map(...)}

// 修复后
{item.mediationScheme && Array.isArray(item.mediationScheme) && item.mediationScheme.map(...)}
`` **影响字段**: -plaintiffDemand/demands -mediationScheme -mediationResult`
状态: ✅ 已修复

技术总结

关键修复点

1. 类型安全: 始终使用 Array.isArray() 检查数组类型
2. 字段映射: 支持多种可能的字段名称（兼容性）
3. 空值处理: 在数组操作前检查存在性和类型
4. 调试日志: 添加 console.log 方便排查数据问题

API数据结构

类案推荐接口:
json { "code": 200, "data": { "similarCases": [ { "cpwsCaseTextId": "...", "caseName": "...", "caseNumber": "...", "caseType": "...", "basicCaseInfo": "...", "judgmentDate": "...", "court": "..." } ] } }

法条推荐接口:
json { "code": 200, "data": { "provisions": [ { "lawProvisionId": "...", "lawInfoId": "...", "provisionIndex": "..." } ] } }