46 lines
2.2 KiB
Markdown
46 lines
2.2 KiB
Markdown
|
# 前端集成蓝图：[功能名称]
|
|||
|
|
|
|||
|
|
> **[Date: YYYY-MM-DD]**：由后端开发在完成功能逻辑后产出，用于指导 Console 端全栈实现。
|
|||
|
|
|
|||
|
|
## 1. 业务意图 (Business Intent)
|
|||
|
|
- **核心价值**：描述前端如何呈现后端功能，以及如何通过交互提升业务效率。
|
|||
|
|
- **关联后端 Service**：`[ServiceName].ts`
|
|||
|
|
|
|||
|
|
## 2. UI/UX 布局方案 (Layout Design)
|
|||
|
|
- **页面入口**：(例如：Console -> 订单管理 -> 订单工作台)
|
|||
|
|
- **展示组件**：
|
|||
|
|
- [ ] **数据卡片**：展示关键指标和汇总信息。
|
|||
|
|
- [ ] **表格视图**：展示详细数据列表，支持排序和筛选。
|
|||
|
|
- [ ] **表单组件**：用于数据录入和编辑。
|
|||
|
|
- **交互流程**：
|
|||
|
|
```text
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
| [Icon] 功能名称 |
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
| 关键指标 1: 值 | 关键指标 2: 值 | 关键指标 3: 值 |
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
| [ 按钮 1 ] [ 按钮 2 ] |
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
| 表格标题 1 | 表格标题 2 | 表格标题 3 | 操作 |
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
| 数据 1 | 数据 2 | 数据 3 | [编辑] [删除] |
|
|||
|
|
+-----------------------------------------------------------+
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 3. API 交互契约 (API Integration)
|
|||
|
|
- **数据获取**：`GET /api/v1/[resource]`
|
|||
|
|
- **数据创建**：`POST /api/v1/[resource]`
|
|||
|
|
- **数据更新**：`PUT /api/v1/[resource]/:id`
|
|||
|
|
- **数据删除**：`DELETE /api/v1/[resource]/:id`
|
|||
|
|
- **关键字段映射**：
|
|||
|
|
- 后端字段 -> 前端展示字段
|
|||
|
|
- **状态流转**：
|
|||
|
|
- 点击操作按钮 -> 发送 API 请求 -> 按钮进入 `Loading` 状态 -> 成功后 Toast 提示并刷新数据。
|
|||
|
|
|
|||
|
|
## 4. 生产校验项 (FE Readiness)
|
|||
|
|
- [ ] 移动端适配性校验。
|
|||
|
|
- [ ] 关键数据脱敏展示。
|
|||
|
|
- [ ] 错误边界处理（API 500 时的 Fallback 视图）。
|
|||
|
|
- [ ] 性能优化（大数据量下的渲染性能）。
|
|||
|
|
- [ ] 可访问性校验（符合 WCAG 标准）。
|