# 浅红色 UI 规范 · 六、页面与布局

> 返回 [规范目录](README.md)　|　本篇：统计与汇总卡 · 实体卡片 · 综合页面布局示例

---

## 26. 统计与汇总卡（Dashboard）

> 仪表盘顶部的指标卡与汇总卡，用于一屏概览关键数据。

### 26.1 指标卡（已用 / 可用 + 迷你环）

横向排列的使用率卡，左侧数值、右侧迷你环形进度。

| 元素 | 配色 |
|------|------|
| 卡标题（如"账号使用率"） | `14px Regular`，`#575757` (FS-004-09) |
| 主数值（已用，如 `139`） | D-DIN `26px Bold`，`#222222` (FS-004) |
| 次数值（可用，如 `2`） | D-DIN，`#FF9900`（警告橙，FS-001-09） |
| 数值下标签（已用 / 可用） | `12px`，`#A6A6A6` (FS-004-07) |
| 迷你环 + 中心百分比 | 按使用率阈值取语义色（§20）：低→绿、中→橙、高→红；轨道 `#F5F5F5` |
| 卡间竖分隔 | `1px solid #E8E8E8` (FS-004-04) |

### 26.2 汇总卡（总量 + 正常 / 异常 + 环形）

| 元素 | 配色 |
|------|------|
| 总量数值（如 `300`） | D-DIN，`#222222` (FS-004) |
| 正常数值（如 `270`） | `#FF9900`（橙）或成功绿，按业务定 |
| 异常数值（如 `30`） | `#F5222D`（错误红，ZS-001-09） |
| 标签（总量 / 正常 / 异常） | `#575757` (FS-004-09) |
| 环形图 | 正常段绿 `#97EBCD`、异常段红 `#FA9196`（§25.1 色序）；中心主数（如 `40%`）`#222222`、说明（异常率）`#A6A6A6` |

### 26.3 时间范围切换（今日 / 近7日）

分段选择，沿用 §14.3 按钮式页签：

| 状态 | 配色 |
|------|------|
| 选中（今日） | 背景 `#F5222D` (ZS-001-09)，文字 `#FFFFFF` |
| 未选（近7日） | 背景 `#FFFFFF`，边框 `#DBDBDB`，文字 `#222222` |

### 26.4 资源检索条

`[资源类型 ▾]  [请输入关键词]  [搜索]`：下拉 + 输入框沿用 §13；搜索为主按钮（§5.2.1 红）。配合右侧表格（§22），表头含排序箭头（默认 `#A6A6A6`，激活 `#F5222D`）。

---

## 27. 实体卡片（列表卡 / 任务集卡）

> 卡片网格陈列实体（任务集 / 人物 / 项目等），含主数据、属性表、负责人操作按钮与空状态。

### 27.1 卡片结构

| 元素 | 配色 |
|------|------|
| 卡片背景 / 边框 / 阴影 | `#FFFFFF` / `1px solid #E8E8E8` / §3.1.3 一级阴影，圆角 `4px` |
| 主标题（如人名） | `16px Bold`，`#222222` (FS-004) |
| 副标题（项目名） | `14px Regular`，`#575757` (FS-004-09) |
| 创建时间 | `12px`，`#A6A6A6` (FS-004-07) |
| 主指标（目标数量，如 `10247`） | D-DIN `26px Bold`，`#F5222D` (ZS-001-09)；标签"目标数量" `#A6A6A6` |
| 属性面板（社交媒体(52)） | 背景 `#FEF6F6` (ZS-001-02)；条目名 `#575757`、数值 `#F5222D` (ZS-001-09) |
| 联系/备注行 | `#575757` (FS-004-09)，时间后缀 `#A6A6A6` |
| 底部负责人按钮 | 通栏主按钮：背景 `#F5222D`、文字 `#FFFFFF`（§5.2.1） |

### 27.2 卡片 Hover 操作菜单

卡片右上 `⋯` 触发**深色下拉**：

| 元素 | 配色 |
|------|------|
| 菜单背景 | `#3D3D3D` (FS-004-10)，圆角 `4px`，阴影 §3.1.3 二级 |
| 菜单项（修改 / 删除） | 文字 + 图标 `#FFFFFF`；hover 背景 `rgba(255,255,255,0.1)` |

### 27.3 空状态（暂无任务）

| 元素 | 配色 |
|------|------|
| 空状态插图 / 图标 | 中性灰 `#C1C1C1` (FS-004-06) |
| 空状态文字（暂无任务） | `14px`，`#A6A6A6` (FS-004-07) |
| 主指标归零 | 数值显示 `0`，颜色同 §27.1（红） |

---

## 28. 综合页面布局示例

> 标准后台页面 = 顶部红底导航（§7.1）+ 左侧分级侧边栏（§7.3 / §7.6）+ 右侧内容区。

### 28.1 仪表盘页

```
┌ Header（红底，§7.1）────────────────────────────────────────────┐
├──────┬───────────────────────────────────────────────────────────┤
│ 侧栏  │ 面包屑（§8.1）                                            │
│(§7.3)│ ┌ 指标卡 × N（§26.1，横向等分，竖线分隔）───────────────┐ │
│      │ ├ 汇总卡(§26.2) │ 折线图(§25.4) │ 资源表(§22 + 检索§26.4)│ │
│      │ └ 异常分布图 …                                            │ │
└──────┴───────────────────────────────────────────────────────────┘
```

- 内容区背景 `#FAFAFA` (FS-004-02)，卡片白底浮起；模块间距 `--spacing-5` (24px)，卡内边距 `--spacing-4` (16px)

### 28.2 列表卡片页

```
┌ Header（红底）─────────────────────────────────────────────────┐
├──────┬───────────────────────────────────────────────────────────┤
│ 侧栏  │ [搜索框] [搜索] [+ 添加任务集]            排序 [创建时间 ▾]│
│      │ ┌实体卡┐ ┌实体卡┐ ┌实体卡┐ ┌实体卡┐   （§27，等宽网格） │
│      │ └─────┘ └─────┘ └─────┘ └─────┘                          │
│      │ ┌实体卡┐ ┌空状态┐ …                                       │
└──────┴───────────────────────────────────────────────────────────┘
```

- 卡片网格列间距 / 行间距 `--spacing-5` (24px)
- 顶部工具条：搜索输入（§13）+ 搜索主按钮（§5.2.1）+ "添加"主按钮；右侧排序下拉（§13）
- "+ 添加任务集"为主按钮（红 `#F5222D` + 白字 + 加号图标，§5.3.2）

---

> 返回 [规范目录](README.md)