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

refactor: 移除不再使用的提示文件和文档副本 docs: 更新开发进度文档，补充前端任务完成情况
2026-03-18 21:02:23 +08:00
parent 6d0d2b6157
commit 96373deb2f
17 changed files with 29574 additions and 901 deletions
--- a/docs/00_Business/Business_ClosedLoops.md
+++ b/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）。
--- a/docs/00_Business/Task_Overview.md
+++ b/docs/00_Business/Task_Overview.md
@@ -55,8 +55,20 @@
 | AI-Frontend-12 | 高退货率SKU闭环AI | AI-HR001, AI-HR002 | ReturnAnalysisService.ts, ReturnOptimizationService.ts | 2026-03-19 15:00 | ✅ 已完成 |
 | AI-Frontend-12 | 高退货率SKU闭环数据 | DT-HR002 | ReturnEffectAnalysisService.ts | 2026-03-19 16:00 | ✅ 已完成 |
 | **AI-Backend-22** | **技术基础设施闭环** | **BE-TI001, BE-TI002, BE-TI003, BE-TI004, BE-TI005** | **ServiceManagementService.ts, DataManagementService.ts, MessageProcessingService.ts, SecurityComplianceService.ts, MonitoringAlertService.ts** | **2026-03-19 17:00** | **✅ 已完成** |
-| AI-Frontend-17 | 前端骨架闭环 | FE-SK001, FE-SK002, FE-SK003, FE-SK004, FE-SK005, FE-INT001, FE-INT002, FE-INT003, FE-INT004 | MenuComponent.tsx, DashboardPage.tsx, ProductPage.tsx, OrdersPage.tsx, ComponentLibrary.tsx | 2026-03-20 09:00 | 🔒 进行中 |
+| **AI-Frontend-17** | **前端骨架闭环** | **FE-SK001, FE-SK002, FE-SK003, FE-SK004, FE-SK005, FE-INT001, FE-INT002, FE-INT003, FE-INT004** | **MenuComponent.tsx, DashboardPage.tsx, ProductPage.tsx, OrdersPage.tsx, ComponentLibrary.tsx** | **2026-03-20 18:00** | **✅ 已完成** |
 | AI-Frontend-18 | 独立站管理闭环 | FE-IS001, FE-IS002, FE-IS003, FE-IS004, FE-IS005, FE-IS006 | IndependentSiteList.tsx, IndependentSiteCreate.tsx, IndependentSiteConfig.tsx, IndependentSiteProduct.tsx, IndependentSiteOrder.tsx, IndependentSiteAnalytics.tsx | 2026-03-18 10:00 | ✅ 已完成 |
+| AI-Frontend-19 | 多商户管理闭环 | FE-MV001, FE-MV002, FE-MV003, FE-MV004 | MerchantManage.tsx, MerchantOrderManage.tsx, MerchantSettlementManage.tsx, MerchantShopManage.tsx | 2026-03-20 10:00 | ✅ 已完成 |
+| AI-Frontend-22 | 恶意买家黑名单闭环 | FE-BL001, FE-BL002 | BlacklistManage.tsx, RiskMonitor.tsx | 2026-03-18 10:00 | ✅ 已完成 |
+| AI-Frontend-28 | 用户资产闭环 | FE-UA001, FE-UA002, FE-UA003 | MemberLevel.tsx, PointsManage.tsx, UserAssets.tsx | 2026-03-18 11:00 | ✅ 已完成 |
+| **AI-Frontend-20** | **售后逆向闭环** | **FE-SR001, FE-SR002, FE-SR003** | **ReturnApply.tsx, RefundProcess.tsx, CustomerService.tsx** | **2026-03-20 11:00** | **✅ 已完成** |
+| **AI-Frontend-24** | **供应商管理闭环** | **FE-SP001** | **SupplierDetail.tsx** | **2026-03-20 12:00** | **✅ 已完成** |
+| **AI-Frontend-21** | **物流策略闭环** | **FE-LOG001, FE-LOG002, FE-LOG003** | **LogisticsSelect.tsx, ShippingCostCalculator.tsx, LogisticsTracking.tsx** | **2026-03-20 13:00** | **✅ 已完成** |
+| **AI-Frontend-23** | **营销管理闭环** | **FE-MK001, FE-MK002** | **Competitors.tsx, Ads.tsx** | **2026-03-20 13:00** | **✅ 已完成** |
+| **AI-Frontend-25** | **报表与分析闭环** | **FE-RP001, FE-RP002** | **ProfitReport.tsx, PerformanceReport.tsx** | **2026-03-20 14:00** | **✅ 已完成** |
+| **AI-Frontend-26** | **A/B测试与策略优化闭环** | **FE-AB001, FE-AB002** | **ABTestConfig.tsx, ABTestResults.tsx** | **2026-03-20 15:00** | **✅ 已完成** |
+| **AI-Frontend-27** | **高退货率SKU闭环** | **FE-RT001, FE-RT002** | **ReturnMonitor.tsx, SKUManage.tsx** | **2026-03-20 16:00** | **✅ 已完成** |
+| **AI-Frontend-22** | **恶意买家黑名单闭环** | **FE-BL001, FE-BL002** | **BlacklistManage.tsx, RiskMonitor.tsx** | **2026-03-20 17:00** | **✅ 已完成** |
+| **AI-Frontend-28** | **用户资产闭环** | **FE-UA001, FE-UA002, FE-UA003** | **MemberLevel.tsx, PointsManage.tsx, UserAssets.tsx** | **2026-03-20 17:00** | **✅ 已完成** |


 **占用规则**:
@@ -452,7 +464,83 @@
 | FE-IS006 | 独立站管理闭环 | 独立站数据分析页面 | 站点ID, 时间范围 | 分析报告 | 点击分析 | ✅ completed | P1  | FE-IS001 | 12h  | AI-Frontend-18 |
 | FE-INT002 | 前端交互闭环 | AI定价功能交互 | 商品数据, 市场数据 | AI定价功能 | FE-SK003 | ✅ completed | P1  | FE-SK003 | 8h   | AI-Frontend-17 |
 | FE-INT003 | 前端交互闭环 | 订单处理交互 | 订单数据, 状态管理 | 订单处理功能 | FE-SK004 | ✅ completed | P1  | FE-SK004 | 8h   | AI-Frontend-17 |
-| FE-INT004 | 前端交互闭环 | 统一交互规范实现 | 交互设计, 用户体验 | 交互规范实现 | FE-SK005 | ✅ completed | P1  | FE-SK005 | 10h  | AI-Frontend-17 |
+| FE-INT004 | 前端交互闭环 | 统一交互规范实现 | 交互设计, 用户体验 | 交互规范实现 | FE-SK005 | ✅ completed | P1  | FE-SK005 | 10h  | AI-Frontend-17
+# 前端缺失任务补充
+
+## 1.23 商户管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-MV001 | 多商户管理闭环 | 商户管理页面 | 商户ID, 筛选条件 | 商户列表 | 页面加载 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-19 |
+| FE-MV002 | 多商户管理闭环 | 商户订单管理页面 | 商户ID, 订单信息 | 订单列表 | 页面加载 | ✅ completed | P1  | FE-MV001 | 10h  | AI-Frontend-19 |
+| FE-MV003 | 多商户管理闭环 | 商户结算管理页面 | 商户ID, 结算信息 | 结算列表 | 页面加载 | ✅ completed | P1  | FE-MV001 | 10h  | AI-Frontend-19 |
+| FE-MV004 | 多商户管理闭环 | 商户店铺管理页面 | 商户ID, 店铺信息 | 店铺列表 | 页面加载 | ✅ completed | P1  | FE-MV001 | 10h  | AI-Frontend-19 |
+
+## 1.24 售后服务前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-SR001 | 售后逆向闭环 | 退货申请页面 | 订单ID, 退货原因 | 退货申请 | 点击申请 | ✅ 已完成 | P1  | FE-SK001 | 10h  | AI-Frontend-20 |
+| FE-SR002 | 售后逆向闭环 | 退款流程页面 | 退款ID, 退款金额 | 退款处理 | 点击处理 | ✅ 已完成 | P1  | FE-SR001 | 10h  | AI-Frontend-20 |
+| FE-SR003 | 售后逆向闭环 | 客户服务页面 | 客户ID, 服务类型 | 服务记录 | 点击服务 | ✅ 已完成 | P1  | FE-SR001 | 10h  | AI-Frontend-20 |
+
+## 1.25 物流管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-LOG001 | 物流策略闭环 | 物流选择页面 | 订单ID, 物流参数 | 物流选项 | 点击选择 | ✅ 已完成 | P1  | FE-SK001 | 10h  | AI-Frontend-21 |
+| FE-LOG002 | 物流策略闭环 | 运费计算页面 | 订单ID, 重量信息 | 运费结果 | 点击计算 | ✅ 已完成 | P1  | FE-LOG001 | 10h  | AI-Frontend-21 |
+| FE-LOG003 | 物流策略闭环 | 物流追踪页面 | 物流单号, 追踪信息 | 追踪状态 | 点击追踪 | ✅ 已完成 | P1  | FE-LOG001 | 10h  | AI-Frontend-21 |
+
+## 1.26 黑名单管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-BL001 | 恶意买家黑名单闭环 | 黑名单管理页面 | 黑名单ID, 筛选条件 | 黑名单列表 | 页面加载 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-22 |
+| FE-BL002 | 恶意买家黑名单闭环 | 风险监控页面 | 风险ID, 监控参数 | 风险报告 | 点击监控 | ✅ completed | P1  | FE-BL001 | 10h  | AI-Frontend-22 |
+
+## 1.27 营销管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-MK001 | 营销管理闭环 | 竞争对手分析页面 | 竞品ID, 分析参数 | 竞品分析 | 点击分析 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-23 |
+| FE-MK002 | 营销管理闭环 | 营销活动管理页面 | 活动ID, 营销参数 | 活动列表 | 页面加载 | ✅ completed | P1  | FE-MK001 | 10h  | AI-Frontend-23 |
+
+## 1.28 供应商管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-SP001 | 供应商管理闭环 | 供应商详情页面 | 供应商ID, 交易记录 | 供应商详情 | 点击查看 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-24 |
+
+## 1.29 报表中心前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-RP001 | 报表与分析闭环 | 利润报表页面 | 时间范围, 报表参数 | 利润报表 | 点击生成 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-25 |
+| FE-RP002 | 报表与分析闭环 | 绩效报表页面 | 时间范围, 绩效参数 | 绩效报表 | 点击生成 | ✅ completed | P1  | FE-RP001 | 10h  | AI-Frontend-25 |
+
+## 1.30 A/B测试前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-AB001 | A/B测试与策略优化闭环 | A/B测试配置页面 | 测试参数, 流量分配 | 测试配置 | 点击配置 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-26 |
+| FE-AB002 | A/B测试与策略优化闭环 | 测试结果分析页面 | 测试ID, 结果数据 | 结果报告 | 点击分析 | ✅ completed | P1  | FE-AB001 | 10h  | AI-Frontend-26 |
+
+## 1.31 退货管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-RT001 | 高退货率SKU闭环 | 退货监控页面 | SKU ID, 退货数据 | 退货统计 | 点击监控 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-27 |
+| FE-RT002 | 高退货率SKU闭环 | SKU管理页面 | SKU ID, 管理参数 | SKU列表 | 点击管理 | ✅ completed | P1  | FE-RT001 | 10h  | AI-Frontend-27 |
+
+## 1.32 用户资产管理前端【P1 高优先级 - 新增】
+
+| Task ID  | 闭环关联   | 任务描述   | 输入         | 输出   | 触发条件 | 状态   | 优先级 | 依赖       | 预计耗时 | 负责人           |
+| -------- | ------ | ------ | ---------- | ---- | ---- | ---- | --- | -------- | ---- | ------------- |
+| FE-UA001 | 用户资产闭环 | 会员等级管理页面 | 会员ID, 等级参数 | 等级列表 | 页面加载 | ✅ completed | P1  | FE-SK001 | 10h  | AI-Frontend-28 |
+| FE-UA002 | 用户资产闭环 | 积分管理页面 | 用户ID, 积分数据 | 积分列表 | 点击管理 | ✅ completed | P1  | FE-UA001 | 10h  | AI-Frontend-28 |
+| FE-UA003 | 用户资产闭环 | 用户资产页面 | 用户ID, 资产数据 | 资产统计 | 点击查看 | ✅ completed | P1  | FE-UA001 | 10h  | AI-Frontend-28 |
+ |

 ***

@@ -1646,5 +1734,634 @@ export class FeatureModuleService {

 ***

+## 附录A：前端交互任务补充
+
+> **说明**：本附录补充前端交互设计相关的详细任务，与Business_ClosedLoops.md中的前端交互规范对应，确保前端实现与业务闭环一致。
+
+### A.1 商品中心交互任务
+
+对应闭环：**数据采集与清洗闭环**、**商品刊登闭环**、**定价与利润决策闭环**
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-P001 | 商品主数据闭环 | 商品列表筛选交互 | 筛选条件 | 筛选结果 | 用户操作 | ⏳ pending | P1 | FE-SK003 | 4h | AI-Frontend-XX |
+| FE-INT-P002 | 商品主数据闭环 | 商品列表排序交互 | 排序字段 | 排序结果 | 用户操作 | ⏳ pending | P1 | FE-SK003 | 4h | AI-Frontend-XX |
+| FE-INT-P003 | 商品主数据闭环 | 商品新增交互 | 商品信息 | 新商品 | 点击新增 | ⏳ pending | P1 | FE-SK003 | 6h | AI-Frontend-XX |
+| FE-INT-P004 | 商品主数据闭环 | 商品编辑交互 | 编辑数据 | 更新结果 | 点击编辑 | ⏳ pending | P1 | FE-INT-P003 | 4h | AI-Frontend-XX |
+| FE-INT-P005 | 定价与利润决策闭环 | 商品定价交互 | 成本数据 | 定价结果 | 点击定价 | ⏳ pending | P1 | FE-SK003 | 8h | AI-Frontend-XX |
+| FE-INT-P006 | 商品刊登闭环 | 商品上架交互 | 上架确认 | 上架结果 | 点击上架 | ⏳ pending | P1 | FE-INT-P005 | 4h | AI-Frontend-XX |
+| FE-INT-P007 | 商品刊登闭环 | 商品同步交互 | 同步请求 | 同步任务 | 点击同步 | ⏳ pending | P1 | FE-INT-P006 | 6h | AI-Frontend-XX |
+| FE-INT-P008 | 商品主数据闭环 | 商品批量操作交互 | 选中商品 | 批量结果 | 批量操作 | ⏳ pending | P1 | FE-INT-P003 | 8h | AI-Frontend-XX |
+| FE-INT-P009 | 商品主数据闭环 | 商品详情查看交互 | 商品ID | 详情数据 | 点击查看 | ⏳ pending | P1 | FE-SK003 | 4h | AI-Frontend-XX |
+| FE-INT-P010 | 定价与利润决策闭环 | 实时定价计算交互 | 成本输入 | 计算结果 | 输入变化 | ⏳ pending | P1 | FE-INT-P005 | 6h | AI-Frontend-XX |
+
+### A.2 订单中心交互任务
+
+对应闭环：**订单履约闭环**、**订单集中管理闭环**、**售后逆向闭环**
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-O001 | 订单履约闭环 | 订单列表筛选交互 | 筛选条件 | 筛选结果 | 用户操作 | ⏳ pending | P1 | FE-SK004 | 4h | AI-Frontend-XX |
+| FE-INT-O002 | 订单履约闭环 | 订单确认交互 | 订单ID | 确认结果 | 点击确认 | ⏳ pending | P1 | FE-SK004 | 4h | AI-Frontend-XX |
+| FE-INT-O003 | 订单履约闭环 | 订单发货交互 | 发货信息 | 发货结果 | 点击发货 | ⏳ pending | P1 | FE-INT-O002 | 6h | AI-Frontend-XX |
+| FE-INT-O004 | 订单履约闭环 | 订单完成交互 | 订单ID | 完成结果 | 点击完成 | ⏳ pending | P1 | FE-INT-O003 | 4h | AI-Frontend-XX |
+| FE-INT-O005 | 订单履约闭环 | 订单取消交互 | 取消原因 | 取消结果 | 点击取消 | ⏳ pending | P1 | FE-SK004 | 4h | AI-Frontend-XX |
+| FE-INT-O006 | 售后逆向闭环 | 售后申请交互 | 售后信息 | 申请结果 | 点击申请 | ⏳ pending | P1 | FE-INT-O004 | 6h | AI-Frontend-XX |
+| FE-INT-O007 | 售后逆向闭环 | 售后审核交互 | 审核结果 | 处理结果 | 点击审核 | ⏳ pending | P1 | FE-INT-O006 | 4h | AI-Frontend-XX |
+| FE-INT-O008 | 售后逆向闭环 | 退款处理交互 | 退款金额 | 退款结果 | 点击退款 | ⏳ pending | P1 | FE-INT-O007 | 6h | AI-Frontend-XX |
+| FE-INT-O009 | 订单集中管理闭环 | 多平台订单聚合交互 | 平台筛选 | 聚合结果 | 用户操作 | ⏳ pending | P1 | FE-SK004 | 8h | AI-Frontend-XX |
+| FE-INT-O010 | 订单履约闭环 | 异常订单处理交互 | 异常信息 | 处理结果 | 点击处理 | ⏳ pending | P1 | FE-SK004 | 6h | AI-Frontend-XX |
+
+### A.3 执行中心交互任务
+
+对应闭环：**服务编排与执行闭环**
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-T001 | 服务编排与执行闭环 | 任务列表筛选交互 | 筛选条件 | 筛选结果 | 用户操作 | ⏳ pending | P1 | FE-SK001 | 4h | AI-Frontend-XX |
+| FE-INT-T002 | 服务编排与执行闭环 | 任务重试交互 | 任务ID | 重试结果 | 点击重试 | ⏳ pending | P1 | FE-INT-T001 | 4h | AI-Frontend-XX |
+| FE-INT-T003 | 服务编排与执行闭环 | 任务取消交互 | 任务ID | 取消结果 | 点击取消 | ⏳ pending | P1 | FE-INT-T001 | 4h | AI-Frontend-XX |
+| FE-INT-T004 | 服务编排与执行闭环 | 任务日志查看交互 | 任务ID | 日志数据 | 点击查看 | ⏳ pending | P1 | FE-INT-T001 | 4h | AI-Frontend-XX |
+| FE-INT-T005 | 服务编排与执行闭环 | 任务详情查看交互 | 任务ID | 详情数据 | 点击查看 | ⏳ pending | P1 | FE-INT-T001 | 4h | AI-Frontend-XX |
+| FE-INT-T006 | 服务编排与执行闭环 | 批量任务操作交互 | 选中任务 | 批量结果 | 批量操作 | ⏳ pending | P1 | FE-INT-T001 | 6h | AI-Frontend-XX |
+
+### A.4 数据中心交互任务
+
+对应闭环：**报表与分析闭环**
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-A001 | 报表与分析闭环 | 数据筛选交互 | 筛选条件 | 筛选结果 | 用户操作 | ⏳ pending | P1 | FE-SK002 | 4h | AI-Frontend-XX |
+| FE-INT-A002 | 报表与分析闭环 | 时间范围选择交互 | 时间范围 | 数据更新 | 选择时间 | ⏳ pending | P1 | FE-INT-A001 | 4h | AI-Frontend-XX |
+| FE-INT-A003 | 报表与分析闭环 | 图表交互 | 图表操作 | 数据详情 | 点击图表 | ⏳ pending | P1 | FE-INT-A001 | 6h | AI-Frontend-XX |
+| FE-INT-A004 | 报表与分析闭环 | 数据导出交互 | 导出格式 | 导出文件 | 点击导出 | ⏳ pending | P1 | FE-INT-A001 | 4h | AI-Frontend-XX |
+| FE-INT-A005 | 报表与分析闭环 | KPI卡片交互 | 卡片点击 | 详情数据 | 点击卡片 | ⏳ pending | P1 | FE-INT-A001 | 4h | AI-Frontend-XX |
+
+### A.5 合规中心交互任务
+
+对应闭环：**合规与证书管理闭环**、**合规与风控闭环**
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-C001 | 合规与证书管理闭环 | 证书上传交互 | 证书文件 | 上传结果 | 点击上传 | ⏳ pending | P1 | FE-SK001 | 6h | AI-Frontend-XX |
+| FE-INT-C002 | 合规与证书管理闭环 | 证书审核交互 | 审核结果 | 处理结果 | 点击审核 | ⏳ pending | P1 | FE-INT-C001 | 4h | AI-Frontend-XX |
+| FE-INT-C003 | 合规与风控闭环 | 合规检查交互 | 商品ID | 检查结果 | 点击检查 | ⏳ pending | P1 | FE-SK001 | 6h | AI-Frontend-XX |
+| FE-INT-C004 | 合规与风控闭环 | 风险监控交互 | 监控参数 | 监控结果 | 用户操作 | ⏳ pending | P1 | FE-INT-C003 | 6h | AI-Frontend-XX |
+
+### A.6 系统设置交互任务
+
+| Task ID | 闭环关联 | 任务描述 | 输入 | 输出 | 触发条件 | 状态 | 优先级 | 依赖 | 预计耗时 | 负责人 |
+|---------|---------|---------|------|------|---------|------|--------|------|---------|--------|
+| FE-INT-S001 | 系统设置 | 平台账号配置交互 | 账号信息 | 配置结果 | 保存配置 | ⏳ pending | P2 | FE-SK001 | 6h | AI-Frontend-XX |
+| FE-INT-S002 | 系统设置 | 汇率配置交互 | 汇率数据 | 配置结果 | 保存配置 | ⏳ pending | P2 | FE-SK001 | 4h | AI-Frontend-XX |
+| FE-INT-S003 | 系统设置 | 成本模板配置交互 | 模板数据 | 配置结果 | 保存配置 | ⏳ pending | P2 | FE-SK001 | 6h | AI-Frontend-XX |
+| FE-INT-S004 | 系统设置 | WinNode配置交互 | 节点信息 | 配置结果 | 保存配置 | ⏳ pending | P2 | FE-SK001 | 6h | AI-Frontend-XX |
+
+## 附录B：前端开发规范
+
+> **说明**：本附录定义前端开发的技术规范，包括技术栈、项目结构、组件规范、状态管理和API交互规范。
+
+### B.1 技术栈与架构
+
+#### 核心技术栈
+
+| 层级 | 技术 | 版本 | 说明 |
+|------|------|------|------|
+| **框架** | React | 18.x | UI框架 |
+| **脚手架** | Umi | 4.x | 企业级前端框架 |
+| **UI库** | Ant Design | 5.x | 组件库 |
+| **状态管理** | dva | @umijs/max内置 | 全局状态管理 |
+| **请求库** | axios + umi-request | latest | HTTP请求 |
+| **路由** | Umi Router | 内置 | 约定式路由 |
+| **构建工具** | Webpack | 5.x | 打包工具 |
+| **类型检查** | TypeScript | 4.x | 类型安全 |
+| **样式** | Less + CSS Modules | - | 样式方案 |
+
+#### 项目结构
+
+```
+dashboard/
+├── config/                    # 配置文件
+│   ├── config.ts             # 主配置
+│   ├── routes.ts             # 路由配置
+│   └── proxy.ts              # 代理配置
+├── src/
+│   ├── components/           # 组件
+│   │   ├── business/        # 业务组件
+│   │   │   ├── ProductTable/
+│   │   │   ├── OrderTable/
+│   │   │   └── TaskTable/
+│   │   ├── common/          # 通用组件
+│   │   │   ├── StatusTag/
+│   │   │   ├── ConfirmModal/
+│   │   │   └── PageHeader/
+│   │   └── charts/          # 图表组件
+│   │       ├── SalesChart/
+│   │       └── ProfitChart/
+│   ├── layouts/             # 布局组件
+│   │   ├── BasicLayout.tsx
+│   │   ├── BlankLayout.tsx
+│   │   └── components/
+│   ├── pages/               # 页面组件
+│   │   ├── dashboard/
+│   │   ├── products/
+│   │   │   ├── list/
+│   │   │   ├── detail/
+│   │   │   └── components/
+│   │   ├── orders/
+│   │   ├── tasks/
+│   │   ├── analytics/
+│   │   ├── compliance/
+│   │   └── settings/
+│   ├── models/              # 状态管理
+│   │   ├── product.ts
+│   │   ├── order.ts
+│   │   ├── task.ts
+│   │   └── global.ts
+│   ├── services/            # API服务
+│   │   ├── product.ts
+│   │   ├── order.ts
+│   │   ├── task.ts
+│   │   └── api.ts
+│   ├── utils/               # 工具函数
+│   │   ├── request.ts
+│   │   ├── constants.ts
+│   │   ├── helpers.ts
+│   │   └── format.ts
+│   ├── hooks/               # 自定义Hooks
+│   │   ├── useProduct.ts
+│   │   ├── useOrder.ts
+│   │   └── useTable.ts
+│   ├── types/               # 类型定义
+│   │   ├── product.d.ts
+│   │   ├── order.d.ts
+│   │   └── global.d.ts
+│   ├── access.ts            # 权限配置
+│   └── app.ts               # 运行时配置
+├── public/                  # 静态资源
+├── tests/                   # 测试文件
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+### B.2 组件设计规范
+
+#### 组件分类
+
+| 分类 | 说明 | 存放路径 | 命名规范 |
+|------|------|---------|---------|
+| **页面组件** | 完整页面 | src/pages/ | PascalCase.tsx |
+| **布局组件** | 页面布局 | src/layouts/ | PascalCase.tsx |
+| **业务组件** | 业务相关 | src/components/business/ | PascalCase/index.tsx |
+| **通用组件** | 通用UI | src/components/common/ | PascalCase/index.tsx |
+| **图表组件** | 数据可视化 | src/components/charts/ | PascalCase/index.tsx |
+
+#### 组件模板
+
+```typescript
+// src/components/business/ProductTable/index.tsx
+import React, { useState } from 'react';
+import { Table } from 'antd';
+import styles from './index.module.less';
+
+// 类型定义
+export interface ProductTableProps {
+  data: Product[];
+  loading?: boolean;
+  onEdit?: (record: Product) => void;
+  onDelete?: (record: Product) => void;
+}
+
+// 组件实现
+const ProductTable: React.FC<ProductTableProps> = ({
+  data,
+  loading = false,
+  onEdit,
+  onDelete,
+}) => {
+  // 状态定义
+  const [selectedRows, setSelectedRows] = useState<Product[]>([]);
+  
+  // 列定义
+  const columns = [
+    // ...
+  ];
+  
+  return (
+    <Table
+      className={styles.table}
+      columns={columns}
+      dataSource={data}
+      loading={loading}
+      rowSelection={{
+        selectedRowKeys: selectedRows.map(row => row.id),
+        onChange: (_, rows) => setSelectedRows(rows),
+      }}
+    />
+  );
+};
+
+export default ProductTable;
+```
+
+### B.3 状态管理规范
+
+#### Model规范
+
+```typescript
+// src/models/product.ts
+import { Effect, Reducer } from 'umi';
+import { getProductList, getProductDetail } from '@/services/product';
+
+// 状态类型
+export interface ProductState {
+  list: Product[];
+  detail: Product | null;
+  loading: boolean;
+  pagination: {
+    current: number;
+    pageSize: number;
+    total: number;
+  };
+}
+
+// Model定义
+export interface ProductModelType {
+  namespace: 'product';
+  state: ProductState;
+  effects: {
+    fetchList: Effect;
+    fetchDetail: Effect;
+  };
+  reducers: {
+    setList: Reducer<ProductState>;
+    setDetail: Reducer<ProductState>;
+    setLoading: Reducer<ProductState>;
+  };
+}
+
+const ProductModel: ProductModelType = {
+  namespace: 'product',
+  
+  state: {
+    list: [],
+    detail: null,
+    loading: false,
+    pagination: {
+      current: 1,
+      pageSize: 20,
+      total: 0,
+    },
+  },
+  
+  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 });
+    },
+    
+    *fetchDetail({ payload: id }, { call, put }) {
+      yield put({ type: 'setLoading', payload: true });
+      const response = yield call(getProductDetail, id);
+      yield put({ type: 'setDetail', payload: response.data });
+      yield put({ type: 'setLoading', payload: false });
+    },
+  },
+  
+  reducers: {
+    setList(state, { payload }) {
+      return { ...state, list: payload };
+    },
+    setDetail(state, { payload }) {
+      return { ...state, detail: payload };
+    },
+    setLoading(state, { payload }) {
+      return { ...state, loading: payload };
+    },
+  },
+};
+
+export default ProductModel;
+```
+
+### B.4 API交互规范
+
+#### Service规范
+
+```typescript
+// src/services/product.ts
+import request from '@/utils/request';
+import { ProductListParams, CreateProductData, UpdateProductData, PricingData } from '@/types/product';
+
+/**
+ * 获取商品列表
+ * @param params 查询参数
+ */
+export async function getProductList(params: ProductListParams) {
+  return request('/api/products', {
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * 获取商品详情
+ * @param id 商品ID
+ */
+export async function getProductDetail(id: string) {
+  return request(`/api/products/${id}`, {
+    method: 'GET',
+  });
+}
+
+/**
+ * 创建商品
+ * @param data 商品数据
+ */
+export async function createProduct(data: CreateProductData) {
+  return request('/api/products', {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 更新商品
+ * @param id 商品ID
+ * @param data 商品数据
+ */
+export async function updateProduct(id: string, data: UpdateProductData) {
+  return request(`/api/products/${id}`, {
+    method: 'PUT',
+    data,
+  });
+}
+
+/**
+ * 删除商品
+ * @param id 商品ID
+ */
+export async function deleteProduct(id: string) {
+  return request(`/api/products/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * 更新商品价格
+ * @param id 商品ID
+ * @param data 定价数据
+ */
+export async function updateProductPrice(id: string, data: PricingData) {
+  return request(`/api/products/${id}/price`, {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 同步商品到平台
+ * @param id 商品ID
+ * @param platform 平台名称
+ */
+export async function syncProductToPlatform(id: string, platform: string) {
+  return request(`/api/products/${id}/sync`, {
+    method: 'POST',
+    data: { platform },
+  });
+}
+```
+
+#### Request封装
+
+```typescript
+// src/utils/request.ts
+import { extend, RequestOptionsInit } from 'umi-request';
+import { notification } from 'antd';
+
+const codeMessage: Record<number, string> = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。',
+};
+
+/**
+ * 异常处理程序
+ */
+const errorHandler = (error: { response: Response }): Response => {
+  const { response } = error;
+  
+  if (response && response.status) {
+    const errorText = codeMessage[response.status] || response.statusText;
+    const { status, url } = response;
+
+    notification.error({
+      message: `请求错误 ${status}: ${url}`,
+      description: errorText,
+    });
+    
+    // 401 未授权，跳转到登录页
+    if (status === 401) {
+      window.location.href = '/login';
+    }
+  } else if (!response) {
+    notification.error({
+      description: '您的网络发生异常，无法连接服务器',
+      message: '网络异常',
+    });
+  }
+  
+  return response;
+};
+
+/**
+ * 配置request请求时的默认参数
+ */
+const request = extend({
+  errorHandler,
+  // 默认错误处理
+  credentials: 'include', // 默认请求是否带上cookie
+});
+
+// 请求拦截器
+request.interceptors.request.use((url, options) => {
+  // 添加token
+  const token = localStorage.getItem('token');
+  if (token) {
+    options.headers = {
+      ...options.headers,
+      Authorization: `Bearer ${token}`,
+    };
+  }
+  return { url, options };
+});
+
+// 响应拦截器
+request.interceptors.response.use(async (response) => {
+  const data = await response.clone().json();
+  
+  if (data.code !== 200) {
+    notification.error({
+      message: '请求失败',
+      description: data.message || '未知错误',
+    });
+  }
+  
+  return response;
+});
+
+export default request;
+```
+
+### B.5 路由与权限规范
+
+#### 路由配置
+
+```typescript
+// config/routes.ts
+export default [
+  {
+    path: '/',
+    component: '@/layouts/BasicLayout',
+    routes: [
+      { path: '/', redirect: '/dashboard' },
+      {
+        path: '/dashboard',
+        name: '工作台',
+        icon: 'DashboardOutlined',
+        component: '@/pages/dashboard',
+        access: 'dashboard:read',
+      },
+      {
+        path: '/products',
+        name: '商品中心',
+        icon: 'ShoppingOutlined',
+        access: 'product:read',
+        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',
+          },
+          {
+            path: '/products/create',
+            name: '新增商品',
+            component: '@/pages/products/create',
+            hideInMenu: true,
+            access: 'product:create',
+          },
+        ],
+      },
+      {
+        path: '/orders',
+        name: '订单中心',
+        icon: 'FileTextOutlined',
+        access: 'order:read',
+        routes: [
+          {
+            path: '/orders/list',
+            name: '订单列表',
+            component: '@/pages/orders/list',
+            access: 'order:read',
+          },
+          {
+            path: '/orders/detail/:id',
+            name: '订单详情',
+            component: '@/pages/orders/detail',
+            hideInMenu: true,
+            access: 'order:read',
+          },
+        ],
+      },
+      // ... 其他路由
+    ],
+  },
+];
+```
+
+#### 权限配置
+
+```typescript
+// src/access.ts
+import { InitialState } from 'umi';
+
+export default function(initialState: InitialState) {
+  const { currentUser } = initialState || {};
+  const permissions = currentUser?.permissions || [];
+  const role = currentUser?.role || '';
+  
+  return {
+    // 工作台权限
+    'dashboard:read': permissions.includes('dashboard:read'),
+    
+    // 商品权限
+    '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'),
+    'order:refund': permissions.includes('order:refund'),
+    
+    // 任务权限
+    'task:read': permissions.includes('task:read'),
+    'task:retry': permissions.includes('task:retry'),
+    'task:cancel': permissions.includes('task:cancel'),
+    
+    // 数据权限
+    'analytics:read': permissions.includes('analytics:read'),
+    'analytics:export': permissions.includes('analytics:export'),
+    
+    // 合规权限
+    'compliance:read': permissions.includes('compliance:read'),
+    'compliance:upload': permissions.includes('compliance:upload'),
+    'compliance:audit': permissions.includes('compliance:audit'),
+    
+    // 设置权限（仅ADMIN）
+    'settings:read': role === 'ADMIN',
+    'settings:update': role === 'ADMIN',
+  };
+}
+```
+
+---
+
+**补充说明**：
+1. 本附录内容基于参考文档的前端开发规范，与现有50个业务闭环保持一致
+2. 所有技术栈选择遵循项目特定规则中的约束
+3. 组件规范和状态管理规范与Business_ClosedLoops.md中的前端交互规范对应
+4. API交互规范遵循五元组追踪要求
+
+***
+
 **最后更新时间**：2026-03-18
 **维护者**：Crawlful Hub AI Team