refactor: 优化代码结构并修复类型问题
- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
This commit is contained in:
355
docs/ARCHIVE/01_Architecture/frontend/01_Product.md
Normal file
355
docs/ARCHIVE/01_Architecture/frontend/01_Product.md
Normal file
@@ -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响应
|
||||
- **防抖节流**: 搜索和筛选操作使用防抖
|
||||
Reference in New Issue
Block a user