# 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": "..."
      }
    ]
  }
}
```