309 lines
12 KiB
Markdown
309 lines
12 KiB
Markdown
# 浅红色 UI 规范 · 四、数据展示
|
||
|
||
> 返回 [规范目录](README.md) | 本篇：弹出式窗口 · 卡片 · 折叠面板 · 进度条 · 表格 · 标签 · 时间轴
|
||
|
||
---
|
||
|
||
## 17. 弹出式窗口（Modal / Dialog）
|
||
|
||
> 用于聚焦的多步表单 / 确认操作。内部可承载页签、步骤条、表单控件。
|
||
|
||
### 17.1 容器规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 背景 | `#FFFFFF` (FS-004-01)，圆角 `4px` |
|
||
| 阴影 | `0 8px 32px rgba(34, 34, 34, 0.16)`（§3.1.3 三级阴影） |
|
||
| 遮罩层 | `rgba(34, 34, 34, 0.45)`（基于 FS-004） |
|
||
| 标题区 | 左侧 `3px` 主色红竖条 `#F5222D` + 标题 `16px Bold #222222` |
|
||
| 关闭按钮 `×` | `#A6A6A6` (FS-004-07)，hover `#F5222D` |
|
||
| 内边距 | `--spacing-5` (24px) |
|
||
| 底部操作区 | 右对齐，主按钮在最右（§5.3.4） |
|
||
|
||
### 17.2 内部页签与步骤条
|
||
|
||
- 顶部页签沿用 §11.1 横向页签（Tab 激活红字 + 红下划线，基线 `#E8E8E8`）。
|
||
- 步骤条沿用 §10.2 弹窗步骤条（完成态红描边对勾、当前态红实心、未开始灰描边，连接线 `1px dashed`）。
|
||
|
||
### 17.3 表单控件补充（Modal 内常用）
|
||
|
||
| 控件 | 配色 |
|
||
|------|------|
|
||
| 必填星号 `*` | `#F5222D` (ZS-001-09)，置于 label 前 |
|
||
| 下拉选择（Select，`请选择 ▾`） | 同输入框（§13），箭头 `#A6A6A6`，聚焦边框 `#F5222D` |
|
||
| 日期 / 时间选择器（📅） | 输入框 + 日历图标 `#A6A6A6`；区间用"起 至 止"两段 |
|
||
| 文本区域（Textarea） | 同输入框，`resize: vertical`，最小高度约 `80px` |
|
||
| 数值 + 单位（如 `100 天`） | 输入框 + 尾部 addon（背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757`） |
|
||
| 复选框（Checkbox） | 未选边框 `#DBDBDB`；选中背景 `#F5222D` + 对勾 `#FFFFFF` |
|
||
| 错误态 | 控件边框 `1px solid #F5222D`，下方红色提示文字 `12px #F5222D`（如"输入表单内容报错"） |
|
||
|
||
---
|
||
|
||
## 18. 数据展示 · 卡片（Card）
|
||
|
||
> 用于陈列结构化信息（人物 / 媒体 / 群组等档案）。在 §3 卡片基础上扩展"分级信息卡片"。
|
||
|
||
### 18.1 卡片头部
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 类目竖条（标题前） | `3px` 主色红 `#F5222D` (ZS-001-09) |
|
||
| 标题（如「个体」「媒体」） | `16px Bold`，`#222222` (FS-004) |
|
||
| 关闭 `×` | `#A6A6A6` (FS-004-07)，hover `#F5222D` |
|
||
| 右上操作（查看档案） | 小尺寸主按钮 `#F5222D` + 白字（§5.1 小，含图标） |
|
||
|
||
### 18.2 标签 / 属性 Tag
|
||
|
||
| 类型 | 背景 | 文字 | 来源 |
|
||
|------|------|------|------|
|
||
| 人物属性 / 红色标签 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 主色红 |
|
||
| 立场 / 成功类（绿） | `#EEFCF7` (FS-002-03) | `#189D72` (FS-002-10) | 渐绿系 |
|
||
| 状态签（右上角强调） | `transparent` | `#F5222D` (ZS-001-09) | 主色红 |
|
||
| 话题标签（#话题） | `transparent` | `#F5222D` (ZS-001-09) | 主色红，`#` 前缀 |
|
||
|
||
- Tag 圆角 `2px`，内边距 `0 8px`，字号 `12px`
|
||
|
||
### 18.3 卡片内页签与信息行
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 页签（基本信息 / 线下活动 / 线上发声） | 激活 `#F5222D` + 红下划线；默认 `#222222`（§11.1.1） |
|
||
| 页签红点提示（•） | `#F5222D` (ZS-001-09)，标识有更新 |
|
||
| 信息项标签（国家/地区、职务…） | `#A6A6A6` (FS-004-07) |
|
||
| 信息项取值 | `#222222` (FS-004) |
|
||
| 来源平台图标（如 Facebook） | 平台原色（蓝 `#0079FE` 近似），不纳入主题强调色 |
|
||
|
||
---
|
||
|
||
## 19. 数据展示 · 折叠面板（Collapse）
|
||
|
||
> 用于长内容的收起 / 展开。含列表概览折叠、带图标折叠、手风琴折叠、信息流折叠四类。
|
||
|
||
### 19.1 列表概览折叠（含 + 图标变体）
|
||
|
||
| 状态 | 构成 | 配色 |
|
||
|------|------|------|
|
||
| 收起 | 标题 + 描述 + 右侧 `▾` | 标题 `#222222` (FS-004)、描述 `#A6A6A6` (FS-004-07)、箭头 `#A6A6A6` |
|
||
| 展开 | 上述 + 下方内容区 | 内容区背景 `#FAFAFA` (FS-004-02)，箭头旋转为 `^` |
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器边框 | `1px solid #DBDBDB` (FS-004-05)，圆角 `4px` |
|
||
| 头部内边距 | `--spacing-4` (16px) |
|
||
| 左侧图标（带图标变体） | 占位 `40px`，图标 `#A6A6A6` |
|
||
|
||
### 19.2 手风琴折叠（Accordion）
|
||
|
||
多面板同列堆叠，同一时刻通常仅展开一项。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 项分隔 | `1px solid #E8E8E8` (FS-004-04) |
|
||
| 标题 | `#222222` (FS-004)，前置 `▾ / >` 箭头 `#A6A6A6` |
|
||
| 收起 / 展开 链接 | 文本按钮 `#F5222D` (ZS-001-09) |
|
||
| 展开正文 | `#575757` (FS-004-09)，背景 `#FFFFFF` |
|
||
|
||
### 19.3 信息流折叠（Feed）
|
||
|
||
用于资讯流条目的展开详情。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 前置「标签」Tag | 背景 `#FEEDED` (ZS-001-03)，文字 `#F5222D` (ZS-001-09) |
|
||
| 条目标题 | `#222222` (FS-004)，`14px Medium` |
|
||
| 热度计数（🔥 6405） | 火苗图标 `#FF9900` (FS-001-09)，数字 `#575757` (FS-004-09) |
|
||
| 收起 / 展开 链接 + 箭头 | `#F5222D` (ZS-001-09) |
|
||
| 分节标题（【热点首发】/【应对建议】） | `#F5222D` (ZS-001-09)，`Medium` |
|
||
| 来源 / 作者行（社交媒体 \| 平台 \| @用户） | `#A6A6A6` (FS-004-07) |
|
||
| 外链 URL | `#0079FE` (ZS-002-09)，hover 下划线 |
|
||
| 日期 | `#A6A6A6` (FS-004-07) |
|
||
| 正文 | `#575757` (FS-004-09) |
|
||
| 缩略图 | 圆角 `2px`，间距 `--spacing-1` (4px) |
|
||
|
||
---
|
||
|
||
## 21. 数据展示 · 进度条（Progress）
|
||
|
||
### 21.1 标准进度条
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 轨道背景 | `#F5F5F5` (FS-004-03) |
|
||
| 轨道高度 | `8px`，圆角全圆 |
|
||
| 已完成段 | 按语义取色（§20）：成功绿 / 失败红 / 警告橙 |
|
||
| 百分比文字 | `#222222` (FS-004)，置于条右侧 |
|
||
| 末端状态图标 | 成功 ✓ `#2FD69A`；失败 ✗ `#F5222D`（橙色进行态可不带图标） |
|
||
|
||
### 21.2 小型进度条
|
||
|
||
放在较窄区域内（如表格单元格）。规格同 §21.1，仅尺寸缩小：
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 轨道高度 | `4px` |
|
||
| 百分比 / 图标 | 字号缩至 `12px`，图标 `12px` |
|
||
|
||
### 21.3 环形进度条
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 轨道环 | `#F5F5F5` (FS-004-03) |
|
||
| 进度环 | 按语义取色（§20），线宽 `6px`，圆头端点 |
|
||
| 中心主数字（如 `82.0%`） | `#222222` (FS-004)，D-DIN |
|
||
| 中心名称 | `12px Regular`，`#A6A6A6` (FS-004-07) |
|
||
|
||
> 进度环颜色按阈值映射（如低→绿、中→橙、高→红）由业务自定义，但必须取自 §20 语义色。
|
||
|
||
---
|
||
|
||
## 22. 数据展示 · 表格（Table）
|
||
|
||
### 22.1 结构规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 表头背景 | `#FFFFFF`（或浅红 `#FEF6F6` ZS-001-02 强调首行） |
|
||
| 表头文字 | `14px Medium`，`#222222` (FS-004) |
|
||
| 单元格文字 | `14px Regular`，`#222222` |
|
||
| 行高 | `48px` |
|
||
| 行分隔 | `1px solid #F5F5F5` (FS-004-03) |
|
||
| 行 Hover | 背景 `#FAFAFA` (FS-004-02) |
|
||
| 斑马纹（可选） | 偶数行 `#FAFAFA` (FS-004-02) |
|
||
| 复选框（选中） | 填充 `#F5222D` + 对勾 `#FFFFFF` |
|
||
|
||
### 22.2 状态列（圆点 + 文字）
|
||
|
||
| 文字 | 圆点色 | 来源 |
|
||
|------|--------|------|
|
||
| 普通 | `#2FD69A`（成功绿） | FS-002-09 |
|
||
| 异常 | `#F5222D`（错误红） | ZS-001-09 |
|
||
| 特殊 | `#FF9900`（警告橙） | FS-001-09 |
|
||
|
||
- 文字统一 `#222222` (FS-004)，圆点直径 `6px`，与文字间距 `--spacing-1` (4px)
|
||
|
||
### 22.3 整体状态列（状态标签）
|
||
|
||
使用 §23 浅底状态标签：进行中（橙）/ 已完成（绿）/ 已失败（红）。
|
||
|
||
### 22.4 操作列
|
||
|
||
文本按钮 + 图标，沿用 §5.3.3：查看 / 配置 等均为 `#F5222D` (ZS-001-09)，hover `#CF1322`，按钮间距 `--spacing-3` (12px)。
|
||
|
||
### 22.5 单元格内编辑报错
|
||
|
||
可编辑单元格（如 `100 [M]`）校验失败：输入框边框 `1px solid #F5222D`，红色气泡提示"Table 内输入报错"（背景 `#F5222D`、白字 `12px`，§12.3 同款）。
|
||
|
||
---
|
||
|
||
## 23. 数据展示 · 标签（Tag / Badge）
|
||
|
||
### 23.1 标签形式
|
||
|
||
| 形式 | 用途 | 配色 |
|
||
|------|------|------|
|
||
| 文字按钮标签 | 重点突出标记属性 | 三种强度：灰底 `#F5F5F5`/`#575757`；浅红底 `#FEEDED`/`#F5222D`；实红 `#F5222D`/`#FFFFFF` |
|
||
| 图标 + 文字按钮标签 | 增强辨识度 | 灰底 + 平台原色图标（如 Twitter 蓝）；或实红 `#F5222D` + 白字 + ✓ |
|
||
| 圆点 + 文字标签 | 属性多 / 复杂、无需突出 | 圆点按语义色（普通绿 / 特殊橙 / 异常红），文字 `#222222` |
|
||
| 动态标签 | 可增删（筛选列表、关键词） | 已加：灰底 `#F5F5F5` + `×`；新增入口：虚线框 `#DBDBDB` + "+ 标签" |
|
||
|
||
- 标签圆角 `2px`，高度 `24px`，内边距 `0 8px`，字号 `12px`
|
||
|
||
### 23.2 状态标签（Status Badge）
|
||
|
||
四种呈现风格，颜色全部取自 §20 语义状态色：
|
||
|
||
| 风格 | 说明 |
|
||
|------|------|
|
||
| ① 浅底彩字 | 浅底背景 + 语义文字色（默认推荐，弱干扰） |
|
||
| ② 实填白字 | 语义实填背景 + 白字（强调态，用于重点状态） |
|
||
| ③ 图标 + 浅底彩字 | ① 基础上前置语义图标 |
|
||
| ④ 图标 + 彩字（无底） | 仅图标 + 文字，最轻量 |
|
||
|
||
常见状态与语义映射：
|
||
|
||
| 状态 | 语义 / 取色 |
|
||
|------|-------------|
|
||
| 未开始 / 就绪 | 中性灰 |
|
||
| 等待中 / 等待 | 信息蓝 |
|
||
| 进行中 / 进行 | 警告橙 |
|
||
| 已完成 / 成功 | 成功绿 |
|
||
| 已失败 / 失败 | 错误红 |
|
||
| 待更新 / 待更 | 青 |
|
||
|
||
- 图标（②④ 风格）：就绪 ⊖、等待 ⊗、进行 🕐、成功 ✓、失败 ✗、待更 🕐，颜色与文字同步
|
||
|
||
---
|
||
|
||
## 24. 数据展示 · 时间轴（Timeline）
|
||
|
||
> 用于按时间顺序陈列事件。分纵向（基础 / 卡片 / 长文本）与横向两种主轴方向，另含全局缩略时间轴。
|
||
|
||
### 24.1 纵向时间轴点（基础）
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 轴线 | `1px solid #E8E8E8` (FS-004-04) 或虚线 |
|
||
| 最新 / 当前节点 | 空心红圆环 `2px solid #F5222D` (ZS-001-09)，背景 `#FFFFFF` |
|
||
| 历史节点 | 实心红点 `#F5222D` (ZS-001-09)，直径 `8px` |
|
||
| 事件标题 | `14px Medium`，`#222222` (FS-004) |
|
||
| 时间文字 | `12px Regular`，`#A6A6A6` (FS-004-07) |
|
||
|
||
### 24.2 卡片式时间轴点
|
||
|
||
节点内容置于浅灰卡片中。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 卡片背景 | `#FAFAFA` (FS-004-02)，圆角 `4px` |
|
||
| 卡片内分隔 | `1px solid #E8E8E8` |
|
||
| 正文标签（如"安全状况："） | `#575757` (FS-004-09) |
|
||
| 正向取值（如"今日无安全风险"） | `#189D72`（成功绿，FS-002-10） |
|
||
|
||
### 24.3 横向长文本时间轴
|
||
|
||
横轴双向箭头，节点上下交错分布。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 主轴线 + 双向箭头 | `#222222` (FS-004) |
|
||
| 上方节点标记 + 日期 | 红色 `#F5222D` (ZS-001-09)，`▼` 标记 |
|
||
| 下方节点标记 + 日期 | 橙色 `#FF9900` (FS-001-09)，`▲` 标记 |
|
||
| 节点正文 | `#575757` (FS-004-09)，`14px Regular` |
|
||
|
||
> 上 / 下用红 / 橙双色区分两类事件或交替排布，避免拥挤。
|
||
|
||
### 24.4 纵向长文本时间轴
|
||
|
||
带头像、状态标签、富文本与附件的纵向时间流。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 轴线 | `1px dashed #DBDBDB` (FS-004-05) |
|
||
| 日期分组吸顶标签 | 背景 `#A6A6A6`(FS-004-07) 或 `#F5F5F5`，文字 `#FFFFFF` / `#575757`，圆角 `2px` |
|
||
| 节点圆点 | 红 `#F5222D`（重点）/ 浅红 `#FCB5B9`（次要） |
|
||
| 状态标签 | 浅底状态标签：计划（橙 `#FFF6EA`/`#FF9900`）、已成行（红 `#FEEDED`/`#F5222D`）（§23.2 ①） |
|
||
| 人物名 | `14px Regular`，`#222222` |
|
||
| 时间 | `12px`，`#A6A6A6` (FS-004-07) |
|
||
| 正文 | `#575757` (FS-004-09) |
|
||
| 地址（📍 地址） | 图标 + 文字 `#A6A6A6` |
|
||
| 缩略图 | 圆角 `2px`，间距 `--spacing-1` (4px) |
|
||
|
||
### 24.5 全局时间轴（缩略 / 范围选择）
|
||
|
||
页面顶部用于框选时间范围的缩略轴。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 刻度轴背景 | 灰阶渐变 `linear-gradient(90deg, #7F7F7F, #DBDBDB)`（FS-004-08 → FS-004-05） |
|
||
| 刻度文字（如 04-03） | `#FFFFFF`，`12px` |
|
||
| 拖拽游标（handle） | `#FFFFFF` 竖条，带轻微阴影 |
|
||
| 选区刷选框（brush） | 边框 `1px solid #F5222D`，填充 `rgba(245, 34, 45, 0.08)`（浅红 ZS-001-09 8%） |
|
||
| 选区内迷你面积图 | 描边 `#F5222D`，填充浅红渐变 |
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
> 返回 [规范目录](README.md)
|