makemd/docs/03_Frontend/Pages_Flow.md

Pages Flow (Crawlful Hub)

定位：Crawlful Hub 前端页面流转文档 - 描述各模块页面间的跳转关系和数据流。 更新日期: 2026-03-18 最高优先级参考: 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
• UI Components
• Business ClosedLoops

---

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