makemd/docs/03_Frontend/Pages_Flow.md

# Pages Flow (Crawlful Hub)

> **定位**：Crawlful Hub 前端页面流转文档 - 描述各模块页面间的跳转关系和数据流。
> **更新日期**: 2026-03-18
> **最高优先级参考**: [Business_ClosedLoops.md](../00_Business/Business_ClosedLoops.md)

---

## 1. 页面流转总览

```
登录页
  │
  ▼
仪表盘 (Dashboard)
  │
  ├──► 商品管理
  │     ├── 商品列表 ──► 商品详情
  │     │                 ├── 编辑商品
  │     │                 └── 审核商品
  │     ├── 创建商品
  │     └── 商品审核
  │
  ├──► 订单管理
  │     ├── 订单列表 ──► 订单详情
  │     │                 └── 状态流转
  │     └── 订单审核
  │
  ├──► 财务管理
  │     ├── 财务概览
  │     ├── 交易流水
  │     └── 利润对账
  │
  ├──► 库存管理
  │     ├── 库存概览
  │     ├── 仓库管理
  │     └── 库存预测
  │
  ├──► 营销广告
  │     ├── 营销概览
  │     ├── 广告管理
  │     └── 竞品监控
  │
  ├──► 供应商管理
  │     ├── 供应商列表 ──► 供应商详情
  │     └── 供应商审核
  │
  ├──► 报表分析
  │     ├── 利润报表
  │     └── 绩效报表
  │
  └──► 系统设置
        ├── 个人设置
        ├── 租户设置
        └── 用户管理
```

---

## 2. 商品管理模块

### 2.1 页面流转图

```
商品列表页 (/products)
  │
  ├──► 创建商品 (/products/create) ──► 返回列表
  │
  ├──► 商品详情 (/products/:id)
  │     ├── 编辑 ──► 编辑页 (/products/:id/edit)
  │     └── 审核 ──► 审核弹窗
  │
  └──► 商品审核 (/products/review)
```

### 2.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 商品列表 | `/products` | 展示所有商品，支持筛选、排序、分页 | product:read |
| 商品详情 | `/products/:id` | 展示商品详细信息，支持编辑、删除 | product:read |
| 创建商品 | `/products/create` | 表单创建新商品 | product:create |
| 编辑商品 | `/products/:id/edit` | 编辑商品信息 | product:update |
| 商品审核 | `/products/review` | 审核待上架商品 | product:review |

### 2.3 数据流

```
商品列表页
  │
  ├── 加载数据: GET /api/v1/products
  │
  ├── 筛选操作
  │     ├── 平台筛选
  │     ├── 状态筛选
  │     └── 关键词搜索
  │
  ├── 分页操作
  │     └── GET /api/v1/products?page={n}
  │
  └── 批量操作
        ├── 批量审核
        └── 批量删除
```

---

## 3. 订单管理模块

### 3.1 页面流转图

```
订单列表页 (/orders)
  │
  ├──► 订单详情 (/orders/:id)
  │     ├── 状态流转
  │     ├── 编辑信息
  │     └── 查看账单
  │
  └──► 订单审核 (/orders/audit)
```

### 3.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 订单列表 | `/orders` | 展示所有订单，支持筛选 | order:read |
| 订单详情 | `/orders/:id` | 展示订单详细信息 | order:read |
| 订单审核 | `/orders/audit` | 批量审核订单 | order:audit |

### 3.3 状态流转

```
订单详情页
  │
  ├── 当前状态: PULLED
  │     └── 操作: 审核 ──► PENDING_REVIEW
  │
  ├── 当前状态: PENDING_REVIEW
  │     └── 操作: 确认 ──► CONFIRMED
  │
  ├── 当前状态: CONFIRMED
  │     └── 操作: 分配 ──► ALLOCATED
  │
  ├── 当前状态: ALLOCATED
  │     └── 操作: 准备发货 ──► READY_TO_SHIP
  │
  ├── 当前状态: READY_TO_SHIP
  │     └── 操作: 发货 ──► SHIPPED
  │
  ├── 当前状态: SHIPPED
  │     └── 操作: 送达 ──► DELIVERED
  │
  └── 当前状态: DELIVERED
        └── 操作: 关闭 ──► CLOSED
```

---

## 4. 财务管理模块

### 4.1 页面流转图

```
财务概览 (/finance)
  │
  ├──► 交易流水 (/finance/transactions)
  │     └── 查看详情
  │
  └──► 利润对账 (/finance/reconciliation)
        └── 查看对账结果
```

### 4.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 财务概览 | `/finance` | 展示财务关键指标 | finance:read |
| 交易流水 | `/finance/transactions` | 查看所有交易记录 | finance:read |
| 利润对账 | `/finance/reconciliation` | 执行利润对账 | finance:reconcile |

### 4.3 数据流

```
财务概览页
  │
  ├── 加载统计数据: GET /api/v1/finance/stats
  │
  ├── 图表数据
  │     ├── 营收趋势图
  │     ├── 利润分布图
  │     └── 平台占比图
  │
  └── 快捷操作
        ├── 查看交易流水
        └── 执行利润对账
```

---

## 5. 库存管理模块

### 5.1 页面流转图

```
库存概览 (/inventory)
  │
  ├──► 仓库管理 (/inventory/warehouses)
  │     ├── 创建仓库
  │     └── 编辑仓库
  │
  └──► 库存预测 (/inventory/forecast)
        └── 查看预测结果
```

### 5.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 库存概览 | `/inventory` | 展示库存总览 | inventory:read |
| 仓库管理 | `/inventory/warehouses` | 管理仓库信息 | inventory:manage |
| 库存预测 | `/inventory/forecast` | 查看库存预测 | inventory:read |

---

## 6. 营销广告模块

### 6.1 页面流转图

```
营销概览 (/marketing)
  │
  ├──► 广告管理 (/marketing/ads)
  │     ├── 创建广告
  │     └── 广告报表
  │
  └──► 竞品监控 (/marketing/competitors)
        └── 竞品详情
```

### 6.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 营销概览 | `/marketing` | 展示营销关键指标 | marketing:read |
| 广告管理 | `/marketing/ads` | 管理广告投放 | marketing:manage |
| 竞品监控 | `/marketing/competitors` | 监控竞品动态 | marketing:read |

---

## 7. 供应商管理模块

### 7.1 页面流转图

```
供应商列表 (/suppliers)
  │
  ├──► 创建供应商
  │
  └──► 供应商详情 (/suppliers/:id)
        ├── 编辑信息
        └── 查看交易记录
```

### 7.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 供应商列表 | `/suppliers` | 展示所有供应商 | supplier:read |
| 供应商详情 | `/suppliers/:id` | 展示供应商详细信息 | supplier:read |

---

## 8. 报表分析模块

### 8.1 页面流转图

```
报表中心 (/reports)
  │
  ├──► 利润报表 (/reports/profit)
  │
  └──► 绩效报表 (/reports/performance)
```

### 8.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 报表中心 | `/reports` | 展示所有报表入口 | report:read |
| 利润报表 | `/reports/profit` | 查看利润分析报表 | report:read |
| 绩效报表 | `/reports/performance` | 查看绩效分析报表 | report:read |

---

## 9. 系统设置模块

### 9.1 页面流转图

```
设置首页 (/settings)
  │
  ├──► 个人设置 (/settings/profile)
  │
  ├──► 租户设置 (/settings/tenant)
  │
  └──► 用户管理 (/settings/users)
        ├── 创建用户
        └── 编辑用户
```

### 9.2 页面说明

| 页面 | 路径 | 功能 | 权限 |
|------|------|------|------|
| 设置首页 | `/settings` | 设置导航 | - |
| 个人设置 | `/settings/profile` | 修改个人信息 | - |
| 租户设置 | `/settings/tenant` | 管理租户配置 | tenant:manage |
| 用户管理 | `/settings/users` | 管理系统用户 | user:manage |

---

## 10. 全局交互

### 10.1 导航菜单

```
侧边栏菜单
  │
  ├── 仪表盘
  ├── 商品管理
  ├── 订单管理
  ├── 财务管理
  ├── 库存管理
  ├── 营销广告
  ├── 供应商
  ├── 报表分析
  └── 系统设置
```

### 10.2 面包屑导航

```
首页 / 商品管理 / 商品详情
首页 / 订单管理 / 订单审核
首页 / 财务管理 / 利润对账
```

### 10.3 快捷操作

| 操作 | 触发方式 | 说明 |
|------|----------|------|
| 全局搜索 | Ctrl + K | 快速搜索商品、订单 |
| 通知中心 | 顶部图标 | 查看系统通知 |
| 个人菜单 | 头像下拉 | 个人设置、退出登录 |

---

## 11. 相关文档

- [Frontend Design](./Frontend_Design.md)
- [UI Components](./UI_Components.md)
- [Business ClosedLoops](../00_Business/Business_ClosedLoops.md)

---

*本文档基于业务闭环设计，最后更新: 2026-03-18*