Files

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

- 移除未使用的TabPane组件
- 修复类型定义和导入方式
- 优化mock数据源的环境变量判断逻辑
- 更新文档结构并归档旧文件
- 添加新的UI组件和Memo组件
- 调整API路径和响应处理

2026-03-23 12:41:35 +08:00

10 KiB

Raw Blame History

Product 页面前端业务说明书

1️⃣ 页面定义

页面目标

帮助商户：

管理商品信息
计算商品利润
优化商品定价（核心）
提升商品ROI

页面类型

业务核心页（直接影响赚钱）

2️⃣ 页面核心数据

核心数据字段

cost（成本）：包含采购成本、运费、关税等
price（售价）：商品的销售价格
profit（利润）：售价减去成本
roi（ROI）：投资回报率
stock（库存）：商品库存数量
aiPriceSuggestion（AI建议售价）：基于市场数据和成本的智能定价建议
salesVolume（销量）：商品销售数量
salesTrend（销售趋势）：近期销售数据趋势

3️⃣ 页面核心操作

用户操作

创建商品：添加新商品信息
修改价格：调整商品售价
查看ROI：查看商品的投资回报率
使用AI定价：获取AI的定价建议并应用
调整库存：更新商品库存数量
查看销售趋势：分析商品销售数据

4️⃣ 操作 → 业务结果

操作闭环

修改价格
- 触发：用户点击"修改价格"按钮
- 服务：ProductService.updatePrice
- 结果：重新计算利润和ROI，更新前端展示
- 反馈：如果ROI下降，标红提示；如果ROI提升，显示绿色提示
使用AI定价
- 触发：用户点击"AI定价"按钮
- 服务：AIService.optimizeProductForPlatform
- 结果：获取AI建议售价，显示在界面上
- 反馈：显示加载状态，完成后显示建议价格
- 收费：每次调用AI定价服务收费
调整库存
- 触发：用户修改库存数量
- 服务：InventoryService.updateStock
- 结果：更新库存数据，触发库存预警（如果库存过低）
- 反馈：显示库存更新成功提示

5️⃣ 页面状态

状态定义

loading：数据加载中
empty：无数据
error：操作错误
success：操作成功
optimizing：AI处理中
warning：库存不足或ROI过低

6️⃣ 收费点

收费触发点

AI定价：按调用次数收费
高级分析：按功能使用时间收费
批量操作：按操作次数收费

7️⃣ 页面结构

主要区域

商品列表区：显示所有商品，包含核心数据字段
商品详情区：显示单个商品的详细信息
定价优化区：显示AI定价建议和ROI分析
库存管理区：显示和管理商品库存
销售分析区：显示商品销售趋势和分析

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根据市场动态计算

配置表单：

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设计：

// 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;
}

前端组件设计

核心组件：

// 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响应
防抖节流: 搜索和筛选操作使用防抖

10 KiB Raw Blame History Unescape Escape

Product 页面前端业务说明书

1️⃣ 页面定义

页面目标

页面类型

2️⃣ 页面核心数据

核心数据字段

3️⃣ 页面核心操作

用户操作

4️⃣ 操作 → 业务结果

操作闭环

5️⃣ 页面状态

状态定义

6️⃣ 收费点

收费触发点

7️⃣ 页面结构

主要区域

8️⃣ 业务价值

核心价值

商业闭环

9️⃣ 前端实现要点

技术实现

用户体验

🔟 后端服务依赖

核心服务

数据接口

1️⃣1️⃣ 商品中心前端架构（Product Center Frontend）

页面结构

核心页面设计

SPU列表页

SKU列表页

Listing列表页

价格策略配置页

SKU映射页

前端状态管理

前端组件设计

前端交互流程

商品发布流程

价格调整流程

前端性能优化

10 KiB

Raw Blame History