# 状态中心页面 - 可调整版式方案
## 设计原则
1. **现在(联调阶段)**:全部展开,方便你看数据流转、验证接口。
2. **后期(交付阶段)**:一键折叠技术细节,业务只看待办 + 简化流程图。
3. **实现方式**:每个区域带展开/收起按钮 + 顶部"调试模式"开关,展开状态存 localStorage。
---
## 版式结构
```
┌──────────────────────────────────────────────────────────────────┐
│ 顶栏 │
│ [状态中心] [调试模式: ●开 ○关] 角色:采购 待办状态:待处理 │
│ [令牌: ****] [刷新] │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 待办队列 (始终可见) [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ ┌────────────┬────────────┬──────────────────────────────────┐ │
│ │ □ 新增货源 │ 对码待确认 │ M5人工确认 │ │
│ │ 重庆亿昊 │ 阿卡波糖 │ 华润医药 │ │
│ │ 10:00 │ 09:30 │ 昨天 │ │
│ └────────────┴────────────┴──────────────────────────────────┘ │
│ │
│ 当前选中待办:新增货源 - 重庆亿昊药业 │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ 原因:该供应商未维护这些品种的货源 │ │
│ │ [选择候选货品: ▼ 阿卡波糖片 50mg*30片] │ │
│ │ [☑ 保存为下次自动匹配规则] │ │
│ │ [确认并继续] [转派] [终止] │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 所属单据概览 [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ 单号: YYC-重庆亿昊药业-20260804-demo 状态: 等待人工 │
│ 当前节点: 新增货源 责任角色: 采购 │
│ 订单日期: 2026-08-04 供应商: 重庆亿昊药业 │
│ │
│ 业务编号链: │
│ 订单 DD-001,DD-002 → 合同 HT-xxx → 返利 - (待填) → M5 - → 收货 - │
│ │
│ [查看完整详情 ↗] │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 流程状态图 [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ [订单获取✓] [OCR⊘] [对码✓] [新增货源●] [合同建单○] ... [归档○] │
│ │
│ 图例: ✓已完成 ●当前 ⊘已跳过 ○待处理 ✗失败 │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 调试:节点详情 (调试模式开启时显示) [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ 已执行节点: │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ORDER_FETCH [尝试1] 成功 09:40-09:42 (2分钟) │ │
│ │ 摘要: {orderCount: 12} │ │
│ │ 证据: orders.xlsx (SOURCE_EXCEL) │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ PRODUCT_MATCH [尝试1] 成功 09:50-09:51 (1分钟) │ │
│ │ 摘要: {EXACT:10, ALIAS:1, MULTI:1} │ │
│ │ 证据: 无 │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ SOURCE_ADD [尝试1] 等待人工 10:00- │ │
│ │ 证据: 无 │ │
│ └──────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 调试:证据包 (调试模式开启时显示) [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ ORDER_FETCH尝试1: │
│ └─ SOURCE_EXCEL: /data/jobs/.../orders.xlsx (09:42) │
│ CONTRACT_CREATE尝试1: │
│ └─ CONTRACT_PDF: /data/jobs/.../contract.pdf (10:06) │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 调试:单据列表 (调试模式开启时显示) [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ [全部] [执行中] [等待人工] [已完成] [失败] │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 重庆亿昊药业 2026-08-04 YYC 等待人工 新增货源 采购 │ │
│ │ 华润医药 2026-08-03 线下 执行中 对码 计划员 │ │
│ └──────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│ ▼ 开发:节点回调模拟 (仅 DEV 环境显示) [收起/展开]│
├──────────────────────────────────────────────────────────────────┤
│ 当前节点: 新增货源 │
│ [参数 JSON: ] │
│ [开始] [成功] [失败] │
└──────────────────────────────────────────────────────────────────┘
```
---
## 分区说明
### 1. 待办队列 (始终可见,不可收起)
- **用途**:主工作流,无论联调还是生产都需要。
- **内容**:待办卡片 + 当前待办处理表单。
### 2. 所属单据概览 (默认展开,可收起)
- **用途**:提供当前待办的上下文(哪个供应商、哪天的单、跑到哪了)。
- **后期**:业务只看这个 + 待办队列就够了。
### 3. 流程状态图 (默认展开,可收起)
- **用途**:直观看 13 个节点的完成情况。
- **后期**:保留,但可以简化成 mini 版(只显示名称 + 状态点)。
### 4. 调试:节点详情 (调试模式开启时显示)
- **用途**:验证每个节点的 started_at/ended_at/duration/output_json/error。
- **后期**:关掉,业务不需要看技术细节。
### 5. 调试:证据包 (调试模式开启时显示)
- **用途**:验证 RPA 回调上传的证据是否落库、路径对不对。
- **后期**:关掉或改成"证据总数"摘要。
### 6. 调试:单据列表 (调试模式开启时显示)
- **用途**:你在联调时快速切换不同单据验证状态流转。
- **后期**:关掉或改成独立页面(管理员监控用)。
### 7. 开发:节点回调模拟 (仅 DEV 环境显示)
- **用途**:本地联调时模拟艺赛旗回调。
- **后期**:生产环境 `import.meta.env.DEV=false` 自动隐藏。
---
## 技术实现
### 1. 展开/收起状态存储
```typescript
// localStorage 存每个区域的展开状态
const sectionStates = {
jobSummary: true, // 所属单据概览
timeline: true, // 流程状态图
nodeDetails: false, // 节点详情(调试模式控制)
evidence: false, // 证据包(调试模式控制)
jobList: false, // 单据列表(调试模式控制)
};
localStorage.setItem('sectionStates', JSON.stringify(sectionStates));
```
### 2. 调试模式开关
```typescript
const [debugMode, setDebugMode] = useState(
localStorage.getItem('debugMode') === 'true'
);
// 顶栏开关:切换时同步存储,并控制"调试:"前缀的区域显隐
function toggleDebugMode() {
const next = !debugMode;
setDebugMode(next);
localStorage.setItem('debugMode', String(next));
}
```
### 3. 可收起组件封装
```typescript
{/* 单据详情内容 */}
{/* 节点列表 */}
```
---
## 后期交付时的调整
你只需要:
1. **关闭调试模式**:顶栏开关点"关",所有"调试:"区域自动隐藏。
2. **可选:收起流程图**:如果业务觉得太占屏幕,点收起按钮即可。
3. **最终业务看到的**:待办队列 + 所属单据概览(可能 + 简化流程图),干净清爽。
---
## 你确认一下
这个方案是否满足你"现在全看、后期可关"的需求?如果可以,我直接动手:
1. 先封装 `CollapsibleSection` 组件。
2. 把现有页面按上述分区重组。
3. 加调试模式开关 + localStorage 持久化。
4. 调整样式,让收起状态下不占垂直空间。
或者你对分区划分 / 默认展开状态有别的想法,直接说,我再调整。