# 页面类型规范

## 列表页

列表页是最常见的页面类型，结构从上到下为：

```
┌─────────────────────────────────────────┐
│  页面标题（16px，字重 500）               │
├─────────────────────────────────────────┤
│  筛选区（一行常用筛选 + "更多筛选"按钮）    │
├─────────────────────────────────────────┤
│  操作按钮区（靠左，如：新增、批量导出）     │
├─────────────────────────────────────────┤
│  列表区（antd Table 组件，表头固定）       │
│  ...                                     │
│  ...                                     │
├─────────────────────────────────────────┤
│  分页组件（固定在底部，右对齐）             │
└─────────────────────────────────────────┘
```

### 筛选区规范

- 默认展示一行常用筛选项（3-5个），使用 antd 的 `Form` + `inline` 布局
- 行末有"查询"和"重置"按钮
- 提供"更多筛选"按钮，点击后从右侧弹出 `Drawer` 抽屉，展示完整筛选条件
- 抽屉底部有"查询"和"重置"按钮

### 操作按钮区规范

- 位于筛选区下方、列表区上方
- 按钮靠左排列
- 常见按钮：新增、批量导出、批量删除等
- 使用 antd 的 `Button` 组件，主操作用 `type="primary"`（主题色背景）

### 列表区规范

- 使用 antd 的 `Table` 组件
- 支持行选择（checkbox）
- 操作列放在最右侧，使用 `Space` 组件排列操作按钮（查看、编辑、删除等）
- 操作按钮使用文字链接风格（`type="link"`）
- 表头使用浅灰色背景

### 分页组件规范

- 使用 antd 的 `Pagination` 组件
- 默认每页 **20** 条，可选 10/20/50
- 模拟数据默认 100 条，支持真实的前端分页逻辑
- 右对齐

### Mock 数据

每个列表页在 `mock/` 目录下创建对应的模拟数据文件，详见 [mock-data.md](./mock-data.md)。

---

## 详情页

根据实际业务需求灵活开发，常见模式：

- **顶部信息卡**：使用 antd 的 `Descriptions` 组件展示基本信息
- **Tab 切换区**：使用 antd 的 `Tabs` 组件组织不同维度信息
- **操作按钮**：页面右上角放置操作按钮（编辑、审批等）
- 从列表页点击"查看"跳转到详情页时，在导航栏新增一个标签

---

## 看板页

根据实际业务需求灵活开发，常见模式：

- **统计卡片**：使用 antd 的 `Card` + `Statistic` 展示关键指标
- **图表区**：预留图表位置，使用 antd 的 `Card` 作为容器
- **列表/表格**：展示 TOP 数据或待办事项
