优化相关专业法条列表展示

背景与目标

当前"相关专业法条"区域的字段展示不符合实际API数据结构，需要调整字段映射以正确展示法条信息。

核心目标：
1. 修正法条卡片的字段映射，使用API实际返回的字段
2. 优化右侧详情面板的内容展示格式
3. 动态更新法条条数统计
4. 移除Mock数据依赖，无数据时显示空状态

设计决策

1. 法条卡片字段映射

当前实现（错误）：
jsx <h3 className="law-title">{law.provisionIndex}</h3> // 显示"第XX条" <span>法律ID：{law.lawInfoId}</span> // 显示数字ID <span>制定机关：{law.authority}</span> // 字段不存在 <span>公布日期：{law.publishDate}</span> // 需要移除

优化后（正确）：
jsx <h3 className="law-title">{law.lawTitle}</h3> // 显示法律名称 <span>时效性：{law.lawValidityName}</span> // 新增时效性 <span>制定机关：{law.authorityName}</span> // 使用正确字段 // 移除公布日期

2. 右侧详情面板格式

标题：显示 lawTitle（法律名称）

内容区域：组合显示
jsx {law.provisionIndex} {law.provisionText} // 例如："第七十二条有下列情形之一的，用人单位..."

3. 法条条数统计

动态更新为：与本案相关的法律条文共 {displayLaws.length} 条

4. 空数据处理

不使用Mock数据降级
无数据时显示："暂无相关专业法条数据"提示

技术实现要点

涉及文件

web-app/src/components/tools/SimilarCaseContent.jsx - 法条列表渲染逻辑

修改内容

法条卡片（lines 368-414）

// 修改前
<h3 className="law-title">{law.provisionIndex || law.name || law.lawName || '未命名法条'}</h3>
<div className="law-meta">
  {law.lawInfoId && <span>法律ID：{law.lawInfoId}</span>}
  {law.status && <span>时效性：{law.status}</span>}
  {law.authority && <span>制定机关：{law.authority}</span>}
  {(law.publishDate || law.issueDate) && <span>公布日期：{...}</span>}
</div>

// 修改后
<h3 className="law-title">{law.lawTitle || '未命名法条'}</h3>
<div className="law-meta">
  {law.lawValidityName && <span>时效性：{law.lawValidityName}</span>}
  {law.authorityName && <span>制定机关：{law.authorityName}</span>}
  {/* 移除公布日期 */}
</div>
<div className="law-content">
  {law.provisionIndex && law.provisionText && (
    <div className="law-article">
      <span className="article-number">{law.provisionIndex}</span>
      <span>{law.provisionText}</span>
    </div>
  )}
</div>

右侧详情面板（lines 426-442）

// 修改前
<h3 className="law-detail-title">{activeLaw.provisionIndex || ...}</h3>
<div className="law-detail-content">
  {(activeLaw.articles || activeLaw.content) && ...}
</div>

// 修改后
<h3 className="law-detail-title">{activeLaw.lawTitle || '未命名法条'}</h3>
<div className="law-detail-content">
  {activeLaw.provisionIndex && activeLaw.provisionText ? (
    <div className="law-article">
      <span className="article-number">{activeLaw.provisionIndex}</span>
      <span>{activeLaw.provisionText}</span>
    </div>
  ) : (
    <p>暂无详细内容</p>
  )}
</div>

空状态提示（line 421）

// 修改前
<p className="empty-text">暂无法条推荐</p>

// 修改后
<p className="empty-text">暂无相关专业法条数据</p>

API数据结构假设

根据内存记忆，API返回的法条数据结构：
json { "data": { "provisions": [ { "lawProvisionId": "xxx", // 法条ID（主键） "lawTitle": "中华人民共和国劳动法", // 法律标题 "lawValidityName": "有效", // 时效性 "authorityName": "全国人民代表大会", // 制定机关 "provisionIndex": "第七十二条", // 条文号 "provisionText": "有下列情形之一..." // 条文内容 } ] } }

验收标准

[ ] 法条卡片标题显示 lawTitle 而非 provisionIndex
[ ] 时效性显示 lawValidityName
[ ] 制定机关显示 authorityName
[ ] 公布日期不再显示
[ ] 法条内容区域显示 provisionIndex + 空格 + provisionText
[ ] 右侧详情面板标题显示 lawTitle
[ ] 右侧详情面板内容显示 provisionIndex + 空格 + provisionText
[ ] 法条条数统计动态更新
[ ] 无数据时显示"暂无相关专业法条数据"
[ ] 点击法条卡片高亮并显示右侧详情（保持现有交互）

风险与注意事项

字段缺失处理：API可能不返回某些字段，需要添加空值检查
向后兼容性：移除对旧字段的支持可能导致使用旧API的环境出错
样式影响：字段内容变化可能影响布局，需要测试长文本场景

参考资料

原型文件：document/原型/similar_case.html（lines 786-949）
UI截图：用户提供的法条详情面板截图
历史记忆：法条列表字段与UI展示映射规范