makemd/docs/03_Frontend/06_Pages_Flow.md

# Pages Flow (Crawlful Hub)

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

---

## 1. 页面流转总览

```
登录页 (/Auth/LoginPage)
  │
  ▼
仪表盘 (Dashboard) (/)
  │
  ├──► 商品管理 (/Product)
  │     ├── 商品列表 ──► 商品详情 (/Product/ProductDetail)
  │     │                 ├── 编辑商品
  │     │                 └── 审核商品
  │     ├── 创建商品 (/Product/ProductPublishForm)
  │     └── 物料上传 (/Product/MaterialUpload)
  │
  ├──► 订单管理 (/Orders)
  │     ├── 订单列表 (/Orders/OrderList) ──► 订单详情 (/Orders/OrderDetail)
  │     │                 └── 状态流转
  │     ├── 异常订单处理 (/Orders/ExceptionOrder)
  │     └── 订单聚合分析 (/Orders/OrderAggregation)
  │
  ├──► 商户管理 (/Merchant)
  │     ├── 商户管理 (/Merchant/MerchantManage)
  │     ├── 商户订单管理 (/Merchant/MerchantOrderManage)
  │     ├── 商户结算管理 (/Merchant/MerchantSettlementManage)
  │     └── 商户店铺管理 (/Merchant/MerchantShopManage)
  │
  ├──► 售后服务 (/AfterSales)
  │     ├── 退货申请 (/AfterSales/ReturnApply)
  │     ├── 退款流程 (/AfterSales/RefundProcess)
  │     └── 客户服务 (/AfterSales/CustomerService)
  │
  ├──► 物流管理 (/Logistics)
  │     ├── 物流选择 (/Logistics/LogisticsSelect)
  │     ├── 运费计算 (/Logistics/FreightCalc)
  │     └── 物流追踪 (/Logistics/LogisticsTrack)
  │
  ├──► 合规管理 (/Compliance)
  │     ├── 合规检查 (/Compliance/ComplianceCheck)
  │     ├── 证书管理 (/Compliance/CertificateManage)
  │     └── 证书过期提醒 (/Compliance/CertificateExpiryReminder)
  │
  ├──► 黑名单管理 (/Blacklist)
  │     ├── 黑名单管理 (/Blacklist/BlacklistManage)
  │     └── 风险监控 (/Blacklist/RiskMonitor)
  │
  ├──► B2B贸易 (/B2B)
  │     ├── 企业报价 (/B2B/EnterpriseQuote)
  │     ├── 批量订单 (/B2B/BatchOrder)
  │     └── 合同管理 (/B2B/ContractManage)
  │
  ├──► 广告管理 (/Ad)
  │     ├── 广告投放 (/Ad/AdDelivery)
  │     ├── ROI分析 (/Ad/ROIAnalysis)
  │     └── 广告计划 (/Ad/AdPlanPage)
  │
  ├──► 财务管理 (/Finance)
  │     ├── 交易记录 (/Finance/Transactions)
  │     └── 对账记录 (/Finance/Reconciliation)
  │
  ├──► 库存管理 (/Inventory)
  │     ├── 仓库管理 (/Inventory/Warehouses)
  │     └── 库存预测 (/Inventory/InventoryForecast)
  │
  ├──► 营销管理 (/Marketing)
  │     ├── 广告管理 (/Marketing/Ads)
  │     └── 竞争对手分析 (/Marketing/Competitors)
  │
  ├──► 供应商管理 (/Suppliers)
  │     └── 供应商详情 (/Suppliers/SupplierDetail)
  │
  ├──► 报表中心 (/Reports)
  │     ├── 利润报表 (/Reports/ProfitReport)
  │     └── 绩效报表 (/Reports/PerformanceReport)
  │
  ├──► 设置 (/Settings)
  │     ├── 个人设置 (/Settings/ProfileSettings)
  │     ├── 租户设置 (/Settings/TenantSettings)
  │     └── 用户管理 (/Settings/UserManagement)
  │
  ├──► A/B测试 (/ABTest)
  │     ├── A/B测试配置 (/ABTest/ABTestConfig)
  │     └── 测试结果分析 (/ABTest/ABTestResults)
  │
  ├──► 退货管理 (/Return)
  │     ├── 退货监控 (/Return/ReturnMonitor)
  │     └── SKU管理 (/Return/SKUManage)
  │
  └──► 用户资产管理 (/UserAsset)
        ├── 会员等级管理 (/UserAsset/MemberLevel)
        ├── 积分管理 (/UserAsset/PointsManage)
        └── 用户资产 (/UserAsset/UserAssets)
```

---

## 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 导航菜单

```
侧边栏菜单
  │
  ├── 仪表盘
  ├── 商品管理
  ├── 订单管理
  ├── 商户管理
  ├── 售后服务
  ├── 物流管理
  ├── 合规管理
  ├── 黑名单管理
  ├── B2B贸易
  ├── 广告管理
  ├── A/B测试
  ├── 退货管理
  └── 用户资产管理
```

### 10.2 面包屑导航

```
首页 / 商品管理 / 商品详情
首页 / 订单管理 / 订单列表
首页 / 商户管理 / 商户管理
首页 / 售后服务 / 退货申请
首页 / 物流管理 / 物流追踪
首页 / 合规管理 / 合规检查
首页 / 黑名单管理 / 风险监控
首页 / B2B贸易 / 企业报价
首页 / 广告管理 / ROI分析
首页 / A/B测试 / 测试结果分析
首页 / 退货管理 / 退货监控
首页 / 用户资产管理 / 会员等级管理
```

### 10.3 快捷操作

| 操作 | 触发方式 | 说明 |
|------|----------|------|
| 全局搜索 | Ctrl + K | 快速搜索商品、订单、商户等 |
| 通知中心 | 顶部图标 | 查看系统通知、待办事项 |
| 个人菜单 | 头像下拉 | 个人设置、退出登录、切换租户 |
| 主题切换 | 顶部图标 | 切换深色/浅色主题 |
| 语言切换 | 顶部图标 | 切换系统语言 |
| 帮助中心 | 顶部图标 | 查看系统文档、常见问题 |

### 10.4 交互优化

#### 10.4.1 表单交互
- **实时验证**：表单输入时实时验证，提供即时反馈
- **自动保存**：重要表单自动保存草稿，防止数据丢失
- **智能填充**：根据历史数据和上下文自动填充表单字段
- **批量操作**：支持表单数据的批量编辑和导入导出

#### 10.4.2 列表交互
- **虚拟滚动**：长列表使用虚拟滚动，提升性能
- **列排序**：支持点击列头排序
- **列筛选**：支持按列筛选数据
- **列调整**：支持调整列宽和显示/隐藏列
- **批量选择**：支持复选框批量选择和操作

#### 10.4.3 页面过渡
- **加载状态**：使用骨架屏代替简单的加载动画
- **页面切换**：平滑的页面切换动画
- **错误处理**：友好的错误提示和恢复方案
- **成功反馈**：操作成功后的明确反馈

#### 10.4.4 响应式交互
- **移动端适配**：针对移动设备优化的交互体验
- **触摸友好**：增大触摸区域，支持手势操作
- **自适应布局**：根据屏幕尺寸自动调整布局

### 10.5 用户体验考虑

#### 10.5.1 可访问性
- **键盘导航**：支持全键盘操作
- **屏幕阅读器**：兼容屏幕阅读器
- **颜色对比度**：符合WCAG标准的颜色对比度

#### 10.5.2 性能优化
- **懒加载**：非关键资源懒加载
- **缓存策略**：合理的缓存策略减少请求
- **预加载**：预测用户行为，预加载相关资源

#### 10.5.3 反馈机制
- **操作反馈**：所有用户操作都有明确的反馈
- **进度指示**：长时间操作显示进度条
- **错误提示**：清晰的错误提示和解决方案

#### 10.5.4 引导机制
- **新用户引导**：首次使用时的功能引导
- **功能提示**：重要功能的使用提示
- **上下文帮助**：在适当位置提供帮助信息

---

## 11. 相关文档

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

---

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