122 lines
6.0 KiB
Markdown
122 lines
6.0 KiB
Markdown
# 浅红色 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)
|