Files
makemd/docs/01_Architecture/frontend/Product.front.md
wurenzhi 6d0d2b6157 feat: 添加前端页面和业务说明书
refactor(server): 重构服务层代码结构
feat(server): 添加基础设施、跨境电商、AI决策等核心服务
docs: 完善前端业务说明书和开发进度文档
style: 格式化代码和文档
2026-03-18 19:12:38 +08:00

124 lines
3.7 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Product 页面前端业务说明书
## 1⃣ 页面定义
### 页面目标
帮助商户:
- 管理商品信息
- 计算商品利润
- 优化商品定价(核心)
- 提升商品ROI
### 页面类型
- 业务核心页(直接影响赚钱)
## 2⃣ 页面核心数据
### 核心数据字段
- cost成本包含采购成本、运费、关税等
- price售价商品的销售价格
- profit利润售价减去成本
- roiROI投资回报率
- stock库存商品库存数量
- aiPriceSuggestionAI建议售价基于市场数据和成本的智能定价建议
- 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操作成功
- optimizingAI处理中
- 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定价建议