# 两级运营数据展示页

## 📋 业务与功能

### 1.1 核心目标
提供按**地市维度**聚合的四类核心指标（朋友圈发布/互动、1V1群发/互动）可视化，支持明细追溯与汇总分析，帮助运营团队掌握各地市执行情况与互动效果，优化内容策略与资源分配。

### 1.2 功能清单

- **筛选功能**：
  - 时间粒度切换（日/周/月）
  - 时间选择器（支持按日、按周、按月选择）
  - 地市筛选（多选，支持“全省”）
- **地市汇总视图**（默认）：
  - 按地市展示发布次数与互动量
  - 支持排序
  - 底部“全省合计”行
- **明细表视图**：
  - 展示原始任务级记录
  - 包含任务类型、发送日期、互动数据等
- **Tab 切换**：在汇总表与明细表之间切换

### 1.3 交互要点

- **筛选联动**：修改时间或地市筛选条件后，下方表格自动刷新。
- **Tab 切换**：切换 Tab 时，保留当前的筛选条件并加载对应视图的数据。
- **排序**：点击汇总表的表头可进行升降序排序。
- **加载状态**：数据请求过程中显示 Loading 状态。
- **空状态**：无数据时显示“当前筛选条件下暂无数据”。

---

## 📊 内容规划

### 2.1 信息架构

```
两级运营数据展示页
├── 顶部筛选区
│   ├── 时间粒度切换 (RadioGroup)
│   ├── 时间选择器 (DatePicker)
│   └── 地市选择器 (Select/TreeSelect)
├── 视图切换区 (Tabs)
│   ├── 地市汇总表 (Tab 1)
│   └── 明细表 (Tab 2)
└── 内容展示区
    ├── 汇总表格 (Table)
    └── 明细表格 (Table)
```

### 2.2 数据来源

- **数据类型**：运营统计数据（Mock）
- **数据源**：前端模拟生成
- **关键字段**：
  - **汇总表**：
    - `city`: 地市名称
    - `momentsCount`: 朋友圈发布次数
    - `groupMsgCount`: 1V1群发次数
    - `momentsInteraction`: 朋友圈互动量
    - `groupMsgInteraction`: 1V1群发互动量
  - **明细表**：
    - `city`: 任务归属地市
    - `taskType`: 任务类型（朋友圈/1V1群发）
    - `sendDate`: 发送日期
    - `interactionDate`: 互动发生日期
    - `interactionCount`: 互动量

### 2.3 内容示例

- **地市**：哈尔滨、齐齐哈尔、牡丹江、佳木斯、大庆、鸡西、双鸭山、伊春、七台河、鹤岗、黑河、绥化、大兴安岭。
- **时间格式**：
  - 日：2026-03-13
  - 周：2026年第10周
  - 月：2026年3月

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：单栏布局
- **容器宽度**：流式，适应屏幕宽度
- **结构**：
  - 顶部：Card 容器包裹筛选条件
  - 主体：Card 容器包裹 Tabs 和 Table
- **间距**：
  - 筛选区与主体区之间间距 16px
  - 筛选条件之间间距 16px

### 3.2 响应式适配

- **桌面端（≥1200px）**：筛选条件横向排列，表格完整展示。
- **移动端（<768px）**：筛选条件纵向堆叠，表格支持横向滚动。

---

## 🎨 视觉规范

### 4.1 设计规范来源

**本设计基于**：
- [ ] 用户提供的设计规范
- [x] 主题设计系统：`/src/themes/antd-new/` (默认)
- [ ] 内置设计指导

### 4.2 自定义设计要点

- **全省合计行**：汇总表最后一行加粗显示，背景色微调以示区分（如 `#fafafa`）。
- **表头**：使用浅灰色背景。

### 4.3 组件状态

- **加载态**：Table 组件自带 `loading` 属性。
- **空状态**：Table 组件自带 `Empty` 状态展示。

---

## ⚙️ Axure API 说明

不涉及 Axure API，纯 React 实现。