浅红色 UI 规范 · 四、数据展示
返回 规范目录 | 本篇：弹出式窗口 · 卡片 · 折叠面板 · 进度条 · 表格 · 标签 · 时间轴
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，填充浅红渐变 |
返回 规范目录
