wurenzhi
2b86715c09
- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
477 lines
14 KiB
Markdown
477 lines
14 KiB
Markdown
# 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*
|