From 88a31d5a960bd10f3799bc00f8aa24461567d06e Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Tue, 07 Apr 2026 15:23:43 +0800
Subject: [PATCH] Merge branch 'test/tony.cheng/260312' of http://120.79.193.119:9090/r/~chengmw/cloud-melody-front into test/shimai.huang/260309
---
openspec/changes/upgrade-homepage-layout/design.md | 163 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 163 insertions(+), 0 deletions(-)
diff --git a/openspec/changes/upgrade-homepage-layout/design.md b/openspec/changes/upgrade-homepage-layout/design.md
new file mode 100644
index 0000000..aefb0ce
--- /dev/null
+++ b/openspec/changes/upgrade-homepage-layout/design.md
@@ -0,0 +1,163 @@
+# 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数据
+- [已解答] "查看详细策略建议"跳转? → 暂不跳转，提示"功能升级中"
--
Gitblit v1.8.0