6.0 KiB
6.0 KiB
浅红色 UI 规范 · 六、页面与布局
返回 规范目录 | 本篇：统计与汇总卡 · 实体卡片 · 综合页面布局示例
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）
返回 规范目录