# 数据看板

## 📋 业务与功能

### 1.1 核心目标
> 展示托管账号与客户的整体规模与运营趋势，为管理者提供总览视角。

### 1.2 功能清单
- **托管账号及客户**：关键指标、人员分布、客户规模
- **运营趋势**：趋势图展示活跃会话、客户增长
- **快捷筛选**：时间范围、组织筛选

### 1.3 交互要点
- 侧边菜单点击 → 跳转到对应页面
- 时间范围切换 → 更新趋势图
- 指标卡片点击 → 触发事件以联动详情

---

## 📊 内容规划

### 2.1 信息架构
```
数据看板
├── 指标概览（托管账号及客户）
└── 运营趋势
```

### 2.2 数据来源
- **数据类型**：指标数据、趋势数据
- **数据源**：用户提供（功能清单）→ 生成示例数据
- **关键字段**：
  - `metric_name`: 指标名称
  - `metric_value`: 指标值
  - `trend_series`: 趋势数据

### 2.3 内容示例
- 托管账号数：3,284
- 托管客户数：2,489,101
- 活跃会话：86,320

---

## 🎨 布局与结构

### 3.1 整体布局
- **布局模式**：上下分区
- **容器宽度**：流式
- **关键尺寸**：趋势图卡片高度 360px

### 3.2 响应式适配
- **桌面端（≥1200px）**：指标四列 + 趋势全宽
- **平板端（768-1199px）**：指标两列
- **移动端（<768px）**：指标一列

---

## 🎨 视觉规范

### 4.1 设计规范来源
**本设计基于**：
- [ ] 用户提供的设计规范：无
- [x] 主题设计系统：`/src/themes/antd-new/`
- [x] 内置设计指导：`/assets/docs/设计指导（简约）.md`

### 4.2 自定义设计要点
- 指标区采用低饱和背景提升可读性
- 趋势图使用简洁线形图

### 4.3 组件状态
- **默认态（default）**：指标卡片
- **悬停态（hover）**：卡片微提升

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）
| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `on_range_change` | `string` | 切换时间范围 | payload 为范围 key |
| `on_metric_click` | `string` | 点击指标卡片 | payload 为指标 key |

### 5.2 动作列表（actionList）
| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `set_range` | `string` | 范围 key | 设置时间范围 |
| `update_metrics` | `string` | JSON 字符串 | 更新指标数据 |

### 5.3 变量列表（varList）
| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `active_range` | `string` | `7d` | 当前时间范围 |
| `metric_count` | `number` | 0 | 指标数量 |

### 5.4 配置项列表（configList）
| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `default_range` | `string` | `7d` | 默认范围 |
| `show_chart` | `boolean` | `true` | 是否显示趋势图 |

### 5.5 数据项列表（dataList）
**数据结构**：
```typescript
{
  metrics: {
    key: string;
    name: string;
    value: number | string;
    delta: string;
  }[];
  trend: {
    dates: string[];
    series: { name: string; data: number[] }[];
  };
}
```