# Design: 首页布局升级优化

## Context

当前首页(index.html)需要按照最新原型进行全面升级，涉及多个新组件的添加和现有组件的修改。本次升级主要目标是提升调解员工作效率，通过可视化展示关键信息。

**原型参考**: `document/原型/index.html` 和用户提供的原型图片

## Goals / Non-Goals

### Goals
- 1:1还原原型图视觉效果
- 新增蓝色顶部Header，统一系统导航风格
- 提供预警消息实时提示，提升调解员响应速度
- 可视化展示申请双方信息和协商沟通进度
- 增强调解成功率数据展示，提供同比分析

### Non-Goals
- 不修改现有API调用机制，复用CaseDataContext
- 不修改底部悬浮控制面板
- "查看详细策略建议"功能暂不实现跳转

## Decisions

### 1. 组件架构

**Decision**: 新增独立组件，不侵入现有组件逻辑

```
components/
├── common/
│   ├── AppHeader.jsx          # 顶部Header(新增)
│   └── WarningAlert.jsx       # 预警提示(新增)
└── dashboard/
    ├── PartyInfoCard.jsx      # 申请双方信息(新增)
    ├── NegotiationProgress.jsx # 协商沟通(新增)
    ├── AISuggestionCard.jsx   # AI调解建议(新增)
    └── TabContainer.jsx       # 修改MediationDataBoard
```

**Rationale**: 保持单一职责，便于维护和测试

### 2. 数据流设计

**Decision**: 复用现有CaseDataContext，新增两个API调用

```
CaseDataContext
├── caseData (现有)
│   ├── mediation.success_rate
│   ├── mediation.yoy_success_rate
│   ├── mediation.yoy_before_hours
│   └── mediation.mediation_count
├── processNodes (现有)
└── 新增API调用:
    ├── getWarningNotifyList(mediationId)
    └── getPersonList(caseId)
```

**Rationale**: 
- 预警消息和当事人列表数据独立于timeline，需单独API获取
- 成功率同比数据从现有timeline字段获取，无需新API

### 3. Header数据来源

**Decision**: 调解员信息从URL参数获取，使用getMergedParams工具

```javascript
// 从URL参数获取
const params = getMergedParams();
const mediatorInfo = {
  trueName: params.trueName || '调解员',
  unit: params.unit || '',
  roleName: params.roleName || '',
  avatar: params.avatar || DEFAULT_AVATAR
};
```

**Rationale**: 调解员信息由外部系统传入，保持与现有参数获取机制一致

### 4. 预警消息展示策略

**Decision**: 
- 单条消息: 直接在消息条展示完整内容
- 多条消息: 展示第一条 + "还有N条预警" + "查看更多"按钮
- 点击"查看更多": 弹出Modal展示全部预警列表

### 5. 协商沟通进度计算

**Decision**: 
```javascript
const currentRound = timeline.mediation?.mediation_count || 0;
const nodeCount = processNodes.length;

// 总次数计算
let totalRounds = nodeCount;
if (currentRound > nodeCount && !isLastNode) {
  totalRounds = currentRound + 1;
}

// 渲染点线块
const dots = Array(totalRounds).fill(false).map((_, i) => i < currentRound);
```

## Layout Structure

```
┌────────────────────────────────────────────────────────┐
│  AppHeader (蓝色背景)                                    │
│  [矛盾纠纷应用]                    [🔔2] [👤李X萌 XX区..]│
├────────────────────────────────────────────────────────┤
│  TopSection (现有案件信息头部)                           │
├────────────────────────────────────────────────────────┤
│  MediationProgress (调解进度条)                          │
├────────────────────────────────────────────────────────┤
│  WarningAlert (浅黄色预警提示)                           │
│  ⚠️ 预警：申请人张三情绪激动...        [还有2条] [查看更多]│
├────────────────────────────────────────────────────────┤
│  TabContainer                                          │
│  ┌─────────────────────────────────────────────────────┤
│  │ MediationDataBoard (调解分析Tab)                     │
│  │ ┌──────────────────────┬─────────────────────────┐  │
│  │ │ 诉求差距分析          │ 申请双方                 │  │
│  │ │ ┌────────────────┐   │ [👤申请人] VS [🏢被申请人]│  │
│  │ │ │ 主要分歧点...   │   │                         │  │
│  │ │ └────────────────┘   │ 预计调解成功率            │  │
│  │ │                      │ 68% ↑+8% 较3小时前       │  │
│  │ │ AI调解建议            │                         │  │
│  │ │ ┌────────────────┐   │ 协商沟通                 │  │
│  │ │ │ 建议调解员...   │   │ 第6轮                   │  │
│  │ │ │ [查看详细策略]  │   │ ●━●━●━●━●━○             │  │
│  │ │ └────────────────┘   │                         │  │
│  │ └──────────────────────┴─────────────────────────┘  │
│  └─────────────────────────────────────────────────────┤
└────────────────────────────────────────────────────────┘
```

## Risks / Trade-offs

### Risk 1: API响应延迟
- **风险**: 预警消息和当事人列表API可能响应慢
- **缓解**: 组件内部loading状态，不阻塞整体页面渲染

### Risk 2: URL参数缺失
- **风险**: 调解员信息URL参数可能为空
- **缓解**: 提供默认值和默认头像

### Risk 3: 布局兼容性
- **风险**: 新增Header可能影响现有页面滚动
- **缓解**: Header使用fixed定位，调整body padding-top

## Migration Plan

1. 先创建API服务和新组件(不影响现有功能)
2. 在App.js中添加AppHeader(影响最小)
3. 在MediationProgress下方添加WarningAlert
4. 修改MediationDataBoard布局，集成新组件
5. 调整CSS样式，验证视觉效果

## Open Questions

- [已解答] AI调解建议内容来源? → 先使用Mock数据
- [已解答] "查看详细策略建议"跳转? → 暂不跳转，提示"功能升级中"