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

Change ID

integrate-similar-case-api

概述

修改SimilarCaseContent.jsx组件，集成RecommendAPIService.getComprehensiveRecommendations API调用，实现真实的类案与法条推荐数据展示。当用户点击"类案与法条推荐"工具时，从CaseDataContext获取timeline数据作为请求参数，动态加载并展示推荐结果。

动机

当前"类案与法条推荐"功能使用的是静态mock数据，无法提供真实的推荐服务。需要集成后端API实现：
1. 真实数据展示：根据当前案件信息获取个性化的类案和法条推荐
2. 动态参数构建：从timeline缓存中提取案件描述、诉求和ID构建API请求
3. 用户体验优化：提供Loading状态和错误处理机制
4. 数据驱动决策：为调解员提供更准确的参考信息

影响范围

修改文件

web-app/src/components/tools/SimilarCaseContent.jsx - 集成API调用和动态数据渲染

新增依赖

RecommendAPIService - 已存在的推荐API服务
CaseDataContext - 已存在的案件数据上下文

用户故事

作为调解员

我想要：点击类案推荐工具时能看到基于当前案件的真实推荐结果
以便于：参考相似案例和相关法条，提高调解质量和效率

作为系统用户

我想要：获得个性化的推荐内容而非固定mock数据
以便于：得到更有针对性的调解参考信息

关键技术决策

1. 数据获取策略

选择方案：组件挂载时自动加载
- 在组件useEffect中自动调用API
- 使用CaseDataContext提供的timeline数据构建请求参数
- 避免用户手动触发，提升使用体验

2. 参数构建逻辑

const buildRequestParams = (timeline) => {
  const caseContent = [
    timeline.caseDes || '',
    timeline.case_claim || ''
  ].filter(Boolean).join('\n');
  
  return {
    caseId: timeline.case_id,
    caseContent: caseContent,
    caseTopK: 3,
    lawTopK: 10
  };
};

3. 错误处理策略

API调用失败时显示友好的错误提示
不保留mock数据作为降级方案，直接显示错误状态
控制台输出详细错误信息供调试

4. 性能优化

使用useCallback优化API调用函数
避免不必要的重复请求
合理的Loading状态管理

数据流设计

组件挂载
  ↓
从CaseDataContext获取timeline数据
  ↓
构建API请求参数
  ↓
调用RecommendAPIService.getComprehensiveRecommendations
  ↓
获取cases和laws数据
  ↓
格式化数据并更新组件状态
  ↓
动态渲染类案和法条推荐列表

非目标

本次不修改现有UI布局和样式
本次不添加新的交互功能
本次不处理分页或无限滚动
本次不实现推荐结果的反馈机制

依赖关系

✅ RecommendAPIService.getComprehensiveRecommendations方法已存在
✅ CaseDataContext提供timeline数据
✅ 现有SimilarCaseContent UI结构可复用

验收标准

✅ 点击"类案与法条推荐"工具时正确调用推荐API
✅ 成功从timeline中提取caseDes、case_claim、case_id构建请求参数
✅ API返回的类案数据正确展示在左侧列表中
✅ API返回的法条数据正确展示在右侧列表中
✅ API调用过程中显示Loading状态
✅ API调用失败时显示错误提示（不使用mock数据降级）
✅ 保持现有UI样式和交互体验不变

风险评估

低风险：主要是数据绑定，不涉及复杂业务逻辑变更
测试重点：API参数构建正确性、数据格式兼容性、错误处理机制

时间估算

开发时间：2-3小时
测试时间：1小时
总计：3-4小时