# Antd 电商后台首页

## 📋 业务与功能

### 1.1 核心目标

页面用于展示电商运营关键指标、趋势与业务列表，支持高效浏览与决策。

### 1.2 功能清单

- **侧边菜单**：提供后台导航入口（使用 `SideMenu` 元素，默认内置菜单项）
- **页面头部**：显示标题、欢迎语、日期范围选择、刷新/导出按钮
- **指标卡片**：展示总销售额、访问量、支付订单、转化率及同比信息
- **销售趋势**：折线图展示销量与访问量趋势，带时间范围标签
- **品类占比**：环形饼图展示品类销售占比
- **最近订单**：订单表格展示与“详情”操作
- **热销商品**：Top 商品列表与销量/增长率展示

### 1.3 交互要点

- 订单表格“详情”按钮：点击后选中订单并触发 `onOrderClick` 事件，携带订单数据
- 热销商品列表项：预留点击交互，触发 `onProductClick` 事件（由外部绑定行为）
- 刷新/导出按钮与时间范围标签：当前为展示占位，可接入动作与数据刷新逻辑
- 侧边菜单交互（展开/折叠/选中）：由 `SideMenu` 组件内部处理

---

## 📊 内容规划

### 2.1 信息架构

```
Antd 电商后台首页
├── 侧边菜单
├── 页面头部
│   ├── 标题与欢迎语
│   └── 操作区（日期范围 / 刷新 / 导出）
├── 指标卡片区（4项）
├── 图表区
│   ├── 销售趋势折线图
│   └── 品类占比饼图
└── 列表区
    ├── 最近订单表格
    └── 热销商品列表
```

### 2.2 数据来源

- **数据类型**：订单列表（`orders`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `id`: 订单号
  - `customer`: 客户名称
  - `amount`: 订单金额
  - `status`: 订单状态（completed/processing/pending/rejected）
  - `date`: 下单日期
- **数据类型**：热销商品列表（`products`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `id`: 商品 ID
  - `name`: 商品名称
  - `sales`: 销量
  - `growth`: 增长率（百分比）
- **数据类型**：指标与图表数据
- **数据源**：内置示例（可扩展为外部数据源）
- **关键字段**：指标值、趋势序列、品类占比

### 2.3 内容示例

**订单示例**：

- `ORD-2023001` / 张三 / ¥1299.00 / completed / 2023-10-24

**商品示例**：

- 无线降噪耳机 Pro / 销量 1234 / +12%

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：双栏（左侧固定导航 + 右侧内容区）
- **容器宽度**：流式
- **关键尺寸**：
  - 侧边菜单宽度：展开 `240px` / 折叠 `64px`
  - 指标卡片：4 列栅格（lg=6）
  - 图表区：16/8 栅格分栏
  - 列表区：16/8 栅格分栏

### 3.2 响应式适配

- **桌面端（≥1200px）**：双栏布局，图表与列表保持 16/8 分栏
- **平板端（768-1199px）**：指标卡片两列排列，图表与列表纵向堆叠
- **移动端（<768px）**：所有模块单列堆叠，表格启用横向滚动

---

## 🎨 视觉规范

### 4.1 设计规范来源

**设计依据**：

- [x] 用户提供的设计规范：`/docs/设计规范.UIGuidelines.md`
- [x] 主题设计系统：`/src/themes/antd-new/`（DESIGN-SPEC.md + designToken.json + globals.css）

### 4.2 自定义设计要点

**自定义色彩**（如有）：

- 无

**自定义尺寸**（如有）：

- 无

**其他自定义规范**（如有）：

- 无

### 4.3 组件状态

- **默认态（default）**：卡片与图表为白底，表格与列表为普通展示
- **悬停态（hover）**：按钮、列表项、表格行显示轻微高亮
- **选中态（selected）**：侧边菜单与表格选中行高亮
- **加载态（loading）**：可用于数据刷新时的按钮或表格加载

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）

### 5.2 动作列表（actionList）

### 5.3 变量列表（varList）

### 5.4 配置项列表（configList）

### 5.5 数据项列表（dataList）

**数据结构**：

&nbsp;