feat: 新增售后逆向流程和物流策略闭环页面

refactor: 移除不再使用的提示文件和文档副本

docs: 更新开发进度文档，补充前端任务完成情况

docs/00_Business/Business_ClosedLoops.md

@@ -63,6 +63,884 @@
 
 ***
 
+## 附录A：前端交互设计规范
+
+> **说明**：本附录补充前端交互设计规范，定义全局状态机、页面路由、按钮操作等交互标准，确保前端实现与业务闭环一致。
+
+### A.1 全局状态机定义
+
+#### 商品状态机（Product State Machine）
+
+| 状态 | 含义 | 可操作按钮 | 状态颜色 |
+|------|------|-----------|---------|
+| **DRAFT** | 草稿 | 编辑、定价、删除 | 灰色 |
+| **PRICED** | 已定价 | 查看、定价、上架 | 蓝色 |
+| **LISTED** | 已上架 | 查看、下架、同步 | 绿色 |
+| **SYNCING** | 同步中 | 查看（其他禁用） | 黄色 |
+| **LIVE** | 已在线 | 查看、下架、同步 | 绿色 |
+| **SYNC_FAILED** | 同步失败 | 查看、重试同步 | 红色 |
+| **OFFLINE** | 已下架 | 查看、重新上架 | 灰色 |
+
+**状态流转图**：
+```
+DRAFT → PRICED → LISTED → SYNCING → LIVE → OFFLINE
+  ↓       ↓        ↓          ↑
+删除    定价     上架      重试同步
+              ↓ SYNC_FAILED ↑
+```
+
+**状态流转规则**：
+- DRAFT → PRICED：完成定价后自动转换
+- PRICED → LISTED：点击上架按钮后转换
+- LISTED → SYNCING：点击同步按钮后转换
+- SYNCING → LIVE：同步成功后自动转换
+- SYNCING → SYNC_FAILED：同步失败后转换
+- LISTED/LIVE → OFFLINE：点击下架按钮后转换
+- OFFLINE → LISTED：点击重新上架后转换
+
+#### 任务状态机（Task State Machine）
+
+| 状态 | 含义 | 可操作按钮 | 状态颜色 |
+|------|------|-----------|---------|
+| **PENDING** | 待执行 | 取消 | 灰色 |
+| **RUNNING** | 执行中 | 查看日志 | 蓝色 |
+| **SUCCESS** | 执行成功 | 查看结果 | 绿色 |
+| **FAILED** | 执行失败 | 重试、查看日志 | 红色 |
+
+**状态流转图**：
+```
+PENDING → RUNNING → SUCCESS
+    ↓         ↓
+  取消      FAILED → 重试 → RUNNING
+```
+
+#### 订单状态机（Order State Machine）
+
+| 状态 | 含义 | 可操作按钮 | 适用场景 |
+|------|------|-----------|---------|
+| **PENDING** | 待处理 | 确认、取消 | 新订单 |
+| **CONFIRMED** | 已确认 | 发货、取消 | 确认后 |
+| **SHIPPED** | 已发货 | 查看物流 | 发货后 |
+| **DELIVERED** | 已送达 | 完成、售后 | 送达后 |
+| **COMPLETED** | 已完成 | 查看详情 | 完成后 |
+| **CANCELLED** | 已取消 | 查看详情 | 取消后 |
+| **REFUNDING** | 退款中 | 查看进度 | 售后中 |
+| **REFUNDED** | 已退款 | 查看详情 | 退款完成 |
+
+### A.2 页面路由结构
+
+#### 全局路由定义
+
+```typescript
+// 路由配置
+const routes = [
+  // 工作台
+  { path: '/dashboard', component: 'Dashboard' },
+  
+  // 商品中心
+  { path: '/products', component: 'ProductLayout', routes: [
+    { path: '/products/list', component: 'ProductList' },
+    { path: '/products/detail/:id', component: 'ProductDetail' },
+    { path: '/products/create', component: 'ProductCreate' },
+    { path: '/products/edit/:id', component: 'ProductEdit' },
+  ]},
+  
+  // 订单中心
+  { path: '/orders', component: 'OrderLayout', routes: [
+    { path: '/orders/list', component: 'OrderList' },
+    { path: '/orders/detail/:id', component: 'OrderDetail' },
+    { path: '/orders/exception', component: 'ExceptionOrder' },
+  ]},
+  
+  // 执行中心
+  { path: '/tasks', component: 'TaskLayout', routes: [
+    { path: '/tasks/list', component: 'TaskList' },
+    { path: '/tasks/detail/:id', component: 'TaskDetail' },
+    { path: '/tasks/logs', component: 'TaskLogs' },
+  ]},
+  
+  // 数据中心
+  { path: '/analytics', component: 'AnalyticsLayout', routes: [
+    { path: '/analytics/overview', component: 'AnalyticsOverview' },
+    { path: '/analytics/products', component: 'ProductAnalytics' },
+    { path: '/analytics/orders', component: 'OrderAnalytics' },
+    { path: '/analytics/profit', component: 'ProfitAnalytics' },
+  ]},
+  
+  // 合规中心
+  { path: '/compliance', component: 'ComplianceLayout', routes: [
+    { path: '/compliance/certificates', component: 'CertificateManage' },
+    { path: '/compliance/check', component: 'ComplianceCheck' },
+    { path: '/compliance/risk', component: 'RiskMonitor' },
+  ]},
+  
+  // 系统设置
+  { path: '/settings', component: 'SettingsLayout', routes: [
+    { path: '/settings/platform', component: 'PlatformSettings' },
+    { path: '/settings/currency', component: 'CurrencySettings' },
+    { path: '/settings/cost-template', component: 'CostTemplateSettings' },
+    { path: '/settings/win-node', component: 'WinNodeSettings' },
+  ]},
+];
+```
+
+#### 路由权限控制
+
+| 路由 | 所需权限 | 角色 |
+|------|---------|------|
+| /products/* | product:read | ADMIN, MANAGER, OPERATOR |
+| /products/create | product:create | ADMIN, MANAGER |
+| /products/edit/* | product:update | ADMIN, MANAGER |
+| /orders/* | order:read | ADMIN, MANAGER, OPERATOR |
+| /orders/exception | order:exception | ADMIN, MANAGER |
+| /tasks/* | task:read | ADMIN, MANAGER, OPERATOR |
+| /analytics/* | analytics:read | ADMIN, MANAGER, ANALYST |
+| /compliance/* | compliance:read | ADMIN, MANAGER |
+| /settings/* | settings:read | ADMIN |
+
+### A.3 按钮操作规范
+
+#### 商品列表页操作按钮
+
+| 按钮 | 显示条件 | 点击行为 | 状态变更 | 权限要求 |
+|------|---------|---------|---------|---------|
+| **新增商品** | 始终显示 | 打开创建弹窗 | 创建新商品(DRAFT) | product:create |
+| **编辑** | 状态=DRAFT | 打开编辑弹窗 | 更新商品信息 | product:update |
+| **定价** | 状态=DRAFT/PRICED | 打开定价抽屉 | 状态→PRICED | product:update |
+| **上架** | 状态=PRICED | 确认弹窗→上架 | 状态→LISTED | product:update |
+| **同步** | 状态=LISTED/LIVE | 触发同步任务 | 状态→SYNCING | product:sync |
+| **下架** | 状态=LISTED/LIVE | 确认弹窗→下架 | 状态→OFFLINE | product:update |
+| **重试同步** | 状态=SYNC_FAILED | 重新触发同步 | 状态→SYNCING | product:sync |
+| **重新上架** | 状态=OFFLINE | 确认弹窗→上架 | 状态→LISTED | product:update |
+| **删除** | 状态=DRAFT | 确认弹窗→删除 | 删除商品 | product:delete |
+
+#### 订单列表页操作按钮
+
+| 按钮 | 显示条件 | 点击行为 | 状态变更 | 权限要求 |
+|------|---------|---------|---------|---------|
+| **确认订单** | 状态=PENDING | 确认弹窗→确认 | 状态→CONFIRMED | order:confirm |
+| **发货** | 状态=CONFIRMED | 打开发货弹窗 | 状态→SHIPPED | order:ship |
+| **查看物流** | 状态=SHIPPED | 打开物流追踪 | - | order:read |
+| **完成订单** | 状态=DELIVERED | 确认弹窗→完成 | 状态→COMPLETED | order:complete |
+| **取消订单** | 状态=PENDING/CONFIRMED | 确认弹窗→取消 | 状态→CANCELLED | order:cancel |
+| **售后处理** | 状态=COMPLETED/DELIVERED | 打开售后弹窗 | 状态→REFUNDING | order:refund |
+
+#### 任务列表页操作按钮
+
+| 按钮 | 显示条件 | 点击行为 | 状态变更 | 权限要求 |
+|------|---------|---------|---------|---------|
+| **重试** | 状态=FAILED | 重新执行任务 | 状态→PENDING | task:retry |
+| **取消** | 状态=PENDING | 取消任务 | 任务取消 | task:cancel |
+| **查看日志** | 始终显示 | 打开日志详情 | - | task:read |
+| **查看结果** | 状态=SUCCESS | 打开结果详情 | - | task:read |
+
+### A.4 用户操作流程
+
+#### 商品上架完整流程
+
+```
+Step 1: 进入商品列表页
+  → 查看现有商品列表
+  → 使用筛选条件查找商品
+
+Step 2: 新增/编辑商品
+  → 点击【新增商品】或【编辑】
+  → 填写商品基础信息（标题、SKU、图片等）
+  → 填写供应信息（供应商、成本等）
+  → 保存后状态=DRAFT
+
+Step 3: 商品定价
+  → 点击【定价】按钮
+  → 输入成本信息（进货价、运费、汇率）
+  → 系统自动计算建议售价、利润、ROI
+  → 确认后状态=PRICED
+
+Step 4: 商品上架
+  → 点击【上架】按钮
+  → 确认上架信息
+  → 状态变为LISTED
+
+Step 5: 同步到平台
+  → 点击【同步】按钮
+  → 创建同步任务
+  → 状态变为SYNCING
+  → 同步成功后状态=LIVE
+
+Step 6: 监控与调整
+  → 查看同步记录
+  → 如需调整，点击【定价】或【下架】
+```
+
+#### 订单处理完整流程
+
+```
+Step 1: 订单获取
+  → 系统自动从平台拉取订单
+  → 订单状态=PENDING
+
+Step 2: 订单确认
+  → 查看订单详情
+  → 检查库存和地址
+  → 点击【确认订单】
+  → 状态=CONFIRMED
+
+Step 3: 订单发货
+  → 点击【发货】按钮
+  → 选择物流方式
+  → 填写物流单号
+  → 状态=SHIPPED
+
+Step 4: 物流追踪
+  → 点击【查看物流】
+  → 实时追踪物流状态
+
+Step 5: 订单完成
+  → 客户签收后
+  → 状态=DELIVERED
+  → 点击【完成订单】
+  → 状态=COMPLETED
+```
+
+#### 售后处理完整流程
+
+```
+Step 1: 接收售后申请
+  → 客户提交退货/退款申请
+  → 创建售后工单
+
+Step 2: 审核售后申请
+  → 查看订单信息和售后原因
+  → 判断是否同意售后
+
+Step 3: 处理退货
+  → 客户寄回商品
+  → 确认收货并检查商品
+
+Step 4: 处理退款
+  → 确认退款金额
+  → 执行退款操作
+  → 状态=REFUNDED
+
+Step 5: 库存调整
+  → 退货商品重新入库
+  → 更新库存数量
+```
+
+## 附录B：前端页面映射
+
+> **说明**：本附录定义各业务闭环对应的前端页面结构，为前端开发提供明确的页面组织指导。
+
+### B.1 商品中心页面映射
+
+对应闭环：**数据采集与清洗闭环**、**商品刊登闭环**、**定价与利润决策闭环**
+
+#### 商品列表页 (/products/list)
+
+**页面目标**：商品管理的核心入口，支持商品的增删改查和批量操作
+
+**页面结构**：
+```
+ProductListPage
+├─ PageHeader (页面标题)
+│   └─ 标题：商品管理
+│   └─ 副标题：管理您的所有商品
+├─ FilterBar (筛选区)
+│   ├─ 关键词搜索 (输入框)
+│   ├─ 状态筛选 (下拉选择：全部/草稿/已定价/已上架/已在线/已下架)
+│   ├─ 平台筛选 (下拉选择：Amazon/eBay/Shopee/TikTok/全部)
+│   ├─ ROI区间 (范围选择器)
+│   └─ 重置筛选 (按钮)
+├─ ActionBar (操作区)
+│   ├─ 新增商品 (主按钮)
+│   ├─ 批量导入 (按钮)
+│   └─ 采集导入 (按钮)
+├─ ProductTable (商品表格)
+│   ├─ 选择列 (复选框)
+│   ├─ 商品信息列 (图片+标题+SKU)
+│   ├─ 成本列 (进货价+运费)
+│   ├─ 售价列 (建议售价+实际售价)
+│   ├─ ROI列 (ROI百分比+利润)
+│   ├─ 状态列 (状态标签)
+│   ├─ 平台状态列 (各平台状态图标)
+│   └─ 操作列 (按钮组)
+└─ BatchActionBar (批量操作栏，选中后显示)
+    ├─ 已选中X项 (文本)
+    ├─ 批量定价 (按钮)
+    ├─ 批量上架 (按钮)
+    ├─ 批量同步 (按钮)
+    └─ 批量删除 (按钮)
+```
+
+**数据字段**：
+| 字段 | 类型 | 说明 | 来源 |
+|------|------|------|------|
+| id | string | 商品ID | cf_product.id |
+| title | string | 商品标题 | cf_product.title |
+| sku | string | SKU编码 | cf_product.sku |
+| image | string | 主图URL | cf_product.images[0] |
+| cost_price | decimal | 成本价 | cf_product.cost_price |
+| shipping_cost | decimal | 运费 | cf_product.shipping_cost |
+| sale_price | decimal | 售价 | cf_product.sale_price |
+| profit | decimal | 利润 | 计算字段 |
+| roi | decimal | ROI | 计算字段 |
+| status | enum | 状态 | cf_product.status |
+| platform_status | json | 各平台状态 | cf_product.platform_status |
+
+#### 商品详情页 (/products/detail/:id)
+
+**页面目标**：展示商品全生命周期信息，支持商品信息查看和编辑
+
+**页面结构**：
+```
+ProductDetailPage
+├─ PageHeader
+│   ├─ 返回按钮
+│   ├─ 商品标题
+│   └─ 操作按钮组 (编辑、上架/下架、同步)
+├─ Tabs (标签页)
+│   ├─ Tab: 概览
+│   │   ├─ 基础信息卡片
+│   │   │   ├─ 商品图片 (轮播)
+│   │   │   ├─ 商品标题
+│   │   │   ├─ SKU信息
+│   │   │   ├─ 商品描述
+│   │   │   └─ 供应信息
+│   │   ├─ 定价信息卡片
+│   │   │   ├─ 成本结构 (进货价、运费、其他成本)
+│   │   │   ├─ 售价信息 (建议售价、实际售价)
+│   │   │   ├─ 利润分析 (利润额、利润率、ROI)
+│   │   │   └─ 定价策略 (保守/激进)
+│   │   └─ 快捷操作卡片
+│   │       ├─ 定价按钮
+│   │       ├─ 上架/下架按钮
+│   │       └─ 同步按钮
+│   ├─ Tab: 平台状态
+│   │   ├─ 平台列表
+│   │   │   ├─ 平台名称
+│   │   │   ├─ 平台商品ID
+│   │   │   ├─ 平台状态
+│   │   │   ├─ 平台售价
+│   │   │   └─ 同步时间
+│   │   └─ 同步操作按钮
+│   └─ Tab: 同步记录
+│       ├─ 同步历史表格
+│       │   ├─ 同步时间
+│       │   ├─ 平台
+│       │   ├─ 操作类型
+│       │   ├─ 状态
+│       │   ├─ 日志摘要
+│       │   └─ 查看详情
+│       └─ 分页器
+```
+
+#### 商品编辑弹窗 (ProductEditModal)
+
+**页面目标**：创建或编辑商品基础信息
+
+**页面结构**：
+```
+ProductEditModal
+├─ ModalHeader
+│   ├─ 标题：新增商品/编辑商品
+│   └─ 关闭按钮
+├─ Form (表单)
+│   ├─ 基本信息
+│   │   ├─ 商品标题 (输入框，必填)
+│   │   ├─ SKU编码 (输入框，必填)
+│   │   ├─ 商品图片 (上传组件)
+│   │   └─ 商品描述 (富文本编辑器)
+│   ├─ 供应信息
+│   │   ├─ 供应商 (选择器)
+│   │   ├─ 进货价 (数字输入，必填)
+│   │   ├─ 运费 (数字输入)
+│   │   └─ 其他成本 (数字输入)
+│   └─ 平台信息
+│       ├─ 目标平台 (多选)
+│       └─ 平台特定字段 (动态)
+├─ ModalFooter
+│   ├─ 取消按钮
+│   └─ 保存按钮
+```
+
+#### 定价抽屉 (PricingDrawer)
+
+**页面目标**：为商品设置价格和查看利润分析
+
+**页面结构**：
+```
+PricingDrawer
+├─ DrawerHeader
+│   ├─ 标题：商品定价
+│   └─ 关闭按钮
+├─ DrawerContent
+│   ├─ 成本输入区
+│   │   ├─ 进货价 (数字输入)
+│   │   ├─ 运费 (数字输入)
+│   │   ├─ 汇率 (数字输入，可自动获取)
+│   │   └─ 其他成本 (数字输入)
+│   ├─ 实时计算区
+│   │   ├─ 总成本 (自动计算)
+│   │   ├─ 建议售价 (自动计算)
+│   │   ├─ 预计利润 (自动计算)
+│   │   ├─ 利润率 (自动计算)
+│   │   └─ ROI (自动计算)
+│   ├─ 策略选择区
+│   │   ├─ 定价策略 (单选：保守/均衡/激进)
+│   │   └─ 策略说明 (文本)
+│   └─ 售价调整区
+│       ├─ 实际售价 (数字输入，默认建议售价)
+│       └─ 调整后的利润预览
+└─ DrawerFooter
+    ├─ 取消按钮
+    └─ 保存定价按钮
+```
+
+### B.2 订单中心页面映射
+
+对应闭环：**订单履约闭环**、**订单集中管理闭环**、**售后逆向闭环**
+
+#### 订单列表页 (/orders/list)
+
+**页面目标**：订单管理的核心入口，支持订单的查看、确认、发货等操作
+
+**页面结构**：
+```
+OrderListPage
+├─ PageHeader
+│   ├─ 标题：订单管理
+│   └─ 副标题：管理所有平台订单
+├─ FilterBar
+│   ├─ 订单号搜索
+│   ├─ 平台筛选
+│   ├─ 状态筛选
+│   ├─ 时间范围
+│   └─ 金额范围
+├─ OrderTable
+│   ├─ 订单号
+│   ├─ 平台
+│   ├─ 商品信息
+│   ├─ 买家信息
+│   ├─ 金额
+│   ├─ 状态
+│   ├─ 下单时间
+│   └─ 操作列
+└─ Pagination
+```
+
+#### 订单详情页 (/orders/detail/:id)
+
+**页面目标**：展示订单完整信息和处理历史
+
+**页面结构**：
+```
+OrderDetailPage
+├─ PageHeader
+│   ├─ 返回按钮
+│   ├─ 订单号
+│   └─ 状态标签
+├─ OrderInfo
+│   ├─ 买家信息
+│   ├─ 收货地址
+│   ├─ 商品列表
+│   ├─ 金额明细
+│   └─ 操作按钮组
+├─ Timeline
+│   └─ 订单处理时间线
+└─ ActionLog
+    └─ 操作日志列表
+```
+
+### B.3 执行中心页面映射
+
+对应闭环：**服务编排与执行闭环**
+
+#### 任务列表页 (/tasks/list)
+
+**页面目标**：查看和管理所有执行任务
+
+**页面结构**：
+```
+TaskListPage
+├─ PageHeader
+│   ├─ 标题：执行中心
+│   └─ 副标题：管理所有自动化任务
+├─ FilterBar
+│   ├─ 任务类型筛选
+│   ├─ 状态筛选
+│   ├─ 平台筛选
+│   └─ 时间范围
+├─ TaskTable
+│   ├─ 任务ID
+│   ├─ 任务类型
+│   ├─ 关联商品/订单
+│   ├─ 平台
+│   ├─ 状态
+│   ├─ 创建时间
+│   ├─ 完成时间
+│   └─ 操作列
+└─ Pagination
+```
+
+#### 任务详情页 (/tasks/detail/:id)
+
+**页面目标**：查看任务执行详情和日志
+
+**页面结构**：
+```
+TaskDetailPage
+├─ PageHeader
+│   ├─ 返回按钮
+│   ├─ 任务ID
+│   └─ 状态标签
+├─ TaskInfo
+│   ├─ 任务类型
+│   ├─ 关联对象
+│   ├─ 平台
+│   ├─ 创建时间
+│   ├─ 开始时间
+│   ├─ 完成时间
+│   └─ 执行时长
+├─ ExecutionLog
+│   └─ 执行日志 (代码块展示)
+└─ ResultInfo
+    └─ 执行结果 (成功/失败详情)
+```
+
+### B.4 数据中心页面映射
+
+对应闭环：**报表与分析闭环**
+
+#### 数据概览页 (/analytics/overview)
+
+**页面目标**：展示核心业务指标和数据趋势
+
+**页面结构**：
+```
+AnalyticsOverviewPage
+├─ PageHeader
+│   ├─ 标题：数据中心
+│   └─ 时间范围选择器
+├─ KPI Cards
+│   ├─ 总销售额
+│   ├─ 总利润
+│   ├─ 平均ROI
+│   ├─ 订单数量
+│   └─ 商品数量
+├─ Charts
+│   ├─ 销售趋势图
+│   ├─ 利润趋势图
+│   └─ 平台分布图
+└─ TopLists
+    ├─ 热销商品TOP10
+    └─ 高利润商品TOP10
+```
+
+### B.5 合规中心页面映射
+
+对应闭环：**合规与证书管理闭环**、**合规与风控闭环**
+
+#### 证书管理页 (/compliance/certificates)
+
+**页面目标**：管理商品合规证书
+
+**页面结构**：
+```
+CertificateManagePage
+├─ PageHeader
+│   ├─ 标题：证书管理
+│   └─ 上传证书按钮
+├─ FilterBar
+│   ├─ 证书类型筛选
+│   ├─ 状态筛选
+│   └─ 到期时间筛选
+├─ CertificateTable
+│   ├─ 证书名称
+│   ├─ 证书类型
+│   ├─ 关联商品
+│   ├─ 有效期
+│   ├─ 状态
+│   └─ 操作列
+└─ Pagination
+```
+
+### B.6 系统设置页面映射
+
+#### 平台账号设置页 (/settings/platform)
+
+**页面目标**：管理各电商平台账号
+
+**页面结构**：
+```
+PlatformSettingsPage
+├─ PageHeader
+│   ├─ 标题：平台账号设置
+│   └─ 添加账号按钮
+├─ PlatformList
+│   └─ 平台卡片列表
+│       ├─ 平台Logo
+│       ├─ 平台名称
+│       ├─ 账号状态
+│       ├─ 店铺数量
+│       └─ 操作按钮
+```
+
+## 附录C：前端组件规范
+
+> **说明**：本附录定义前端组件的设计规范，包括组件分类、命名规范、状态管理和API交互规范。
+
+### C.1 组件分类与命名
+
+#### 组件分类
+
+| 分类 | 说明 | 示例 | 存放路径 |
+|------|------|------|---------|
+| **页面组件** | 完整页面 | ProductList, OrderDetail | src/pages/ |
+| **布局组件** | 页面布局 | PageHeader, Sidebar | src/layouts/ |
+| **业务组件** | 业务相关 | ProductTable, OrderForm | src/components/business/ |
+| **通用组件** | 通用UI | StatusTag, ConfirmModal | src/components/common/ |
+| **图表组件** | 数据可视化 | SalesChart, ProfitChart | src/components/charts/ |
+
+#### 命名规范
+
+| 类型 | 命名规则 | 示例 |
+|------|---------|------|
+| **组件文件** | PascalCase | ProductList.tsx |
+| **组件名** | PascalCase | ProductList |
+| **Props类型** | 组件名+Props | ProductListProps |
+| **State类型** | 组件名+State | ProductListState |
+| **样式文件** | 组件名.module.less | ProductList.module.less |
+| **Hook** | use+功能 | useProductList |
+
+### C.2 状态管理规范
+
+#### 全局状态
+
+```typescript
+// src/models/product.ts
+export interface ProductState {
+  list: Product[];
+  detail: Product | null;
+  loading: boolean;
+  pagination: {
+    current: number;
+    pageSize: number;
+    total: number;
+  };
+  filters: ProductFilters;
+}
+
+export default {
+  namespace: 'product',
+  state: {
+    list: [],
+    detail: null,
+    loading: false,
+    pagination: { current: 1, pageSize: 20, total: 0 },
+    filters: {},
+  },
+  effects: {
+    *fetchList({ payload }, { call, put }) {
+      yield put({ type: 'setLoading', payload: true });
+      const response = yield call(getProductList, payload);
+      yield put({ type: 'setList', payload: response.data });
+      yield put({ type: 'setPagination', payload: response.pagination });
+      yield put({ type: 'setLoading', payload: false });
+    },
+  },
+  reducers: {
+    setList(state, { payload }) {
+      return { ...state, list: payload };
+    },
+    setLoading(state, { payload }) {
+      return { ...state, loading: payload };
+    },
+  },
+};
+```
+
+#### 页面级状态
+
+```typescript
+// src/pages/products/list/index.tsx
+const ProductListPage: React.FC = () => {
+  // 页面级状态
+  const [selectedRows, setSelectedRows] = useState<Product[]>([]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [currentProduct, setCurrentProduct] = useState<Product | null>(null);
+  
+  // 全局状态
+  const { list, loading, pagination } = useSelector((state: RootState) => state.product);
+  const dispatch = useDispatch();
+  
+  // ...
+};
+```
+
+### C.3 API交互规范
+
+#### 请求封装
+
+```typescript
+// src/services/product.ts
+import request from '@/utils/request';
+
+export async function getProductList(params: ProductListParams) {
+  return request('/api/products', {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function getProductDetail(id: string) {
+  return request(`/api/products/${id}`, {
+    method: 'GET',
+  });
+}
+
+export async function createProduct(data: CreateProductData) {
+  return request('/api/products', {
+    method: 'POST',
+    data,
+  });
+}
+
+export async function updateProduct(id: string, data: UpdateProductData) {
+  return request(`/api/products/${id}`, {
+    method: 'PUT',
+    data,
+  });
+}
+
+export async function deleteProduct(id: string) {
+  return request(`/api/products/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export async function updateProductPrice(id: string, data: PricingData) {
+  return request(`/api/products/${id}/price`, {
+    method: 'POST',
+    data,
+  });
+}
+
+export async function syncProductToPlatform(id: string, platform: string) {
+  return request(`/api/products/${id}/sync`, {
+    method: 'POST',
+    data: { platform },
+  });
+}
+```
+
+#### 错误处理
+
+```typescript
+// src/utils/request.ts
+import { notification } from 'antd';
+
+const request = extend({
+  errorHandler: (error: ResponseError) => {
+    const { response, data } = error;
+    
+    if (response && response.status) {
+      const errorText = data?.message || codeMessage[response.status];
+      
+      notification.error({
+        message: `请求错误 ${response.status}`,
+        description: errorText,
+      });
+      
+      // 401 未授权，跳转到登录页
+      if (response.status === 401) {
+        window.location.href = '/login';
+      }
+    }
+    
+    throw error;
+  },
+});
+```
+
+### C.4 路由与权限规范
+
+#### 路由配置
+
+```typescript
+// config/routes.ts
+export default [
+  {
+    path: '/',
+    component: '@/layouts/BasicLayout',
+    routes: [
+      { path: '/', redirect: '/dashboard' },
+      {
+        path: '/dashboard',
+        name: '工作台',
+        icon: 'DashboardOutlined',
+        component: '@/pages/dashboard',
+      },
+      {
+        path: '/products',
+        name: '商品中心',
+        icon: 'ShoppingOutlined',
+        routes: [
+          {
+            path: '/products/list',
+            name: '商品列表',
+            component: '@/pages/products/list',
+            access: 'product:read',
+          },
+          {
+            path: '/products/detail/:id',
+            name: '商品详情',
+            component: '@/pages/products/detail',
+            hideInMenu: true,
+            access: 'product:read',
+          },
+        ],
+      },
+      // ...
+    ],
+  },
+];
+```
+
+#### 权限控制
+
+```typescript
+// src/access.ts
+export default function(initialState: InitialState) {
+  const { currentUser } = initialState || {};
+  const permissions = currentUser?.permissions || [];
+  
+  return {
+    // 商品权限
+    'product:read': permissions.includes('product:read'),
+    'product:create': permissions.includes('product:create'),
+    'product:update': permissions.includes('product:update'),
+    'product:delete': permissions.includes('product:delete'),
+    'product:sync': permissions.includes('product:sync'),
+    
+    // 订单权限
+    'order:read': permissions.includes('order:read'),
+    'order:confirm': permissions.includes('order:confirm'),
+    'order:ship': permissions.includes('order:ship'),
+    'order:cancel': permissions.includes('order:cancel'),
+    
+    // ...
+  };
+}
+```
+
+---
+
+**补充说明**：
+1. 本附录内容基于参考文档的前端交互设计规范，与现有50个业务闭环保持一致
+2. 所有状态机定义与业务闭环中的状态定义对应
+3. 页面映射与Task_Overview.md中的前端任务对应
+4. 组件规范遵循项目特定规则中的命名和技术约束
+
 ## 1️⃣ 数据采集与清洗闭环（Product Data Collection & Cleansing）
 
 - **目标**：收集多平台商品信息，确保数据完整、有效、可用于盈利分析（TOC）或报价计算（TOB）。