refactor: 优化代码结构并修复类型问题

- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
2026-03-23 12:41:35 +08:00
parent a037843851
commit 2b86715c09
363 changed files with 39305 additions and 40622 deletions
--- a/docs/ARCHIVE/01_Architecture/frontend/01_Product.md
+++ b/docs/ARCHIVE/01_Architecture/frontend/01_Product.md
@@ -0,0 +1,355 @@
+# Product 页面前端业务说明书
+
+## 1️⃣ 页面定义
+
+### 页面目标
+帮助商户：
+- 管理商品信息
+- 计算商品利润
+- 优化商品定价（核心）
+- 提升商品ROI
+
+### 页面类型
+- 业务核心页（直接影响赚钱）
+
+## 2️⃣ 页面核心数据
+
+### 核心数据字段
+- cost（成本）：包含采购成本、运费、关税等
+- price（售价）：商品的销售价格
+- profit（利润）：售价减去成本
+- roi（ROI）：投资回报率
+- stock（库存）：商品库存数量
+- aiPriceSuggestion（AI建议售价）：基于市场数据和成本的智能定价建议
+- salesVolume（销量）：商品销售数量
+- salesTrend（销售趋势）：近期销售数据趋势
+
+## 3️⃣ 页面核心操作
+
+### 用户操作
+- 创建商品：添加新商品信息
+- 修改价格：调整商品售价
+- 查看ROI：查看商品的投资回报率
+- 使用AI定价：获取AI的定价建议并应用
+- 调整库存：更新商品库存数量
+- 查看销售趋势：分析商品销售数据
+
+## 4️⃣ 操作 → 业务结果
+
+### 操作闭环
+1. **修改价格**
+   - 触发：用户点击"修改价格"按钮
+   - 服务：ProductService.updatePrice
+   - 结果：重新计算利润和ROI，更新前端展示
+   - 反馈：如果ROI下降，标红提示；如果ROI提升，显示绿色提示
+
+2. **使用AI定价**
+   - 触发：用户点击"AI定价"按钮
+   - 服务：AIService.optimizeProductForPlatform
+   - 结果：获取AI建议售价，显示在界面上
+   - 反馈：显示加载状态，完成后显示建议价格
+   - 收费：每次调用AI定价服务收费
+
+3. **调整库存**
+   - 触发：用户修改库存数量
+   - 服务：InventoryService.updateStock
+   - 结果：更新库存数据，触发库存预警（如果库存过低）
+   - 反馈：显示库存更新成功提示
+
+## 5️⃣ 页面状态
+
+### 状态定义
+- loading：数据加载中
+- empty：无数据
+- error：操作错误
+- success：操作成功
+- optimizing：AI处理中
+- warning：库存不足或ROI过低
+
+## 6️⃣ 收费点
+
+### 收费触发点
+- AI定价：按调用次数收费
+- 高级分析：按功能使用时间收费
+- 批量操作：按操作次数收费
+
+## 7️⃣ 页面结构
+
+### 主要区域
+1. **商品列表区**：显示所有商品，包含核心数据字段
+2. **商品详情区**：显示单个商品的详细信息
+3. **定价优化区**：显示AI定价建议和ROI分析
+4. **库存管理区**：显示和管理商品库存
+5. **销售分析区**：显示商品销售趋势和分析
+
+## 8️⃣ 业务价值
+
+### 核心价值
+- 帮助商户快速识别高利润商品
+- 提供智能定价建议，最大化利润
+- 实时监控商品ROI，及时调整策略
+- 优化库存管理，避免库存积压或缺货
+
+### 商业闭环
+商品 → 成本计算 → 智能定价 → 销售 → ROI分析 → 价格调整 → 再销售
+
+## 9️⃣ 前端实现要点
+
+### 技术实现
+- 使用React组件化开发
+- 集成Ant Design表格和表单组件
+- 实现虚拟列表，优化大数据量渲染
+- 使用Umi Model管理全局状态
+- 实现实时数据更新和WebSocket连接
+
+### 用户体验
+- 响应式设计，支持多终端访问
+- 操作反馈及时，显示loading和success/error提示
+- 数据可视化，使用图表展示销售趋势和ROI变化
+- 批量操作支持，提高工作效率
+
+## 🔟 后端服务依赖
+
+### 核心服务
+- ProductService：商品管理和价格更新
+- AIService：智能定价建议
+- InventoryService：库存管理
+- AnalyticsService：销售数据分析
+
+### 数据接口
+- GET /api/v1/product：获取商品列表
+- POST /api/v1/product：创建商品
+- PUT /api/v1/product/:id：更新商品信息
+- GET /api/v1/product/:id/roi：获取商品ROI分析
+- POST /api/v1/product/:id/ai-price：获取AI定价建议
+
+---
+
+## 1️⃣1️⃣ 商品中心前端架构（Product Center Frontend）
+
+> **设计原则**: 采用三层商品模型（SPU → SKU → Listing），支持多平台统一管理
+
+### 页面结构
+
+```
+商品管理
+├── SPU管理
+│   ├── SPU列表页
+│   ├── SPU详情页
+│   └── SPU创建/编辑页
+├── SKU管理
+│   ├── SKU列表页
+│   ├── SKU详情页
+│   └── SKU创建/编辑页
+├── Listing管理
+│   ├── Listing列表页
+│   ├── Listing详情页
+│   └── Listing发布页
+├── 价格策略
+│   ├── 策略列表页
+│   ├── 策略配置页
+│   └── 批量调价页
+├── SKU映射
+│   ├── 映射列表页
+│   ├── 自动映射页
+│   └── 手动映射页
+└── 授权管理
+    ├── 授权列表页
+    └── 授权详情页
+```
+
+### 核心页面设计
+
+#### SPU列表页
+
+**功能**：
+- 展示所有SPU，支持筛选、搜索、排序
+- 显示SPU关联的SKU数量和Listing数量
+- 支持批量操作（审核、停用、归档）
+
+**核心字段**：
+| 字段 | 说明 | 展示方式 |
+|------|------|----------|
+| name | 产品名称 | 文本 + 链接 |
+| brand | 品牌 | 标签 |
+| category | 类目 | 级联显示 |
+| status | 状态 | 状态标签 |
+| skuCount | SKU数量 | 数字 |
+| listingCount | Listing数量 | 数字 |
+
+#### SKU列表页
+
+**功能**：
+- 展示所有SKU，支持按SPU筛选
+- 显示成本价、基准价、库存信息
+- 支持批量设置基准价
+
+**核心字段**：
+| 字段 | 说明 | 展示方式 |
+|------|------|----------|
+| skuCode | SKU编码 | 文本 |
+| attributes | 变体属性 | 标签组 |
+| costPrice | 成本价 | 金额 |
+| basePrice | 基准价 | 金额 + 编辑 |
+| stock | 库存 | 数字 |
+| listingCount | 关联Listing数 | 数字 |
+
+#### Listing列表页
+
+**功能**：
+- 展示所有平台商品，支持按平台、店铺筛选
+- 显示最终价格、状态、同步状态
+- 支持批量发布、下架、调价
+
+**核心字段**：
+| 字段 | 说明 | 展示方式 |
+|------|------|----------|
+| platform | 平台 | 图标 + 名称 |
+| shopName | 店铺名称 | 文本 |
+| title | 商品标题 | 文本 + 链接 |
+| price | 最终价格 | 金额 + 编辑 |
+| stock | 库存 | 数字 |
+| status | 状态 | 状态标签 |
+| syncStatus | 同步状态 | 图标 |
+
+#### 价格策略配置页
+
+**功能**：
+- 创建和管理价格策略
+- 支持按平台、店铺、Listing设置策略
+- 支持倍率、固定值、动态定价三种策略类型
+
+**策略类型**：
+| 类型 | 说明 | 计算方式 |
+|------|------|----------|
+| MULTIPLIER | 倍率定价 | 最终价 = 基准价 × 倍率 |
+| FIXED | 固定定价 | 最终价 = 固定值 |
+| DYNAMIC | 动态定价 | AI根据市场动态计算 |
+
+**配置表单**：
+```typescript
+interface PriceStrategyForm {
+  name: string;
+  scopeType: 'PLATFORM' | 'SHOP' | 'LISTING';
+  scopeId: string;
+  strategyType: 'MULTIPLIER' | 'FIXED' | 'DYNAMIC';
+  value: number;
+  minPrice: number;
+  maxPrice: number;
+}
+```
+
+#### SKU映射页
+
+**功能**：
+- 自动匹配系统SKU与平台商品
+- 手动调整映射关系
+- 显示匹配置信度
+
+**映射流程**：
+```
+1. 选择店铺 → 2. 执行自动映射 → 3. 审核映射结果 → 4. 确认/调整映射
+```
+
+**置信度展示**：
+| 置信度 | 颜色 | 操作建议 |
+|--------|------|----------|
+| ≥ 90% | 绿色 | 自动确认 |
+| 70%-90% | 黄色 | 人工审核 |
+| < 70% | 红色 | 手动匹配 |
+
+### 前端状态管理
+
+**Umi Model设计**：
+
+```typescript
+// src/models/productCenter.ts
+interface ProductCenterState {
+  spuList: SPU[];
+  skuList: SKU[];
+  listingList: PlatformListing[];
+  priceStrategies: PriceStrategy[];
+  skuMappings: SKUMapping[];
+  currentSPU: SPU | null;
+  currentSKU: SKU | null;
+  currentListing: PlatformListing | null;
+  loading: boolean;
+  filters: ProductFilters;
+}
+
+interface ProductFilters {
+  platform?: string;
+  shopId?: string;
+  status?: string;
+  categoryId?: string;
+}
+```
+
+### 前端组件设计
+
+**核心组件**：
+
+```typescript
+// SPU卡片组件
+<SPUCard 
+  spu={spu}
+  skuCount={5}
+  listingCount={12}
+  onEdit={() => {}}
+  onView={() => {}}
+/>
+
+// SKU属性标签组件
+<SKUAttributes 
+  attributes={{ color: '红色', size: 'XL' }}
+/>
+
+// 价格显示组件
+<PriceDisplay 
+  basePrice={99}
+  strategyPrice={108.9}
+  finalPrice={109}
+  showBreakdown
+/>
+
+// 映射置信度组件
+<MappingConfidence 
+  confidence={0.85}
+  status="PENDING"
+/>
+```
+
+### 前端交互流程
+
+#### 商品发布流程
+
+```
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  选择SKU    │ →  │  配置Listing │ →  │  选择店铺   │
+└─────────────┘    └─────────────┘    └─────────────┘
+                                              │
+                                              ▼
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  发布成功   │ ←  │  平台审核   │ ←  │  提交发布   │
+└─────────────┘    └─────────────┘    └─────────────┘
+```
+
+#### 价格调整流程
+
+```
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  选择策略   │ →  │  预览影响   │ →  │  确认应用   │
+└─────────────┘    └─────────────┘    └─────────────┘
+                                              │
+                                              ▼
+                                       ┌─────────────┐
+                                       │  同步到平台 │
+                                       └─────────────┘
+```
+
+### 前端性能优化
+
+- **虚拟列表**: SKU和Listing列表使用虚拟滚动
+- **分页加载**: 大数据量采用分页加载
+- **缓存策略**: 使用SWR缓存API响应
+- **防抖节流**: 搜索和筛选操作使用防抖
--- a/docs/ARCHIVE/01_Architecture/frontend/02_Orders.md
+++ b/docs/ARCHIVE/01_Architecture/frontend/02_Orders.md
@@ -0,0 +1,130 @@
+# Orders 页面前端业务说明书
+
+## 1️⃣ 页面定义
+
+### 页面目标
+帮助商户：
+- 管理订单信息
+- 跟踪订单状态
+- 分析订单数据
+- 优化订单处理流程
+- 监控现金流
+
+### 页面类型
+- 业务核心页（直接影响现金流）
+
+## 2️⃣ 页面核心数据
+
+### 核心数据字段
+- orderId（订单ID）：唯一标识订单
+- customerInfo（客户信息）：客户姓名、联系方式等
+- productList（商品列表）：订单包含的商品
+- totalAmount（总金额）：订单总金额
+- status（订单状态）：待处理、已发货、已完成、已取消等
+- paymentStatus（支付状态）：待支付、已支付、已退款等
+- shippingInfo（物流信息）：物流单号、物流公司等
+- profit（利润）：订单利润
+- roi（ROI）：订单投资回报率
+- createdAt（创建时间）：订单创建时间
+- updatedAt（更新时间）：订单更新时间
+
+## 3️⃣ 页面核心操作
+
+### 用户操作
+- 查看订单列表：浏览所有订单
+- 查看订单详情：查看单个订单的详细信息
+- 更新订单状态：修改订单状态
+- 处理异常订单：处理异常情况的订单
+- 分析订单数据：查看订单统计和趋势
+- 导出订单数据：导出订单数据为Excel或CSV
+
+## 4️⃣ 操作 → 业务结果
+
+### 操作闭环
+1. **更新订单状态**
+   - 触发：用户点击"更新状态"按钮
+   - 服务：OrderService.updateStatus
+   - 结果：更新订单状态，触发相关业务流程（如发货、结算等）
+   - 反馈：显示状态更新成功提示
+
+2. **处理异常订单**
+   - 触发：用户点击"处理异常"按钮
+   - 服务：OrderService.handleException
+   - 结果：标记异常订单，触发异常处理流程
+   - 反馈：显示异常处理成功提示
+
+3. **分析订单数据**
+   - 触发：用户点击"分析"按钮
+   - 服务：AnalyticsService.analyzeOrders
+   - 结果：生成订单分析报告，显示销售趋势和ROI
+   - 反馈：显示分析结果和图表
+
+## 5️⃣ 页面状态
+
+### 状态定义
+- loading：数据加载中
+- empty：无订单数据
+- error：操作错误
+- success：操作成功
+- processing：订单处理中
+- exception：订单异常
+
+## 6️⃣ 收费点
+
+### 收费触发点
+- 高级订单分析：按功能使用时间收费
+- 批量订单处理：按操作次数收费
+- 订单数据导出：按导出数据量收费
+
+## 7️⃣ 页面结构
+
+### 主要区域
+1. **订单列表区**：显示所有订单，包含核心数据字段
+2. **订单详情区**：显示单个订单的详细信息
+3. **订单状态区**：显示和更新订单状态
+4. **异常订单区**：显示和处理异常订单
+5. **订单分析区**：显示订单统计和趋势分析
+
+## 8️⃣ 业务价值
+
+### 核心价值
+- 帮助商户实时跟踪订单状态
+- 优化订单处理流程，提高效率
+- 分析订单数据，识别销售趋势
+- 监控现金流，确保资金安全
+- 及时处理异常订单，减少损失
+
+### 商业闭环
+订单创建 → 支付 → 处理 → 发货 → 完成 → 结算 → 分析
+
+## 9️⃣ 前端实现要点
+
+### 技术实现
+- 使用React组件化开发
+- 集成Ant Design表格和表单组件
+- 实现虚拟列表，优化大数据量渲染
+- 使用Umi Model管理全局状态
+- 实现实时数据更新和WebSocket连接
+
+### 用户体验
+- 响应式设计，支持多终端访问
+- 操作反馈及时，显示loading和success/error提示
+- 数据可视化，使用图表展示订单趋势和分析
+- 批量操作支持，提高工作效率
+- 订单状态颜色区分，直观显示订单状态
+
+## 🔟 后端服务依赖
+
+### 核心服务
+- OrderService：订单管理和状态更新
+- AnalyticsService：订单数据分析
+- LogisticsService：物流信息管理
+- SettlementService：订单结算
+
+### 数据接口
+- GET /api/v1/orders：获取订单列表
+- GET /api/v1/orders/:id：获取订单详情
+- PUT /api/v1/orders/:id/status：更新订单状态
+- POST /api/v1/orders/:id/exception：处理异常订单
+- GET /api/v1/orders/analytics：获取订单分析数据
+- POST /api/v1/orders/export：导出订单数据
--- a/docs/ARCHIVE/01_Architecture/frontend/03_Ad.md
+++ b/docs/ARCHIVE/01_Architecture/frontend/03_Ad.md
@@ -0,0 +1,138 @@
+# Ad 页面前端业务说明书
+
+## 1️⃣ 页面定义
+
+### 页面目标
+帮助商户：
+- 管理广告 campaigns
+- 优化广告投放
+- 分析广告效果
+- 提高广告ROI
+- 自动调整广告策略
+
+### 页面类型
+- 业务核心页（直接影响利润放大）
+
+## 2️⃣ 页面核心数据
+
+### 核心数据字段
+- campaignId（广告活动ID）：唯一标识广告活动
+- campaignName（广告活动名称）：广告活动的名称
+- budget（预算）：广告投放预算
+- spend（花费）：已花费金额
+- impressions（展示次数）：广告展示次数
+- clicks（点击次数）：广告点击次数
+- conversions（转化次数）：广告转化次数
+- ctr（点击率）：点击次数/展示次数
+- cpc（点击成本）：花费/点击次数
+- cpa（获客成本）：花费/转化次数
+- roi（ROI）：广告投资回报率
+- status（状态）：运行中、已暂停、已结束等
+- startDate（开始日期）：广告活动开始日期
+- endDate（结束日期）：广告活动结束日期
+
+## 3️⃣ 页面核心操作
+
+### 用户操作
+- 创建广告活动：创建新的广告活动
+- 编辑广告活动：修改广告活动信息
+- 启动/暂停广告：控制广告活动状态
+- 查看广告效果：分析广告活动数据
+- 使用AI优化：获取AI的广告优化建议
+- 自动调整策略：根据ROI自动调整广告策略
+
+## 4️⃣ 操作 → 业务结果
+
+### 操作闭环
+1. **创建广告活动**
+   - 触发：用户点击"创建广告"按钮
+   - 服务：AdService.createCampaign
+   - 结果：创建新的广告活动，开始投放
+   - 反馈：显示创建成功提示
+
+2. **使用AI优化**
+   - 触发：用户点击"AI优化"按钮
+   - 服务：AIService.optimizeAdCampaign
+   - 结果：获取AI优化建议，显示在界面上
+   - 反馈：显示加载状态，完成后显示优化建议
+   - 收费：每次调用AI优化服务收费
+
+3. **自动调整策略**
+   - 触发：用户启用"自动调整"功能
+   - 服务：AdAutoService.autoAdjustCampaign
+   - 结果：根据ROI自动调整广告预算、投放时间等
+   - 反馈：显示自动调整状态和结果
+
+## 5️⃣ 页面状态
+
+### 状态定义
+- loading：数据加载中
+- empty：无广告数据
+- error：操作错误
+- success：操作成功
+- running：广告运行中
+- paused：广告已暂停
+- ended：广告已结束
+- optimizing：AI优化中
+
+## 6️⃣ 收费点
+
+### 收费触发点
+- AI广告优化：按调用次数收费
+- 自动调整策略：按功能使用时间收费
+- 高级广告分析：按功能使用时间收费
+- 批量广告操作：按操作次数收费
+
+## 7️⃣ 页面结构
+
+### 主要区域
+1. **广告列表区**：显示所有广告活动，包含核心数据字段
+2. **广告详情区**：显示单个广告活动的详细信息
+3. **广告效果区**：显示广告活动的效果数据和图表
+4. **AI优化区**：显示AI优化建议和结果
+5. **自动调整区**：显示自动调整策略和状态
+
+## 8️⃣ 业务价值
+
+### 核心价值
+- 帮助商户优化广告投放，提高ROI
+- 提供智能广告优化建议，节省时间和成本
+- 实时监控广告效果，及时调整策略
+- 自动调整广告策略，最大化广告效果
+- 分析广告数据，识别最佳投放策略
+
+### 商业闭环
+广告创建 → 投放 → 监控 → AI优化 → 自动调整 → 效果分析 → 策略调整
+
+## 9️⃣ 前端实现要点
+
+### 技术实现
+- 使用React组件化开发
+- 集成Ant Design表格和表单组件
+- 实现数据可视化，使用ECharts或AntV展示广告效果
+- 使用Umi Model管理全局状态
+- 实现实时数据更新和WebSocket连接
+
+### 用户体验
+- 响应式设计，支持多终端访问
+- 操作反馈及时，显示loading和success/error提示
+- 数据可视化，使用图表展示广告效果和趋势
+- 批量操作支持，提高工作效率
+- 广告状态颜色区分，直观显示广告状态
+
+## 🔟 后端服务依赖
+
+### 核心服务
+- AdService：广告活动管理
+- AIService：广告优化建议
+- AdAutoService：自动广告调整
+- AnalyticsService：广告效果分析
+
+### 数据接口
+- GET /api/v1/ads：获取广告活动列表
+- POST /api/v1/ads：创建广告活动
+- PUT /api/v1/ads/:id：更新广告活动
+- PUT /api/v1/ads/:id/status：更新广告活动状态
+- GET /api/v1/ads/:id/analytics：获取广告效果分析
+- POST /api/v1/ads/:id/ai-optimize：获取AI优化建议
+- POST /api/v1/ads/:id/auto-adjust：启用自动调整策略
--- a/docs/ARCHIVE/01_Architecture/frontend/04_IndependentSite.md
+++ b/docs/ARCHIVE/01_Architecture/frontend/04_IndependentSite.md
@@ -0,0 +1,145 @@
+# 独立站 页面前端业务说明书
+
+## 1️⃣ 页面定义
+
+### 页面目标
+帮助商户：
+- 创建和管理独立站
+- 配置独立站的基本信息和设置
+- 管理独立站的商品和订单
+- 分析独立站的运营数据
+- 优化独立站的运营策略
+
+### 页面类型
+- 业务核心页（直接影响独立站运营）
+
+## 2️⃣ 页面核心数据
+
+### 核心数据字段
+- siteId（站点ID）：唯一标识独立站
+- siteName（站点名称）：独立站的名称
+- domain（域名）：独立站的域名
+- status（站点状态）：活跃、暂停、关闭等
+- template（模板）：独立站使用的模板
+- theme（主题）：独立站的主题设置
+- products（商品）：独立站内的商品列表
+- orders（订单）：独立站的订单列表
+- traffic（流量）：独立站的访问流量
+- sales（销售额）：独立站的销售数据
+- createdAt（创建时间）：独立站的创建时间
+- updatedAt（更新时间）：独立站的更新时间
+
+## 3️⃣ 页面核心操作
+
+### 用户操作
+- 创建独立站：创建新的独立站
+- 配置独立站：设置独立站的基本信息和参数
+- 管理商品：添加、编辑和删除独立站内的商品
+- 管理订单：处理独立站的订单
+- 分析数据：查看独立站的运营数据和分析报告
+- 优化设置：调整独立站的设置以提高运营效果
+
+## 4️⃣ 操作 → 业务结果
+
+### 操作闭环
+1. **创建独立站**
+   - 触发：用户点击"创建独立站"按钮
+   - 服务：IndependentSiteService.createSite
+   - 结果：创建新的独立站，生成站点ID和默认配置
+   - 反馈：显示创建成功提示，跳转到独立站配置页面
+
+2. **配置独立站**
+   - 触发：用户修改独立站的配置
+   - 服务：IndependentSiteService.updateConfig
+   - 结果：更新独立站的配置信息
+   - 反馈：显示配置更新成功提示
+
+3. **管理商品**
+   - 触发：用户在独立站内添加、编辑或删除商品
+   - 服务：IndependentSiteService.manageProducts
+   - 结果：更新独立站的商品列表
+   - 反馈：显示商品操作成功提示
+
+4. **分析数据**
+   - 触发：用户点击"分析数据"按钮
+   - 服务：AnalyticsService.analyzeSiteData
+   - 结果：生成独立站的运营分析报告
+   - 反馈：显示分析结果和图表
+
+## 5️⃣ 页面状态
+
+### 状态定义
+- loading：数据加载中
+- empty：无独立站数据
+- error：操作错误
+- success：操作成功
+- creating：独立站创建中
+- configuring：独立站配置中
+- analyzing：数据分析中
+
+## 6️⃣ 收费点
+
+### 收费触发点
+- 独立站创建：按站点数量收费
+- 高级模板：按模板类型收费
+- 数据分析：按功能使用时间收费
+- 流量优化：按优化效果收费
+
+## 7️⃣ 页面结构
+
+### 主要区域
+1. **独立站列表区**：显示所有独立站，包含核心数据字段
+2. **独立站详情区**：显示单个独立站的详细信息
+3. **站点配置区**：配置独立站的基本信息和设置
+4. **商品管理区**：管理独立站内的商品
+5. **订单管理区**：管理独立站的订单
+6. **数据分析区**：显示独立站的运营数据和分析报告
+
+## 8️⃣ 业务价值
+
+### 核心价值
+- 帮助商户快速创建和管理独立站
+- 提供个性化的独立站配置选项
+- 实现商品和订单的统一管理
+- 提供数据驱动的运营分析
+- 优化独立站的运营效果，提高销售额
+
+### 商业闭环
+独立站创建 → 配置设置 → 商品上传 → 订单处理 → 数据分析 → 优化调整 → 销售增长
+
+## 9️⃣ 前端实现要点
+
+### 技术实现
+- 使用React组件化开发
+- 集成Ant Design表格和表单组件
+- 实现虚拟列表，优化大数据量渲染
+- 使用Umi Model管理全局状态
+- 实现实时数据更新和WebSocket连接
+- 集成第三方模板和主题选择器
+
+### 用户体验
+- 响应式设计，支持多终端访问
+- 操作反馈及时，显示loading和success/error提示
+- 数据可视化，使用图表展示运营数据和分析结果
+- 批量操作支持，提高工作效率
+- 拖拽式页面构建器，方便用户自定义独立站页面
+
+## 🔟 后端服务依赖
+
+### 核心服务
+- IndependentSiteService：独立站管理和配置
+- ProductService：商品管理
+- OrderService：订单管理
+- AnalyticsService：数据分析
+- TemplateService：模板管理
+
+### 数据接口
+- GET /api/v1/sites：获取独立站列表
+- POST /api/v1/sites：创建独立站
+- GET /api/v1/sites/:id：获取独立站详情
+- PUT /api/v1/sites/:id：更新独立站配置
+- DELETE /api/v1/sites/:id：删除独立站
+- GET /api/v1/sites/:id/products：获取独立站商品列表
+- GET /api/v1/sites/:id/orders：获取独立站订单列表
+- GET /api/v1/sites/:id/analytics：获取独立站分析数据
+- GET /api/v1/templates：获取可用模板列表