wurenzhi/makemd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
989c4b13a64c30633fd193c5ed4cdfbbf55db8b1
makemd/docs/01_Architecture/frontend/01_Product.md
wurenzhi eafa1bbe94 feat: 添加货币和汇率管理功能 
refactor: 重构前端路由和登录逻辑

docs: 更新业务闭环、任务和架构文档

style: 调整代码格式和文件结构

chore: 更新依赖项和配置文件
2026-03-19 19:08:15 +08:00

3.7 KiB
Raw Blame History

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定价建议
Reference in New Issue View Git Blame Copy Permalink