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工具

// 从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数据
• [已解答] "查看详细策略建议"跳转? → 暂不跳转，提示"功能升级中"