# Change: 首页布局升级优化

## Why
当前首页缺少顶部导航Header、预警提示、申请双方信息展示、协商沟通可视化和AI调解建议等关键功能模块，需要按照最新原型图进行布局升级，提升调解员工作效率和用户体验。

## What Changes
- **新增**: 蓝色顶部Header组件，包含系统名称、通知图标(带消息数量气泡)、调解员信息
- **新增**: 预警提示消息条组件(浅黄色背景)，支持多条消息查看弹窗
- **新增**: 申请双方信息组件，展示申请人/被申请人信息及情绪标签
- **修改**: 预计调解成功率组件，增加同比数据展示(如 +8% 较3小时前)
- **新增**: 协商沟通面板组件，点线式可视化展示沟通轮次
- **新增**: AI调解建议面板，展示调解建议内容和详情按钮
- **新增**: 预警消息API服务 (`/api/v1/mediation-timeline/warning-notify-list/{mediation_id}`)
- **新增**: 当事人列表API服务 (`/api/v1/mediation-timeline/person-list/{case_id}`)

## Impact
- **Affected specs**: homepage-layout
- **Affected code**:
  - `web-app/src/App.js` - 添加Header组件
  - `web-app/src/App.css` - 新增Header和相关组件样式
  - `web-app/src/components/dashboard/TopSection.jsx` - 添加预警提示
  - `web-app/src/components/dashboard/TabContainer.jsx` - 修改MediationDataBoard组件
  - 新增组件:
    - `web-app/src/components/common/AppHeader.jsx` - 顶部Header
    - `web-app/src/components/common/WarningAlert.jsx` - 预警提示
    - `web-app/src/components/dashboard/PartyInfoCard.jsx` - 申请双方信息
    - `web-app/src/components/dashboard/NegotiationProgress.jsx` - 协商沟通
    - `web-app/src/components/dashboard/AISuggestionCard.jsx` - AI调解建议
  - `web-app/src/services/MediationTimelineAPIService.js` - 新增API服务

## Data Sources

### 1. Header调解员信息
从URL请求参数获取:
- `trueName` - 姓名
- `unit` - 地址
- `roleName` - 角色
- `avatar` - 头像(空则使用默认头像)

### 2. 预警消息API
```
GET /api/v1/mediation-timeline/warning-notify-list/{mediation_id}

Response:
{
  "code": 200,
  "data": [
    {
      "id": "1",
      "content": "申请人张三情绪激动...",
      "create_time": "2026-12-20 12:30:15",
      "level_type": "3"
    }
  ]
}
```

### 3. 当事人列表API
```
GET /api/v1/mediation-timeline/person-list/{case_id}

Response:
{
  "code": 200,
  "data": [
    {
      "id": "202602261114261001",
      "per_type": "15_020008-1",
      "per_type_name": "申请方当事人",
      "true_name": "刘树杰",
      "record_id": "1001",
      "tag_name": "情绪激动",
      "tag_style": "red"
    }
  ]
}
```

### 4. 成功率同比数据
从 `CaseDataContext` 或 `localStorage.case_data_timeline` 获取:
- `mediation.yoy_success_rate` - 同比增长率
- 若为空: `(mediation.success_rate - mediation.last_success_rate) * 100`
- `mediation.yoy_before_hours` - 对比时间(小时)，若为空则为0

### 5. 协商沟通轮次
- 当前轮次: `timeline.mediation?.mediation_count`
- 总次数: 默认为流程节点总数
- 当沟通次数超过总次数且未到最后节点时: 总次数 = 沟通次数 + 1