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