# 前端集成蓝图：[功能名称]

> **[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 标准）。