208 lines
14 KiB
Markdown
208 lines
14 KiB
Markdown
# 状态中心页面 - 可调整版式方案
|
|
|
|
## 设计原则
|
|
|
|
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
|
|
<CollapsibleSection
|
|
title="所属单据概览"
|
|
storageKey="jobSummary"
|
|
defaultExpanded={true}
|
|
>
|
|
{/* 单据详情内容 */}
|
|
</CollapsibleSection>
|
|
|
|
<CollapsibleSection
|
|
title="调试:节点详情"
|
|
storageKey="nodeDetails"
|
|
defaultExpanded={false}
|
|
visibleWhen={debugMode} // 调试模式关闭时整个区域隐藏
|
|
>
|
|
{/* 节点列表 */}
|
|
</CollapsibleSection>
|
|
```
|
|
|
|
---
|
|
|
|
## 后期交付时的调整
|
|
|
|
你只需要:
|
|
1. **关闭调试模式**:顶栏开关点"关",所有"调试:"区域自动隐藏。
|
|
2. **可选:收起流程图**:如果业务觉得太占屏幕,点收起按钮即可。
|
|
3. **最终业务看到的**:待办队列 + 所属单据概览(可能 + 简化流程图),干净清爽。
|
|
|
|
---
|
|
|
|
## 你确认一下
|
|
|
|
这个方案是否满足你"现在全看、后期可关"的需求?如果可以,我直接动手:
|
|
1. 先封装 `CollapsibleSection` 组件。
|
|
2. 把现有页面按上述分区重组。
|
|
3. 加调试模式开关 + localStorage 持久化。
|
|
4. 调整样式,让收起状态下不占垂直空间。
|
|
|
|
或者你对分区划分 / 默认展开状态有别的想法,直接说,我再调整。
|