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

## 背景与目标

当前"相关专业法条"区域的字段展示不符合实际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）
```jsx
// 修改前
<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）
```jsx
// 修改前
<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）
```jsx
// 修改前
<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`
- [ ] 法条条数统计动态更新
- [ ] 无数据时显示"暂无相关专业法条数据"
- [ ] 点击法条卡片高亮并显示右侧详情（保持现有交互）

## 风险与注意事项

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

## 参考资料

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