From 8e909ef1c18edee8ae92dee04e575048841302c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Sun, 31 May 2026 18:11:17 +0800 Subject: [PATCH] =?UTF-8?q?ui=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/scheduled_tasks.lock | 1 + frontend-web/docs/ui修改-深蓝.md | 4674 ----------------- .../docs/ui规范-深蓝/00-基础-色彩字体间距.md | 580 ++ frontend-web/docs/ui规范-深蓝/01-导航.md | 780 +++ frontend-web/docs/ui规范-深蓝/02-表单.md | 1619 ++++++ frontend-web/docs/ui规范-深蓝/03-数据展示.md | 1379 +++++ frontend-web/docs/ui规范-深蓝/04-图表.md | 573 ++ frontend-web/docs/ui规范-深蓝/05-页面范例.md | 320 ++ frontend-web/docs/ui规范-深蓝/README.md | 82 + frontend-web/docs/ui规范-深蓝/tokens.css | 211 + frontend-web/docs/浅红色ui修改.md | 1938 ++++++- 11 files changed, 7252 insertions(+), 4905 deletions(-) create mode 100644 .claude/scheduled_tasks.lock delete mode 100644 frontend-web/docs/ui修改-深蓝.md create mode 100644 frontend-web/docs/ui规范-深蓝/00-基础-色彩字体间距.md create mode 100644 frontend-web/docs/ui规范-深蓝/01-导航.md create mode 100644 frontend-web/docs/ui规范-深蓝/02-表单.md create mode 100644 frontend-web/docs/ui规范-深蓝/03-数据展示.md create mode 100644 frontend-web/docs/ui规范-深蓝/04-图表.md create mode 100644 frontend-web/docs/ui规范-深蓝/05-页面范例.md create mode 100644 frontend-web/docs/ui规范-深蓝/README.md create mode 100644 frontend-web/docs/ui规范-深蓝/tokens.css diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock new file mode 100644 index 00000000..c508da96 --- /dev/null +++ b/.claude/scheduled_tasks.lock @@ -0,0 +1 @@ +{"sessionId":"f9cbb722-59a7-42fb-a7aa-d4923a8c3425","pid":45764,"acquiredAt":1780221904458} \ No newline at end of file diff --git a/frontend-web/docs/ui修改-深蓝.md b/frontend-web/docs/ui修改-深蓝.md deleted file mode 100644 index 6bff7edf..00000000 --- a/frontend-web/docs/ui修改-深蓝.md +++ /dev/null @@ -1,4674 +0,0 @@ -# 深蓝色 UI 规范 - ---- - -## 1. 色彩 - -### 1.1 标准色 - -色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。 - ---- - -#### 1.1.1 色系总览 - -| 色系 | 用途定位 | 代码前缀 | -|------|----------|----------| -| 渐红系 | 警示、错误、强调操作 | ZS-001 | -| 渐蓝系 | 信息、链接、次级操作 | ZS-002 | -| 渐青系 | 成功、在线状态、数据高亮 | ZS-003 | -| 深蓝系 | 页面背景、容器、导航底色 | ZS-004 | - ---- - -#### 1.1.2 渐红系（ZS-001） - -用于错误提示、危险操作、重要告警。 - -| 编号 | 色值 | 说明 | -|------|------|------| -| ZS-001-01 | `#FFF1F0` | 极浅红，错误背景底色 | -| ZS-001-02 | `#FFCCC7` | 浅红，输入框错误边框 | -| ZS-001-03 | `#FFA39E` | — | -| ZS-001-04 | `#FF7875` | — | -| ZS-001-05 | `#FF4D4F` | 标准红，Tag / Badge | -| ZS-001-06 | `#F5222D` | 主色红，按钮 / 图标 | -| ZS-001-07 | `#CF1322` | 深红，Hover 状态 | -| ZS-001-08 | `#A8071A` | 深红，Active / Press | -| ZS-001-09 | `#820014` | 极深红 | -| ZS-001-10 | `#5C0011` | 最深红 | - ---- - -#### 1.1.3 渐蓝系（ZS-002） - -用于信息提示、链接、次级按钮。 - -| 编号 | 色值 | 说明 | -|------|------|------| -| ZS-002-01 | `#E6F4FF` | 极浅蓝，信息背景底色 | -| ZS-002-02 | `#BAE0FF` | 浅蓝 | -| ZS-002-03 | `#91CAFF` | — | -| ZS-002-04 | `#69B1FF` | — | -| ZS-002-05 | `#4096FF` | 标准蓝，链接 / 信息 Tag | -| ZS-002-06 | `#1677FF` | 主色蓝，主操作按钮 | -| ZS-002-07 | `#0958D9` | 深蓝，Hover | -| ZS-002-08 | `#003EB3` | 深蓝，Active | -| ZS-002-09 | `#002C8C` | 极深蓝 | -| ZS-002-10 | `#001D6C` | 最深蓝 | - ---- - -#### 1.1.4 渐青系（ZS-003） - -用于成功状态、在线标识、数据图表高亮。 - -| 编号 | 色值 | 说明 | -|------|------|------| -| ZS-003-01 | `#E6FFFB` | 极浅青，成功背景 | -| ZS-003-02 | `#B5F5EC` | 浅青 | -| ZS-003-03 | `#87E8DE` | — | -| ZS-003-04 | `#5CDBD3` | — | -| ZS-003-05 | `#36CFC9` | 标准青，成功 Tag | -| ZS-003-06 | `#13C2C2` | 主色青，在线点 / 图标 | -| ZS-003-07 | `#08979C` | 深青，Hover | -| ZS-003-08 | `#006D75` | 深青，Active | -| ZS-003-09 | `#00474F` | 极深青 | -| ZS-003-10 | `#002329` | 最深青 | - ---- - -#### 1.1.5 深蓝系（ZS-004） - -用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。 - -| 编号 | 色值 | 说明 | -|------|------|------| -| ZS-004-01 | `#E8EDF5` | 极浅，分割线 / 禁用底色 | -| ZS-004-02 | `#C5CFE0` | 浅，边框 | -| ZS-004-03 | `#9BADC8` | — | -| ZS-004-04 | `#6E88B0` | — | -| ZS-004-05 | `#4A6491` | 中深蓝，次级文字 | -| ZS-004-06 | `#2D4473` | 深蓝，卡片容器背景 | -| ZS-004-07 | `#1A2F5A` | 深蓝，侧边栏背景 | -| ZS-004-08 | `#122347` | 深蓝，导航栏背景 | -| ZS-004-09 | `#0C1836` | 极深蓝，页面背景 | -| ZS-004-10 | `#060E24` | 最深，全局底色 | - ---- - -#### 1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色） - -从标准色系中提取，用于具体 UI 角色指定。 - -| 角色 | 色值 | 来源 | -|------|------|------| -| 主色（Primary） | `#1677FF` | ZS-002-06 | -| 主色 Hover | `#0958D9` | ZS-002-07 | -| 主色 Active | `#003EB3` | ZS-002-08 | -| 正常字体色 | `#C5CFE0` | ZS-004-02 | -| 次级字体色 | `#6E88B0` | ZS-004-04 | -| 禁用字体色 | `#4A6491` | ZS-004-05 | -| 辅色（Accent） | `#13C2C2` | ZS-003-06 | -| 页面背景色 | `#0C1836` | ZS-004-09 | -| 容器背景色 | `#1A2F5A` | ZS-004-07 | -| 白色 | `#FFFFFF` | — | - ---- - -#### 1.1.7 小面积装饰色 - -用于图标点缀、徽标、少量强调，不用于大面积背景。 - -| 色值 | 说明 | -|------|------| -| `#6388FF` | 紫蓝，图标装饰 | -| `#F5222D` | 红色，危险徽标 | -| `#12306C` | 深蓝，品牌点缀 | -| `#478880` | 青绿，辅助点缀 | -| `#950404` | 深红，重要告警点 | - ---- - -#### 1.1.8 图表配色 - -**通用图表色序**（面积较大，如柱状图、折线图、饼图）： - -| 序号 | 色值 | -|------|------| -| 1 | `#1677FF` | -| 2 | `#13C2C2` | -| 3 | `#4096FF` | -| 4 | `#36CFC9` | -| 5 | `#69B1FF` | -| 6 | `#5CDBD3` | -| 7 | `#91CAFF` | -| 8 | `#87E8DE` | - -**小面积图表色序**（面积较小，如散点、小徽章、迷你图）： - -| 序号 | 色值 | -|------|------| -| 1 | `#4096FF` | -| 2 | `#36CFC9` | -| 3 | `#FF4D4F` | -| 4 | `#FFA39E` | -| 5 | `#6388FF` | -| 6 | `#478880` | - ---- - -## 2. 字体 - -### 2.1 全局样式 - 字体 - ---- - -#### 2.1.1 大屏页面字体规范 - -##### 中文字体：Noto Sans S Chinese - -| 样式 | 使用场景 | -|------|----------| -| 24px Bold | 一级标题 | -| 24px Medium | 次要一级标题 | -| 22px Medium | 二级标题 | -| 22px Regular | 正文 | -| 20px Regular | 排版空间有限的正文 | - -##### 数字字体：D-DIN - -| 样式 | 使用场景 | -|------|----------| -| 32px Bold | 重要数据展示 | -| 32px Regular | 普通数据展示 | -| 26px Bold | 常规数据展示 | -| 26px Regular | 常规数据展示 | - -##### 特殊数字：DS-Digital - -| 样式 | 使用场景 | -|------|----------| -| 50px Bold | 大屏主数据展示 | - -##### 表格字体：Arial - -| 样式 | 使用场景 | -|------|----------| -| 20px Regular | 表格横纵轴数字 | - ---- - -#### 2.1.2 后台系统字体规范 - -##### 中文字体：Noto Sans S Chinese - -| 样式 | 使用场景 | -|------|----------| -| 18px Bold | 导航、一级标题 | -| 18px Medium | 次要一级标题 | -| 16px Bold | 二级标题 | -| 16px Medium | 次要二级标题 | -| 16px Regular | 正文、按钮内部文字等 | -| 16px Light | 次要正文 | - -##### 数字字体：D-DIN - -| 样式 | 使用场景 | -|------|----------| -| 26px Bold | 重要数据展示 | -| 26px Regular | 普通数据展示 | -| 24px Bold | 常规数据展示（小） | -| 24px Regular | 常规数据展示（小） | - -##### LOGO 字体：DOUYUFont - -| 样式 | 使用场景 | -|------|----------| -| 20px 文字样式 | 页面顶部系统名称 | - -##### 表格数字：Arial - -| 样式 | 使用场景 | -|------|----------| -| 16px Regular | 表格横纵轴数字 | -| 14px Regular | 表格横轴数字（空间有限） | - ---- - -## 3. 阴影 - -### 3.1 容器与卡片配色 - -阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。 - -#### 3.1.1 外层容器 - -| 角色 | 色值 | 来源 | -|------|------|------| -| 页面 / 最外层背景 | `#060E24` | ZS-004-10 | -| 分栏容器背景 | `#0C1836` | ZS-004-09 | - -#### 3.1.2 卡片（标题 + 操作） - -| 角色 | 色值 | 来源 | -|------|------|------| -| 卡片背景 | `#122347` | ZS-004-08 | -| 卡片边框 | `#1A2F5A` | ZS-004-07 | -| 卡片阴影（外发光） | `rgba(22, 119, 255, 0.12)` | 基于 ZS-002-06 主色蓝 12% 透明度 | -| 标题文字（16px Bold） | `#C5CFE0` | ZS-004-02（正常字体色） | -| 操作按钮文字 | `#4096FF` | ZS-002-05（标准蓝，链接） | -| 次级操作图标（✏️ / ⋯） | `#6E88B0` | ZS-004-04（次级字体色） | - -#### 3.1.3 卡片新增（占位卡片） - -虚线描边的"新增入口"卡片，用于引导用户添加内容。 - -| 角色 | 色值 | 来源 | -|------|------|------| -| 卡片背景 | `#0C1836` | ZS-004-09（与外层同色，营造凹陷感） | -| 虚线边框 | `#4096FF` | ZS-002-05 | -| 加号图标 | `#4096FF` | ZS-002-05 | - -#### 3.1.4 阴影投影规则 - -| 层级 | 阴影值 | 使用场景 | -|------|--------|----------| -| 一级阴影（卡片悬浮） | `0 2px 8px rgba(22, 119, 255, 0.12)` | 普通卡片 | -| 二级阴影（hover / 强调） | `0 4px 16px rgba(22, 119, 255, 0.24)` | 卡片 hover、弹出层 | -| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(6, 14, 36, 0.6)` | Dialog、Drawer | - ---- - -## 4. 圆角 - -### 4.1 圆角统一规范 - -| 元素 | 圆角值 | 说明 | -|------|--------|------| -| 按钮 | `2px` | 所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 | -| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 | -| 页面分栏框 | `4px` | 外层容器、分栏区域 | -| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 | -| Tag / Badge | `2px` | 与按钮一致 | -| Modal / Drawer | `4px` | 与卡片一致 | - -### 4.2 按钮配色（圆角 2px） - -#### 4.2.1 主按钮（Primary） - -| 角色 | 色值 | 来源 | -|------|------|------| -| 背景 | `#1677FF` | ZS-002-06 | -| 文字 | `#FFFFFF` | — | -| Hover 背景 | `#0958D9` | ZS-002-07 | -| Active 背景 | `#003EB3` | ZS-002-08 | -| 禁用背景 | `#4A6491` | ZS-004-05 | -| 禁用文字 | `#6E88B0` | ZS-004-04 | - -#### 4.2.2 次按钮（Outline / Default） - -| 角色 | 色值 | 来源 | -|------|------|------| -| 背景 | `transparent` | — | -| 边框 | `#6E88B0` | ZS-004-04 | -| 文字 | `#C5CFE0` | ZS-004-02 | -| Hover 边框 | `#4096FF` | ZS-002-05 | -| Hover 文字 | `#4096FF` | ZS-002-05 | -| Active 边框 | `#1677FF` | ZS-002-06 | - -### 4.3 卡片与分栏（圆角 4px） - -| 角色 | 色值 | 来源 | -|------|------|------| -| 卡片背景 | `#122347` | ZS-004-08 | -| 卡片边框 | `#1A2F5A` | ZS-004-07 | -| 分栏框背景 | `#0C1836` | ZS-004-09 | -| 分栏框边框 | `#1A2F5A` | ZS-004-07 | - ---- - -## 5. 按钮 - -> 全部圆角 `2px`，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。 - -### 5.1 按钮尺寸 - -| 规格 | 高度 | 内边距 | 使用场景 | -|------|------|--------|----------| -| 小 | `28px` | `0 10px` | 空间小的板块内部，如表格中、卡片标题等 | -| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 | - -### 5.2 按钮类型与配色 - -#### 5.2.1 主按钮（Primary） - -> 一个操作区域只能有一个主按钮。 - -| 状态 | 背景 | 边框 | 文字 | -|------|------|------|------| -| 默认 | `#1677FF` (ZS-002-06) | — | `#FFFFFF` | -| Hover | `#0958D9` (ZS-002-07) | — | `#FFFFFF` | -| Active | `#003EB3` (ZS-002-08) | — | `#FFFFFF` | -| 失效 | `rgba(22, 119, 255, 0.35)` | — | `#6E88B0` (ZS-004-04) | - -#### 5.2.2 默认按钮（Default / Outline） - -用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。 - -| 状态 | 背景 | 边框 | 文字 | -|------|------|------|------| -| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | -| Hover | `rgba(22, 119, 255, 0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | -| Active | `rgba(22, 119, 255, 0.16)` | `#1677FF` (ZS-002-06) | `#1677FF` (ZS-002-06) | -| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` (ZS-004-05) | - -#### 5.2.3 文本按钮（Text） - -用于表格操作、文件下载等。无背景与边框，靠文字色识别。 - -| 状态 | 文字 | 装饰 | -|------|------|------| -| 默认 | `#4096FF` (ZS-002-05) | 无下划线 | -| Hover | `#1677FF` (ZS-002-06) | 显示下划线（与文字同色） | -| Active | `#0958D9` (ZS-002-07) | 下划线 | -| 失效 | `#4A6491` (ZS-004-05) | 无装饰 | - -#### 5.2.4 图标按钮（Icon-only） - -用于增强辨识度或节省空间。仅图标，无文字。 - -| 变体 | 背景 | 图标颜色 | -|------|------|----------| -| 主色（常用） | `#1677FF` (ZS-002-06) | `#FFFFFF` | -| 主色 Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` | -| 危险（删除等） | `#F5222D` (ZS-001-06) | `#FFFFFF` | -| 危险 Hover | `#CF1322` (ZS-001-07) | `#FFFFFF` | -| 透明（仅图标） | `transparent` | `#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05) | - -### 5.3 按钮组合 - -#### 5.3.1 文字 + 下拉按钮（含 ▾） - -两种填充： - -| 形态 | 配色规则 | -|------|----------| -| 默认（Outline） | 沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0` | -| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF` | - -#### 5.3.2 图标 + 文字按钮（如 `+ 正常`） - -| 形态 | 配色规则 | -|------|----------| -| 默认（Outline） | 沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0` | -| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` | - -#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"） - -| 角色 | 色值 | -|------|------| -| 文字 + 图标（默认） | `#4096FF` (ZS-002-05) | -| 文字 + 图标（Hover） | `#1677FF` (ZS-002-06) | -| 失效 | `#4A6491` (ZS-004-05) | - -> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。 - -#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"） - -- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作） -- **按钮间距**：`8px` -- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]` -- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.2 - -### 5.4 其他按钮 - -#### 5.4.1 悬浮状态（Floating） - -用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。 - -| 状态 | 阴影 | -|------|------| -| 默认 | `0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影） | -| Hover | `0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影） | -| Active | 阴影消失，按下感 | - -#### 5.4.2 加载中（Loading） - -用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。 - -| 角色 | 色值 | -|------|------| -| 背景 | `#1677FF` (ZS-002-06) | -| 文字 | `#FFFFFF` | -| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` | -| 不可点击 | 鼠标 `cursor: not-allowed` | - -> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。 - ---- - -## 6. 分割线 - -> 统一线宽 `1px`，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。 - -### 6.1 水平分割线 - -水平分割线常用来对不同元素内容进行分割。 - -| 类型 | 色值 | 来源 | 样式 | 使用场景 | -|------|------|------|------|----------| -| 实线（默认） | `#4A6491` | ZS-004-05 | `border-top: 1px solid` | 模块间、列表项间分割 | -| 实线（强调） | `#6E88B0` | ZS-004-04 | `border-top: 1px solid` | 主区块标题下方、卡片头部分割 | -| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-top: 1px solid` | 卡片内部、密集列表分隔 | -| 虚线 | `#4A6491` | ZS-004-05 | `border-top: 1px dashed` | 次级 / 层级内分割，提示"非主结构" | -| 主色实线（高亮） | `#1677FF` | ZS-002-06 | `border-top: 1px solid` | 强调分隔，少量使用（如当前激活区块底边） | - -### 6.2 垂直分割线 - -垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。 - -| 类型 | 色值 | 来源 | 样式 | 使用场景 | -|------|------|------|------|----------| -| 实线（默认） | `#4A6491` | ZS-004-05 | `border-left: 1px solid` | 行内 inline 元素分割（面包屑、操作按钮组） | -| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-left: 1px solid` | 表格列分割、紧凑布局 | -| 虚线 | `#4A6491` | ZS-004-05 | `border-left: 1px dashed` | 多列对齐辅助、辅助参考线 | - -### 6.3 规格与间距 - -| 规则 | 取值 | -|------|------| -| 线宽 | `1px` | -| 水平分割线与上下元素间距 | `≥ 8px`（紧凑布局可用 `4px`） | -| 垂直分割线与左右元素间距 | `≥ 8px`（行内紧凑 `4px`） | -| 垂直分割线高度 | 与文字行高一致，约 `12–14px`（也可全高跟随容器） | -| 透明度 | 必要时叠 `opacity: 0.6` 实现"更弱"层级 | - -### 6.4 CSS 参考 - -```css -/* 默认水平分割线 */ -.divider-h { border-top: 1px solid #4A6491; } -.divider-h-strong { border-top: 1px solid #6E88B0; } -.divider-h-weak { border-top: 1px solid #2D4473; } -.divider-h-dashed { border-top: 1px dashed #4A6491; } -.divider-h-accent { border-top: 1px solid #1677FF; } - -/* 垂直分割线 */ -.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; } -.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; } -.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; } -``` - ---- - -## 7. 间距 - -> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。 - -### 7.1 间距阶梯 - -| 阶 | px | rem | 分组 | 典型场景 | -|----|------|--------|------|----------| -| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 | -| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 | -| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 | -| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 | -| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 | -| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 | -| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 | -| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 | - -> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。 - -### 7.2 使用原则 - -- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。 -- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。 -- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。 -- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。 -- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。 - -### 7.3 CSS Token 建议 - -```css -:root { - --spacing-1: 4px; /* 0.25rem */ - --spacing-2: 8px; /* 0.5rem */ - --spacing-3: 12px; /* 0.75rem */ - --spacing-4: 16px; /* 1rem */ - --spacing-5: 24px; /* 1.5rem */ - --spacing-6: 32px; /* 2rem */ - --spacing-7: 40px; /* 2.5rem */ - --spacing-8: 56px; /* 3.5rem */ -} -``` - -### 7.4 与已有规范的对齐 - -| 已有规则 | 对应阶 | -|----------|--------| -| §4.x 卡片圆角内边距 | `--spacing-4` (16px) | -| §5.3.4 主+默认按钮组合间距 `8px` | `--spacing-2` | -| §5.3.3 文本按钮间距 `16px` | `--spacing-4` | -| §6.3 分割线与上下元素间距 `≥ 8px` | `--spacing-2` 起 | - ---- - -## 8. 导航组件 - -> 适用于"大屏后台 / 控制台"类深蓝主题界面。整体结构 = 顶部导航 + 左侧分级菜单 + 多级下拉。所有颜色取自 ZS-002 / ZS-004 两个色系。 - -### 8.1 整体结构 - -``` -┌─ 顶部导航（Header）─ 高 56px ──────────────────────────────────────────────┐ -│ ≡ 二级菜单 二级菜单 二级菜单 〈一级菜单〉〈一级菜单〉 ⟪ XXXX系统 ⟫ 〈一级菜单〉 ⟳ 时间 ⌂ 返回首页 │ -├──┬──────────────────────────────────────────────────────────────────────────┤ -│ 三│ ┌─ 四级菜单（下拉面板）──┐ │ -│ 级│ │ ▾ 四级菜单 │ │ -│ 菜│ │ ▾ 五级菜单 │ │ -│ 单│ │ - 六级菜单 (active)│ │ -│ 三│ │ - 六级菜单 │ │ -│ 级│ │ ▸ 五级菜单 │ │ -│ 菜│ │ ▸ 四级菜单 │ │ -│ 单│ └────────────────────────┘ │ -│ …│ │ -└──┴──────────────────────────────────────────────────────────────────────────┘ -``` - -### 8.2 顶部导航（Header） - -#### 8.2.1 规格 - -| 属性 | 取值 | -|------|------| -| 高度 | `56px` | -| 左右 padding | `--spacing-4` (16px) | -| 背景 | 渐变 `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） | -| 底边 | `border-bottom: 1px solid #1A2F5A` (ZS-004-07) | -| 阴影 | `0 2px 8px rgba(6, 14, 36, 0.6)`（§3.1.4 一级阴影变体） | -| 文字基线 | `Noto Sans S Chinese`，垂直居中 | - -#### 8.2.2 二级菜单（左侧 Tabs，小号 14px） - -| 状态 | 文字 | 背景 | 装饰 | -|------|------|------|------| -| 默认 | `#6E88B0` (ZS-004-04) | `transparent` | — | -| Hover | `#C5CFE0` (ZS-004-02) | `rgba(22,119,255,0.08)` | — | -| 激活 | `#4096FF` (ZS-002-05) | `transparent` | 底部 `2px solid #4096FF` 高亮线 | - -- 字号 `14px Regular`，间距 `--spacing-3` (12px) -- 与最左侧的"折叠菜单 ≡"图标间距 `--spacing-4` (16px) - -#### 8.2.3 一级菜单（中部主导航，16px 带切角装饰） - -| 状态 | 文字 | 装饰 | -|------|------|------| -| 默认 | `#C5CFE0` (ZS-004-02) | 两端切角斜边，`border: 1px solid #1A2F5A` | -| Hover | `#4096FF` (ZS-002-05) | 切角线变 `#4096FF` | -| 激活 | `#FFFFFF` | 切角线 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.16)` | - -- 字号 `16px Medium` -- 切角推荐 `clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%)` -- 项间距 `--spacing-2` (8px) - -#### 8.2.4 系统标题（XXXX系统） - -- 字号 `20px Bold`，颜色 `#FFFFFF` -- 字体 `DOUYUFont` 或 Noto Sans Medium -- 左右装饰用主色蓝渐变线条：`linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，线宽 `1px` -- 居中相对 Header 几何中心，左右最少留 `--spacing-6` (32px) 间距给一级菜单 - -#### 8.2.5 右侧工具区（时间 / 图标 / 返回首页） - -| 元素 | 字号/尺寸 | 颜色 | -|------|----------|------| -| 更新时间文字 | `12px Regular` | `#6E88B0` (ZS-004-04) | -| 时间数值（数字） | `12px D-DIN Regular` | `#C5CFE0` (ZS-004-02) | -| 工具图标（刷新/上/家） | `16px` | `#6E88B0`，hover → `#4096FF` | -| 返回首页文字 | `14px Regular` | `#C5CFE0`，hover → `#4096FF` | - -- 元素间距 `--spacing-3` (12px) -- 整体右 padding `--spacing-4` (16px) - -### 8.3 侧边栏（三级菜单） - -#### 8.3.1 规格 - -| 属性 | 取值 | -|------|------| -| 宽度 | `64px`（仅图标 / 竖排文字） | -| 背景 | `#0C1836` (ZS-004-09) | -| 右边界 | `border-right: 1px solid #1A2F5A` (ZS-004-07) | -| 项高度 | `64px`（与宽度一致，呈正方形） | -| 项内间距 | 上下 `--spacing-3` (12px) | -| 字号 | `14px Medium`，竖排（`writing-mode: vertical-rl`）或正常排两行 | - -#### 8.3.2 状态配色 - -| 状态 | 背景 | 文字 | 左侧指示条 | -|------|------|------|-----------| -| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | 无 | -| Hover | `rgba(22,119,255,0.08)` | `#C5CFE0` (ZS-004-02) | 无 | -| 激活 | `#1A2F5A` (ZS-004-07) | `#FFFFFF` | 左侧 `2px solid #1677FF` (ZS-002-06) | - -### 8.4 下拉菜单面板（四级 / 五级 / 六级） - -#### 8.4.1 面板规格 - -| 属性 | 取值 | -|------|------| -| 背景 | `#122347` (ZS-004-08) | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | -| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） | -| 圆角 | `4px` | -| 内边距 | 上下 `--spacing-2` (8px) | -| 最小宽度 | `150px` | - -#### 8.4.2 菜单项规格 - -| 层级 | 缩进（padding-left） | 字号 | 展开图标 | 前缀 | -|------|---------------------|------|----------|------| -| 四级菜单 | `--spacing-3` (12px) | `14px Medium` | `▾ / ▸` | — | -| 五级菜单 | `--spacing-5` (24px) | `14px Regular` | `▾ / ▸` | — | -| 六级菜单 | `--spacing-6` (32px) | `14px Regular` | — | `-` 短横线 | - -- 行高 `32px` -- 项之间无分割线（靠缩进与图标区分层级） - -#### 8.4.3 菜单项配色 - -| 状态 | 背景 | 文字 | 展开图标 | -|------|------|------|----------| -| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | -| Hover | `rgba(22,119,255,0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` | -| 激活（当前选中） | `rgba(22,119,255,0.16)` | `#4096FF` (ZS-002-05) | `#1677FF` (ZS-002-06) | -| 父级（含激活子项） | `transparent` | `#FFFFFF` | `#1677FF` | -| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` | - -### 8.5 交互与动画 - -| 行为 | 动效 | -|------|------| -| 下拉面板展开 | `transform-origin: top; transform: scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` | -| 展开图标旋转 | `transform: rotate(0 → 90deg)`，`200ms ease-out` | -| Hover 背景过渡 | `background-color 120ms ease-out` | -| 激活底部高亮线（二级菜单） | `width 0% → 100%`，`240ms ease-out` | - -### 8.6 间距引用 - -| 位置 | 取值 | -|------|------| -| Header 内部元素间距 | `--spacing-2 / --spacing-3` | -| Header 与下方内容间距 | `0`（贴合，靠底边线与阴影区分） | -| 侧边栏与下拉面板间距 | `--spacing-1` (4px) | -| 下拉面板与触发元素间距 | `--spacing-1` (4px) | -| 同级菜单项之间 | `0`（紧贴排列，靠 hover/active 背景区分） | - ---- - -## 9. 锚点与页签 - -> 对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。 -> -> 视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。 - -### 9.1 页签（Tabs） - -#### 9.1.1 横向页签（下划线-横向） - -| 状态 | 文字 | 下划线 | -|------|------|--------| -| 默认 | `#C5CFE0` (ZS-004-02) | 无 | -| Hover | `#4096FF` (ZS-002-05) | 无 | -| 激活 | `#4096FF` (ZS-002-05) | `2px solid #4096FF`，宽度与文字齐 | -| 失效 | `#4A6491` (ZS-004-05) | 无 | - -- 字号 `14px Medium` -- 项间距 `--spacing-5` (24px) -- 下划线与文字底部间距 `--spacing-2` (8px) -- 容器底边可叠一条 `1px solid #1A2F5A` (ZS-004-07) 作为基线，激活态的高亮线压在上面 - -#### 9.1.2 纵向页签（下划线-纵向） - -| 状态 | 文字 | 右侧指示线 | -|------|------|-----------| -| 默认 | `#C5CFE0` (ZS-004-02) | 无 | -| Hover | `#4096FF` (ZS-002-05) | 无 | -| 激活 | `#4096FF` (ZS-002-05) | 右侧 `2px solid #4096FF`，高度与文字齐 | -| 失效 | `#4A6491` (ZS-004-05) | 无 | - -- 字号 `14px Medium`，项高度 `32px` -- 项间距 `--spacing-2` (8px) -- 容器右边可叠一条 `1px solid #1A2F5A` 基线，激活指示线压在上面 - -### 9.2 锚点（Anchor） - -用于长内容页（如详情页、文档页）的章节快速跳转。 - -#### 9.2.1 结构 - -``` -│ 一级 -│ 一级 (active) -│ 二级 -│ 二级 -│ 一级 -│ 一级 -``` - -#### 9.2.2 规格 - -| 属性 | 取值 | -|------|------| -| 容器背景 | `#122347` (ZS-004-08) 或 `transparent`（嵌入页面侧栏时） | -| 左侧基线 | `1px solid #1A2F5A` (ZS-004-07) 通栏 | -| 项高度 | `32px` | -| 一级项左 padding | `--spacing-3` (12px) | -| 二级项左 padding | `--spacing-5` (24px) | -| 项间距 | `0`（贴合排列） | -| 字号 | `14px Regular` | - -#### 9.2.3 状态配色 - -| 状态 | 一级文字 | 二级文字 | 左侧指示条 | -|------|----------|----------|-----------| -| 默认 | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | 无 | -| Hover | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | 无 | -| 激活 | `#4096FF` (ZS-002-05) | — | 左侧 `2px solid #4096FF`，覆盖容器基线 | -| 父级（含激活子项） | `#FFFFFF` | — | — | - -- 激活态指示条与基线重合，宽 `2px`，色压主色蓝 `#4096FF` -- 二级项**不单独支持激活态**：当二级被点中时，其父级一级显示激活态，左侧指示条按父级位置渲染 - -#### 9.2.4 滚动同步 - -| 行为 | 规则 | -|------|------| -| 页面滚动 | 监听锚点对应区块进入视口的相对位置，自动切换激活态 | -| 点击锚点 | `behavior: smooth` 滚动到目标，激活指示条 `top` 过渡 `200ms ease-out` | -| 边界处理 | 滚动到页面顶部 → 第一个锚点激活；到页尾 → 最后一个锚点激活 | - -### 9.3 回到顶部（BackToTop） - -固定在视口右下角的悬浮按钮，向上滚动到页面顶部。 - -#### 9.3.1 规格 - -| 属性 | 取值 | -|------|------| -| 形状 | 圆形 `40px × 40px`（`border-radius: 50%`） | -| 图标 | `↑` 上箭头，`16px`，`#FFFFFF` | -| 距视口右边 | `--spacing-5` (24px) | -| 距视口下边 | `--spacing-6` (32px) | -| 出现时机 | 页面 `scrollTop > 200px` 时淡入；回到顶部后淡出 | -| 淡入/淡出 | `opacity 0 → 1` / `1 → 0`，`200ms ease-out` | - -#### 9.3.2 状态配色 - -| 状态 | 背景 | 阴影 | 图标 | -|------|------|------|------| -| 正常（默认） | `#1677FF` (ZS-002-06) | `0 2px 8px rgba(22,119,255,0.12)` (§3.1.4 一级阴影) | `#FFFFFF` | -| 悬停（Hover） | `#0958D9` (ZS-002-07) | `0 4px 16px rgba(22,119,255,0.24)` (§3.1.4 二级阴影) | `#FFFFFF` | -| 点按（Active） | `#003EB3` (ZS-002-08) | 阴影消失，按下感 | `#FFFFFF` | -| 失效 / 不显示 | — | — | 整体 `opacity: 0`，`pointer-events: none` | - -#### 9.3.3 悬停 Tooltip - -Hover 状态下方显示 `回到顶部` 提示气泡： - -| 属性 | 取值 | -|------|------| -| 文字 | `回到顶部`，`12px Regular` | -| 文字颜色 | `#C5CFE0` (ZS-004-02) | -| 背景 | `#1677FF` (ZS-002-06) | -| 圆角 | `2px` | -| 内边距 | 上下 `4px`，左右 `--spacing-2` (8px) | -| 与按钮间距 | `--spacing-2` (8px) | -| 出现时机 | Hover 进入 `300ms` 后显示，离开立即消失 | - -### 9.4 三者的差异与选用 - -| 组件 | 主要用途 | 视觉特征 | -|------|----------|---------| -| 页签 | 同层级内容切换（多 Tab 互斥） | 文字 + 下划线（横/纵） | -| 锚点 | 长页面内章节跳转 | 文字 + 左侧指示条 + 层级缩进 | -| 回到顶部 | 长页面快速返回起点 | 圆形悬浮按钮 + 上箭头 | - ---- - -## 10. 步骤条 - -> 对应「4.7 导航组件-步骤条」。用于多步流程的进度指引，按布局方向分**横向**与**纵向**两类，按使用场景分**弹窗步骤条**、**页面步骤条**、**纵向步骤条**三种。所有颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。 - -### 10.1 步骤节点（公共） - -每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换三种形态： - -| 状态 | 圆形外观 | 圆内符号 | 来源 | -|------|----------|----------|------| -| 已完成（Completed） | 描边圆，`2px solid #1677FF`，背景 `transparent` | `✓`（对勾，`#1677FF`） | ZS-002-06 | -| 当前（Current / Active） | 实心圆，背景 `#1677FF` | 步骤数字，`#FFFFFF` | ZS-002-06 / 白 | -| 未开始（Upcoming） | 描边圆，`1px solid #4A6491`，背景 `transparent` | 步骤数字，`#6E88B0` | ZS-004-05 / ZS-004-04 | -| 失效（Disabled） | 描边圆，`1px solid #2D4473`，背景 `transparent` | 步骤数字，`#4A6491` | ZS-004-06 / ZS-004-05 | - -**指示圆规格**： - -| 属性 | 取值 | -|------|------| -| 直径 | `24px` | -| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） | -| 对勾图标 | `12px`，居中 | -| 字体水平居中 | 数字 / 对勾 在圆几何中心 | - -**标题与描述文字**： - -| 元素 | 状态 | 字号 / 颜色 | 来源 | -|------|------|-------------|------| -| 标题 | 已完成 / 当前 | `14px Medium`，`#FFFFFF` | — | -| 标题 | 未开始 | `14px Medium`，`#6E88B0` | ZS-004-04 | -| 标题 | 失效 | `14px Medium`，`#4A6491` | ZS-004-05 | -| 描述 | 已完成 / 当前 | `12px Regular`，`#C5CFE0` | ZS-004-02 | -| 描述 | 未开始 / 失效 | `12px Regular`，`#6E88B0` → `#4A6491` | ZS-004-04 → ZS-004-05 | - -**连接线（步骤之间）**： - -| 类型 | 色值 | 来源 | 样式 | -|------|------|------|------| -| 已完成段（前一节点已完成） | `#1677FF` | ZS-002-06 | `1px dashed`（弹窗）/ `1px solid`（页面） | -| 未完成段 | `#4A6491` | ZS-004-05 | `1px dashed` | - -> 连接线在指示圆**两侧水平居中**（横向）或**正下方垂直**（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙，避免线穿圆。 - -### 10.2 弹窗步骤条（横向 · 描边圆为主） - -用于 Modal / Drawer 内引导多步操作的紧凑步骤条。指示圆**完成态用描边 + 对勾**而非实心，避免在弹窗背景上过于抢眼。 - -#### 10.2.1 布局 - -``` -( ✓ ) ┄┄┄┄┄ (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 ) - 标题 标题 标题 标题 标题 -(描述) (描述) (描述) (描述) (描述) -``` - -#### 10.2.2 规格 - -| 属性 | 取值 | -|------|------| -| 容器水平 padding | `--spacing-5` (24px) | -| 指示圆 → 标题间距 | `--spacing-2` (8px) | -| 标题 → 描述间距 | `--spacing-1` (4px) | -| 节点之间水平间距 | 节点间距自适应等分；连接线占用中间空间 | -| 连接线 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` | -| 文字对齐 | 标题、描述居中对齐于指示圆下方 | - -#### 10.2.3 两种变体 - -| 变体 | 适用 | -|------|------| -| **仅标题** | 步骤含义已经清晰（如「填写信息 / 确认 / 完成」），节省垂直空间 | -| **标题 + 描述** | 步骤名抽象需要一行小字补充时使用 | - -### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题） - -用于页面级流程（如「新建集群」类向导）。和弹窗步骤条相比，**已完成态指示圆改为实心填充 + 白色对勾**，视觉权重更高；首步标题可显示具体名称（如「新建集群」）而非「标题」占位。 - -#### 10.3.1 布局 - -``` -(✓) ────── (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 ) -新建集群 标题 标题 标题 标题 -(描述文本) (描述文本) (描述文本) (描述文本) (描述文本) -``` - -#### 10.3.2 与 §10.2 弹窗步骤条的差异 - -| 维度 | 弹窗步骤条 | 页面步骤条 | -|------|-----------|-----------| -| 完成态圆形 | 描边圆 + 蓝色对勾 | 实心蓝圆 + 白色对勾 | -| 完成段连接线样式 | `1px dashed #1677FF` | `1px solid #1677FF` | -| 标题文字号 | `14px Medium` | `14px Medium`（同） | -| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） | - -#### 10.3.3 完成态指示圆补充 - -| 角色 | 色值 | 来源 | -|------|------|------| -| 已完成圆背景 | `#1677FF` | ZS-002-06 | -| 已完成圆内对勾 | `#FFFFFF` | — | -| 已完成圆边框 | 无（实心） | — | - -### 10.4 纵向步骤条 - -用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。 - -#### 10.4.1 布局 - -``` -仅标题: 标题 + 描述: - -(✓) 新建集群 (✓) 新建集群 - ┊ 描述文本描述 -(●2) 标题 ┊ - ┊ (●2) 标题 -( 3 ) 标题 描述文本描述 - ┊ ┊ -( 4 ) 标题 ( 3 ) 标题 - 描述文本描述 - ┊ - ( 4 ) 标题 - 描述文本描述 -``` - -#### 10.4.2 规格 - -| 属性 | 取值 | -|------|------| -| 指示圆 → 标题水平间距 | `--spacing-2` (8px) | -| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 | -| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 | -| 标题 → 描述间距 | `--spacing-1` (4px) | -| 连接线位置 | 上下两个指示圆**正下方垂直**，居中于圆心 | -| 连接线样式 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` | -| 文字左对齐 | 标题与描述左对齐，与指示圆右侧对齐基线 | - -#### 10.4.3 与横向步骤条共用规则 - -- 指示圆三态规格沿用 §10.1 -- 已完成态默认用**描边 + 对勾**（与 §10.2 弹窗一致）；若纵向步骤条用于页面级主流程，可切换为 §10.3 的实心圆变体 - -### 10.5 交互与动画 - -| 行为 | 动效 | -|------|------| -| 步骤切换（next） | 当前圆 `background: transparent → #1677FF`，`200ms ease-out`；同时上一步圆 `border-color: #4A6491 → #1677FF`，再用 `200ms` 切换为对勾图标淡入 | -| 步骤切换（prev / 回退） | 反向，未完成态恢复 `#4A6491` 边框，圆内数字淡入 | -| 连接线高亮 | 完成段 `border-color: #4A6491 → #1677FF`，`240ms ease-out` | -| Hover 节点（可点击） | 圆边框色暂时变 `#4096FF` (ZS-002-05)，标题文字 `#4096FF`，`120ms ease-out`；不可点击节点（未来步骤）无 hover | -| 点击节点 | 节点必须**已完成**才能点（回看），否则视为禁用；点击合法节点触发 `step:change` 事件 | - -### 10.6 状态机与可达性 - -| 当前步 = N | 节点 i 的状态 | -|-----------|----------------| -| `i < N` | Completed（已完成，可点回看） | -| `i === N` | Current（当前，不可点） | -| `i > N` | Upcoming（未开始，不可点） | -| `i.disabled` | Disabled（被显式禁用，例如条件未满足） | - -**键盘导航**： -- `Tab` 顺序在「已完成」节点之间流转，跳过 `Current / Upcoming / Disabled` -- 焦点节点圆外加 `2px solid #4096FF` 焦点环（`outline`，`offset 2px`） - -**屏幕阅读器**： -- 指示圆 `role="img"`，`aria-label="已完成第 N 步"` / `"当前第 N 步"` / `"未开始第 N 步"` -- 容器 `role="list"`，节点 `role="listitem"` -- 当前节点额外 `aria-current="step"` - -### 10.7 CSS Token 参考 - -```css -:root { - /* 步骤条节点 */ - --step-circle-size: 24px; - --step-circle-current-bg: #1677FF; /* ZS-002-06 */ - --step-circle-current-text: #FFFFFF; - --step-circle-done-border: #1677FF; /* ZS-002-06 */ - --step-circle-done-icon: #1677FF; /* 弹窗变体 */ - --step-circle-done-bg-page: #1677FF; /* 页面变体:实心 */ - --step-circle-done-icon-page: #FFFFFF; - --step-circle-upcoming-border: #4A6491; /* ZS-004-05 */ - --step-circle-upcoming-text: #6E88B0; /* ZS-004-04 */ - --step-circle-disabled-border: #2D4473; /* ZS-004-06 */ - --step-circle-disabled-text: #4A6491; /* ZS-004-05 */ - - /* 连接线 */ - --step-line-done: #1677FF; /* 已完成段 */ - --step-line-upcoming: #4A6491; /* 未完成段:ZS-004-05 */ - - /* 文字 */ - --step-title-active: #FFFFFF; - --step-title-inactive: #6E88B0; /* ZS-004-04 */ - --step-desc-active: #C5CFE0; /* ZS-004-02 */ - --step-desc-inactive: #6E88B0; /* ZS-004-04 */ -} -``` - -### 10.8 三种步骤条的选用决策 - -| 场景 | 选择 | -|------|------| -| Modal / Drawer 内多步表单 | §10.2 弹窗步骤条（描边圆，紧凑） | -| 页面级向导（独占大区域） | §10.3 页面步骤条（实心圆，视觉重） | -| 侧栏 / 详情页纵向流程 | §10.4 纵向步骤条 | -| 步骤数 ≤ 3 且无描述 | 优先「仅标题」变体 | -| 步骤名抽象需补充说明 | 用「标题 + 描述」变体 | -| 步骤数 > 7 | 不推荐用步骤条，改用「锚点」（§9.2）或分页 | - ---- - -## 11. 面包屑 - -> 对应「4.3 导航组件-面包屑」。用于显示当前位置在整个站点层级中的路径，配合「← 返回」按钮支持逐级回溯。颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。 - -### 11.1 标准形态 - -容器顶部带一个独立的容器 / 边框包裹： - -``` -🏠 | 概况 / 总概况 -``` - -带「返回」按钮的层级形态（一级到四级）： - -``` -一级: ← 返回 │ 现在位置 -二级: ← 返回 │ 上一级位置 / 现在位置 -三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置 -四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置 -``` - -### 11.2 规格 - -| 属性 | 取值 | -|------|------| -| 容器高度 | `40px` | -| 容器背景 | `#0C1836` (ZS-004-09) | -| 容器底边 | `1px solid #1A2F5A` (ZS-004-07) | -| 容器水平 padding | `--spacing-4` (16px) | -| 字号 | `14px Regular` | -| 元素间距（图标 / 文字 / 分隔符之间） | `--spacing-2` (8px) | -| 「返回」与首段路径之间分隔符 `│` | `1px solid #4A6491`，高度 `14px` | - -### 11.3 配色 - -| 角色 | 色值 | 来源 | 备注 | -|------|------|------|------| -| Home 图标 🏠 | `#4096FF` | ZS-002-05 | 默认主色，hover → `#1677FF` (ZS-002-06) | -| 「← 返回」图标 + 文字 | `#4096FF` | ZS-002-05 | 链接样式，hover 显示下划线 | -| 历史路径文字（可点击） | `#4096FF` | ZS-002-05 | 同链接配色 | -| 当前位置文字（最后一段） | `#FFFFFF` | — | 加粗 `14px Medium`，不可点击 | -| 分隔符 `/` | `#4A6491` | ZS-004-05 | 静态、不可点 | -| 分隔符 `│`（返回按钮与路径之间） | `#4A6491` | ZS-004-05 | 同上 | -| Hover 路径项 | `#1677FF` | ZS-002-06 | 文字色 + 下划线 | -| 失效路径项（无对应页） | `#4A6491` | ZS-004-05 | `cursor: not-allowed` | - -### 11.4 交互规则 - -- **点击「← 返回」**：逐步向上返回一级（等同浏览器 back） -- **点击文字路径**：快速跳回到对应任意上级页面 -- **当前位置**（最后一段）：不响应点击，仅作展示 -- **层级建议**：尽可能不超过 **4 级**；超过 4 级会让面包屑过长，应改用侧栏 / 锚点辅助 - -### 11.5 与导航的关系 - -面包屑**不替代**主导航（§8）： - -- 主导航 = 「我能去哪些地方」（站点结构） -- 面包屑 = 「我当前在哪里」（路径回溯） - -两者并存时，面包屑紧贴页面主内容区顶部，位于主导航下方、页头（§12）上方。 - -### 11.6 CSS 参考 - -```css -.breadcrumb { - display: flex; - align-items: center; - height: 40px; - padding: 0 var(--spacing-4); - background: #0C1836; - border-bottom: 1px solid #1A2F5A; - font-size: 14px; - gap: var(--spacing-2); -} -.breadcrumb-back { color: #4096FF; cursor: pointer; } -.breadcrumb-back:hover { color: #1677FF; text-decoration: underline; } -.breadcrumb-sep-bar { width: 1px; height: 14px; background: #4A6491; } -.breadcrumb-sep { color: #4A6491; } -.breadcrumb-link { color: #4096FF; cursor: pointer; } -.breadcrumb-link:hover { color: #1677FF; text-decoration: underline; } -.breadcrumb-current { color: #FFFFFF; font-weight: 500; } -``` - ---- - -## 12. 页头 - -> 对应「4.6 导航组件-分页」上半段示意。用于页面主内容区顶部、面包屑下方，承载页面标题与可选的说明 / Tabs。共有 4 种变体。 - -### 12.1 通用规格 - -| 属性 | 取值 | -|------|------| -| 容器高度 | `56px`（仅标题）/ `64px`（含 Tabs） | -| 背景 | `#0C1836` (ZS-004-09) | -| 底边 | `1px solid #1A2F5A` (ZS-004-07) | -| 水平 padding | `--spacing-5` (24px) | -| 文字基线 | 垂直居中 | - -### 12.2 四种变体 - -#### 12.2.1 基础页头 - -只有标题： - -``` -页头标题 -``` - -| 角色 | 色值 / 字号 | 来源 | -|------|-------------|------| -| 标题 | `18px Bold`，`#FFFFFF` | — | - -#### 12.2.2 页头 + 说明 - -标题后跟一段灰色说明文字： - -``` -页头标题 （这是一句简要说明） -``` - -| 角色 | 色值 / 字号 | 来源 | -|------|-------------|------| -| 标题 | `18px Bold`，`#FFFFFF` | — | -| 说明文字 | `14px Regular`，`#6E88B0` | ZS-004-04 | -| 标题 → 说明间距 | `--spacing-3` (12px) | — | - -说明用半角圆括号包裹，颜色与括号一致（不要让括号比文字更醒目）。 - -#### 12.2.3 页头 + 说明 icon - -标题后跟一个可悬停查看说明的图标： - -``` -页头标题 ⓘ -``` - -| 角色 | 色值 / 字号 | 来源 | -|------|-------------|------| -| 标题 | `18px Bold`，`#FFFFFF` | — | -| 说明 icon `ⓘ` 或 `?` | `16px`，`#6E88B0` | ZS-004-04 | -| Icon hover | `#4096FF` | ZS-002-05 | -| 标题 → 图标间距 | `--spacing-2` (8px) | — | - -Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文字。 - -#### 12.2.4 分 Tabs 页头 - -标题位置直接放横向页签（沿用 §9.1.1 横向页签配色），点击切换右侧主内容区： - -``` -标题 标题 标题 -───── -``` - -| 复用规则 | 说明 | -|----------|------| -| Tab 配色 | 完全沿用 §9.1.1 横向页签 | -| Tab 字号 | `16px Medium`（页头位置比一般 tab 略大） | -| Tab 间距 | `--spacing-5` (24px) | -| 激活态下划线 | `2px solid #4096FF`，宽与文字齐 | - -### 12.3 与右侧操作区的组合 - -页头右侧常承载主操作按钮（「+ 新建」、「导出」等）。规则： - -- 按钮组靠右对齐，右 padding 与左 padding 一致 (`--spacing-5`) -- 多按钮排列顺序参照 §5.3.4（默认按钮在左、主按钮在右），按钮间距 `--spacing-2` -- Tabs 页头中右侧操作区与 Tabs 同高居中 - ---- - -## 13. 分页 - -> 对应「4.6 导航组件-分页」下半段。三种形态——**正常分页 / 精简分页 / 导航式分页**——按页面信息量与可用空间选用。 - -### 13.1 正常分页 - -承载大列表，提供页码、跳转、每页条数选择： - -``` -共 240 项 < ① 2 3 4 5 … 24 > 每页 [10▾] 条 前往 [ ] 页 -``` - -#### 13.1.1 元素配色与规格 - -| 元素 | 字号 / 色值 | 来源 / 说明 | -|------|-------------|-------------| -| 「共 N 项」总数文字 | `14px Regular`，`#6E88B0` | ZS-004-04 | -| 页码按钮（默认） | `14px Regular`，`#C5CFE0`，背景 `transparent` | ZS-004-02 | -| 页码按钮（hover） | `#4096FF`，背景 `rgba(22,119,255,0.08)` | ZS-002-05 | -| 页码按钮（激活/当前页） | `#FFFFFF`，背景 `#1677FF`（实心圆） | ZS-002-06 | -| 页码按钮（失效） | `#4A6491`，背景 `transparent` | ZS-004-05 | -| 左右翻页箭头 `<` `>` | `14px`，`#6E88B0`，hover → `#4096FF` | ZS-004-04 → ZS-002-05 | -| 翻页箭头失效（首/末页） | `#4A6491` | ZS-004-05 | -| 省略号 `…` | `#6E88B0` | ZS-004-04，静态展示，不可点 | -| 每页条数下拉 `[10▾]` | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `60px` | -| 「前往 N 页」输入框 | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `48px` | - -#### 13.1.2 页码按钮规格 - -| 属性 | 取值 | -|------|------| -| 形状 | 圆形 `28px × 28px`（`border-radius: 50%`） | -| 默认背景 | `transparent` | -| 当前页背景 | `#1677FF` (ZS-002-06)，实心圆，白色数字 | -| 字号 | `14px Regular`（数字 D-DIN 或 Noto Sans） | -| 项间距 | `--spacing-1` (4px) | - -#### 13.1.3 元素间距 - -| 区段 | 间距 | -|------|------| -| 「共 N 项」→ 翻页区 | `--spacing-4` (16px) | -| 翻页区内（箭头 / 页码） | `--spacing-1` (4px) | -| 翻页区 → 每页下拉 | `--spacing-5` (24px) | -| 每页下拉 → 前往输入 | `--spacing-4` (16px) | - -### 13.2 精简分页 - -承载弹窗 / 表格紧凑场景，只暴露「当前页 / 总页数」与左右翻页： - -``` -共 1 项 < [ 1 ] / 10 > -``` - -#### 13.2.1 规格 - -| 元素 | 配色 / 备注 | -|------|------------| -| 「共 N 项」 | 同 §13.1.1 | -| `<` `>` 翻页箭头 | 同 §13.1.1 | -| `[ 1 ]` 当前页输入框 | 沿用 §14.1 输入框规格，高 `28px`，宽 `40px`，居中文字 | -| `/ N` 总页数 | `14px Regular`，`#6E88B0` (ZS-004-04) | -| 元素间距 | `--spacing-2` (8px) | - -#### 13.2.2 与正常分页的差异 - -| 维度 | 正常分页 | 精简分页 | -|------|----------|----------| -| 页码 | 点击式数字列表 | 输入框 + 总页数文字 | -| 跳转方式 | 点击数字 / 前往输入 | 直接修改输入框 | -| 每页条数 | 暴露下拉 | 不暴露（默认值由调用方决定） | -| 适用 | 列表 / 表格主内容区 | 弹窗、抽屉、卡片内嵌列表 | - -### 13.3 导航式分页 - -承载长文 / 详情页的「上一篇 / 下一篇」式翻页，只有方向，不暴露页码： - -``` -下一页 » -« 上一页 -``` - -#### 13.3.1 规格 - -| 元素 | 配色 / 备注 | -|------|------------| -| 「下一页」/「上一页」文字 + 箭头 | `14px Regular`，`#4096FF` (ZS-002-05) | -| Hover | `#1677FF` (ZS-002-06) + 下划线 | -| 失效（首/末篇） | `#4A6491` (ZS-004-05)，`cursor: not-allowed` | -| 箭头位置 | `下一页 »`（箭头在后）/ `« 上一页`（箭头在前） | -| 文字 → 箭头间距 | `--spacing-2` (8px) | -| 两个按钮纵向排列时项间距 | `--spacing-3` (12px) | - -### 13.4 三种分页的选用决策 - -| 场景 | 选择 | -|------|------| -| 后台列表 / 表格 | §13.1 正常分页 | -| Modal / Drawer 内嵌列表 | §13.2 精简分页 | -| 详情页前后翻 | §13.3 导航式分页 | -| 列表少于 1 页（项数 ≤ pageSize） | **不显示**分页 | -| 项数明确但页码可能很多（>50 页） | 用正常分页 + 隐藏中间页码（`...` 省略） | - ---- - -## 14. 输入框（搜索框） - -> 对应设计稿「输入框.png」。按使用场景分三类：**基本搜索框 / 后台系统搜索框 / 页面头部搜索框**。配色全部从 ZS-002 主色蓝与 ZS-004 深蓝系取。 - -### 14.1 公共规格 - -所有搜索框共用同一套尺寸 / 边框规格： - -| 属性 | 默认（正常） | 小号 | -|------|--------------|------| -| 高度 | `32px` | `28px` | -| 水平 padding | `--spacing-3` (12px) | `--spacing-2` (8px) | -| 圆角 | `2px`（§4.1） | `2px` | -| 字号 | `14px Regular` | `14px Regular` | -| 文字色 | `#C5CFE0` (ZS-004-02) | 同 | -| 占位符色 | `#6E88B0` (ZS-004-04) | 同 | -| 背景 | `#0C1836` (ZS-004-09) | 同 | - -#### 14.1.1 边框状态 - -| 状态 | 边框 | 来源 | -|------|------|------| -| 默认 | `1px solid #1A2F5A` | ZS-004-07 | -| Hover | `1px solid #4096FF` | ZS-002-05 | -| Focus | `1px solid #1677FF` + 外发光 `0 0 0 2px rgba(22,119,255,0.16)` | ZS-002-06 | -| 失效 | `1px solid #2D4473`，背景 `rgba(22,119,255,0.04)` | ZS-004-06 | -| 错误 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | ZS-001-06 | - -### 14.2 基本搜索框 - -#### 14.2.1 基础搜索框 - -输入框尾部带 🔍 图标，回车或点击图标触发搜索： - -``` -[ 搜索 🔍 ] -``` - -| 角色 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 | -| 图标 hover | `#4096FF` | ZS-002-05 | -| 图标 → 输入边缘间距 | `--spacing-2` (8px) | — | - -#### 14.2.2 分类搜索框（带前缀下拉） - -输入框左侧拼一个分类下拉，常用于「按协议搜 IP」等场景： - -``` -[ http:// ▾ ] [ 搜索 IP 地址 🔍 ] -``` - -| 角色 | 色值 / 规格 | 备注 | -|------|-------------|------| -| 前缀下拉宽度 | `auto`，最小 `72px` | 内容自适应 | -| 前缀下拉与输入框 | 共用同一组边框，**中间无缝**（公用一条 `1px #1A2F5A` 分隔） | 视为一体控件 | -| 前缀下拉箭头 `▾` | `12px`，`#6E88B0` | hover → `#4096FF` | -| 整体 focus 行为 | 焦点落到输入框时，**前缀下拉的边框也同步高亮** | — | - -### 14.3 后台系统常用搜索框 - -输入框 + 紧贴右侧的**实心蓝色搜索按钮**，常用于后台主内容区列表筛选： - -``` -[ 🔍 搜索任务集名称/负责人 ] [ 搜索 ] -``` - -#### 14.3.1 规格 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 左侧搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 | -| 图标 → 文字间距 | `--spacing-2` (8px) | — | -| 输入框右边框 | **无**（与按钮无缝拼接） | — | -| 按钮 | 沿用 §5.2.1 主按钮，圆角 `2px`，文字 `搜索` | — | -| 按钮高度 | 与输入框一致 `32px` | — | -| 按钮左侧 | 与输入框紧贴，**无间距** | — | - -### 14.4 页面头部搜索框 - -页头位置的搜索控件，支持四种扩展：**单行 / 高级搜索 / 历史记录 / 输入联想**。 - -#### 14.4.1 单行（最简） - -``` -[ 输入的文字 ] [ 搜索 ] -``` - -规格同 §14.3，仅省略左侧 🔍 图标，让输入文字占满。 - -#### 14.4.2 含高级搜索切换 - -右侧叠加一个文字按钮「高级搜索 ▾」，展开后显示模式选项： - -``` -[ 输入的文字 ] [ 搜索 ] 高级搜索 ▾ - ○ 模糊匹配 ● 精准匹配 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 「高级搜索 ▾」文字按钮 | `14px Regular`，`#4096FF`，hover `#1677FF` | ZS-002-05 → ZS-002-06 | -| 「高级搜索」与「搜索」按钮间距 | `--spacing-3` (12px) | — | -| 单选项「模糊匹配 / 精准匹配」 | 沿用通用 Radio 配色：未选 `1px solid #6E88B0`，已选实心 `#1677FF` | — | -| 单选项 → 搜索框纵向间距 | `--spacing-2` (8px) | — | - -#### 14.4.3 含历史记录 - -输入框下方显示最近搜索词列表，点击直接用该词搜索： - -``` -[ 输入的文字 ] [ 搜索 ] - -搜索记录词、搜索记录词、记录词 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 历史记录文字 | `12px Regular`，`#4096FF` | ZS-002-05 | -| 项间分隔符（顿号 `、`） | `#4A6491` | ZS-004-05（与文字色不同，弱化分隔） | -| 历史项 hover | `#1677FF` + 下划线 | ZS-002-06 | -| 历史区与搜索框纵向间距 | `--spacing-2` (8px) | — | - -#### 14.4.4 含输入联想下拉 - -用户输入时，下方弹出联想词面板： - -``` -[ 这是 ] [ 搜索 ] -┌─────────────────────────────────┐ -│ 这是搜索输入联想词 │ -│ 这是搜索输入联想词 │ -│ 这是搜索输入联想词 │ -│ 这是联想词 │ -│ 这是联想词悬浮 ←hovered │ -│ …… │ -└─────────────────────────────────┘ -``` - -##### 面板规格 - -| 属性 | 取值 | -|------|------| -| 背景 | `#122347` (ZS-004-08) | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | -| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） | -| 圆角 | `2px`（与输入框一致） | -| 项高度 | `36px` | -| 项水平 padding | `--spacing-3` (12px) | -| 项字号 | `14px Regular`，`#C5CFE0` (ZS-004-02) | -| 面板宽度 | 与输入框等宽（不含右侧按钮） | -| 面板与输入框纵向间距 | `--spacing-1` (4px) | - -##### 项状态 - -| 状态 | 背景 | 文字 | -|------|------|------| -| 默认 | `transparent` | `#C5CFE0` | -| Hover（鼠标 / 键盘焦点） | `rgba(22,119,255,0.16)` 或 `#1A2F5A` (ZS-004-07) | `#FFFFFF` | -| 已点击（点选后回填输入框） | — | — | - -##### 键盘导航 - -- `↑` / `↓` 在联想词之间移动焦点（焦点项视觉等价于 Hover） -- `Enter` 选中焦点项并回填输入框 + 触发搜索 -- `Esc` 关闭面板，焦点回到输入框 - -#### 14.4.5 联想下拉 + 历史记录的关系 - -- **未输入时**：可显示历史记录（§14.4.3 横向展开形态） -- **开始输入时**：历史记录被联想下拉**取代**，不要并存 -- **清空输入框**：回到历史记录显示 - -### 14.5 三种搜索框的选用决策 - -| 场景 | 选择 | -|------|------| -| 表单内 / 卡片内的辅助搜索 | §14.2.1 基础搜索框（图标内嵌） | -| 需要按类型 / 协议过滤的搜索 | §14.2.2 分类搜索框（带前缀下拉） | -| 后台列表 / 表格顶部筛选 | §14.3 后台搜索框（输入 + 实心按钮） | -| 页面头部全局搜索 | §14.4 页面头部搜索框（按需开启高级 / 历史 / 联想） | - -### 14.6 CSS Token 参考 - -```css -:root { - --search-bg: #0C1836; /* ZS-004-09 */ - --search-border: #1A2F5A; /* ZS-004-07 */ - --search-border-hover: #4096FF; /* ZS-002-05 */ - --search-border-focus: #1677FF; /* ZS-002-06 */ - --search-border-error: #F5222D; /* ZS-001-06 */ - --search-text: #C5CFE0; /* ZS-004-02 */ - --search-placeholder: #6E88B0; /* ZS-004-04 */ - --search-icon: #6E88B0; - --search-icon-hover: #4096FF; - - /* 联想下拉 */ - --suggest-bg: #122347; /* ZS-004-08 */ - --suggest-item-hover: rgba(22,119,255,0.16); - --suggest-item-text: #C5CFE0; - --suggest-item-hover-text: #FFFFFF; - - /* 历史记录 */ - --history-text: #4096FF; - --history-text-hover: #1677FF; - --history-sep: #4A6491; -} -``` - ---- - -## 15. 选择器（Select / Multi-Select / Cascader） - -> 对应设计稿「多项选择.png」。覆盖**多项选择**与**多项带搜索**两种主要变体（基础单选选择器同规格，仅触发器不渲染 Tag、面板项不带复选框；级联选择器原则相同，差异在面板分栏横向铺开）。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框完全对齐。 - -### 15.1 公共规格 - -#### 15.1.1 触发器（Trigger） - -触发器即「请选择 ▾」或「已选 Tag … ▾」那一行。尺寸、边框、状态机与 §14.1 输入框完全对齐： - -| 属性 | 取值 | 来源 | -|------|------|------| -| 高度 | `32px` | §14.1 | -| 圆角 | `2px` | §4.1 | -| 水平 padding | `--spacing-3` (12px) | §7.1 | -| 背景 | `#0C1836` (ZS-004-09) | — | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 占位文字 "请选择" | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 右侧箭头 `▾` | `12px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | - -边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。 - -#### 15.1.2 下拉面板（Panel） - -面板沿用 §14.4.4 联想下拉的容器规格，仅项内容不同： - -| 属性 | 取值 | -|------|------| -| 背景 | `#122347` (ZS-004-08) | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | -| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | -| 圆角 | `2px` | -| 项高度 | `36px` | -| 项水平 padding | `--spacing-3` (12px) | -| 项字号 | `14px Regular`，`#C5CFE0` (ZS-004-02) | -| 面板宽度 | 与触发器等宽（搜索框、底部按钮均内嵌等宽） | -| 面板与触发器纵向间距 | `--spacing-1` (4px) | - -#### 15.1.3 项状态 - -| 状态 | 背景 | 文字 | -|------|------|------| -| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | -| Hover / 键盘焦点 | `rgba(22,119,255,0.16)` 或 `#1A2F5A` | `#FFFFFF` | -| 已选中 | `transparent`（依赖左侧复选框示态，不改行底色） | `#FFFFFF` | -| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | - -点击行的任意位置等价于点击复选框（命中区 = 整行）。 - ---- - -### 15.2 多项选择 - -> 触发器内渲染**已选 Tag 列表**而不是单行文字；面板项左侧带**复选框**，多选不关闭面板。 - -``` -┌─────────────────────────────────────┐ -│ n1 × n2 × +1 × ▾ │ ← 触发器（已选 Tag） -└─────────────────────────────────────┘ -┌─────────────────────────────────────┐ ← 下拉面板 -│ ☑ n1 │ -│ ☐ n2 │ -│ ☐ n3 │ -│ ☐ n4 │ -│ ☐ n5 │ -├─────────────────────────────────────┤ -│ [+ 添加项] │ ← 可选：底部「添加」按钮（§15.2.4） -└─────────────────────────────────────┘ -``` - -#### 15.2.1 已选 Tag - -触发器内每个已选项渲染为一颗 Tag。**实心主色蓝底 + 白字**，右侧带关闭按钮 `×`。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 背景 | `#1677FF` (ZS-002-06) | — | -| 文字 | `12px Regular`，`#FFFFFF` | — | -| 圆角 | `2px` | — | -| 内边距 | `2px 6px` | — | -| Tag 间距 | `--spacing-1` (4px) | §7.1 | -| 关闭按钮 `×` | `12px`，`rgba(255,255,255,0.72)`，hover `#FFFFFF` | — | -| 折叠展示 `+N ×` | 当选中超过宽度可容纳时，把剩余 N 项收成一颗 `+N ×` Tag。Hover 显示 Tooltip 列出剩余项名；点击 `×` 清空溢出选项 | — | - -#### 15.2.2 复选项 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 复选框尺寸 | `14px × 14px` | — | -| 复选框圆角 | `2px` | — | -| 未选边框 | `1px solid #6E88B0` (ZS-004-04) | — | -| 未选背景 | `transparent` | — | -| 已选填充 | `#1677FF` (ZS-002-06) | — | -| 已选勾 ✓ | `#FFFFFF`，描边 `2px` | — | -| 半选填充 | `#1677FF` | — | -| 半选指示 | 中央横线 `width 8px / height 2px / #FFFFFF` | — | -| Hover 边框 | `#4096FF` (ZS-002-05) | — | -| 禁用边框 | `#4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | -| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 | - -#### 15.2.3 全选模式（顶部「全部」节点） - -面板首行可选地渲染一个「全部」聚合节点，作用类似一次性勾 / 取消所有项： - -``` -┌─────────────────────────────────────┐ -│ ▢ 全部 │ ← 半选 / 未选 / 全选三态 -│ ☑ n1 │ -│ ☐ n2 │ -└─────────────────────────────────────┘ -``` - -| 子状态 | 复选框外观 | 触发动作 | -|--------|-----------|----------| -| 一个都没选 | 空心，边框 `#6E88B0` | 点击 → 勾上**全部**子项 | -| 部分选中 | 实心 `#1677FF` + 中央 `2px` 白色横线（半选） | 点击 → 勾上**全部**剩余未选 | -| 全部选中 | 实心 `#1677FF` + 白色勾 ✓ | 点击 → 清空全部 | - -文字 "全部" 与下方项同色 `#C5CFE0`，不加粗。 - -#### 15.2.4 底部「+ 添加项」按钮 - -面板底部可选地嵌入一颗虚线主色按钮，常用于「在已知池子里允许用户**就地新增**一项」（如标签、自定义分类）： - -``` -┌─────────────────────────────────────┐ -│ [+ 正常] │ -└─────────────────────────────────────┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 高度 | `32px`（与复选项行齐） | — | -| 边框 | `1px dashed #1677FF` (ZS-002-06) | — | -| 背景 | `transparent` | — | -| 文字 | `14px Regular`，`#4096FF` (ZS-002-05) | — | -| 前缀图标 `+` | `12px`，与文字同色 | — | -| Hover | 背景 `rgba(22,119,255,0.16)`，文字 `#1677FF` | ZS-002-05 → ZS-002-06 | -| Active | 背景 `rgba(22,119,255,0.24)`，文字 `#FFFFFF` | — | -| 与最后一条复选项纵向分隔 | 上方分割线 `1px solid #1A2F5A` + `--spacing-1` (4px) 间距 | §6.1 | - -点击行为由业务自行实现（如弹出输入框、内联编辑）。 - ---- - -### 15.3 多项带搜索 - -> 在 §15.2 基础上，**面板顶部嵌入一行搜索框**，输入时实时过滤复选项列表。其它结构（已选 Tag / 复选项 / 全选 / 底部添加）完全沿用 §15.2。 - -``` -┌─────────────────────────────────────┐ -│ n1 × +1 × ▾ │ -└─────────────────────────────────────┘ -┌─────────────────────────────────────┐ -│ [ 搜索 🔍 ] │ ← 嵌入式搜索框（§15.3.1） -├─────────────────────────────────────┤ -│ ▢ 全部 │ -│ ☑ n1 │ -│ ☐ n2 │ -│ ☐ n3 │ -└─────────────────────────────────────┘ -``` - -#### 15.3.1 嵌入式搜索框 - -搜索框尺寸采用 §14.1 公共规格的**小号**（高度 28px），保持与面板视觉上的"嵌入感"： - -| 属性 | 取值 | -|------|------| -| 高度 | `28px`（小号） | -| 水平 padding | `--spacing-2` (8px) | -| 圆角 | `2px` | -| 背景 | `#0C1836` (ZS-004-09，比面板背景深一档) | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | -| 文字 | `14px Regular`，`#C5CFE0` | -| 占位符 | "搜索"，`#6E88B0` | -| 右侧 🔍 / ⊗ 图标 | `14px`，`#6E88B0`，hover `#4096FF` | -| 搜索框 → 列表项纵向间距 | `--spacing-2` (8px) + 分割线 `1px solid #1A2F5A` | - -输入非空时右侧图标切换为 `⊗`（清空），点击清空输入并恢复完整列表。 - -#### 15.3.2 加载与空状态 - -异步获取选项（如远程搜索）时，列表区按以下规则渲染： - -| 状态 | 渲染 | -|------|------| -| 加载中 | 文字 "加载中…"，单行居左，`14px Regular`，`#6E88B0`，行高 `32px` | -| 无匹配 | 文字 "无匹配项"，同上 | -| 网络错误 | 文字 "加载失败，点击重试"，`#FF7875` (ZS-001-04)，可点击 | - ---- - -### 15.4 选用决策 - -| 场景 | 选择 | -|------|------| -| 候选池 ≤ 10 项，单值 | §15.1 公共规格 + 去掉复选框（基础单选） | -| 候选池 ≤ 10 项，多值 | §15.2 多项选择 | -| 候选池 > 10 项 / 不可枚举 | §15.3 多项带搜索 | -| 候选池有层级关系（如部门 / 区域） | 级联选择器：每级独立面板横向铺开，单级内部规格同 §15.1~15.3 | -| 允许用户**新增不在候选池**的项 | 在 §15.2 / §15.3 末尾启用 §15.2.4「+ 添加项」按钮 | - ---- - -### 15.5 CSS Token 参考 - -```css -:root { - /* 触发器 —— 复用 §14 搜索框 */ - --select-trigger-bg: var(--search-bg); /* #0C1836 */ - --select-trigger-border: var(--search-border); /* #1A2F5A */ - --select-trigger-placeholder: var(--search-placeholder); /* #6E88B0 */ - --select-trigger-arrow: #6E88B0; - --select-trigger-arrow-hover: #4096FF; - - /* 下拉面板 —— 复用 §14.4.4 联想 */ - --select-panel-bg: var(--suggest-bg); /* #122347 */ - --select-panel-border: #1A2F5A; - --select-item-text: var(--suggest-item-text); /* #C5CFE0 */ - --select-item-hover-bg: var(--suggest-item-hover); /* rgba(22,119,255,0.16) */ - --select-item-hover-text: var(--suggest-item-hover-text); /* #FFFFFF */ - --select-item-disabled: #4A6491; /* ZS-004-05 */ - - /* 已选 Tag */ - --select-tag-bg: #1677FF; /* ZS-002-06 */ - --select-tag-text: #FFFFFF; - --select-tag-close: rgba(255,255,255,0.72); - --select-tag-close-hover: #FFFFFF; - - /* 复选框 */ - --check-border: #6E88B0; /* ZS-004-04 */ - --check-border-hover: #4096FF; /* ZS-002-05 */ - --check-fill: #1677FF; /* ZS-002-06 */ - --check-mark: #FFFFFF; - --check-disabled-border: #4A6491; /* ZS-004-05 */ - --check-disabled-bg: rgba(22,119,255,0.04); - - /* 底部「+ 添加项」 */ - --select-add-border: #1677FF; /* ZS-002-06 */ - --select-add-text: #4096FF; /* ZS-002-05 */ - --select-add-hover-bg: rgba(22,119,255,0.16); - --select-add-hover-text: #1677FF; - --select-add-active-bg: rgba(22,119,255,0.24); - --select-add-active-text: #FFFFFF; - - /* 加载 / 错误 */ - --select-loading-text: #6E88B0; - --select-error-text: #FF7875; /* ZS-001-04 */ -} -``` - ---- - -## 16. 单选与多选（Radio / Checkbox） - -> 对应设计稿「多选框.png」。本章定义独立作为表单字段使用的**单选（Radio）**和**多选（Checkbox）**两类原子控件，包含**未选 / 已选 / 未选禁用 / 已选禁用**四种状态。§15.2.2「多项选择的复选项」中的复选框直接复用本章 §16.3 规格，本章是单一真源。 - -### 16.1 公共规格 - -| 属性 | 取值 | -|------|------| -| 控件尺寸 | `14px × 14px` | -| 控件描边宽度 | `1px` | -| 控件 → 文字间距 | `--spacing-2` (8px)（§7.1） | -| 文字字号 | `14px Regular` | -| 行高 | `20px`（点击命中区与文字垂直对齐） | -| 同一组**横向相邻**项的间距 | `--spacing-6` (24px)（§7.1） | -| 同一组**纵向相邻**项的间距 | `--spacing-3` (12px)（§7.1） | - -整行（控件 + 文字）任意位置可点击 = 等效切换该项状态。 - ---- - -### 16.2 单选（Radio） - -> 一组互斥选项中只能选中一个。视觉为圆形描边 + 内圆实心点。 - -``` -○ 未选 ● 已选 ○ 未选禁用 ● 已选禁用 - (整组降饱和) -``` - -#### 16.2.1 外观规格 - -| 状态 | 外环 | 内圆 | 文字 | -|------|------|------|------| -| 未选 | `1px solid #4096FF` (ZS-002-05) + 背景 `transparent` | — | `#C5CFE0` (ZS-004-02) | -| 未选 Hover | `1px solid #1677FF` (ZS-002-06) | — | `#FFFFFF` | -| 已选 | `1px solid #1677FF` (ZS-002-06) | 中心实心圆 `6px × 6px`，`#1677FF` | `#FFFFFF` | -| 已选 Focus | 外环外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环 | — | `#FFFFFF` | -| 未选禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | `#4A6491` | -| 已选禁用 | `1px solid #4A6491` (ZS-004-05) | 中心实心圆 `6px × 6px`，`#4A6491` | `#4A6491` | - -外环与内圆均为正圆（`border-radius: 50%`）。 - -#### 16.2.2 与 label 组合使用 - -「基本使用-组合」场景：选中某 Radio 项后，**下方展开关联输入字段**（如 Antd 的 Form.Item 嵌入式组合）。 - -``` -● 已选 - - lable: [ ] - lable: [ ] -``` - -| 元素 | 规格 | -|------|------| -| Radio → 下方第一行 label 纵向间距 | `--spacing-3` (12px)（§7.1） | -| 嵌入字段左缩进 | 与 Radio 文字左边缘对齐（即外环宽 14px + 间距 8px = **22px 左缩进**） | -| 嵌入字段的 label 与 input | 沿用 §14.1 输入框规格 | -| 嵌入区分组背景 | 可选地用 `#1A2F5A` (ZS-004-07) 作浅色卡片底色，强化"属于该 Radio"的视觉归属 | - ---- - -### 16.3 多选（Checkbox） - -> 多个选项可同时选中，互不影响。视觉为方形描边 + 内填勾 ✓。 - -``` -☐ 未选 ☑ 已选 ☐ 未选禁用 ☑ 已选禁用 - (整组降饱和) -``` - -#### 16.3.1 外观规格 - -| 状态 | 边框 / 背景 | 勾 ✓ | 文字 | -|------|------------|------|------| -| 未选 | `1px solid #4096FF` (ZS-002-05) + 背景 `transparent` | — | `#C5CFE0` (ZS-004-02) | -| 未选 Hover | `1px solid #1677FF` (ZS-002-06) | — | `#FFFFFF` | -| 已选 | 实心填充 `#1677FF` (ZS-002-06) | `#FFFFFF`，描边 `2px` | `#FFFFFF` | -| 已选 Focus | 外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环 | `#FFFFFF` | `#FFFFFF` | -| 半选 | 实心填充 `#1677FF` (ZS-002-06) | 中央横线 `8px × 2px`，`#FFFFFF` | `#FFFFFF` | -| 未选禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | `#4A6491` | -| 已选禁用 | 实心填充 `#4A6491` (ZS-004-05) | `#C5CFE0` 或 `rgba(255,255,255,0.4)` | `#4A6491` | - -复选框统一圆角 `2px`（§4.1）。 - -#### 16.3.2 与 label 组合使用 - -与 §16.2.2 完全一致 —— Checkbox 选中后下方展开嵌入式输入字段，缩进与间距规格相同（左缩进 22px、纵向间距 12px）。 - -``` -☑ 已选 - - lable: [ ] - lable: [ ] -``` - ---- - -### 16.4 状态对照表 - -| 状态 | Radio 外环 | Radio 内圆 | Checkbox 外框 | Checkbox 勾 | 文字 | -|------|-----------|-----------|--------------|------------|------| -| 未选 | `#4096FF` 描边 | — | `#4096FF` 描边 | — | `#C5CFE0` | -| Hover | `#1677FF` 描边 | — | `#1677FF` 描边 | — | `#FFFFFF` | -| 已选 | `#1677FF` 描边 | `#1677FF` 6px 圆 | `#1677FF` 填充 | `#FFFFFF` ✓ | `#FFFFFF` | -| 半选（仅 Checkbox） | — | — | `#1677FF` 填充 | `#FFFFFF` 横线 | `#FFFFFF` | -| Focus | + `0 0 0 2px rgba(22,119,255,0.16)` | — | + `0 0 0 2px rgba(22,119,255,0.16)` | — | `#FFFFFF` | -| 未选禁用 | `#4A6491` 描边 | — | `#4A6491` 描边 | — | `#4A6491` | -| 已选禁用 | `#4A6491` 描边 | `#4A6491` 6px 圆 | `#4A6491` 填充 | `#C5CFE0` ✓ | `#4A6491` | - ---- - -### 16.5 与 §15.2.2 的关系 - -§15.2.2「多项选择面板内的复选项」直接复用本章 §16.3 的复选框外观规格，**唯一差异**： - -- 在多项选择下拉面板里，**未选状态边框**是 `#6E88B0` (ZS-004-04，更"灰"的占位色)，而非本章 §16.3 默认的 `#4096FF`（更"蓝"的强调色） -- 原因：下拉面板里项数多，所有复选框同时蓝色描边会过于喧闹；独立表单字段里数量少（通常 2–4 项），用强调色更醒目 - -如需统一也可以全面采用本章规格 —— 二选一即可，但**一个项目内部应保持一致**。 - ---- - -### 16.6 CSS Token 参考 - -```css -:root { - /* 公共 */ - --field-size: 14px; - --field-border-w: 1px; - --field-radius: 2px; /* 仅 Checkbox 用 */ - --field-text: #C5CFE0; /* ZS-004-02 */ - --field-text-hover: #FFFFFF; - --field-text-disabled: #4A6491; /* ZS-004-05 */ - --field-focus-ring: 0 0 0 2px rgba(22,119,255,0.16); - - /* Radio */ - --radio-border: #4096FF; /* ZS-002-05 */ - --radio-border-hover: #1677FF; /* ZS-002-06 */ - --radio-border-checked: #1677FF; - --radio-dot: #1677FF; /* 中心 6×6 实心 */ - --radio-border-disabled: #4A6491; /* ZS-004-05 */ - --radio-dot-disabled: #4A6491; - --radio-bg-disabled: rgba(22,119,255,0.04); - - /* Checkbox */ - --checkbox-border: #4096FF; /* ZS-002-05 */ - --checkbox-border-hover: #1677FF; /* ZS-002-06 */ - --checkbox-fill-checked: #1677FF; /* ZS-002-06 */ - --checkbox-mark: #FFFFFF; - --checkbox-border-disabled: #4A6491; /* ZS-004-05 */ - --checkbox-fill-disabled: #4A6491; - --checkbox-mark-disabled: #C5CFE0; - --checkbox-bg-disabled: rgba(22,119,255,0.04); - - /* 组合：嵌入式 label + 输入框（§16.2.2 / §16.3.2） */ - --field-group-indent: 22px; /* 14px 控件 + 8px 间距 */ - --field-group-gap-y: var(--spacing-3); /* 12px */ -} -``` - ---- - -## 17. 日期选择器（DatePicker） - -> 对应设计稿「日期时间筛选框.png」。覆盖**单日期选择**与**日期范围选择**两种场景。面板包含**左侧快捷模式**（按天 / 按周 / 按月 / 自定义）、**起止输入区**、**双月日历主体**、**底部确认按钮**四块。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器完全对齐。 - -### 17.1 触发器（Trigger） - -触发器即「2021-12-09 📅」那一行。规格与 §14.1 输入框完全一致： - -| 属性 | 取值 | 来源 | -|------|------|------| -| 高度 | `32px` | §14.1 | -| 圆角 | `2px` | §4.1 | -| 水平 padding | `--spacing-3` (12px) | §7.1 | -| 背景 | `#0C1836` (ZS-004-09) | — | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 默认日期文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)；占位时 "请选择日期" 用 `#6E88B0` (ZS-004-04) | — | -| 右侧 📅 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | - -边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。 - -**范围选择**触发器变体：宽度自动延展，内显示 `2021-12-09 至 2022-01-09`。 - ---- - -### 17.2 下拉面板（Panel） - -面板为**左 + 右**两栏组合： - -``` -┌──────────┬───────────────────────────────────────────────────────┐ -│ 按天 › │ [ 2021-12-09 ⊗ ] 至 [ 2021-12-09 ⊗ ] │ -│ 按周 › ├───────────────────────────────────────────────────────┤ -│ 按月 › │ « < 2021 年 12 月 > » « < 2022 年 1 月 > » │ -│ 自定义 │ 日 一 二 三 四 五 六 日 一 二 三 四 五 六 │ -│ │ 29 30 1 2 3 4 5 29 30 1 2 3 4 5 │ -│ │ 6 7 8 ⓿ 10 11 12 6 7 8 ⓿ 10 11 12 │ -│ │ 13 14 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ │ -│ │ 20 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ │ -│ │ 27 ▓▓ ▓▓ ▓▓ ▓▓ 1 2 3 4 5 6 7 8 9 │ -│ │ 3 4 5 6 7 8 9 …… │ -│ ├───────────────────────────────────────────────────────┤ -│ │ [确定] [取消] │ -└──────────┴───────────────────────────────────────────────────────┘ - ⓿ = 起止日（实心蓝圆） ▓▓ = 范围内（浅蓝底矩形） -``` - -#### 17.2.1 面板容器规格 - -| 属性 | 取值 | -|------|------| -| 背景 | `#122347` (ZS-004-08) | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | -| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | -| 圆角 | `2px` | -| 与触发器纵向间距 | `--spacing-1` (4px) | -| 整体宽度 | 由左栏宽 `80px` + 右栏（双月并列）自适应得出 | -| 左右栏分隔线 | `1px solid #1A2F5A`（ZS-004-07） | - ---- - -### 17.3 左侧快捷模式（Sidebar） - -| 属性 | 取值 | -|------|------| -| 宽度 | `80px` | -| 项高度 | `36px` | -| 水平 padding | `--spacing-3` (12px) | -| 字号 | `14px Regular` | -| 右侧 `›` 图标（除"自定义"外） | `12px`，与文字同色 | - -#### 17.3.1 项状态 - -| 状态 | 背景 | 文字 | -|------|------|------| -| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | -| Hover | `rgba(22,119,255,0.16)` | `#FFFFFF` | -| 已选 | `#1677FF` (ZS-002-06) | `#FFFFFF` | - -#### 17.3.2 四种模式语义 - -| 模式 | 行为 | -|------|------| -| 按天 | 点击日期格 → 立即选中单日，关闭面板，触发器显示该日 | -| 按周 | hover 任意日期格 → **整周高亮**，点击 → 选中该周 | -| 按月 | 切换到月视图（日期格变成 12 个月名），点击 → 选中该月 | -| 自定义 | 默认显示双月日历，支持选中起止日做范围（详见 §17.5） | - ---- - -### 17.4 起止日期输入区（Range Inputs） - -仅在**自定义模式**下显示在右栏顶部： - -``` -[ 2021-12-09 ⊗ ] 至 [ 2021-12-09 ⊗ ] -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 输入框 | 沿用 §14.1 公共规格，宽度 `132px`，**只读**（点击日历格回填，不直接输入） | §14.1 | -| 中间 "至" 文字 | `14px Regular`，`#6E88B0` (ZS-004-04)，左右 padding `--spacing-3` (12px) | — | -| 右侧 `⊗` 清空按钮 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | -| 输入区 → 日历主体纵向间距 | `--spacing-3` (12px) + 分割线 `1px solid #1A2F5A` | §6.1 | -| 整行右内 padding | `--spacing-4` (16px) | §7.1 | - -未选起 / 止时对应输入框留空显示占位 "开始日期" / "结束日期"（`#6E88B0`）。 - ---- - -### 17.5 双月日历主体（Calendar Grid） - -并列展示**当月**与**下月**两张日历，便于跨月选范围。 - -#### 17.5.1 标题栏 - -``` -« < 2021 年 12 月 > » -``` - -| 元素 | 色值 / 规格 | -|------|-------------| -| 年月文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | -| 翻页箭头 `‹ ›` | `14px`，`#6E88B0`，hover `#4096FF` | -| 翻年箭头 `« »` | `14px`，`#6E88B0`，hover `#4096FF` | -| 标题栏高度 | `36px` | -| 双月之间间距 | `--spacing-6` (24px)（§7.1） | - -行为：`«` `»` 翻年；`‹` `›` 翻月。左日历翻动时右日历同步前移一月，保持"双月连续"。 - -#### 17.5.2 星期表头 - -| 属性 | 取值 | -|------|------| -| 文字 | `日 一 二 三 四 五 六` | -| 字号 | `12px Regular` | -| 颜色 | `#6E88B0` (ZS-004-04) | -| 行高 | `28px` | - -#### 17.5.3 日期格规格 - -| 属性 | 取值 | -|------|------| -| 单元尺寸 | `28px × 28px`（点击命中区） | -| 数字字号 | `14px Regular` | -| 圆角 | `50%`（已选时实心圆） | -| 行间距 | `0`（紧凑排列） | - -#### 17.5.4 日期格状态 - -| 状态 | 背景 | 文字 | -|------|------|------| -| 当月普通 | `transparent` | `#C5CFE0` (ZS-004-02) | -| 上下月填充（如 12 月日历里显示的 11/29、11/30、1/1、1/2） | `transparent` | `#4A6491` (ZS-004-05) | -| 今天（无边框样式） | `transparent` + `1px solid #1677FF` | `#C5CFE0` | -| Hover | `rgba(22,119,255,0.16)` | `#FFFFFF` | -| 已选起止日 | 实心圆 `#1677FF` (ZS-002-06) | `#FFFFFF` | -| 范围内（起止之间） | `rgba(22,119,255,0.16)` 矩形（无圆角，左右相连成连续色带） | `#FFFFFF` | -| 范围内 + 端点 | 矩形底色 + 端点实心圆叠加（视觉上"圆形扣"在色带头尾） | `#FFFFFF` | -| 禁用（超出 min/max） | `transparent` | `#4A6491`，鼠标 `not-allowed` | - -> ⚠️ **范围色带的实现要点**：范围内日期格不能各自圆角，否则中间会出现空隙。推荐方案：每行整体作为容器，范围内的日期用同色底向左右各延伸 `4px` 模拟连续；端点处再叠加 `28×28` 实心圆。 - ---- - -### 17.6 底部「确定 / 取消」按钮 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 区域高度 | `48px` | -| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 右内 padding | `--spacing-4` (16px) | §7.1 | -| 按钮对齐 | 右对齐 | -| 「确定」 | 沿用 §5.2.1 主按钮（实心 `#1677FF`），尺寸"小号"`28px` | §5.2.1 | -| 「取消」 | 沿用 §5.2.2 默认按钮（描边 + 透明底），尺寸"小号"`28px` | §5.2.2 | -| 两按钮间距 | `--spacing-2` (8px) | §7.1 | - -行为： -- 「确定」 → 提交当前选择，关闭面板，触发器显示选中值 -- 「取消」 → 丢弃临时选择，关闭面板，触发器值不变 - -按 `Esc` 等价于「取消」；按 `Enter` 等价于「确定」（当选择合法时）。 - ---- - -### 17.7 选用决策与变体 - -| 场景 | 选择 | -|------|------| -| 单日期 | 触发器 + 单月日历（无左侧快捷栏，无起止输入区） | -| 日期范围（常见筛选） | 完整组合：左侧快捷栏 + 双月日历 + 起止输入区 | -| 仅按周 / 按月 / 按季度 | 左侧只保留对应模式项；右侧日历切换为相应粒度 | -| 带时间（小时 / 分） | 在 §17.4 起止输入区下方追加时分选择列（24h 滚轮，未在本节展开） | -| 多日期独立选（非连续） | 不推荐用本组件 —— 改用 §15 多项选择 + 日期值列表 | - ---- - -### 17.8 CSS Token 参考 - -```css -:root { - /* 触发器 —— 复用 §14 搜索框 */ - --date-trigger-bg: var(--search-bg); /* #0C1836 */ - --date-trigger-border: var(--search-border); /* #1A2F5A */ - --date-trigger-text: var(--search-text); /* #C5CFE0 */ - --date-trigger-placeholder: var(--search-placeholder); /* #6E88B0 */ - --date-trigger-icon: #6E88B0; - --date-trigger-icon-hover: #4096FF; /* ZS-002-05 */ - - /* 面板 —— 复用 §14.4.4 联想 */ - --date-panel-bg: var(--suggest-bg); /* #122347 */ - --date-panel-border: #1A2F5A; - --date-panel-divider: #1A2F5A; /* 左右栏 + 顶/底分割线 */ - - /* 左侧快捷栏 */ - --date-sidebar-w: 80px; - --date-sidebar-item-h: 36px; - --date-sidebar-text: #C5CFE0; /* ZS-004-02 */ - --date-sidebar-text-hover: #FFFFFF; - --date-sidebar-bg-hover: rgba(22,119,255,0.16); - --date-sidebar-bg-active: #1677FF; /* ZS-002-06 */ - --date-sidebar-text-active: #FFFFFF; - - /* 起止输入区 */ - --date-range-sep: #6E88B0; /* "至" 文字 */ - --date-range-clear: #6E88B0; - --date-range-clear-hover: #4096FF; - - /* 日历单元 */ - --date-cell-size: 28px; - --date-cell-text: #C5CFE0; /* 当月 */ - --date-cell-text-outside: #4A6491; /* 上下月填充, ZS-004-05 */ - --date-cell-text-disabled: #4A6491; - --date-cell-bg-hover: rgba(22,119,255,0.16); - --date-cell-text-hover: #FFFFFF; - --date-cell-bg-selected: #1677FF; /* 起止实心圆 */ - --date-cell-text-selected: #FFFFFF; - --date-cell-bg-in-range: rgba(22,119,255,0.16); /* 范围色带 */ - --date-cell-border-today: #1677FF; /* 今天 1px 边框 */ - - /* 标题栏 */ - --date-title-text: #C5CFE0; - --date-title-arrow: #6E88B0; - --date-title-arrow-hover: #4096FF; - --date-weekday-text: #6E88B0; /* 日一二…六 */ - - /* 底部按钮区 */ - --date-footer-h: 48px; - --date-footer-divider: #1A2F5A; -} -``` - ---- - -## 18. 穿梭框（Transfer） - -> 对应设计稿「5.18 输入-穿梭框」。用于在「源列表 / 目标列表」两栏之间搬移条目，中间用 `‹ ›` 方向按钮转移选中项。覆盖**基础用法**与**可搜索**两种变体；左栏可为**树形**（带层级 + 复选框），右栏为**已选平铺列表**。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器 / §16 复选框完全对齐。 - -### 18.1 整体结构 - -``` -┌─ 列表(0/13) ──────┐ ┌─ 已选(6/49) ──────┐ -│ ▸ ☐ XXXX公司 │ │ ☐ 李宏洋 │ -│ ▸ ☐ 总裁办 │ ┌──┐ │ ☐ 舒敌 │ -│ ▸ ☐ 人事部 │ │ ‹ │ │ ☑ 宴青 │ -│ ▸ ☐ 技术部 │ ├──┤ │ ☐ 陈平 │ -│ ☐ 张小刚 │ │ › │ │ ☐ 张小凡 │ -│ ☐ 李小红 │ └──┘ │ ☐ 李小红 │ -└───────────────────┘ └───────────────────┘ - 源栏（可树形） 方向按钮组 目标栏（已选平铺） -``` - -- 左 = **源列表**（待选），右 = **目标列表**（已选）；中间两颗上下排列的方向按钮 `‹`（移回源）/ `›`（移入目标）。 -- 两栏顶部各有一条**标题栏**，显示名称 + 计数 `(已选/总数)`，如 `列表(0/13)`、`已选(6/49)`。 -- 源栏支持**树形结构**（部门层级 + 叶子节点），目标栏为**平铺列表**。 - -### 18.2 外层容器与栏规格 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 外层分栏框背景 | `#0C1836` (ZS-004-09) | §3.1.1 | -| 外层分栏框圆角 | `4px` | §4.1 | -| 外层内边距 | `--spacing-5` (24px) | §7.1 | -| 单栏宽度 | `≥ 240px`，两栏等宽 | — | -| 单栏背景 | `#122347` (ZS-004-08) | §3.1.2 卡片 | -| 单栏边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 单栏圆角 | `4px` | §4.1 | -| 栏体最小高度 | `360px`（不足时撑满，超出滚动） | — | -| 两栏与方向按钮组间距 | `--spacing-3` (12px) | §7.1 | - -### 18.3 栏标题栏（Header） - -标题栏是**实心主色蓝**横条，承载栏名 + 计数。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 背景 | `#1677FF` (ZS-002-06) | §1.1.6 主色 | -| 高度 | `40px` | — | -| 水平 padding | `--spacing-4` (16px) | §7.1 | -| 标题文字（如「列表」「已选」） | `14px Medium`，`#FFFFFF` | — | -| 计数文字 `(0/13)` | `14px Regular`，`rgba(255,255,255,0.85)` | — | -| 圆角 | 上方两角 `4px`，与栏体顶部贴合 | §4.1 | - -### 18.4 栏内条目 - -#### 18.4.1 平铺列表项（目标栏 / 源栏叶子） - -每行 = 复选框 + 文字，整行可点击切换勾选。复选框规格复用 §16.3。 - -| 状态 | 背景 | 复选框 | 文字 | -|------|------|--------|------| -| 默认 | `transparent` | 未选：`1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | -| Hover | `rgba(22,119,255,0.08)` | hover 边框 `#4096FF` (ZS-002-05) | `#FFFFFF` | -| 已选 | `transparent` | 实心填充 `#1677FF` (ZS-002-06) + 白勾 ✓ | `#FFFFFF` | -| 禁用 | `transparent` | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | `#4A6491` | - -| 属性 | 取值 | -|------|------| -| 行高 | `36px` | -| 水平 padding | `--spacing-3` (12px) | -| 复选框 → 文字间距 | `--spacing-2` (8px) | -| 项之间分隔 | 无分割线（靠 hover 背景区分） | - -#### 18.4.2 树形节点（源栏） - -源栏按部门层级缩进，父节点带展开箭头 `▸ / ▾`。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 展开箭头 `▸ / ▾` | `12px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | ZS-002-05 | -| 每级缩进 | `--spacing-4` (16px) | §7.1 | -| 父节点复选框 | 支持**半选**（部分子项选中），中央 `8px × 2px` 白色横线，填充 `#1677FF` | §16.3 半选 | -| 箭头 → 复选框间距 | `--spacing-1` (4px) | — | -| 节点文字 | 同 §18.4.1 平铺列表项配色 | — | - -> 勾选父节点 = 勾选其全部子孙；子项部分选中时父节点显示半选态（同 §15.2.3 全选逻辑）。 - -### 18.5 中间方向按钮组 - -两颗上下排列的小尺寸图标按钮，控制条目在两栏间转移。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 按钮尺寸 | `28px × 28px`（小号） | §5.1 | -| 圆角 | `2px` | §4.1 | -| 两按钮纵向间距 | `--spacing-2` (8px) | §7.1 | -| 图标 `‹` `›` | `14px`，`#FFFFFF` | — | -| **可用态**背景 | `#1677FF` (ZS-002-06) | §5.2.1 主按钮 | -| 可用态 Hover | `#0958D9` (ZS-002-07) | — | -| 可用态 Active | `#003EB3` (ZS-002-08) | — | -| **禁用态**背景 | `rgba(22,119,255,0.35)`，图标 `#6E88B0` (ZS-004-04) | §5.2.1 失效 | - -行为： -- `›`：把**源栏选中项**移入目标栏；源栏无选中时按钮禁用。 -- `‹`：把**目标栏选中项**移回源栏；目标栏无选中时按钮禁用。 -- 转移后两栏标题计数 `(已选/总数)` 同步刷新。 - -### 18.6 可搜索变体 - -在**两栏标题栏下方各嵌入一行搜索框**，输入时实时过滤本栏条目；树形栏过滤后保留命中项的祖先路径。 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | -| 占位符 | "请输入"，`#6E88B0` (ZS-004-04) | — | -| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | -| 搜索框背景 | `#0C1836` (ZS-004-09，比栏体深一档) | — | -| 搜索框水平外边距 | `--spacing-3` (12px)（与栏体左右留白对齐） | — | -| 搜索框 → 列表纵向间距 | `--spacing-2` (8px) | §7.1 | - -### 18.7 选用决策 - -| 场景 | 选择 | -|------|------| -| 候选项 ≤ 20、无层级 | §18.1 基础用法（两栏平铺） | -| 候选项有部门 / 分类层级 | 源栏启用 §18.4.2 树形节点 | -| 候选项较多 / 需快速定位 | §18.6 可搜索变体 | -| 仅单选搬移、候选少 | 不必用穿梭框，改用 §15 选择器 | - -### 18.8 CSS Token 参考 - -```css -:root { - /* 外层与栏 */ - --transfer-frame-bg: #0C1836; /* ZS-004-09 外层分栏 */ - --transfer-col-bg: #122347; /* ZS-004-08 单栏 */ - --transfer-col-border: #1A2F5A; /* ZS-004-07 */ - --transfer-col-radius: 4px; - - /* 标题栏 */ - --transfer-header-bg: #1677FF; /* ZS-002-06 */ - --transfer-header-text: #FFFFFF; - --transfer-header-count: rgba(255,255,255,0.85); - --transfer-header-h: 40px; - - /* 条目 */ - --transfer-item-h: 36px; - --transfer-item-text: #C5CFE0; /* ZS-004-02 */ - --transfer-item-text-on: #FFFFFF; - --transfer-item-hover-bg: rgba(22,119,255,0.08); - --transfer-item-disabled: #4A6491; /* ZS-004-05 */ - --transfer-tree-indent: 16px; - --transfer-tree-arrow: #6E88B0; /* ZS-004-04 */ - --transfer-tree-arrow-hover: #4096FF; /* ZS-002-05 */ - - /* 复选框（复用 §16.3） */ - --transfer-check-border: #6E88B0; /* ZS-004-04 */ - --transfer-check-fill: #1677FF; /* ZS-002-06 */ - --transfer-check-mark: #FFFFFF; - - /* 方向按钮 */ - --transfer-btn-size: 28px; - --transfer-btn-bg: #1677FF; /* ZS-002-06 */ - --transfer-btn-hover: #0958D9; /* ZS-002-07 */ - --transfer-btn-active: #003EB3; /* ZS-002-08 */ - --transfer-btn-disabled: rgba(22,119,255,0.35); - --transfer-btn-icon: #FFFFFF; - --transfer-btn-icon-disabled: #6E88B0; - - /* 搜索框（复用 §14.1 小号） */ - --transfer-search-h: 28px; - --transfer-search-bg: #0C1836; /* ZS-004-09 */ - --transfer-search-border: #1A2F5A; /* ZS-004-07 */ -} -``` - ---- - -## 19. 树选择（TreeSelect） - -> 对应设计稿「5.19 输入-树选择」。触发器即一个「请选择 ▾」控件，下拉展开一棵**可折叠树**，叶子 / 节点可被选中。按值数分**单选 / 多选**，按是否带过滤分**无搜索 / 有搜索**，共 4 种组合。触发器规格复用 §15.1.1 选择器触发器；面板规格复用 §15.1.2 下拉面板；多选 Tag、复选框分别复用 §15.2.1、§16.3。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 19.1 触发器（Trigger） - -| 变体 | 触发器内容 | 来源 | -|------|-----------|------| -| 单选 | 单行文字（已选节点名，如 `PC终端`）；占位 "请选择" | §15.1.1 | -| 多选 | 渲染已选 Tag 列表（`n1 × n1 ×`），超宽折叠成 `+N ×` | §15.2.1 | - -| 属性 | 取值 | 来源 | -|------|------|------| -| 高度 | `32px` | §14.1 | -| 圆角 | `2px` | §4.1 | -| 背景 | `#0C1836` (ZS-004-09) | — | -| 边框 | `1px solid #1A2F5A`（默认）；状态机复用 §14.1.1 | ZS-004-07 | -| 右侧箭头 | 收起 `▾` / 展开 `▴`，`12px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | - -### 19.2 下拉面板（Panel） - -| 属性 | 取值 | 来源 | -|------|------|------| -| 背景 | `#122347` (ZS-004-08) | §15.1.2 | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | — | -| 圆角 | `2px` | — | -| 内边距 | 上下 `--spacing-2` (8px) | §7.1 | -| 与触发器纵向间距 | `--spacing-1` (4px) | — | -| 面板宽度 | 与触发器等宽（最小 `220px`） | — | - -### 19.3 树节点（公共） - -``` -[-] 全部终端 - └ [-] 本级中心 - └ [-] PC终端 - ├ ─ 研发管理部 - ├ [-] 产品线 - │ ├ ▓ 开发小组 ← 选中（整行高亮） - │ └ ─ 测试小组 - └ ─ 未分组用户终端 - └ [+] 下级中心 ← 折叠（含未展开子树） -``` - -#### 19.3.1 节点规格 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 节点行高 | `32px` | — | -| 每级缩进 | `--spacing-4` (16px) | §7.1 | -| 展开 / 折叠图标 | 方形 `[-]` / `[+]`（含子树时显示），`12px`，描边 `1px solid #6E88B0`，符号 `#6E88B0` | ZS-004-04 | -| 图标 Hover | 描边 + 符号 `#4096FF` (ZS-002-05) | — | -| 叶子前缀 | 短横 `─`（占位对齐），`#4A6491` (ZS-004-05) | — | -| 图标 → 文字间距 | `--spacing-2` (8px) | — | -| 文字 | `14px Regular` | — | - -#### 19.3.2 节点状态配色 - -| 状态 | 行背景 | 文字 | 来源 | -|------|--------|------|------| -| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | — | -| Hover | `rgba(22,119,255,0.08)` | `#FFFFFF` | — | -| 选中（单选 / 命中叶子） | **整行实心高亮** `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 主色 | -| 父级（含选中子项，未自身选中） | `transparent` | `#FFFFFF` | — | -| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | — | - -> 单选选中态用**整行通栏蓝底**（不是仅文字变色），与下拉联想项的局部 hover 区分；点击节点空白处 = 选中该节点（父节点亦可选）。 - -### 19.4 单选变体 - -| 维度 | 规则 | -|------|------| -| 选中表现 | 点击节点 → 整行 `#1677FF` 高亮，回填触发器文字，**关闭面板** | -| 同时可选数 | 1（再选其它节点替换原值） | -| 触发器 | 单行文字 | -| 节点前缀 | 无复选框，仅展开图标 + 叶子短横 | - -### 19.5 多选变体 - -| 维度 | 规则 | -|------|------| -| 节点前缀 | 展开图标后增加**复选框**（规格复用 §16.3） | -| 选中表现 | 勾选复选框；命中行可叠加 `#1677FF` 整行高亮强调当前焦点 | -| 父子联动 | 勾父节点 → 勾全部子孙；子项部分选中 → 父节点**半选**（中央白横线） | -| 触发器 | 渲染已选 Tag（`n1 ×`），溢出折叠 `+N ×`（§15.2.1） | -| 关闭时机 | 多选**不关闭**面板，点触发器外部或箭头收起 | - -| 复选框状态 | 外观 | 来源 | -|-----------|------|------| -| 未选 | `1px solid #6E88B0` (ZS-004-04) + 透明底 | §16.5（面板内用灰描边） | -| 已选 | 实心 `#1677FF` (ZS-002-06) + 白勾 ✓ | §16.3 | -| 半选 | 实心 `#1677FF` + 中央 `8px × 2px` 白横线 | §16.3 | -| 禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | - -### 19.6 有搜索变体 - -面板顶部嵌入一行搜索框，输入时实时过滤树节点，**保留命中节点的祖先链**并自动展开。 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | -| 占位符 | "搜索"，`#6E88B0` (ZS-004-04) | — | -| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | -| 搜索框背景 | `#0C1836` (ZS-004-09) | — | -| 搜索框 → 树主体间距 | `--spacing-2` (8px) + 分割线 `1px solid #1A2F5A` | §6.1 | -| 命中文字高亮（可选） | 关键字片段 `#4096FF` (ZS-002-05) | — | - -### 19.7 交互与动画 - -| 行为 | 动效 | 来源 | -|------|------|------| -| 面板展开 | `scaleY(0.95) → 1`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | -| 节点展开 / 折叠 | 子树高度 `0 → auto`，`[+]/[-]` 切换，`200ms ease-out` | — | -| 触发器箭头 | `▾ → ▴` 旋转 `180deg`，`200ms ease-out` | — | -| Hover 背景过渡 | `120ms ease-out` | §8.5 | - -### 19.8 选用决策 - -| 场景 | 选择 | -|------|------| -| 层级数据、选单个节点 | §19.4 单选 | -| 层级数据、选多个节点（含父子联动） | §19.5 多选 | -| 树节点多 / 需快速定位 | 叠加 §19.6 有搜索 | -| 需要在两栏之间搬移而非单纯选取 | 改用 §18 穿梭框 | -| 无层级的平铺多选 | 改用 §15.2 多项选择 | - -### 19.9 CSS Token 参考 - -```css -:root { - /* 触发器（复用 §15.1.1 / §14.1） */ - --tree-trigger-bg: #0C1836; /* ZS-004-09 */ - --tree-trigger-border: #1A2F5A; /* ZS-004-07 */ - --tree-trigger-text: #C5CFE0; /* ZS-004-02 */ - --tree-trigger-arrow: #6E88B0; /* ZS-004-04 */ - --tree-trigger-arrow-hover: #4096FF; /* ZS-002-05 */ - - /* 面板（复用 §15.1.2） */ - --tree-panel-bg: #122347; /* ZS-004-08 */ - --tree-panel-border: #1A2F5A; /* ZS-004-07 */ - - /* 节点 */ - --tree-node-h: 32px; - --tree-indent: 16px; - --tree-node-text: #C5CFE0; /* ZS-004-02 */ - --tree-node-text-on: #FFFFFF; - --tree-node-hover-bg: rgba(22,119,255,0.08); - --tree-node-selected-bg: #1677FF; /* ZS-002-06 整行高亮 */ - --tree-node-disabled: #4A6491; /* ZS-004-05 */ - --tree-toggle-border: #6E88B0; /* [+]/[-] 描边 */ - --tree-toggle-hover: #4096FF; /* ZS-002-05 */ - --tree-leaf-dash: #4A6491; /* 叶子短横 */ - - /* 多选复选框（复用 §16） */ - --tree-check-border: #6E88B0; /* ZS-004-04 面板内灰描边 */ - --tree-check-fill: #1677FF; /* ZS-002-06 */ - --tree-check-mark: #FFFFFF; - - /* 多选 Tag（复用 §15.2.1） */ - --tree-tag-bg: #1677FF; /* ZS-002-06 */ - --tree-tag-text: #FFFFFF; - --tree-tag-close: rgba(255,255,255,0.72); - - /* 搜索框（复用 §14.1 小号） */ - --tree-search-h: 28px; - --tree-search-bg: #0C1836; /* ZS-004-09 */ - --tree-search-border: #1A2F5A; /* ZS-004-07 */ -} -``` - ---- - -## 20. 上传（Upload） - -> 对应设计稿「5.20 输入-上传（上）」。覆盖三种形态：**上传组件**（label + 触发按钮 + 文件名回填框）、**批量上传**（拖拽区 + 文件表格 + 底部操作）、**批量上传中**（带状态列的文件列表）。按钮复用 §5.2，输入框复用 §14.1，表格分割线复用 §6，状态色取 §1.1.2 渐红系（错误）与 §1.1.4 渐青系（成功）。其余配色从渐蓝系（ZS-002）与深蓝系（ZS-004）取。 - -### 20.1 上传组件（单文件 · 表单内） - -表单字段形态：左 `label` + 触发按钮 + 说明 + 文件名回填框。 - -``` -label [ ⬆ 上传文件 ] - 支持 DOCX/ZIP/PDF 格式，文件大小不超过 2 MB。 - 下载示例文件 -label [ 未选择文件 ] [ 选择文件 ] -``` - -#### 20.1.1 元素规格 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| `label` 文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | §12.2.2 | -| 「⬆ 上传文件」按钮 | 沿用 §5.2.2 默认按钮（描边 `#6E88B0` + 透明底 + `#C5CFE0` 文字），前缀上传图标同文字色 | §5.3.2 | -| 帮助说明文字 | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | -| 「下载示例文件」链接 | `14px Regular`，`#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 文本按钮 | -| 文件名回填框 | 沿用 §14.1 输入框（高 `32px`，只读），占位 "未选择文件" `#6E88B0` | §14.1 | -| 「选择文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF` + 白字） | §5.2.1 | -| 回填框 → 按钮间距 | `--spacing-2` (8px) | §7.1 | -| 行与行纵向间距 | `--spacing-3` (12px) | §7.1 | - -### 20.2 批量上传（拖拽区 + 文件表格） - -``` -[ ⬆ 上传文件 ] 支持批量上传，上传格式为txt文件 -┌───────────────────────────────────────────────┐ -│ 文件名 大小 状态 操作 │ ← 表头 -├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ -│ │ -│ 释放鼠标 │ ← 空态 / 拖拽提示 -│ │ -└───────────────────────────────────────────────┘ - [ 取消 ] [ 开始上传 ] -``` - -#### 20.2.1 触发区 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 「⬆ 上传文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF`），前缀上传图标白色 | §5.3.2 | -| 右侧格式说明 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 按钮 → 说明间距 | `--spacing-3` (12px) | §7.1 | - -#### 20.2.2 拖拽区 / 文件表格容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.3（凹陷感） | -| 容器边框 | `1px dashed #1A2F5A`（空闲）；**拖拽悬停时** `1px dashed #4096FF` (ZS-002-05) | §6.1 虚线 | -| 圆角 | `4px` | §4.1 | -| 空态提示文字「释放鼠标」 | `14px Regular`，`#4096FF` (ZS-002-05)，居中 | — | -| 容器最小高度 | `200px` | — | - -#### 20.2.3 表头 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 列 | `文件名 / 大小 / 状态 / 操作` | — | -| 文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 表头底分割线 | `1px dashed #4A6491` (ZS-004-05) | §6.1 虚线 | -| 行高 | `40px` | — | -| 水平 padding | `--spacing-4` (16px) | §7.1 | - -#### 20.2.4 底部操作 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | -| 「开始上传」 | 沿用 §5.2.1 主按钮 | §5.2.1 | -| 按钮排列 | 默认按钮在左、主按钮在右 | §5.3.4 | -| 按钮间距 | `--spacing-2` (8px) | §7.1 | -| 操作区与表格间距 | `--spacing-4` (16px)，右对齐 | §7.1 | - -### 20.3 批量上传中（带状态列） - -文件入列后逐行显示上传状态，状态色按结果区分。 - -``` -┌───────────────────────────────────────────────────────┐ -│ 文件名 大小 状态 操作 │ -├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ -│ 文件名.txt ✓ 上传成功 删除 │ -│ 文件名是六个字…txt 40K ⊘ 文件格式有误 删除 │ -│ 文件名.txt 40K ◌ 上传40%… 删除 │ -│ 文件名.txt 40K ◌ 上传40%… 删除 │ -│ 文件名.txt 40K ◷ 待上传 删除 │ -└───────────────────────────────────────────────────────┘ - [ 取消 ] [ 开始上传 ] -``` - -#### 20.3.1 数据行规格 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 行高 | `40px` | — | -| 行间分割线 | `1px dashed #2D4473` (ZS-004-06，弱化) | §6.1 | -| 文件名文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长 `…` 省略中部 | — | -| 大小文字（数字） | `14px Regular`（D-DIN / Arial），`#6E88B0` (ZS-004-04) | §2.1.2 | -| 「删除」操作 | 沿用 §5.2.3 文本按钮，默认 `#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 | - -#### 20.3.2 状态列配色 - -| 状态 | 图标 | 图标 / 文字色 | 来源 | -|------|------|--------------|------| -| 上传成功 | ✓（实心圆勾） | `#13C2C2` (ZS-003-06，渐青/成功) | §1.1.4 | -| 文件格式有误 / 失败 | ⊘（实心圆叹号） | `#F5222D` (ZS-001-06，渐红/错误) | §1.1.2 | -| 上传中（带百分比） | ◌（旋转环） | `#1677FF` (ZS-002-06)，环旋转 `1.2s linear infinite` | §5.4.2 加载 | -| 待上传（排队） | ◷（时钟） | `#4096FF` (ZS-002-05) | §1.1.6 | - -| 属性 | 取值 | -|------|------| -| 状态图标尺寸 | `16px` | -| 图标 → 文字间距 | `--spacing-2` (8px) | -| 状态文字字号 | `14px Regular` | -| 进度文字（"上传40%…"） | 与所在状态图标同色 | - -> 进度可叠加细进度条：行底 `2px` 高，已传段 `#1677FF` (ZS-002-06)，未传段 `#1A2F5A` (ZS-004-07)，宽度按百分比。 - -### 20.4 状态流转 - -| 流转 | 触发 | -|------|------| -| 待上传 → 上传中 | 点击「开始上传」，按队列依次启动 | -| 上传中 → 上传成功 | 服务端返回 2xx，图标切 ✓，行可保留或淡出 | -| 上传中 → 失败 | 网络 / 服务端错误，图标切 ⊘，文字 `#F5222D`，可点「删除」或重试 | -| 校验即失败 | 入列时格式 / 大小不符，直接标「文件格式有误」，不进入上传 | -| 任意态 → 移除 | 点「删除」从列表移除（上传中则中断请求） | - -### 20.5 选用决策 - -| 场景 | 选择 | -|------|------| -| 表单内单文件（头像 / 附件） | §20.1 上传组件 | -| 多文件批量、需拖拽 | §20.2 批量上传 | -| 多文件需逐条看进度 / 结果 | §20.3 批量上传中 | -| 仅展示已传文件、不再上传 | 用只读文件列表，去掉状态列与底部操作 | - -### 20.6 CSS Token 参考 - -```css -:root { - /* 触发按钮（复用 §5.2） */ - --upload-btn-primary-bg: #1677FF; /* ZS-002-06 主按钮 */ - --upload-btn-outline-border: #6E88B0; /* ZS-004-04 默认按钮 */ - --upload-btn-outline-text: #C5CFE0; /* ZS-004-02 */ - - /* 说明 / 链接 */ - --upload-help-text: #4096FF; /* ZS-002-05 */ - --upload-tip-text: #6E88B0; /* ZS-004-04 */ - --upload-link: #4096FF; /* ZS-002-05 */ - --upload-link-hover: #1677FF; /* ZS-002-06 */ - - /* 文件名回填框（复用 §14.1） */ - --upload-input-bg: #0C1836; /* ZS-004-09 */ - --upload-input-border: #1A2F5A; /* ZS-004-07 */ - --upload-input-placeholder:#6E88B0; /* ZS-004-04 */ - - /* 拖拽区 / 表格容器 */ - --upload-drop-bg: #0C1836; /* ZS-004-09 */ - --upload-drop-border: #1A2F5A; /* ZS-004-07 虚线 */ - --upload-drop-border-active:#4096FF; /* ZS-002-05 拖拽悬停 */ - --upload-drop-hint: #4096FF; /* "释放鼠标" */ - - /* 表格 */ - --upload-th-text: #C5CFE0; /* ZS-004-02 */ - --upload-th-divider: #4A6491; /* ZS-004-05 表头虚线 */ - --upload-row-divider: #2D4473; /* ZS-004-06 行间虚线 */ - --upload-filename-text: #C5CFE0; /* ZS-004-02 */ - --upload-size-text: #6E88B0; /* ZS-004-04 */ - --upload-action-text: #4096FF; /* ZS-002-05 删除 */ - - /* 状态列 */ - --upload-status-success: #13C2C2; /* ZS-003-06 成功 */ - --upload-status-error: #F5222D; /* ZS-001-06 失败 */ - --upload-status-loading: #1677FF; /* ZS-002-06 上传中 */ - --upload-status-pending: #4096FF; /* ZS-002-05 待上传 */ - - /* 进度条 */ - --upload-progress-done: #1677FF; /* ZS-002-06 */ - --upload-progress-track: #1A2F5A; /* ZS-004-07 */ -} -``` - ---- - -## 21. 弹出式窗口（Modal / Dialog） - -> 对应设计稿「弹出式窗口」。居中模态弹窗，承载多步表单 / 编辑流程。结构 = 遮罩 + 标题栏（含关闭）+ 可选 Tabs + 可选步骤条 + 表单主体 + 底部操作。Tabs 复用 §9.1.1、步骤条复用 §10.2、各表单控件复用 §14~17；本节额外定义弹窗容器、表单项布局，以及截图中出现但前文未覆盖的几个表单原子（分段按钮组 / 密码框 / 文本域 / 数字+单位 / 错误态）。配色从 §1.1.2 渐红系（错误）、§1.1.3 渐蓝系（ZS-002）、§1.1.5 深蓝系（ZS-004）取。 - -### 21.1 遮罩与容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 遮罩背景 | `rgba(6, 14, 36, 0.6)`（基于 ZS-004-10） | §3.1.4 | -| 遮罩动画 | `opacity 0 → 1`，`200ms ease-out` | — | -| 容器背景 | `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） | §8.2.1 | -| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 容器圆角 | `4px`（§4.1 Modal/Drawer） | §4.1 | -| 容器阴影 | `0 8px 32px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | §3.1.4 | -| 容器内边距 | `--spacing-6` (32px) | §7.1 | -| 弹出动画 | `scale(0.96) → 1` + `opacity 0 → 1`，`200ms ease-out` | — | -| 宽度档位 | 小 `480px` / 中 `640px` / 大 `800px`（按内容选） | — | - -### 21.2 标题栏 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标题文字 | `20px Bold`，`#FFFFFF`，**水平居中** | §2.1.2 | -| 标题下分隔线 | `linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，`1px` 高 | §8.2.4 | -| 关闭按钮 `×` | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` (ZS-002-05) | §5.2.4 | -| 关闭按钮位置 | 右上角，距容器上 / 右内边距对齐 | — | -| 标题栏 → 主体间距 | `--spacing-5` (24px) | §7.1 | - -### 21.3 内嵌 Tabs 与步骤条 - -| 组件 | 复用 | 备注 | -|------|------|------| -| 顶部 Tabs（`Tab1选中 / Tab2默认`） | §9.1.1 横向页签 | 激活 `#4096FF` + `2px` 下划线，下方通栏基线 `1px solid #1A2F5A` | -| 步骤条（`第一步 ✓ / 第二步 ② / 第三步 ③`） | §10.2 弹窗步骤条 | 完成态描边圆 + 蓝勾，当前态实心 `#1677FF` + 白字，未开始描边 `#4A6491`；连接线 `1px dashed` | -| Tabs → 步骤条间距 | `--spacing-5` (24px) | — | -| 步骤条 → 表单间距 | `--spacing-5` (24px) | — | - -### 21.4 表单项布局 - -弹窗内表单采用**左 label + 右控件**横向布局。 - -| 元素 | 规格 | 来源 | -|------|------|------| -| label 文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，**右对齐** | — | -| label 列宽 | 固定（如 `96px`），右侧留 `--spacing-3` (12px) 到控件 | §7.1 | -| 必填星号 `*` | `#F5222D` (ZS-001-06)，置于 label 前 | §1.1.2 | -| 表单项纵向间距 | `--spacing-4` (16px) | §7.1 | -| 控件默认宽度 | 撑满 label 右侧剩余区 | — | -| label 与控件垂直对齐 | 控件首行基线居中 | — | - -#### 21.4.1 错误态与校验信息 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 错误边框 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | §14.1.1 错误 | -| 错误提示文字（如「输入表单内容报错」） | `12px Regular`，`#F5222D` (ZS-001-06) | §1.1.2 | -| 提示文字位置 | 控件正下方，左对齐于控件 | — | -| 控件 → 提示文字间距 | `--spacing-1` (4px) | §7.1 | - -### 21.5 表单控件补充 - -截图中出现、前文未单列的控件原子： - -#### 21.5.1 分段按钮组（Segmented，如「一级风险 / 二级风险」） - -并排互斥按钮，选中态高亮。 - -| 状态 | 背景 | 边框 | 文字 | -|------|------|------|------| -| 未选 | `transparent` | `1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | -| 选中 | `rgba(22,119,255,0.16)` | `1px solid #1677FF` (ZS-002-06) | `#4096FF` (ZS-002-05) | -| Hover（未选） | `rgba(22,119,255,0.08)` | `#4096FF` | `#4096FF` | -| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` | - -- 高度 `32px`，圆角 `2px`（§4.1），内边距 `0 14px` -- 相邻项间距 `--spacing-2` (8px)（独立按钮形态）；若做无缝连体段则共用一条 `1px #1A2F5A` 分隔 - -#### 21.5.2 密码输入框（可见性切换） - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 输入框 | 沿用 §14.1 公共规格 | §14.1 | -| 掩码字符 | `●` / `*`，`#C5CFE0` | — | -| 右侧眼睛图标 `👁 / 👁‍🗨` | `16px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | -| 切换行为 | 点击图标在「明文 / 掩码」间切换 | — | - -#### 21.5.3 禁用输入框（「未填-禁用」） - -| 属性 | 取值 | 来源 | -|------|------|------| -| 边框 | `1px solid #2D4473` (ZS-004-06) | §14.1.1 失效 | -| 背景 | `rgba(22,119,255,0.04)` | — | -| 占位 / 文字 | `#4A6491` (ZS-004-05) | — | -| 光标 | `not-allowed` | — | - -#### 21.5.4 文本域（Textarea） - -| 属性 | 取值 | 来源 | -|------|------|------| -| 边框 / 背景 / 状态机 | 同 §14.1 输入框 | §14.1 | -| 最小高度 | `96px`（约 4 行） | — | -| 内边距 | `--spacing-3` (12px) | §7.1 | -| 占位文字 | "请输入"，`#6E88B0` | — | -| 圆角 | `2px` | §4.1 | -| 右下角缩放手柄 | 可选，`#4A6491` | — | - -#### 21.5.5 数字 + 单位输入（「100 天」） - -输入框右侧无缝拼一个**实心主色蓝单位块**。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 数字输入区 | 沿用 §14.1，右边框去除（与单位块拼接） | §14.1 | -| 单位块背景 | `#1677FF` (ZS-002-06) | §14.3 后台搜索框按钮 | -| 单位块文字 | `14px Regular`，`#FFFFFF` | — | -| 单位块内边距 | `0 --spacing-3`（12px） | — | -| 整体高度 | `32px`，右侧两角圆角 `2px` | §4.1 | - -#### 21.5.6 行内日期 / 范围 / 下拉 / 复选 - -| 控件 | 复用 | -|------|------| -| 「威胁类型 请选择 ▾」 | §15.1 选择器触发器 | -| 「首发时间」日期时间 | §17.1 日期触发器（错误态见 §21.4.1） | -| 「周期 … 至 …」范围 | §17.1 范围触发器变体 | -| 「该账户仅允许…」复选框 | §16.3 多选 | - -### 21.6 底部操作 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 区域顶部间距 | `--spacing-5` (24px)（与主体留白） | §7.1 | -| 按钮对齐 | 右对齐（也可整体居中，跟随设计稿——本稿居中） | §5.3.4 | -| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | -| 「保存」/「确定」 | 沿用 §5.2.1 主按钮 | §5.2.1 | -| 排列顺序 | 默认按钮在左、主按钮在右 | §5.3.4 | -| 按钮间距 | `--spacing-2` (8px) | §7.1 | - -### 21.7 交互 - -| 行为 | 规则 | -|------|------| -| 打开 | 遮罩淡入 + 容器 `scale(0.96)→1`，焦点落到首个可输入控件 | -| 关闭 | 点 `×` / 「取消」 / 遮罩外 / `Esc`；有未保存改动时可二次确认 | -| 提交 | 「保存」前做校验，失败项标 §21.4.1 错误态并滚动到首个错误 | -| 焦点陷阱 | `Tab` 循环限制在弹窗内（不泄漏到背景页面） | - -### 21.8 CSS Token 参考 - -```css -:root { - /* 遮罩与容器 */ - --modal-mask: rgba(6,14,36,0.6); /* ZS-004-10 */ - --modal-bg-top: #122347; /* ZS-004-08 */ - --modal-bg-bottom: #0C1836; /* ZS-004-09 */ - --modal-border: #1A2F5A; /* ZS-004-07 */ - --modal-radius: 4px; - --modal-shadow: 0 8px 32px rgba(6,14,36,0.6); - - /* 标题 */ - --modal-title-text: #FFFFFF; - --modal-title-line: linear-gradient(90deg, transparent, #1677FF, transparent); - --modal-close: #6E88B0; /* ZS-004-04 */ - --modal-close-hover: #4096FF; /* ZS-002-05 */ - - /* 表单项 */ - --form-label: #C5CFE0; /* ZS-004-02 */ - --form-required: #F5222D; /* ZS-001-06 */ - --form-error-border: #F5222D; - --form-error-ring: 0 0 0 2px rgba(245,34,45,0.16); - --form-error-text: #F5222D; - - /* 分段按钮组 */ - --seg-border: #6E88B0; /* ZS-004-04 未选 */ - --seg-selected-bg: rgba(22,119,255,0.16); - --seg-selected-border: #1677FF; /* ZS-002-06 */ - --seg-selected-text: #4096FF; /* ZS-002-05 */ - - /* 数字+单位 */ - --unit-addon-bg: #1677FF; /* ZS-002-06 */ - --unit-addon-text: #FFFFFF; - - /* 禁用输入 */ - --input-disabled-border:#2D4473; /* ZS-004-06 */ - --input-disabled-bg: rgba(22,119,255,0.04); - --input-disabled-text: #4A6491; /* ZS-004-05 */ -} -``` - ---- - -## 22. 卡片（Card） - -> 对应设计稿「卡片」基本形式与组合（分组信息卡片）。覆盖**基础卡片**（标题 + 操作）、**新增占位卡片**、**信息卡片**（头像 + 字段 + 标签 + 统计）三类。容器 / 阴影 / 占位卡片配色直接沿用 §3.1，按钮 / 文本按钮沿用 §5，标签沿用 §15.2.1。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 22.1 基础卡片（标题 + 操作） - -``` -┌───────────────────────────┐ -│ ▎标题16PX ✏️ ⋯ │ ← 标题栏（左竖条 + 标题 + 右操作） -├───────────────────────────┤ -│ 卡片内容 … │ -└───────────────────────────┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 卡片背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 卡片圆角 | `4px` | §4.1 | -| 卡片阴影 | `0 2px 8px rgba(22,119,255,0.12)`（§3.1.4 一级） | §3.1.4 | -| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | -| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §1.1.6 | -| 编辑图标 ✏️ | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | §3.1.2 | -| 更多图标 ⋯ | `16px`，`#6E88B0`，hover `#4096FF` | — | -| 标题栏内边距 | `--spacing-4` (16px) | §7.1 | -| 标题栏底分割线 | `1px solid #1A2F5A` | §6.1 | -| 内容区内边距 | `--spacing-4` (16px) | §7.1 | -| 卡片 hover | 阴影升二级 `0 4px 16px rgba(22,119,255,0.24)` | §3.1.4 | - -### 22.2 新增占位卡片 - -虚线描边的「+ 新增」入口，沿用 §3.1.3。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 背景 | `#0C1836` (ZS-004-09，与外层同色营造凹陷) | §3.1.3 | -| 虚线边框 | `1px dashed #4096FF` (ZS-002-05) | §3.1.3 | -| 加号图标 `+` | `24px`，`#4096FF`，居中 | §3.1.3 | -| 圆角 | `4px` | §4.1 | -| Hover | 边框 + 加号 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.08)` | — | -| 尺寸 | 与同行内容卡片等高等宽 | — | - -### 22.3 信息卡片（头像 + 字段 + 标签 + 统计） - -用于「分组信息卡片」——展示个体 / 媒体 / 人物等档案条目。 - -``` -┌──────────────────────────────────────┐ -│ ▎个体 ✏️ 标签 ✕ │ ← 头部：类型标识 + 操作 -│ 👤 姓名（Name-name） 🔖 在线标签 │ ← 头像 + 主名 + 状态标签 -│ 基本信息 样下功能▾ 线上发声▾ │ ← 字段/操作行 -│ 国家/地区：国家恒及 │ -│ 职能：职务职务 │ -│ 关注度排行：#话题二 #话题二 #话题二 │ ← 标签组 -└──────────────────────────────────────┘ -``` - -#### 22.3.1 结构与配色 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | — | -| 类型标识（个体 / 媒体）左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | -| 类型标识文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 头像占位 | 方/圆 `40px`，底色 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | — | -| 主名文字 | `16px Medium`，`#FFFFFF` | — | -| 字段标签（"国家/地区：") | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 字段值 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 行内操作（"线上发声 ▾"） | 沿用 §5.3.1 文字+下拉按钮（默认 Outline） | §5.3.1 | -| 状态标签（"在线"等） | 沿用 §15.2.1 Tag（实心 `#1677FF` + 白字）或成功态 `#13C2C2`（ZS-003-06） | §15.2.1 / §1.1.4 | -| 话题标签（`#话题`） | `12px`，文字 `#4096FF` (ZS-002-05)，背景 `rgba(22,119,255,0.12)`，圆角 `2px` | — | -| 头部操作图标 ✏️ / ✕ | `16px`，`#6E88B0`，hover `#4096FF` | §22.1 | -| 字段行纵向间距 | `--spacing-2` (8px) | §7.1 | -| 区块之间间距 | `--spacing-3` (12px) | §7.1 | - -#### 22.3.2 带统计的媒体卡片变体 - -媒体类卡片在字段区下方追加「平台 + 数值」统计行（如 Facebook 群组数量）： - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 平台图标 | `16px`，原色或 `#4096FF` 单色化 | — | -| 统计标签（"群组数量"） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 统计数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | -| 统计行分隔 | `1px solid #2D4473`（弱化） | §6.1 | - -### 22.4 卡片栅格与间距 - -| 规则 | 取值 | 来源 | -|------|------|------| -| 卡片之间横向间距 | `--spacing-6` (32px) | §7.1 | -| 卡片之间纵向间距 | `--spacing-6` (32px) | §7.1 | -| 卡片内容内边距 | `--spacing-4` (16px) | §7.1 | -| 分组标题（"分组信息卡片"）→ 卡片区 | `--spacing-5` (24px) | §7.1 | - -### 22.5 CSS Token 参考 - -```css -:root { - /* 卡片容器 */ - --card-bg: #122347; /* ZS-004-08 */ - --card-border: #1A2F5A; /* ZS-004-07 */ - --card-radius: 4px; - --card-shadow: 0 2px 8px rgba(22,119,255,0.12); - --card-shadow-hover: 0 4px 16px rgba(22,119,255,0.24); - - /* 标题 */ - --card-title-text: #C5CFE0; /* ZS-004-02 */ - --card-title-bar: #1677FF; /* ZS-002-06 左竖条 */ - --card-action-icon: #6E88B0; /* ZS-004-04 */ - --card-action-hover: #4096FF; /* ZS-002-05 */ - - /* 新增占位 */ - --card-add-bg: #0C1836; /* ZS-004-09 */ - --card-add-border: #4096FF; /* ZS-002-05 虚线 */ - --card-add-hover: #1677FF; /* ZS-002-06 */ - - /* 信息卡片 */ - --card-avatar-bg: #1A2F5A; /* ZS-004-07 */ - --card-name-text: #FFFFFF; - --card-field-label: #6E88B0; /* ZS-004-04 */ - --card-field-value: #C5CFE0; /* ZS-004-02 */ - --card-topic-tag-text:#4096FF; /* ZS-002-05 */ - --card-topic-tag-bg: rgba(22,119,255,0.12); - --card-stat-num: #C5CFE0; /* ZS-004-02 */ - --card-stat-divider: #2D4473; /* ZS-004-06 */ -} -``` - ---- - -## 23. 折叠面板（Collapse / 手风琴） - -> 对应设计稿「折叠」。覆盖**基础折叠**（标题 + 描述）、**列表概览折叠 + 图标**、**手风琴折叠**（同时仅一项展开）、**列表项折叠**（右侧带计数 + 展开链接）四类。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §8 导航下拉 / §9.2 锚点一致。 - -### 23.1 基础折叠（标题 + 描述） - -``` -收起态: 展开态: -┌────────────────────────┐ ┌────────────────────────┐ -│ 标题 ▾ │ │ 标题 ▴ │ -│ 描述文字说明 │ │ 描述文字说明 │ -└────────────────────────┘ ├────────────────────────┤ - │ 展开后的内容区 … │ - └────────────────────────┘ -``` - -#### 23.1.1 头部规格 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 头部背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 头部边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 头部圆角 | `4px`（展开时下两角变直角） | §4.1 | -| 标题文字 | `16px Medium`，`#C5CFE0` (ZS-004-02)；展开时 `#FFFFFF` | — | -| 描述文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 展开箭头 `▾ / ▴` | `14px`，`#6E88B0`，hover `#4096FF` (ZS-002-05) | ZS-002-05 | -| 头部高度 | `≥ 48px`（含描述时自适应） | — | -| 头部内边距 | `--spacing-4` (16px) | §7.1 | -| 头部 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | - -#### 23.1.2 内容区 - -| 属性 | 取值 | -|------|------| -| 背景 | `#0C1836` (ZS-004-09，比头部深一档) | -| 内边距 | `--spacing-4` (16px) | -| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) | -| 文字 | `14px Regular`，`#C5CFE0` | - -### 23.2 列表概览折叠 + 图标 - -头部标题前增加一个小图标（业务图标），其余同 §23.1。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 前缀小图标 | `16px`，`#4096FF` (ZS-002-05) | — | -| 图标 → 标题间距 | `--spacing-2` (8px) | §7.1 | - -### 23.3 手风琴折叠（互斥单开） - -多个折叠项垂直堆叠，**同一时刻仅允许一项展开**，展开新项时自动收起其它项。 - -``` -┌────────────────────────────────────────┐ -│ ▸ 把了 1300 多万元！他们靠卖「口罩」… 收起 │ ← 展开项（高亮） -│ 描述正文段落描述正文段落 … │ -├────────────────────────────────────────┤ -│ ▸ 某条新闻标题某条新闻标题 … 展开 │ -├────────────────────────────────────────┤ -│ ▸ 某科学家�证据曝光为何争不下 … 展开 │ -└────────────────────────────────────────┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 项之间分隔 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 收起项标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 展开项标题 | `14px Medium`，`#FFFFFF` | — | -| 展开项左强调条 | 可选 `2px solid #1677FF` (ZS-002-06)，贴左缘 | §8.3.2 激活 | -| 右侧「展开 / 收起」文字按钮 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` | §5.2.3 | -| 行高 | `≥ 40px` | — | - -### 23.4 列表项折叠（右侧计数 + 展开） - -紧凑列表，每行右侧带一个计数徽标 + 「展开」链接（常用于评论 / 回复折叠）。 - -``` -收起的折叠标题某某某某某 🔺 6405 展开 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长省略 | — | -| 计数图标 | `12px`，`#F5222D`（热度红，ZS-001-06）或 `#4096FF` | §1.1.2 / §1.1.6 | -| 计数数字 | `14px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | -| 「展开 / 收起」 | 沿用 §5.2.3 文本按钮 | §5.2.3 | -| 行高 | `36px` | — | -| 行间分割线 | `1px solid #2D4473`（弱化） | §6.1 | -| 行 Hover 背景 | `rgba(22,119,255,0.08)` | — | - -### 23.5 交互与动画 - -| 行为 | 动效 | 来源 | -|------|------|------| -| 展开 / 收起 | 内容高度 `0 → auto`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | -| 箭头旋转 | `▾ → ▴`（`rotate 180deg`），`200ms ease-out` | §8.5 | -| 手风琴互斥 | 展开新项时旧项同步收起，两者动画并行 | — | -| Hover 背景过渡 | `120ms ease-out` | §8.5 | - -### 23.6 三种折叠的选用决策 - -| 场景 | 选择 | -|------|------| -| 单个区块「展开看详情」 | §23.1 基础折叠 | -| 带分类图标的概览块 | §23.2 列表概览折叠 + 图标 | -| 多块互斥、节省纵向空间 | §23.3 手风琴折叠 | -| 长列表内逐条折叠（评论 / 回复） | §23.4 列表项折叠 | - -### 23.7 CSS Token 参考 - -```css -:root { - /* 头部 */ - --collapse-head-bg: #122347; /* ZS-004-08 */ - --collapse-head-border: #1A2F5A; /* ZS-004-07 */ - --collapse-title: #C5CFE0; /* ZS-004-02 */ - --collapse-title-open: #FFFFFF; - --collapse-desc: #6E88B0; /* ZS-004-04 */ - --collapse-arrow: #6E88B0; - --collapse-arrow-hover: #4096FF; /* ZS-002-05 */ - --collapse-head-hover-bg: rgba(22,119,255,0.08); - --collapse-icon: #4096FF; /* 前缀图标 */ - - /* 内容区 */ - --collapse-body-bg: #0C1836; /* ZS-004-09 */ - --collapse-body-divider: #1A2F5A; /* ZS-004-07 */ - - /* 手风琴 / 列表项 */ - --collapse-item-divider: #1A2F5A; /* ZS-004-07 */ - --collapse-item-active-bar:#1677FF; /* ZS-002-06 */ - --collapse-toggle-text: #4096FF; /* ZS-002-05 文本按钮 */ - --collapse-toggle-hover: #1677FF; /* ZS-002-06 */ - --collapse-count-icon: #F5222D; /* ZS-001-06 热度 */ - --collapse-count-num: #6E88B0; /* ZS-004-04 */ - --collapse-row-divider: #2D4473; /* ZS-004-06 */ -} -``` - ---- - -## 24. 描述列表（Descriptions） - -> 对应设计稿「6.7 数据展示-描述」。用于档案 / 详情页的**键值对表格**展示（账号名 / 密码等字段）。整体是一张带边框的两列表格：左列字段名、右列字段值，行底色**斑马交替**。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 24.1 区块标题 - -``` -▎资源信息 -──────────────────────── -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标题左竖条 | `3px × 16px`，`#1677FF` (ZS-002-06) | §22.1 | -| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | -| 标题下分隔线 | `1px solid #1A2F5A` (ZS-004-07)，通栏 | §6.1 | -| 标题 → 表格间距 | `--spacing-4` (16px) | §7.1 | - -### 24.2 表格容器与单元格 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 外层容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | -| 表格边框 | `1px solid #1A2F5A` (ZS-004-07)（外框 + 单元格描边） | §6.1 | -| 单元格行高 | `44px` | — | -| 单元格水平 padding | `--spacing-4` (16px) | §7.1 | -| 标签列（左）宽度 | 固定 `≥ 120px` | — | -| 圆角 | 外层 `4px`，内部单元格直角 | §4.1 | - -### 24.3 行配色（斑马交替） - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标签列文字（"账号名 / 密码"） | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 值列文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 奇数行背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 偶数行背景 | `#0C1836` (ZS-004-09，略深，形成斑马) | §3.1.1 | -| 行 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | -| 行间 / 列间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | - -### 24.4 值内操作（如密码「查看」） - -值列可内嵌文本按钮（如密码掩码后的「查看」切换明文）。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 掩码字符 | `*` / `●`，`#C5CFE0` (ZS-004-02) | — | -| 「查看 / 隐藏」 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` + 下划线 | §5.2.3 | -| 掩码 → 操作间距 | `--spacing-2` (8px) | §7.1 | - -### 24.5 布局变体 - -| 变体 | 说明 | 来源 | -|------|------|------| -| 单列（一问一答竖排） | 每行一个字段，标签列固定宽，值列撑满（本节默认） | — | -| 双列（一行两组键值） | 宽容器下并排两组「标签+值」，组间分割线 `1px solid #1A2F5A` | §6.2 | -| 纯展示无边框 | 去掉单元格描边，仅保留行间细线 `1px solid #2D4473`，用于轻量详情 | §6.1 | - -### 24.6 选用决策 - -| 场景 | 选择 | -|------|------| -| 档案 / 详情字段（键值对） | §24 描述列表 | -| 多行同结构数据（可排序 / 翻页） | 改用数据表格 Table（另见表格规范） | -| 字段数 ≤ 4 且轻量 | §24.5 纯展示无边框变体 | - -### 24.7 CSS Token 参考 - -```css -:root { - /* 区块标题 */ - --desc-title-bar: #1677FF; /* ZS-002-06 左竖条 */ - --desc-title-text: #C5CFE0; /* ZS-004-02 */ - --desc-title-divider: #1A2F5A; /* ZS-004-07 */ - - /* 表格 */ - --desc-wrap-bg: #0C1836; /* ZS-004-09 */ - --desc-border: #1A2F5A; /* ZS-004-07 */ - --desc-row-h: 44px; - --desc-label-text: #C5CFE0; /* ZS-004-02 */ - --desc-value-text: #C5CFE0; /* ZS-004-02 */ - --desc-row-odd-bg: #122347; /* ZS-004-08 斑马奇行 */ - --desc-row-even-bg: #0C1836; /* ZS-004-09 斑马偶行 */ - --desc-row-hover-bg: rgba(22,119,255,0.08); - - /* 值内操作 */ - --desc-action-text: #4096FF; /* ZS-002-05 查看 */ - --desc-action-hover: #1677FF; /* ZS-002-06 */ - - /* 无边框变体 */ - --desc-light-divider: #2D4473; /* ZS-004-06 */ -} -``` - ---- - -## 25. 列表（List） - -> 对应设计稿「6.9 数据展示-列表」。用于信息流 / 评论 / 动态等条目列表，每条 = 头像 + 主名 + 来源标识 + 时间 + 正文。整体包在一个卡片容器内，条目之间用细分割线隔开。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 25.1 容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | -| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 容器圆角 | `4px` | §4.1 | -| 容器内边距 | `--spacing-5` (24px) | §7.1 | -| 区块标题「列表」 | `16px Bold`，`#FFFFFF`，置于容器外上方 | §12.2.1 | - -### 25.2 列表条目 - -``` -👤ⓕ Speaker Kevin McCarthy 2023-12-31 18:00:00 - 48923056 - 当我们的退伍军人重新进入平民生活时，他们应该得到最好的职业机会…… -────────────────────────────────────────────────────────────────────── -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 头像 | `40px` 方/圆，底色 `#1A2F5A` (ZS-004-07) | §22.3.1 | -| 来源角标（如 Ⓕ Facebook） | `14px`，叠在头像右下角，原色或 `#4096FF` 单色化 | — | -| 主名文字 | `16px Bold`，`#FFFFFF` | — | -| 副 ID（如 `48923056`） | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | -| 时间文字（右上角） | `14px Regular`（D-DIN 数字），`#4096FF` (ZS-002-05) | §2.1.2 | -| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，行高 `1.6` | — | -| 头像 → 文字间距 | `--spacing-3` (12px) | §7.1 | -| 主名 → 副 ID 间距 | `--spacing-1` (4px) | §7.1 | -| 副 ID → 正文间距 | `--spacing-2` (8px) | §7.1 | -| 条目内边距 | 上下 `--spacing-4` (16px) | §7.1 | -| 条目间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 条目 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | - -### 25.3 变体与状态 - -| 变体 / 状态 | 规则 | -|------------|------| -| 带操作的条目 | 右侧追加文本按钮区（点赞 / 评论 / 更多），沿用 §5.2.3、§5.3.3 | -| 正文折叠 | 超过 N 行用「展开」收起，沿用 §23.4 列表项折叠 | -| 空列表 | 居中提示「暂无数据」，`14px Regular`，`#6E88B0` (ZS-004-04) | -| 加载更多 | 底部「加载更多 »」文本按钮（§5.3.3）或滚动自动加载 | - -### 25.4 CSS Token 参考 - -```css -:root { - --list-wrap-bg: #0C1836; /* ZS-004-09 */ - --list-wrap-border: #1A2F5A; /* ZS-004-07 */ - --list-avatar-bg: #1A2F5A; /* ZS-004-07 */ - --list-name-text: #FFFFFF; - --list-subid-text: #4096FF; /* ZS-002-05 */ - --list-time-text: #4096FF; /* ZS-002-05 */ - --list-body-text: #C5CFE0; /* ZS-004-02 */ - --list-divider: #1A2F5A; /* ZS-004-07 */ - --list-row-hover-bg: rgba(22,119,255,0.08); - --list-empty-text: #6E88B0; /* ZS-004-04 */ -} -``` - ---- - -## 26. 时间轴（Timeline） - -> 对应设计稿「6.11 数据展示」左半与「全局时间轴」。覆盖**基础时间轴点**、**卡片式时间轴**、**全局时间轴**（横向刻度 + 区间滑块）三类。节点圆 / 连接线沿用 §10 步骤条逻辑，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 26.1 基础时间轴点（纵向） - -``` -● WirdPress多处绝对路径泄漏 -┊ 12-03 02:21:47 -● WirdPress多处绝对路径泄漏 -┊ 12-03 02:21:47 -● WirdPress多处绝对路径泄漏 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 容器背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 节点圆点 | 实心圆 `8px`，`#1677FF` (ZS-002-06)；外可加 `2px` 同色半透明光圈 | §10.1 | -| 连接线 | `1px solid #2D4473` (ZS-004-06)，垂直贯穿节点 | §10.1 | -| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 时间文字 | `12px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | -| 节点圆 → 文字间距 | `--spacing-2` (8px) | §7.1 | -| 节点垂直间距 | `--spacing-5` (24px)，圆心到圆心 | §10.4.2 | -| 当前 / 最新节点 | 圆点加亮 `#4096FF` + 外光圈 | — | - -### 26.2 卡片式时间轴 - -每个时间节点挂一张内容卡片（时间在卡外、内容在卡内）。 - -``` -● 2021-12-03 14:25:44 -┊ ┌──────────────────────────┐ -┊ │ 零报告上报 │ -┊ │ 安全状况： 今日无安全风险 │ -┊ └──────────────────────────┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 节点圆点 / 连接线 | 同 §26.1 | — | -| 时间标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 卡片背景 | `#0C1836` (ZS-004-09，比容器深一档) | §3.1.3 | -| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 卡片圆角 | `4px` | §4.1 | -| 卡片内边距 | `--spacing-3` (12px) | §7.1 | -| 卡片标题（"零报告上报"） | `14px Medium`，`#C5CFE0` | — | -| 字段标签（"安全状况："） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 字段值（"今日无安全风险"） | `14px Regular`，`#4096FF` (ZS-002-05) | — | -| 时间 → 卡片间距 | `--spacing-2` (8px) | §7.1 | - -### 26.3 全局时间轴（横向刻度 + 区间滑块） - -顶部横条，承载连续时间刻度与一个可拖拽的**区间选择滑块**。 - -``` - ● -├──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤ -04-03 04-04 04-03 04-04 ▓▓▓▓▓▓▓▓ 04-04 04-03 … - └─区间滑块（蓝色高亮段）─┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 轨道背景 | `#0C1836` (ZS-004-09) | — | -| 刻度基线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 刻度文字（日期） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | -| 游标点（顶部 ●） | 实心圆 `8px`，`#FFFFFF` + `1px #1677FF` 描边 | — | -| 选中区间段 | `rgba(22,119,255,0.32)` 矩形底 + 上下边 `1px solid #1677FF` | §1.1.6 | -| 区间两端手柄 | `4px × 全高` 实心 `#1677FF` (ZS-002-06) | — | -| 轨道高度 | `≥ 56px`（含刻度文字） | — | -| Hover 刻度 | 文字 `#4096FF` | §1.1.6 | - -### 26.4 选用决策 - -| 场景 | 选择 | -|------|------| -| 纯事件流（标题 + 时间） | §26.1 基础时间轴点 | -| 每个节点带结构化内容 | §26.2 卡片式时间轴 | -| 长跨度时间筛选 / 缩放 | §26.3 全局时间轴（区间滑块） | - -### 26.5 CSS Token 参考 - -```css -:root { - --timeline-wrap-bg: #122347; /* ZS-004-08 */ - --timeline-wrap-border: #1A2F5A; /* ZS-004-07 */ - --timeline-dot: #1677FF; /* ZS-002-06 */ - --timeline-dot-active: #4096FF; /* ZS-002-05 */ - --timeline-line: #2D4473; /* ZS-004-06 */ - --timeline-title: #C5CFE0; /* ZS-004-02 */ - --timeline-time: #6E88B0; /* ZS-004-04 */ - - /* 卡片式 */ - --timeline-card-bg: #0C1836; /* ZS-004-09 */ - --timeline-card-border: #1A2F5A; /* ZS-004-07 */ - --timeline-field-label: #6E88B0; /* ZS-004-04 */ - --timeline-field-value: #4096FF; /* ZS-002-05 */ - - /* 全局时间轴 */ - --gtimeline-track-bg: #0C1836; /* ZS-004-09 */ - --gtimeline-baseline: #1A2F5A; /* ZS-004-07 */ - --gtimeline-tick: #6E88B0; /* ZS-004-04 */ - --gtimeline-range-fill: rgba(22,119,255,0.32); - --gtimeline-range-edge: #1677FF; /* ZS-002-06 */ - --gtimeline-cursor: #FFFFFF; -} -``` - ---- - -## 27. 进度条（Progress） - -> 对应设计稿「6.11 数据展示-进度条」右半。覆盖**标准线性进度条**、**小型进度条**、**环形进度条**三类。进度色按语义分**成功 / 进行中 / 失败**三态。 -> -> ⚠️ **语义色说明**：成功「绿」与进行中「橙」在 §1 标准色四系（渐红 / 渐蓝 / 渐青 / 深蓝）中**无直接对应**。本节按设计稿实际取色，并标注与 §1 的关系；建议在 §1 增补一组**功能语义色**（成功绿 / 警告橙）以统一管理。详见 §27.4。 - -### 27.1 标准线性进度条 - -``` -████████████████████████ 100% ✓ ← 成功（绿） -██████████████░░░░░░░░░░ 80% ✗ ← 失败（红） -██████████████░░░░░░░░░░ 80% ← 进行中（橙） -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 轨道（未完成段） | `#1A2F5A` (ZS-004-07) | §6.1 | -| 已完成段-成功 | `#52C41A`（成功绿，§1 待补） / 近似 `#13C2C2`(ZS-003-06) | §27.4 | -| 已完成段-失败 | `#F5222D` (ZS-001-06) | §1.1.2 | -| 已完成段-进行中 | `#FAAD14`（警告橙，§1 待补） | §27.4 | -| 条高 | `8px`，圆角 `4px`（两端半圆） | §4.1 | -| 百分比文字 | `14px Regular`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | -| 尾部状态图标 | 成功 ✓（绿圆）/ 失败 ✗（红圆），`16px` | §20.3.2 | -| 条 → 百分比间距 | `--spacing-2` (8px) | §7.1 | - -### 27.2 小型进度条 - -用于较窄区域（如表格单元格内）。规格同 §27.1，仅尺寸收缩： - -| 属性 | 取值 | -|------|------| -| 条高 | `4px` | -| 百分比文字 | `12px Regular` | -| 尾部状态图标 | `12px` | -| 条宽 | 自适应容器（最小 `48px`） | - -### 27.3 环形进度条 - -``` - ╭───╮ ╭───╮ ╭───╮ - │22.4%│ │47.8%│ │82.0%│ - │ 名称│ │ 名称│ │ 名称│ - ╰───╯ ╰───╯ ╰───╯ - (蓝) (橙) (红/混) -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 环轨道（底） | `#1A2F5A` (ZS-004-07) | — | -| 环进度段 | 按语义取 成功绿 / 进行中橙 / 失败红 / 主色蓝 `#1677FF` | §27.4 | -| 环宽 | `6px`，端点圆头（`stroke-linecap: round`） | — | -| 中心百分比 | `16px Bold`（D-DIN），`#FFFFFF` | §2.1.2 | -| 中心名称 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | -| 直径 | `72px`（默认） | — | -| 起始角 | 顶部 12 点钟，顺时针填充 | — | - -### 27.4 状态语义色（与 §1 的关系 / 增补建议） - -| 语义 | 设计稿取色 | §1 现有最近色 | 建议 | -|------|-----------|--------------|------| -| 成功 / 已完成 | `#52C41A`（绿） | ZS-003-06 `#13C2C2`（青，偏色） | §1 增补「成功绿」`#52C41A` | -| 进行中 / 警告 | `#FAAD14`（橙） | —（无） | §1 增补「警告橙」`#FAAD14` | -| 失败 / 错误 | `#F5222D` | ZS-001-06 `#F5222D` ✓ | 直接用 ZS-001-06 | -| 信息 / 默认 | `#1677FF` / `#4096FF` | ZS-002-06 / ZS-002-05 ✓ | 直接用 ZS-002 | -| 处理中 / 等待 | `#13C2C2` | ZS-003-06 ✓ | 直接用 ZS-003 | - -> 在 §1 增补语义色前，本节及 §29 状态标签暂用上表「设计稿取色」列的 HEX，并集中定义为 `--func-success` / `--func-warning` 两个 Token，便于后续统一替换。 - -### 27.5 CSS Token 参考 - -```css -:root { - /* 功能语义色（§1 待正式收录） */ - --func-success: #52C41A; /* 成功绿（建议补入 §1） */ - --func-warning: #FAAD14; /* 警告橙（建议补入 §1） */ - --func-error: #F5222D; /* ZS-001-06 */ - --func-info: #1677FF; /* ZS-002-06 */ - --func-processing: #13C2C2; /* ZS-003-06 */ - - /* 进度条 */ - --progress-track: #1A2F5A; /* ZS-004-07 */ - --progress-success: var(--func-success); - --progress-error: var(--func-error); - --progress-active: var(--func-warning); - --progress-num: #C5CFE0; /* ZS-004-02 */ - - /* 环形 */ - --circle-track: #1A2F5A; /* ZS-004-07 */ - --circle-num: #FFFFFF; - --circle-label: #6E88B0; /* ZS-004-04 */ -} -``` - ---- - -## 28. 表格（Table） - -> 对应设计稿「6.13 数据展示-表格」。后台列表主力组件：表头 + 数据行（斑马 / hover / 选中）+ 勾选列 + 内联编辑 + 状态列（复用 §29 标签）+ 操作列（复用 §5.2.3 文本按钮）。表头 / 边框 / 斑马沿用 §24 描述列表与 §6 分割线规则。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 28.1 表格容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | -| 外边框 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 圆角 | `4px` | §4.1 | - -### 28.2 表头（Header） - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 表头背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 表头文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 表头行高 | `44px` | — | -| 列水平 padding | `--spacing-4` (16px) | §7.1 | -| 表头底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 排序图标 `▲▼` | `12px`，默认 `#4A6491`，激活 `#4096FF` | §1.1.6 | -| 列分割线（可选） | `1px solid #2D4473`（弱化） | §6.2 | - -### 28.3 数据行（Body） - -| 状态 | 背景 | 来源 | -|------|------|------| -| 奇数行 | `#0C1836` (ZS-004-09) | §24.3 | -| 偶数行 | `#122347` (ZS-004-08) | §24.3 | -| Hover | `rgba(22,119,255,0.08)` | §8.4.3 | -| 选中行 | `rgba(22,119,255,0.16)` + 左 `2px solid #1677FF` | §8.3.2 | - -| 元素 | 色值 / 规格 | -|------|-------------| -| 单元格文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | -| 行高 | `44px` | -| 数字列（手机号 / 卡号等） | D-DIN / Arial，`#C5CFE0`，可右对齐 | -| 行间分割线 | `1px solid #1A2F5A` (ZS-004-07) | - -### 28.4 勾选列（Selection） - -| 元素 | 规格 | 来源 | -|------|------|------| -| 复选框 | 沿用 §16.3（面板内灰描边变体 §16.5） | §16 | -| 表头全选框 | 支持半选（部分行选中） | §15.2.3 | -| 列宽 | `48px`，居中 | — | -| 选中行联动 | 勾选 → 行底色切换为「选中行」态 | §28.3 | - -### 28.5 内联编辑单元格 - -单元格可切换为输入态（如「卡池地址 100 M」可编辑），校验失败显示红框 + 气泡。 - -| 状态 | 规格 | 来源 | -|------|------|------| -| 可编辑态 | 单元格内嵌 §14.1 小号输入框（高 `28px`） | §14.1 | -| 带单位 | 数字 + 单位块（§21.5.5），单位 `M` 实心蓝 | §21.5.5 | -| 错误态 | `1px solid #F5222D` + 外发光，下方 / 悬浮气泡提示「Table约束输入提示」`#F5222D` | §14.1.1 / §21.4.1 | -| 气泡背景 | `#F5222D` 或暗底 `#122347` + 红字 | §1.1.2 | - -### 28.6 状态列与操作列 - -| 列 | 规格 | 来源 | -|------|------|------| -| 状态（`● 普通` / `● 特殊`） | 圆点 + 文字标签，沿用 §29.3 圆点标签 | §29.3 | -| 整体状态（`已完成` / `已失败`） | 实心 / 描边状态标签，沿用 §29.4 | §29.4 | -| 操作（`查看 / 编辑 / 重置`） | §5.2.3 文本按钮，间距 `--spacing-3` (12px)，无分隔符 | §5.3.3 | -| 操作列对齐 | 通常右对齐或固定列 | — | - -### 28.7 固定列 / 滚动 / 空态 - -| 行为 | 规则 | -|------|------| -| 横向滚动 | 列总宽超容器时横向滚动；首列（勾选）/ 末列（操作）可 `position: sticky` 固定 | -| 固定列阴影 | 固定列边缘加 `4px` 渐变阴影 `rgba(6,14,36,0.6)` 提示可滚动 | -| 空数据 | 表体居中「暂无数据」，`#6E88B0` (ZS-004-04) | -| 加载中 | 表体覆盖半透明遮罩 `rgba(6,14,36,0.4)` + 居中旋转图标 `#1677FF` | -| 分页 | 表格下方接 §13 分页 | - -### 28.8 CSS Token 参考 - -```css -:root { - --table-wrap-bg: #0C1836; /* ZS-004-09 */ - --table-border: #1A2F5A; /* ZS-004-07 */ - - /* 表头 */ - --table-head-bg: #122347; /* ZS-004-08 */ - --table-head-text: #C5CFE0; /* ZS-004-02 */ - --table-sort-idle: #4A6491; /* ZS-004-05 */ - --table-sort-active: #4096FF; /* ZS-002-05 */ - - /* 数据行 */ - --table-row-odd: #0C1836; /* ZS-004-09 */ - --table-row-even: #122347; /* ZS-004-08 */ - --table-row-hover: rgba(22,119,255,0.08); - --table-row-selected: rgba(22,119,255,0.16); - --table-row-selected-bar:#1677FF; /* ZS-002-06 */ - --table-cell-text: #C5CFE0; /* ZS-004-02 */ - --table-row-divider: #1A2F5A; /* ZS-004-07 */ - - /* 内联编辑错误 */ - --table-edit-error: #F5222D; /* ZS-001-06 */ - - /* 操作列 */ - --table-action-text: #4096FF; /* ZS-002-05 */ - --table-action-hover: #1677FF; /* ZS-002-06 */ - - /* 空 / 加载 */ - --table-empty-text: #6E88B0; /* ZS-004-04 */ - --table-loading-mask: rgba(6,14,36,0.4); -} -``` - ---- - -## 29. 标签（Tag） - -> 对应设计稿「6.14 数据展示-标签」。分两大类：**标签形式**（文字按钮标签 / 图标+文字标签 / 圆点+文字标签 / 动态标签）与**状态标签**（描边 / 实心 / 图标三种风格，覆盖 未开始·等待中·进行中·已完成·已失败·待更新 六语义）。功能语义色见 §27.4（成功绿 / 警告橙建议补入 §1）。 - -### 29.1 文字按钮标签 - -可点击的属性标签，用于重点突出标记。 - -| 状态 | 背景 | 文字 | 来源 | -|------|------|------|------| -| 默认 | `rgba(22,119,255,0.12)` | `#4096FF` (ZS-002-05) | — | -| 禁用 | `rgba(22,119,255,0.06)` | `#4A6491` (ZS-004-05) | — | -| 激活 / 选中 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 | - -| 属性 | 取值 | -|------|------| -| 高度 | `24px` | -| 圆角 | `2px`（§4.1） | -| 内边距 | `2px 8px` | -| 字号 | `12px Regular` | - -### 29.2 图标 + 文字标签 - -前缀业务图标增强辨识（如 Ⓣ Twitter、✓ 完成）。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 默认（描边） | 背景 `rgba(22,119,255,0.12)`，图标+文字 `#4096FF` | §29.1 | -| 选中（实心） | 背景 `#1677FF` (ZS-002-06)，图标+文字 `#FFFFFF` | — | -| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | -| 图标尺寸 | `14px` | — | - -### 29.3 圆点 + 文字标签 - -无底色，靠前缀圆点区分语义（属性多 / 复杂、又不需突出时用）。 - -| 语义 | 圆点色 | 文字 | 来源 | -|------|--------|------|------| -| 普通 | `#13C2C2` (ZS-003-06) | `#C5CFE0` (ZS-004-02) | §1.1.4 | -| 特殊 | `#FAAD14`（警告橙，§27.4） | `#C5CFE0` | §27.4 | -| 异常 | `#F5222D` (ZS-001-06) | `#C5CFE0` | §1.1.2 | - -| 属性 | 取值 | -|------|------| -| 圆点尺寸 | `6px`，正圆 | -| 圆点 → 文字间距 | `--spacing-2` (8px) | -| 字号 | `14px Regular` | - -### 29.4 动态标签（可增删） - -可动态添加 / 删除的标签集合（如筛选列表、关键词）。 - -``` -[ people.com.cn × ] [ +1 × ] [ + 标签 ] -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标签底 | `rgba(22,119,255,0.12)`，文字 `#C5CFE0` (ZS-004-02) | — | -| 关闭 `×` | `12px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | -| 折叠 `+N ×` | 溢出折叠（同 §15.2.1） | §15.2.1 | -| 「+ 标签」新增钮 | `1px dashed #4096FF` (ZS-002-05) + 透明底 + `+ 标签` 蓝字 | §3.1.3 | -| 新增钮 hover | 边框 + 文字 `#1677FF` (ZS-002-06) | — | -| 标签间距 | `--spacing-1` (4px) | §7.1 | - -### 29.5 状态标签（三风格 × 六语义） - -六个语义统一映射到功能语义色（§27.4）： - -| 语义 | 主色 | 来源 | -|------|------|------| -| 未开始 | `#4096FF` (ZS-002-05) 或中性灰 `#6E88B0` | §1.1.6 / ZS-004-04 | -| 等待中 | `#13C2C2` (ZS-003-06) | §1.1.4 | -| 进行中 | `#FAAD14`（警告橙，§27.4） | §27.4 | -| 已完成 | `#52C41A`（成功绿，§27.4） | §27.4 | -| 已失败 | `#F5222D` (ZS-001-06) | §1.1.2 | -| 待更新 | `#1677FF` (ZS-002-06) | §1.1.6 | - -#### 29.5.1 风格 A — 描边（Outline） - -| 元素 | 规格 | -|------|------| -| 背景 | `transparent` 或语义色 `12%` 透明底 | -| 边框 | `1px solid` 语义色 | -| 文字 | 语义色 | -| 高度 / 圆角 | `24px` / `2px` | - -#### 29.5.2 风格 B — 实心（Filled） - -| 元素 | 规格 | -|------|------| -| 背景 | 语义色 `24%`~`100%`（截图为浅色实心底） | -| 文字 | 深色语义场用 `#FFFFFF`；浅底场用语义深色 | -| 高度 / 圆角 | `24px` / `2px` | - -#### 29.5.3 风格 C — 图标 + 文字 - -前缀语义图标（⊖ 就绪 / ◷ 等待 / ◐ 进行 / ✓ 成功 / ✗ 失败 / ◷ 待更）： - -| 元素 | 规格 | 来源 | -|------|------|------| -| 图标色 | 同语义色 | §27.4 | -| 文字色 | 语义色或 `#C5CFE0` | — | -| 图标尺寸 | `14px` | — | -| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | - -### 29.6 CSS Token 参考 - -```css -:root { - /* 语义色复用 §27.4 */ - /* --func-success / --func-warning / --func-error / --func-info / --func-processing */ - - /* 文字 / 图标 / 圆点标签 */ - --tag-soft-bg: rgba(22,119,255,0.12); - --tag-soft-text: #4096FF; /* ZS-002-05 */ - --tag-active-bg: #1677FF; /* ZS-002-06 */ - --tag-active-text: #FFFFFF; - --tag-disabled-text: #4A6491; /* ZS-004-05 */ - --tag-dot-normal: #13C2C2; /* ZS-003-06 普通 */ - --tag-dot-special: var(--func-warning); /* 特殊 */ - --tag-dot-error: #F5222D; /* ZS-001-06 异常 */ - - /* 动态标签 */ - --tag-close: #6E88B0; /* ZS-004-04 */ - --tag-close-hover: #FFFFFF; - --tag-add-border: #4096FF; /* ZS-002-05 虚线 */ - --tag-add-hover: #1677FF; /* ZS-002-06 */ - - /* 状态标签语义 */ - --status-pending: #4096FF; /* 未开始 ZS-002-05 */ - --status-waiting: #13C2C2; /* 等待中 ZS-003-06 */ - --status-running: var(--func-warning); /* 进行中 */ - --status-done: var(--func-success); /* 已完成 */ - --status-failed: #F5222D; /* 已失败 ZS-001-06 */ - --status-update: #1677FF; /* 待更新 ZS-002-06 */ -} -``` - ---- - -## 30. 树形控件（Tree · 展示型） - -> 对应设计稿「6.16 数据展示-树形控件」。区别于 §19 树选择（下拉触发器形态），本节是**直接平铺在页面中的树**：带**虚线连接线**、`[+] / [-]` 方框展开器、节点复选框，且节点可**内联挂表单控件**（单选 / 日期 / 数字+单位）。节点状态与复选框沿用 §19 / §16，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 30.1 容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | -| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 容器圆角 | `4px` | §4.1 | -| 容器内边距 | `--spacing-5` (24px) | §7.1 | - -### 30.2 节点与连接线 - -``` -☐ 一级 -├╌ ☐ 主账号贴文 ● 按照发文起始时间 [2021-12-09 📅] ○ 按照条数 前[最多24]条 -│ ├╌ ☐ 贴文评论 前 [最多24] 条 -│ ├╌ ☐ 评论账号列表 前 [最多24] 条 -│ └╌ ☐ 转发账号列表 前 [最多24] 条 -│ ├╌ ☐ 粉丝列表 前 [最多24] 条 -│ └╌ ☐ 好友列表 前 [最多24] 条 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 连接线 | `1px dashed #4A6491` (ZS-004-05)，L 形连父子 | §6.1 虚线 | -| 每级缩进 | `--spacing-5` (24px) | §7.1 | -| 节点复选框 | 沿用 §16.3（面板内灰描边 §16.5） | §16 | -| 节点文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | §19.3.2 | -| 节点行高 | `≥ 40px`（含内联控件时自适应） | — | -| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 | - -### 30.3 方框展开器（`[+] / [-]`） - -带子树的节点用方框图标，区别于 §19 的纯三角箭头。 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 方框尺寸 | `14px × 14px`，`1px solid #6E88B0` (ZS-004-04) | §19.3.1 | -| 方框背景 | `transparent` | — | -| 符号 `+` / `-` | `#6E88B0`，居中 | — | -| Hover | 边框 + 符号 `#4096FF` (ZS-002-05) | §1.1.6 | -| 折叠态 `+` / 展开态 `-` | 点击切换子树显隐 | — | -| 方框 → 连接线 | 方框压在虚线连接点上 | — | - -### 30.4 节点内联表单控件 - -节点右侧可挂载与该节点关联的配置控件，全部复用既有规范： - -| 控件 | 复用 | 备注 | -|------|------|------| -| 单选（`● 按照发文起始时间` / `○ 按照条数`） | §16.2 Radio | 未选 `#4096FF` 描边，已选实心 `#1677FF` | -| 日期（`2021-12-09 📅`） | §17.1 日期触发器 | 高 `28px` 小号 | -| 数字 + 单位（`前 [最多24] 条`） | §14.1 输入 + §21.5.5 单位 | 前后缀文字「前」「条」`#6E88B0` | -| 前后缀文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | -| 控件与节点文字横向间距 | `--spacing-3` (12px) | §7.1 | -| 多控件之间间距 | `--spacing-4` (16px) | §7.1 | - -### 30.5 复选父子联动 - -| 行为 | 规则 | 来源 | -|------|------|------| -| 勾父节点 | 勾选其全部子孙 | §18.4.2 | -| 子项部分选中 | 父节点显示**半选**（中央 `8px×2px` 白横线） | §16.3 | -| 全选 / 全不选 | 顶层「一级」节点等价全选开关 | §15.2.3 | - -### 30.6 纯展示树变体（右图） - -无内联控件、仅 `[+]/[-]` + 复选框 + 「一级 / 二级」层级的精简树： - -| 元素 | 规格 | -|------|------| -| 节点 | 复选框 + 文字（`一级` / `二级`） | -| 展开器 | `[+] / [-]` 方框（同 §30.3） | -| 连接线 | `1px dashed #4A6491` | -| 选中 | 复选框实心 `#1677FF` + 白勾；行可叠 `rgba(22,119,255,0.08)` hover | -| 节点行高 | `36px` | - -### 30.7 与 §19 树选择的差异 - -| 维度 | §19 树选择（TreeSelect） | §30 树形控件（Tree） | -|------|--------------------------|----------------------| -| 形态 | 触发器 + 下拉面板 | 直接平铺页面 | -| 展开器 | 三角 `▸ / ▾` | 方框 `[+] / [-]` | -| 连接线 | 无（靠缩进） | 有，`1px dashed` | -| 选中表现 | 整行蓝底高亮 | 复选框示态为主 | -| 内联控件 | 无 | 支持（单选 / 日期 / 数字+单位） | -| 用途 | 表单取值 | 数据展示 / 多维配置 | - -### 30.8 CSS Token 参考 - -```css -:root { - --tree2-wrap-bg: #0C1836; /* ZS-004-09 */ - --tree2-wrap-border: #1A2F5A; /* ZS-004-07 */ - --tree2-line: #4A6491; /* ZS-004-05 虚线连接 */ - --tree2-indent: 24px; - --tree2-node-text: #C5CFE0; /* ZS-004-02 */ - --tree2-row-hover: rgba(22,119,255,0.08); - - /* 方框展开器 */ - --tree2-toggle-border: #6E88B0; /* ZS-004-04 */ - --tree2-toggle-symbol: #6E88B0; - --tree2-toggle-hover: #4096FF; /* ZS-002-05 */ - - /* 复选框（复用 §16） */ - --tree2-check-border: #6E88B0; /* ZS-004-04 */ - --tree2-check-fill: #1677FF; /* ZS-002-06 */ - --tree2-check-mark: #FFFFFF; - - /* 内联控件前后缀文字 */ - --tree2-affix-text: #6E88B0; /* ZS-004-04 */ -} -``` - ---- - -## 31. 时间轴（长文本：横向 / 纵向） - -> 对应设计稿「6.19 数据展示-时间轴（上）/（下）」。在 §26 时间轴基础上扩展两种**承载长文本**的形态：**横向时间轴**（节点沿水平轴上下交替展开长文本）与**纵向长文本时间轴**（日期 + 富内容卡片）。节点圆 / 连接线 / 全局时间轴沿用 §26，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，年份强调点引入 §1.1.2 渐红系。 - -### 31.1 横向时间轴（横向长文本） - -节点挂在一条水平主轴上，文本块**上下交替**分布，避免拥挤；轴上按时间标注年份 / 日期锚点。 - -``` - 2023年1月7日 2021年7月18日 2002年1月 - 长文本说明… 长文本说明… 长文本说明… - ▲ ▲ ▲ -───┼──────────┼─────────┼──────────┼─────────┼──── ← 水平主轴 - │ ▼ │ ▼ │ - 长文本… 长文本… - 2021年 2016年8月 -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 水平主轴 | `1px solid #2D4473` (ZS-004-06) | §6.1 | -| 节点三角 / 圆点 | `8px`，`#1677FF` (ZS-002-06)；指向轴的小三角 | §26.1 | -| 年份 / 日期锚点（强调） | `14px Bold`，`#F5222D`（红，ZS-001-06）或 `#4096FF`（蓝） | §1.1.2 / §1.1.6 | -| 普通时间标题 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 长文本正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6` | — | -| 文本块背景（可选卡片） | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | -| 节点水平间距 | 自适应等分，最小 `--spacing-7` (40px) | §7.1 | -| 文本块 → 轴间距 | `--spacing-3` (12px) | §7.1 | -| 横向滚动 | 节点超容器宽时横向滚动，可配 §26.3 全局时间轴联动缩放 | §26.3 | - -### 31.2 纵向长文本时间轴 - -左侧时间轴线，每个节点对应一张**富内容卡片**（缩略图 / 头像 + 标签 + 长正文）。 - -``` -● 2023-09-09 -┊ ┌──────────────────────────────────────────┐ -┊ │ 👤 人物名 [标签] │ -┊ │ 长正文长正文长正文长正文长正文长正文… │ -┊ └──────────────────────────────────────────┘ -● 2023-09-09 -┊ ┌──────────────────────────────────────────┐ -┊ │ 🖼 缩略图 [标签] │ -┊ │ 长正文… │ -┊ └──────────────────────────────────────────┘ -``` - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 轴线 | `1px solid #2D4473` (ZS-004-06)，纵向贯穿 | §26.1 | -| 节点圆点 | 实心 `8px`，`#1677FF` (ZS-002-06) | §26.1 | -| 日期标题 | `14px Medium`，`#4096FF` (ZS-002-05) | §1.1.6 | -| 卡片容器 | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | -| 卡片内边距 | `--spacing-3` (12px) | §7.1 | -| 头像 / 缩略图 | `40px`（头像圆 / 缩略方），底 `#1A2F5A` | §22.3.1 | -| 主名 / 来源 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | -| 状态标签 | 沿用 §29 标签（语义色见 §27.4） | §29 | -| 长正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6`，可「展开」折叠（§23.4） | §23.4 | -| 日期 → 卡片间距 | `--spacing-2` (8px) | §7.1 | -| 节点垂直间距 | `--spacing-6` (32px) | §7.1 | - -### 31.3 选用决策 - -| 场景 | 选择 | -|------|------| -| 短事件流（标题 + 时间） | §26.1 基础时间轴点 | -| 节点带结构化小卡 | §26.2 卡片式时间轴 | -| 跨度大、按时间轴铺陈长文本 | §31.1 横向时间轴 | -| 每节点是图文长内容（资讯 / 档案） | §31.2 纵向长文本时间轴 | -| 需缩放 / 区间筛选 | 叠加 §26.3 全局时间轴 | - -### 31.4 CSS Token 参考 - -```css -:root { - /* 横向长文本 */ - --htl-axis: #2D4473; /* ZS-004-06 主轴 */ - --htl-node: #1677FF; /* ZS-002-06 */ - --htl-anchor-emph: #F5222D; /* ZS-001-06 年份强调 */ - --htl-anchor-blue: #4096FF; /* ZS-002-05 */ - --htl-title: #C5CFE0; /* ZS-004-02 */ - --htl-body: #6E88B0; /* ZS-004-04 */ - --htl-card-bg: #122347; /* ZS-004-08 */ - --htl-card-border: #1A2F5A; /* ZS-004-07 */ - - /* 纵向长文本 */ - --vtl-line: #2D4473; /* ZS-004-06 */ - --vtl-node: #1677FF; /* ZS-002-06 */ - --vtl-date: #4096FF; /* ZS-002-05 */ - --vtl-card-bg: #122347; /* ZS-004-08 */ - --vtl-card-border: #1A2F5A; /* ZS-004-07 */ - --vtl-avatar-bg: #1A2F5A; /* ZS-004-07 */ - --vtl-name: #C5CFE0; /* ZS-004-02 */ - --vtl-body: #6E88B0; /* ZS-004-04 */ -} -``` - ---- - -## 32. 对话框（Dialog / 确认框） - -> 对应设计稿「7.1 消息提醒-对话框」。轻量确认弹窗，承载一句提示 + 「取消 / 确定」。是 §21 弹出式窗口的**精简变体**：标题用**左竖条**而非居中、主体仅一行信息、无 Tabs / 步骤条 / 表单。遮罩 / 容器 / 底部按钮沿用 §21，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 - -### 32.1 容器与遮罩 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 遮罩 | `rgba(6,14,36,0.6)` | §21.1 | -| 容器背景 | `#0C1836` (ZS-004-09)（也可用 §21 渐变） | §21.1 | -| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 圆角 | `4px` | §4.1 | -| 阴影 | `0 8px 32px rgba(6,14,36,0.6)`（三级） | §3.1.4 | -| 宽度 | `400px`（小） | — | -| 内边距 | `0`（标题栏 / 主体 / 底部各自带 padding） | — | - -### 32.2 标题栏 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 标题栏背景 | `#122347` (ZS-004-08) | §3.1.2 | -| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | -| 标题文字（"提示"） | `16px Medium`，`#FFFFFF` | — | -| 关闭 `×` | `16px`，`#6E88B0`，hover `#4096FF` | §5.2.4 | -| 标题栏高度 | `48px` | — | -| 标题栏底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | -| 水平 padding | `--spacing-4` (16px) | §7.1 | - -### 32.3 主体与底部 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 主体文字（"这是一段信息"） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 主体内边距 | `--spacing-4` (16px) | §7.1 | -| 主体最小高度 | `80px` | — | -| 底部按钮区 | 右对齐，右内 padding `--spacing-4` (16px)，下内 padding `--spacing-4` | §7.1 | -| 「取消」 | §5.2.2 默认按钮，小号 `28px` | §5.2.2 | -| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | -| 按钮间距 | `--spacing-2` (8px) | §7.1 | - -### 32.4 类型变体 - -对话框可携带语义图标（同 §27.4 / §33 语义色）置于主体文字前： - -| 类型 | 图标 | 主色 | -|------|------|------| -| 信息（默认） | ⓘ `#1677FF` (ZS-002-06) | 蓝 | -| 成功 | ✓ `--func-success` | 绿 | -| 警告 | ! `--func-warning` | 橙 | -| 错误 | ✗ `#F5222D` (ZS-001-06) | 红 | - -### 32.5 与 §21 的差异 / CSS Token - -| 维度 | §21 弹出式窗口 | §32 对话框 | -|------|---------------|-----------| -| 标题 | 居中 + 渐变下划线 | 左竖条 + 左对齐 | -| 内容 | Tabs / 步骤条 / 多字段表单 | 一句提示（可带语义图标） | -| 宽度 | `480~800px` | `400px` | -| 用途 | 编辑 / 多步流程 | 确认 / 告知 | - -```css -:root { - --dialog-bg: #0C1836; /* ZS-004-09 */ - --dialog-border: #1A2F5A; /* ZS-004-07 */ - --dialog-head-bg: #122347; /* ZS-004-08 */ - --dialog-title-bar: #1677FF; /* ZS-002-06 左竖条 */ - --dialog-title-text: #FFFFFF; - --dialog-close: #6E88B0; /* ZS-004-04 */ - --dialog-close-hover: #4096FF; /* ZS-002-05 */ - --dialog-body-text: #C5CFE0; /* ZS-004-02 */ - --dialog-divider: #1A2F5A; /* ZS-004-07 */ -} -``` - ---- - -## 33. 全局提示（Message / Alert） - -> 对应设计稿「7.3 消息提醒-全局提示」。顶部居中、自动消失、不打断操作的轻量级反馈。覆盖**信息 / 成功 / 警告 / 错误**四语义，每条分**带关闭 ×** 与 **带「查看详情」操作** 两变体。语义色统一引用 §27.4 功能语义色（成功绿 / 警告橙建议补入 §1）。 - -### 33.1 触发按钮（语义实心钮） - -页面侧触发演示用的四颗实心语义按钮： - -| 类型 | 背景 | 图标 + 文字 | 来源 | -|------|------|------------|------| -| 信息提示 | `#1677FF` (ZS-002-06) | ⓘ + 白字 | §1.1.6 | -| 成功提示 | `--func-success`（绿） | ✓ + 白字 | §27.4 | -| 警告提示 | `--func-warning`（橙） | ! + 白字 | §27.4 | -| 错误提示 | `#F5222D` (ZS-001-06) | ✗ + 白字 | §1.1.2 | - -按钮规格沿用 §5.2.1（高 `32px`，圆角 `2px`，前缀图标 `--spacing-1` 间距）。 - -### 33.2 提示条（Message 单条） - -``` -┌────────────────────────────────────────────────┐ -│ ✓ 恭喜！你所提交的信息已经审核通过。 × │ ← 变体 A：带关闭 -└────────────────────────────────────────────────┘ -┌────────────────────────────────────────────────┐ -│ ✓ 恭喜！你所提交的信息已经审核通过。 查看详情 │ ← 变体 B：带操作 -└────────────────────────────────────────────────┘ -``` - -#### 33.2.1 通用规格 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 高度 | `40px`（单行） | — | -| 圆角 | `2px` | §4.1 | -| 水平 padding | `--spacing-4` (16px) | §7.1 | -| 语义图标 | `16px`，置于最左，语义色 | §27.4 | -| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | -| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 左侧强调边 | `3px solid` 语义色（可选，增强辨识） | §6.1 | -| 顶部弹出动画 | 顶部居中 `translateY(-100%) → 0` + `opacity`，`200ms ease-out` | §8.5 | -| 自动消失 | 默认 `3s` 后淡出（错误类可设不自动消失） | — | - -#### 33.2.2 四语义底色 - -| 语义 | 背景（约 12~16% 透明语义底） | 图标 / 强调色 | 来源 | -|------|------------------------------|--------------|------| -| 成功 | `rgba(82,196,26,0.16)` | `--func-success` ✓ | §27.4 | -| 错误 | `rgba(245,34,45,0.16)` | `#F5222D` ✗ (ZS-001-06) | §1.1.2 | -| 信息 | `rgba(22,119,255,0.16)` | `#1677FF` ⓘ (ZS-002-06) | §1.1.6 | -| 警告 | `rgba(250,173,20,0.16)` | `--func-warning` ! | §27.4 | - -> 底色叠在页面深蓝背景上呈低饱和语义色块；文字保持 `#C5CFE0` 高可读，仅图标与边用满饱和语义色。 - -#### 33.2.3 右侧元素（二选一） - -| 变体 | 元素 | 规格 | 来源 | -|------|------|------|------| -| A 带关闭 | `×` | `14px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | -| B 带操作 | 「查看详情」 | §5.2.3 文本按钮，**颜色取所在语义色**（成功=绿 / 错误=红 / 信息=蓝 / 警告=橙），hover 加深 | §5.2.3 | - -### 33.3 多条堆叠 - -| 规则 | 取值 | -|------|------| -| 堆叠方向 | 顶部居中，新消息在下 / 旧消息上推（或反之，跟随实现） | -| 条间距 | `--spacing-2` (8px) | -| 最大同时显示 | 建议 `≤ 5` 条，超出排队 | - -### 33.4 与 §32 对话框的区别 - -| 维度 | §33 全局提示 | §32 对话框 | -|------|-------------|-----------| -| 打断性 | 不打断（自动消失） | 打断（需用户确认） | -| 位置 | 顶部居中悬浮 | 屏幕居中 + 遮罩 | -| 操作 | 至多一个「查看详情」 | 取消 / 确定 | -| 用途 | 操作结果即时反馈 | 二次确认 / 重要告知 | - -### 33.5 CSS Token 参考 - -```css -:root { - /* 语义色复用 §27.4：--func-success / --func-warning / --func-error / --func-info */ - - /* 提示条通用 */ - --msg-text: #C5CFE0; /* ZS-004-02 */ - --msg-close: #6E88B0; /* ZS-004-04 */ - --msg-close-hover: #FFFFFF; - - /* 四语义底色 */ - --msg-success-bg: rgba(82,196,26,0.16); - --msg-success-fg: #52C41A; /* --func-success */ - --msg-error-bg: rgba(245,34,45,0.16); - --msg-error-fg: #F5222D; /* ZS-001-06 */ - --msg-info-bg: rgba(22,119,255,0.16); - --msg-info-fg: #1677FF; /* ZS-002-06 */ - --msg-warning-bg: rgba(250,173,20,0.16); - --msg-warning-fg: #FAAD14; /* --func-warning */ -} -``` - ---- - -## 34. 气泡确认（Popconfirm） - -> 对应设计稿「7.4 消息提醒-气泡确认」。锚定在触发元素（如「删除」按钮）上的小型确认气泡，带指向箭头 + 问号图标 + 一句确认语 + 「取消 / 确定」。比 §32 对话框更轻、无遮罩、就地确认。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，问号图标用 §27.4 警告橙。 - -### 34.1 结构 - -``` - [ 删除 ] ← 触发按钮 - ▲ ← 指向箭头 -┌─────────────────────┐ -│ ❓ 这是一段内容确定删除吗？│ -│ 取消 [确定] │ -└─────────────────────┘ -``` - -### 34.2 气泡容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 背景 | `#0C1836` (ZS-004-09)（或 `#122347`） | §3.1 | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 圆角 | `4px` | §4.1 | -| 阴影 | `0 4px 16px rgba(6,14,36,0.6)`（三级阴影变体） | §3.1.4 | -| 内边距 | `--spacing-3` (12px) | §7.1 | -| 最小宽度 | `200px` | — | -| 指向箭头 | `8px` 三角，与容器同底色 + 同边框，指向触发元素 | — | -| 与触发元素间距 | `--spacing-2` (8px) | §7.1 | - -### 34.3 内容与按钮 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 问号图标 ❓ | `16px`，圆形实心 `--func-warning`（橙），白色 `?` | §27.4 | -| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | -| 确认文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 文字 → 按钮区纵向间距 | `--spacing-3` (12px) | §7.1 | -| 按钮区对齐 | 右对齐 | — | -| 「取消」 | §5.2.3 文本按钮（`#4096FF`，hover `#1677FF`）或 §5.2.2 默认按钮小号 | §5.2.3 | -| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | -| 按钮间距 | `--spacing-2` (8px) | §7.1 | - -### 34.4 弹出方位与交互 - -| 行为 | 规则 | -|------|------| -| 方位 | 默认在触发元素**正下方**（`top` 箭头）；空间不足时自动翻转到上 / 左 / 右 | -| 打开 | `scale(0.95)→1` + `opacity 0→1`，`transform-origin` 指向箭头，`200ms ease-out` | -| 关闭 | 点「取消」/「确定」/ 点击气泡外部 / `Esc` | -| 「确定」 | 执行危险操作（如删除）后关闭；可在确认按钮上叠 §5.4.2 Loading | -| 无遮罩 | 不阻塞背景，仅就地确认 | - -### 34.5 与 §32 对话框的区别 - -| 维度 | §34 气泡确认 | §32 对话框 | -|------|-------------|-----------| -| 锚定 | 贴触发元素（带箭头） | 屏幕居中 | -| 遮罩 | 无 | 有 | -| 体量 | 极小（一句话 + 两钮） | 小弹窗（标题栏 + 主体 + 底部） | -| 用途 | 行内危险操作就地确认（删除 / 重置） | 较正式的确认 / 告知 | - -### 34.6 CSS Token 参考 - -```css -:root { - --popconfirm-bg: #0C1836; /* ZS-004-09 */ - --popconfirm-border: #1A2F5A; /* ZS-004-07 */ - --popconfirm-shadow: 0 4px 16px rgba(6,14,36,0.6); - --popconfirm-icon: #FAAD14; /* --func-warning 问号 */ - --popconfirm-text: #C5CFE0; /* ZS-004-02 */ - --popconfirm-cancel: #4096FF; /* ZS-002-05 文本按钮 */ - --popconfirm-cancel-hover: #1677FF;/* ZS-002-06 */ - --popconfirm-ok-bg: #1677FF; /* ZS-002-06 主按钮 */ -} -``` - ---- - -## 35. 图表通用规范（Chart 基础） - -> 对应设计稿「8. 图表」系列（柱状图 / 折线图 / 甘特图）。本节先约定**所有图表共用**的容器、标题、坐标轴、网格、图例、Tooltip、配色与空状态；§36 起按图表类型补充各自细则。配色一律取自 §1.1.8 图表配色与 §1.1.5 深蓝系，不另造色。 - -### 35.1 图表容器 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 背景 | `#0C1836` (ZS-004-09)，嵌入卡片时随 §22 卡片 `#122347` | §3.1 | -| 圆角 | `4px` | §4.1 | -| 内边距 | `--spacing-5` (24px) | §7.1 | -| 多图并排间距 | `--spacing-6` (32px) | §7.1 | -| 边框（可选） | `1px solid #1A2F5A` (ZS-004-07) | — | - -### 35.2 图表标题 - -设计稿中标题统一为「**主色蓝竖条 ▌ + 文字**」的小标题样式。 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 左侧竖条 | `3px × 14px`，`#1677FF` (ZS-002-06)，圆角 `1px` | §1.1.6 | -| 竖条 → 文字间距 | `--spacing-2` (8px) | §7.1 | -| 标题文字 | `16px Bold`，`#FFFFFF`（或 `#C5CFE0`） | §2.1.2 | -| 标题 → 图表区间距 | `--spacing-4` (16px) | §7.1 | -| 副标题 / 单位 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | - -> 部分卡片标题不带竖条（如「标题（BW）」「数据采集XXX」），此时直接用 `16px Bold #C5CFE0`，与 §22 卡片标题一致。 - -### 35.3 坐标轴 - -| 元素 | 色值 / 规格 | 来源 | -|------|-------------|------| -| 轴线（X / Y 基线） | `1px solid #2D4473` (ZS-004-06) | §6.1 | -| 刻度文字（轴标签） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | -| 轴标题 / 类目名（如「类型」「2012」） | `12px Regular`，`#4096FF` (ZS-002-05) 或 `#6E88B0` | — | -| 刻度线（tick） | 通常隐藏，仅留网格线 | — | -| 轴名称单位 | `12px`，`#6E88B0`，置于轴末端 | — | - -### 35.4 网格线（splitLine） - -| 类型 | 色值 | 样式 | 使用场景 | -|------|------|------|----------| -| 主网格（默认） | `#2D4473` (ZS-004-06) | `1px dashed` | 柱状 / 折线的 Y 向参考线 | -| 弱化网格 | `#1A2F5A` (ZS-004-07) | `1px dashed` | 密集图表、次要参考 | - -> 深色背景下网格一律用**虚线**且低对比，避免抢戏；纵向类目方向通常不画网格。 - -### 35.5 图例（Legend） - -| 属性 | 取值 | 来源 | -|------|------|------| -| 位置 | 右上角（多数）或顶部居中 | — | -| 色块（marker） | `10px` 方块 / 圆点，取系列色 | §1.1.8 | -| 色块 → 文字间距 | `--spacing-1` (4px) | §7.1 | -| 图例文字 | `12px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 项间距 | `--spacing-3` (12px) | §7.1 | -| 未选中态（点击隐藏系列） | 色块 + 文字置灰 `#4A6491` (ZS-004-05) | §1.1.5 | - -### 35.6 Tooltip（悬浮提示） - -鼠标悬停时跟随的浮层（如折线图「1月10日 异常率12.9%」、「5.32」）。 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 背景 | `rgba(12,24,54,0.92)`（ZS-004-09 92%） | §3.1 | -| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | -| 圆角 | `4px` | §4.1 | -| 阴影 | `0 4px 16px rgba(6,14,36,0.6)` | §3.1.4 | -| 内边距 | 上下 `--spacing-2`，左右 `--spacing-3` | §7.1 | -| 标题行（日期 / 类目） | `12px Medium`，`#FFFFFF` | — | -| 数值行 | `12px Regular`，色块（系列色）+ 名称 `#6E88B0` + 数值 `#C5CFE0` | — | -| 指示线（axisPointer） | `1px dashed #4096FF` (ZS-002-05)，或半透明竖向高亮带 `rgba(22,119,255,0.12)` | §6.1 | - -> 设计稿中数据点 hover 常显示一个**实心小标签**（如圆点 + 数值 `5.32`）：标签背景 `#122347`，文字 `#FFFFFF`，圆点取系列色，圆角 `2px`。 - -### 35.7 数据点与标记 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 折线拐点（默认） | 不显示或 `2px` 实心点 | — | -| 折线拐点（hover / 强调） | `空心圆`，描边 `2px` 系列色，填充 `#0C1836`，直径 `6px` | — | -| 高亮竖带（选中区间） | `rgba(22,119,255,0.12)` 矩形，无边框 | §3.1 | - -### 35.8 图表配色引用 - -| 用途 | 色序 | 来源 | -|------|------|------| -| 多系列（面积大：柱 / 折线 / 饼） | `#1677FF → #13C2C2 → #4096FF → #36CFC9 → #69B1FF → #5CDBD3 → #91CAFF → #87E8DE` | §1.1.8 通用图表色序 | -| 小面积（散点 / 迷你图 / 徽标） | `#4096FF → #36CFC9 → #FF4D4F → #FFA39E → #6388FF → #478880` | §1.1.8 小面积色序 | -| 语义系列（成功 / 警告 / 错误） | 绿 `--func-success` / 橙 `--func-warning` / 红 `#F5222D` | §27.4 / §1.1.2 | - -> 设计稿柱状图出现的「绿(Paper) / 橙(Project) / 蓝(Book)」三系列，对应**语义化分类**：绿取 §27.4 成功绿、橙取 §27.4 警告橙、蓝取主色 `#1677FF`；若为无语义的并列分类，应改用通用图表色序避免误读。 - -### 35.9 空状态 / 加载 - -| 状态 | 表现 | -|------|------| -| 加载中 | 图表区居中显示旋转图标 `#4096FF` + 文字「加载中…」`12px #6E88B0`（沿用 §5.4.2） | -| 无数据 | 居中占位插画 / 文字「暂无数据」`14px #6E88B0` | - ---- - -## 36. 柱状图（Column / Bar） - -> 对应设计稿「8.1 图表-柱状图」。涵盖**堆叠柱 / 分组柱 / 条形图（横向）/ 排行进度条**四种形态。容器、坐标轴、网格、图例、Tooltip 全部沿用 §35。 - -### 36.1 通用规格 - -| 属性 | 取值 | 来源 | -|------|------|------| -| 柱体圆角 | 顶部 `2px`（堆叠柱仅最顶段圆角） | §4.1 | -| 柱宽 | 类目宽度的 `40%~60%` | — | -| 同组柱间距 | `--spacing-1` (4px) | §7.1 | -| 类目（组）间距 | 自适应等分 | — | -| 数值标签（可选） | `12px Regular`，`#C5CFE0`，置柱顶上方 `--spacing-1` | — | - -### 36.2 堆叠柱状图（如「标题」Paper/Project/Book） - -| 元素 | 配色 | 来源 | -|------|------|------| -| 系列 1（Book / 底段） | `#69B1FF` (ZS-002-04) 或主色 `#1677FF` | §1.1.3 | -| 系列 2（Project / 中段） | `--func-warning`（橙） | §27.4 | -| 系列 3（Paper / 顶段） | `--func-success`（绿） | §27.4 | -| 段间分隔 | `1px` 容器底色 `#0C1836` 描边，制造堆叠缝隙 | — | -| Y 轴类目标签「类型」 | `12px`，`#4096FF` (ZS-002-05) | §35.3 | - -### 36.3 分组柱状图（如「标题（BW）」「标题」双系列） - -| 元素 | 配色 | 来源 | -|------|------|------| -| 系列依次取色 | 通用图表色序 `#1677FF / #13C2C2 / #4096FF …` | §1.1.8 | -| 设计稿 BW 三色变体 | 蓝 `#69B1FF` / 绿 `--func-success` / 橙 `--func-warning` | §35.8 | -| 双系列变体 | 蓝 `#69B1FF`(ZS-002-04) + 橙 `--func-warning` | — | - -### 36.4 条形图（横向，如「标题」x 轴 0–400） - -| 属性 | 取值 | 来源 | -|------|------|------| -| 方向 | 水平，类目在 Y 轴、数值在 X 轴 | — | -| 条体颜色 | `#69B1FF` (ZS-002-04)（单系列）或图表色序 | §1.1.3 | -| 条体圆角 | 右端 `2px` | §4.1 | -| 类目标签「类型」 | 左对齐，`12px #6E88B0` | §35.3 | -| X 轴刻度 | `0 / 100 / 200 / 300 / 400`，`12px #6E88B0` | §35.3 | - -### 36.5 排行进度条（如「数据采集XXX」TOP1–5） - -横向「标签 + 渐变进度条 + 数值」的榜单形态。 - -``` -TOP1 项目任务名称一 15,465 -■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓ -TOP2 项目任务名称二 15,234 -■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ -``` - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 排名 + 名称（TOPn 项目任务名称） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | -| 数值（右对齐） | `16px D-DIN Regular`，`#FFFFFF` | §2.1.2 | -| 进度条高度 | `8px`，圆角 `4px` | §4.1 | -| 进度填充 | 渐变 `linear-gradient(90deg, #1677FF 0%, #13C2C2 100%)`（主色蓝→主色青） | §1.1.8 | -| 进度轨道（底槽） | `#1A2F5A` (ZS-004-07) | §1.1.5 | -| 行间距 | `--spacing-4` (16px) | §7.1 | -| 名称行 → 进度条间距 | `--spacing-2` (8px) | §7.1 | - -### 36.6 交互 - -| 行为 | 动效 | -|------|------| -| 入场 | 柱体由 `0` 向目标高度 / 长度增长，`scaleY/scaleX 0→1`，`400ms ease-out`，按系列依次 `60ms` 错峰 | -| Hover 柱 | 该柱亮度 `+8%`，弹出 §35.6 Tooltip，axisPointer 高亮该类目竖带 | -| Hover 进度条 | 数值放大或显示绝对值 Tooltip | - ---- - -## 37. 折线图（Line / Area） - -> 对应设计稿「8.2 图表-折线图」与「8.3 多系列折线」。涵盖**迷你面积图 / 单线（含异常点 Tooltip）/ 长时序面积图（带缩略轴）/ 多系列折线**。容器、轴、网格、图例、Tooltip 沿用 §35。 - -### 37.1 线条与面积 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 线宽 | `2px` | — | -| 线条颜色 | 取图表色序，单线默认 `#1677FF` (ZS-002-06) | §1.1.8 | -| 平滑 | `smooth`（曲线）或折线，按数据性质选用 | — | -| 面积填充（单线） | 自顶向下渐变 `rgba(22,119,255,0.32) → rgba(22,119,255,0)` | §3.1 | -| 拐点 | 默认隐藏，hover 显示空心圆（§35.7） | — | - -### 37.2 迷你面积图（如左上「图表标题」+ 已选/未选 标签） - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 顶部切换标签（已选 / 未选） | §29 标签：选中 `#1677FF` 实心白字 / 未选 `transparent` + `1px #6E88B0` 边、`#6E88B0` 字 | §29 | -| 线条 | `2px #4096FF` (ZS-002-05) | — | -| 面积渐变 | `rgba(64,150,255,0.32) → 0` | — | -| 当前值标签（如 `59.32`） | 实心小牌 `#122347` 背景 / `#FFFFFF` 文字，圆角 `2px`，定位于末端点 | §35.6 | -| 轴标签（日期） | `12px #6E88B0` | §35.3 | - -### 37.3 单线异常点图（如中部「5-1…5-12」+「1月10日 异常率12.9%」） - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 主线 | `2px #1677FF` | — | -| 面积渐变 | `rgba(22,119,255,0.32) → 0` | — | -| 选中竖带 | `rgba(22,119,255,0.12)` 矩形高亮当前 X 区间 | §35.7 | -| 异常点标记 | 空心圆 `6px`，描边 `#FAAD14`（警告橙），填充 `#0C1836` | §27.4 | -| Tooltip（日期 + 指标） | §35.6；指标行如「异常率 12.9%」用 `--func-warning` 橙强调 | §35.6 | -| Y 轴（0–2500） | `12px #6E88B0`，虚线网格 `#2D4473` | §35.3 / §35.4 | - -### 37.4 长时序面积图 + 缩略轴（如底部「图表标题」1986–2024） - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 主线 | `2px #36CFC9`（标准青）或 `#4096FF` | §1.1.4 | -| 面积渐变 | `rgba(54,207,201,0.24) → 0` | — | -| 数据点标签（如 `2.43`） | 实心小牌（§35.6），定位于选中点上方 | — | -| 缩略轴（dataZoom，右下迷你图） | 缩略折线 `#4A6491`；滑窗手柄 `#1677FF`，选中区 `rgba(22,119,255,0.16)` | §1.1.5 / §1.1.6 | -| X 轴年份 | `12px #6E88B0`，密集时隔项显示 | §35.3 | - -### 37.5 多系列折线图（如「图表标题」XXX/XXX/都是/无反应） - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 图例（顶部居中） | 方块 marker + 文字，项间距 `--spacing-3` | §35.5 | -| 系列 1（XXX） | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | -| 系列 2（XXX） | 蓝 `#1677FF` (ZS-002-06) | §1.1.3 | -| 系列 3（都是） | 橙 `--func-warning` | §27.4 | -| 系列 4（无反应） | 绿 `--func-success` 或青 `#36CFC9` | §27.4 / §1.1.4 | -| 线宽 | `2px`，多系列**不填充面积**（避免互相遮挡） | — | -| 拐点 | 全程显示 `4px` 空心圆（描边系列色，填充 `#0C1836`） | §35.7 | -| 选中竖带 + Tooltip | hover 竖带 `rgba(22,119,255,0.12)`，Tooltip 列出各系列值（如 `5.32`） | §35.6 | -| Y 轴（0–10） / X 轴（年份） | `12px #6E88B0`，横向虚线网格 `#2D4473` | §35.3 / §35.4 | - -### 37.6 交互 - -| 行为 | 动效 | -|------|------| -| 入场 | 线条沿路径绘制 `stroke-dashoffset` 动画，`600ms ease-out`；面积同步淡入 | -| Hover | 显示 §35.6 Tooltip + 竖向 axisPointer 高亮带；对应拐点放大为空心圆 | -| 图例点击 | 切换系列显隐，隐藏态图例置灰 `#4A6491`（§35.5） | -| 缩略轴拖拽 | 主图 X 轴范围实时联动，`100ms` 节流 | - ---- - -## 38. 甘特图（Gantt） - -> 对应设计稿「甘特图」。以时间为横轴、任务行为纵轴的进度条排期图。深蓝背景上以**交替行底纹 + 渐变任务条 + 箭头收尾**呈现，配色取 §1.1.8 图表色序与语义色。 - -### 38.1 结构 - -``` - 1 2 3 … 15 16 17 … 31 ← 时间刻度表头 - Jan ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▶ ← 任务条（带箭头收尾） - Feb ▐▓▓▓▓▓▓▓▓▓▶ - Mar ▐▓▓▓▓▓▓▓▶ - … - Dec ▐▓▓▓▓▓▓▓▓▓▓▓▶ - ● Lorem ipsum 1 ● Lorem ipsum 2 … ← 底部图例 -``` - -### 38.2 表格框架 - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 容器背景 | `#0C1836` (ZS-004-09) | §35.1 | -| 时间刻度表头（1–31 / 月） | `12px Regular`，`#C5CFE0` (ZS-004-02) | §35.3 | -| 行标签（Jan…Dec） | `14px Regular`，`#C5CFE0` | — | -| 行高 | `28px`，行间距 `--spacing-1` (4px) | §7.1 | -| 行底纹（轨道） | `#122347` (ZS-004-08)，整行通栏，圆角 `2px` | §1.1.5 | -| 行底纹（隔行可选） | 奇偶交替 `#122347` / `#0F1C3D` | — | -| 列分隔（可选） | `1px dashed #1A2F5A` (ZS-004-07) | §6.2 | - -### 38.3 任务条 - -| 元素 | 规格 / 配色 | 来源 | -|------|-------------|------| -| 条高 | `16px`，垂直居中于行内 | — | -| 圆角 | `2px`（左端）；右端收**箭头**三角表示方向 | §4.1 | -| 填充 | 沿条向右渐变（系列色 `0%` → 同色 70% 透明 `100%`），叠加斜纹/点纹理增强层次 | §1.1.8 | -| 纹理 | `repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px)` | — | -| 箭头收尾 | 与条同色实心三角，`6px`，指向时间推进方向 | — | -| 进度（可选） | 条内再叠一段高饱和系列色表示完成比例 | — | - -### 38.4 任务分类配色（对应底部图例 Lorem ipsum 1–5） - -| 图例 | 圆点 / 任务条主色 | 来源 | -|------|------------------|------| -| Lorem ipsum 1 | 橙 `--func-warning` | §27.4 | -| Lorem ipsum 2 | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | -| Lorem ipsum 3 | 青绿 `#36CFC9` (ZS-003-05) | §1.1.4 | -| Lorem ipsum 4 | 浅蓝 `#91CAFF` (ZS-002-03) | §1.1.3 | -| Lorem ipsum 5 | 主色蓝 `#1677FF` (ZS-002-06) | §1.1.3 | - -### 38.5 图例与表头 - -| 元素 | 规格 | 来源 | -|------|------|------| -| 底部图例圆点 | `10px` 圆形，取 §38.4 分类色 | §35.5 | -| 图例文字 | `14px Regular`，`#C5CFE0` | — | -| 图例项间距 | `--spacing-5` (24px) | §7.1 | -| 表头 → 首行间距 | `--spacing-3` (12px) | §7.1 | - -### 38.6 交互 - -| 行为 | 动效 | -|------|------| -| 入场 | 任务条由左端起点向右展开 `scaleX 0→1`（`transform-origin:left`），`400ms ease-out`，按行错峰 `60ms` | -| Hover 任务条 | 整条亮度 `+8%`，弹出 §35.6 Tooltip（任务名 / 起止日期 / 进度） | -| Hover 行 | 行底纹由 `#122347` → `#1A2F5A` (ZS-004-07) | -| 今日线（可选） | 一条 `1px dashed #4096FF` (ZS-002-05) 竖线标注当前日期 | §6.2 | - -### 38.7 CSS Token 参考（§35–§38 共用） - -```css -:root { - /* 图表容器与标题 */ - --chart-bg: #0C1836; /* ZS-004-09 */ - --chart-title-bar: #1677FF; /* ZS-002-06 标题竖条 */ - --chart-title-text: #FFFFFF; - --chart-subtitle: #6E88B0; /* ZS-004-04 */ - - /* 坐标轴与网格 */ - --chart-axis-line: #2D4473; /* ZS-004-06 */ - --chart-axis-label: #6E88B0; /* ZS-004-04 */ - --chart-axis-cat: #4096FF; /* ZS-002-05 类目名 */ - --chart-grid: #2D4473; /* ZS-004-06 虚线网格 */ - --chart-grid-weak: #1A2F5A; /* ZS-004-07 */ - - /* 图例 / Tooltip */ - --chart-legend-text: #C5CFE0; /* ZS-004-02 */ - --chart-legend-off: #4A6491; /* ZS-004-05 未选中 */ - --chart-tooltip-bg: rgba(12,24,54,0.92); - --chart-tooltip-border:#1A2F5A; /* ZS-004-07 */ - --chart-tooltip-title: #FFFFFF; - --chart-tooltip-value: #C5CFE0; - --chart-axispointer: #4096FF; /* ZS-002-05 */ - --chart-highlight-band:rgba(22,119,255,0.12); - - /* 通用图表色序（面积大） */ - --chart-c1: #1677FF; --chart-c2: #13C2C2; --chart-c3: #4096FF; --chart-c4: #36CFC9; - --chart-c5: #69B1FF; --chart-c6: #5CDBD3; --chart-c7: #91CAFF; --chart-c8: #87E8DE; - - /* 小面积图表色序 */ - --chart-s1: #4096FF; --chart-s2: #36CFC9; --chart-s3: #FF4D4F; - --chart-s4: #FFA39E; --chart-s5: #6388FF; --chart-s6: #478880; - - /* 排行进度条（§36.5） */ - --rank-bar-fill: linear-gradient(90deg, #1677FF 0%, #13C2C2 100%); - --rank-bar-track: #1A2F5A; /* ZS-004-07 */ - --rank-value: #FFFFFF; - - /* 甘特图（§38） */ - --gantt-track: #122347; /* ZS-004-08 行底纹 */ - --gantt-row-hover: #1A2F5A; /* ZS-004-07 */ - --gantt-c1: #FAAD14; /* 警告橙 */ - --gantt-c2: #FF4D4F; /* ZS-001-05 */ - --gantt-c3: #36CFC9; /* ZS-003-05 */ - --gantt-c4: #91CAFF; /* ZS-002-03 */ - --gantt-c5: #1677FF; /* ZS-002-06 */ - --gantt-today: #4096FF; /* ZS-002-05 今日线 */ -} -``` - -> 项目当前未引入图表库；若后续接入 ECharts，可将以上 token 注入主题（`backgroundColor` / `axisLine.lineStyle.color` / `splitLine.lineStyle` / `color[]` 色序 / `tooltip.backgroundColor` 等），保持与本规范一致。 diff --git a/frontend-web/docs/ui规范-深蓝/00-基础-色彩字体间距.md b/frontend-web/docs/ui规范-深蓝/00-基础-色彩字体间距.md new file mode 100644 index 00000000..a1b6e1d7 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/00-基础-色彩字体间距.md @@ -0,0 +1,580 @@ +# 深蓝色 UI 规范 · 00 基础（色彩 / 字体 / 阴影 / 圆角 / 间距 / 分割线） + +> 本文件是《深蓝色 UI 规范》拆分后的**基础篇（§1–§7）**，是全站设计令牌的唯一来源。 +> 其余分册见同目录 `README.md`；可直接 import 的变量见 `tokens.css`。 +> 跨章节 `§N` 编号全局唯一，所属文件见 README 的「§ 索引」。 + +**本篇目录（§1–§7）**：`1` 色彩 · `2` 字体 · `3` 阴影 · `4` 圆角 · `5` 按钮 · `6` 分割线 · `7` 间距 + +--- + +## 1. 色彩 + +### 1.1 标准色 + +色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。 + +--- + +#### 1.1.1 色系总览 + +| 色系 | 用途定位 | 代码前缀 | +|------|----------|----------| +| 渐红系 | 警示、错误、强调操作 | ZS-001 | +| 渐蓝系 | 信息、链接、次级操作 | ZS-002 | +| 渐青系 | 成功、在线状态、数据高亮 | ZS-003 | +| 深蓝系 | 页面背景、容器、导航底色 | ZS-004 | + +--- + +#### 1.1.2 渐红系（ZS-001） + +用于错误提示、危险操作、重要告警。 + +| 编号 | 色值 | 说明 | +|------|------|------| +| ZS-001-01 | `#FFF1F0` | 极浅红，错误背景底色 | +| ZS-001-02 | `#FFCCC7` | 浅红，输入框错误边框 | +| ZS-001-03 | `#FFA39E` | — | +| ZS-001-04 | `#FF7875` | — | +| ZS-001-05 | `#FF4D4F` | 标准红，Tag / Badge | +| ZS-001-06 | `#F5222D` | 主色红，按钮 / 图标 | +| ZS-001-07 | `#CF1322` | 深红，Hover 状态 | +| ZS-001-08 | `#A8071A` | 深红，Active / Press | +| ZS-001-09 | `#820014` | 极深红 | +| ZS-001-10 | `#5C0011` | 最深红 | + +--- + +#### 1.1.3 渐蓝系（ZS-002） + +用于信息提示、链接、次级按钮。 + +| 编号 | 色值 | 说明 | +|------|------|------| +| ZS-002-01 | `#E6F4FF` | 极浅蓝，信息背景底色 | +| ZS-002-02 | `#BAE0FF` | 浅蓝 | +| ZS-002-03 | `#91CAFF` | — | +| ZS-002-04 | `#69B1FF` | — | +| ZS-002-05 | `#4096FF` | 标准蓝，链接 / 信息 Tag | +| ZS-002-06 | `#1677FF` | 主色蓝，主操作按钮 | +| ZS-002-07 | `#0958D9` | 深蓝，Hover | +| ZS-002-08 | `#003EB3` | 深蓝，Active | +| ZS-002-09 | `#002C8C` | 极深蓝 | +| ZS-002-10 | `#001D6C` | 最深蓝 | + +--- + +#### 1.1.4 渐青系（ZS-003） + +用于成功状态、在线标识、数据图表高亮。 + +| 编号 | 色值 | 说明 | +|------|------|------| +| ZS-003-01 | `#E6FFFB` | 极浅青，成功背景 | +| ZS-003-02 | `#B5F5EC` | 浅青 | +| ZS-003-03 | `#87E8DE` | — | +| ZS-003-04 | `#5CDBD3` | — | +| ZS-003-05 | `#36CFC9` | 标准青，成功 Tag | +| ZS-003-06 | `#13C2C2` | 主色青，在线点 / 图标 | +| ZS-003-07 | `#08979C` | 深青，Hover | +| ZS-003-08 | `#006D75` | 深青，Active | +| ZS-003-09 | `#00474F` | 极深青 | +| ZS-003-10 | `#002329` | 最深青 | + +--- + +#### 1.1.5 深蓝系（ZS-004） + +用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。 + +| 编号 | 色值 | 说明 | +|------|------|------| +| ZS-004-01 | `#E8EDF5` | 极浅，分割线 / 禁用底色 | +| ZS-004-02 | `#C5CFE0` | 浅，边框 | +| ZS-004-03 | `#9BADC8` | — | +| ZS-004-04 | `#6E88B0` | — | +| ZS-004-05 | `#4A6491` | 中深蓝，次级文字 | +| ZS-004-06 | `#2D4473` | 深蓝，卡片容器背景 | +| ZS-004-07 | `#1A2F5A` | 深蓝，侧边栏背景 | +| ZS-004-08 | `#122347` | 深蓝，导航栏背景 | +| ZS-004-09 | `#0C1836` | 极深蓝，页面背景 | +| ZS-004-10 | `#060E24` | 最深，全局底色 | + +--- + +#### 1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色） + +从标准色系中提取，用于具体 UI 角色指定。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 主色（Primary） | `#1677FF` | ZS-002-06 | +| 主色 Hover | `#0958D9` | ZS-002-07 | +| 主色 Active | `#003EB3` | ZS-002-08 | +| 正常字体色 | `#C5CFE0` | ZS-004-02 | +| 次级字体色 | `#6E88B0` | ZS-004-04 | +| 禁用字体色 | `#4A6491` | ZS-004-05 | +| 辅色（Accent） | `#13C2C2` | ZS-003-06 | +| 页面背景色 | `#0C1836` | ZS-004-09 | +| 容器背景色 | `#1A2F5A` | ZS-004-07 | +| 白色 | `#FFFFFF` | — | + +--- + +#### 1.1.7 小面积装饰色 + +用于图标点缀、徽标、少量强调，不用于大面积背景。 + +| 色值 | 说明 | +|------|------| +| `#6388FF` | 紫蓝，图标装饰 | +| `#F5222D` | 红色，危险徽标 | +| `#12306C` | 深蓝，品牌点缀 | +| `#478880` | 青绿，辅助点缀 | +| `#950404` | 深红，重要告警点 | + +--- + +#### 1.1.8 图表配色 + +**通用图表色序**（面积较大，如柱状图、折线图、饼图）： + +| 序号 | 色值 | +|------|------| +| 1 | `#1677FF` | +| 2 | `#13C2C2` | +| 3 | `#4096FF` | +| 4 | `#36CFC9` | +| 5 | `#69B1FF` | +| 6 | `#5CDBD3` | +| 7 | `#91CAFF` | +| 8 | `#87E8DE` | + +**小面积图表色序**（面积较小，如散点、小徽章、迷你图）： + +| 序号 | 色值 | +|------|------| +| 1 | `#4096FF` | +| 2 | `#36CFC9` | +| 3 | `#FF4D4F` | +| 4 | `#FFA39E` | +| 5 | `#6388FF` | +| 6 | `#478880` | + +--- + +#### 1.1.9 功能语义色（Functional / Status） + +承载「成功 / 警告 / 错误 / 信息 / 处理中」语义。其中**错误红、信息蓝、处理中青**直接复用标准色；**成功绿、警告橙**为标准色系之外的补充色（深色背景下 ZS-003 青偏冷、且无现成橙），在此正式收录。全站语义场景一律引用本表，不再各处自定义。 + +| 语义 | 色值 | 来源 | 典型用途 | +|------|------|------|----------| +| 成功 / 已完成 | `#52C41A` | 补充色（绿） | 成功提示、完成状态、通过校验 | +| 警告 / 进行中 | `#FAAD14` | 补充色（橙） | 警告提示、进行中、需注意 | +| 错误 / 失败 | `#F5222D` | ZS-001-06 | 错误提示、删除、失败状态 | +| 信息 / 默认 | `#1677FF` | ZS-002-06 | 信息提示、主操作、链接 | +| 处理中 / 等待 | `#13C2C2` | ZS-003-06 | 处理中、排队、等待反馈 | + +> 浅底变体（Message / Alert / Tag 底色）：前景色取 16% 透明度，如成功底 `rgba(82,196,26,0.16)`、警告底 `rgba(250,173,20,0.16)`。 +> CSS Token 见 `tokens.css` 的 `--func-success / --func-warning / --func-error / --func-info / --func-processing`。 + +--- + +## 2. 字体 + +### 2.1 全局样式 - 字体 + +--- + +#### 2.1.1 大屏页面字体规范 + +##### 中文字体：Noto Sans S Chinese + +| 样式 | 使用场景 | +|------|----------| +| 24px Bold | 一级标题 | +| 24px Medium | 次要一级标题 | +| 22px Medium | 二级标题 | +| 22px Regular | 正文 | +| 20px Regular | 排版空间有限的正文 | + +##### 数字字体：D-DIN + +| 样式 | 使用场景 | +|------|----------| +| 32px Bold | 重要数据展示 | +| 32px Regular | 普通数据展示 | +| 26px Bold | 常规数据展示 | +| 26px Regular | 常规数据展示 | + +##### 特殊数字：DS-Digital + +| 样式 | 使用场景 | +|------|----------| +| 50px Bold | 大屏主数据展示 | + +##### 表格字体：Arial + +| 样式 | 使用场景 | +|------|----------| +| 20px Regular | 表格横纵轴数字 | + +--- + +#### 2.1.2 后台系统字体规范 + +##### 中文字体：Noto Sans S Chinese + +| 样式 | 使用场景 | +|------|----------| +| 18px Bold | 导航、一级标题 | +| 18px Medium | 次要一级标题 | +| 16px Bold | 二级标题 | +| 16px Medium | 次要二级标题 | +| 16px Regular | 正文、按钮内部文字等 | +| 16px Light | 次要正文 | + +##### 数字字体：D-DIN + +| 样式 | 使用场景 | +|------|----------| +| 26px Bold | 重要数据展示 | +| 26px Regular | 普通数据展示 | +| 24px Bold | 常规数据展示（小） | +| 24px Regular | 常规数据展示（小） | + +##### LOGO 字体：DOUYUFont + +| 样式 | 使用场景 | +|------|----------| +| 20px 文字样式 | 页面顶部系统名称 | + +##### 表格数字：Arial + +| 样式 | 使用场景 | +|------|----------| +| 16px Regular | 表格横纵轴数字 | +| 14px Regular | 表格横轴数字（空间有限） | + +--- + +## 3. 阴影 + +### 3.1 容器与卡片配色 + +阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。 + +#### 3.1.1 外层容器 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 页面 / 最外层背景 | `#060E24` | ZS-004-10 | +| 分栏容器背景 | `#0C1836` | ZS-004-09 | + +#### 3.1.2 卡片（标题 + 操作） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#122347` | ZS-004-08 | +| 卡片边框 | `#1A2F5A` | ZS-004-07 | +| 卡片阴影（外发光） | `rgba(22, 119, 255, 0.12)` | 基于 ZS-002-06 主色蓝 12% 透明度 | +| 标题文字（16px Bold） | `#C5CFE0` | ZS-004-02（正常字体色） | +| 操作按钮文字 | `#4096FF` | ZS-002-05（标准蓝，链接） | +| 次级操作图标（✏️ / ⋯） | `#6E88B0` | ZS-004-04（次级字体色） | + +#### 3.1.3 卡片新增（占位卡片） + +虚线描边的"新增入口"卡片，用于引导用户添加内容。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#0C1836` | ZS-004-09（与外层同色，营造凹陷感） | +| 虚线边框 | `#4096FF` | ZS-002-05 | +| 加号图标 | `#4096FF` | ZS-002-05 | + +#### 3.1.4 阴影投影规则 + +| 层级 | 阴影值 | 使用场景 | +|------|--------|----------| +| 一级阴影（卡片悬浮） | `0 2px 8px rgba(22, 119, 255, 0.12)` | 普通卡片 | +| 二级阴影（hover / 强调） | `0 4px 16px rgba(22, 119, 255, 0.24)` | 卡片 hover、弹出层 | +| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(6, 14, 36, 0.6)` | Dialog、Drawer | + +--- + +## 4. 圆角 + +### 4.1 圆角统一规范 + +| 元素 | 圆角值 | 说明 | +|------|--------|------| +| 按钮 | `2px` | 所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 | +| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 | +| 页面分栏框 | `4px` | 外层容器、分栏区域 | +| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 | +| Tag / Badge | `2px` | 与按钮一致 | +| Modal / Drawer | `4px` | 与卡片一致 | + +### 4.2 按钮配色（圆角 2px） + +#### 4.2.1 主按钮（Primary） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 背景 | `#1677FF` | ZS-002-06 | +| 文字 | `#FFFFFF` | — | +| Hover 背景 | `#0958D9` | ZS-002-07 | +| Active 背景 | `#003EB3` | ZS-002-08 | +| 禁用背景 | `#4A6491` | ZS-004-05 | +| 禁用文字 | `#6E88B0` | ZS-004-04 | + +#### 4.2.2 次按钮（Outline / Default） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 背景 | `transparent` | — | +| 边框 | `#6E88B0` | ZS-004-04 | +| 文字 | `#C5CFE0` | ZS-004-02 | +| Hover 边框 | `#4096FF` | ZS-002-05 | +| Hover 文字 | `#4096FF` | ZS-002-05 | +| Active 边框 | `#1677FF` | ZS-002-06 | + +### 4.3 卡片与分栏（圆角 4px） + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#122347` | ZS-004-08 | +| 卡片边框 | `#1A2F5A` | ZS-004-07 | +| 分栏框背景 | `#0C1836` | ZS-004-09 | +| 分栏框边框 | `#1A2F5A` | ZS-004-07 | + +--- + +## 5. 按钮 + +> 全部圆角 `2px`，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。 + +### 5.1 按钮尺寸 + +| 规格 | 高度 | 内边距 | 使用场景 | +|------|------|--------|----------| +| 小 | `28px` | `0 10px` | 空间小的板块内部，如表格中、卡片标题等 | +| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 | + +### 5.2 按钮类型与配色 + +#### 5.2.1 主按钮（Primary） + +> 一个操作区域只能有一个主按钮。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 默认 | `#1677FF` (ZS-002-06) | — | `#FFFFFF` | +| Hover | `#0958D9` (ZS-002-07) | — | `#FFFFFF` | +| Active | `#003EB3` (ZS-002-08) | — | `#FFFFFF` | +| 失效 | `rgba(22, 119, 255, 0.35)` | — | `#6E88B0` (ZS-004-04) | + +#### 5.2.2 默认按钮（Default / Outline） + +用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| Hover | `rgba(22, 119, 255, 0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | +| Active | `rgba(22, 119, 255, 0.16)` | `#1677FF` (ZS-002-06) | `#1677FF` (ZS-002-06) | +| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` (ZS-004-05) | + +#### 5.2.3 文本按钮（Text） + +用于表格操作、文件下载等。无背景与边框，靠文字色识别。 + +| 状态 | 文字 | 装饰 | +|------|------|------| +| 默认 | `#4096FF` (ZS-002-05) | 无下划线 | +| Hover | `#1677FF` (ZS-002-06) | 显示下划线（与文字同色） | +| Active | `#0958D9` (ZS-002-07) | 下划线 | +| 失效 | `#4A6491` (ZS-004-05) | 无装饰 | + +#### 5.2.4 图标按钮（Icon-only） + +用于增强辨识度或节省空间。仅图标，无文字。 + +| 变体 | 背景 | 图标颜色 | +|------|------|----------| +| 主色（常用） | `#1677FF` (ZS-002-06) | `#FFFFFF` | +| 主色 Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` | +| 危险（删除等） | `#F5222D` (ZS-001-06) | `#FFFFFF` | +| 危险 Hover | `#CF1322` (ZS-001-07) | `#FFFFFF` | +| 透明（仅图标） | `transparent` | `#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05) | + +### 5.3 按钮组合 + +#### 5.3.1 文字 + 下拉按钮（含 ▾） + +两种填充： + +| 形态 | 配色规则 | +|------|----------| +| 默认（Outline） | 沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0` | +| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF` | + +#### 5.3.2 图标 + 文字按钮（如 `+ 正常`） + +| 形态 | 配色规则 | +|------|----------| +| 默认（Outline） | 沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0` | +| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` | + +#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"） + +| 角色 | 色值 | +|------|------| +| 文字 + 图标（默认） | `#4096FF` (ZS-002-05) | +| 文字 + 图标（Hover） | `#1677FF` (ZS-002-06) | +| 失效 | `#4A6491` (ZS-004-05) | + +> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。 + +#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"） + +- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作） +- **按钮间距**：`8px` +- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]` +- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.2 + +### 5.4 其他按钮 + +#### 5.4.1 悬浮状态（Floating） + +用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。 + +| 状态 | 阴影 | +|------|------| +| 默认 | `0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影） | +| Hover | `0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影） | +| Active | 阴影消失，按下感 | + +#### 5.4.2 加载中（Loading） + +用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。 + +| 角色 | 色值 | +|------|------| +| 背景 | `#1677FF` (ZS-002-06) | +| 文字 | `#FFFFFF` | +| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` | +| 不可点击 | 鼠标 `cursor: not-allowed` | + +> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。 + +--- + +## 6. 分割线 + +> 统一线宽 `1px`，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。 + +### 6.1 水平分割线 + +水平分割线常用来对不同元素内容进行分割。 + +| 类型 | 色值 | 来源 | 样式 | 使用场景 | +|------|------|------|------|----------| +| 实线（默认） | `#4A6491` | ZS-004-05 | `border-top: 1px solid` | 模块间、列表项间分割 | +| 实线（强调） | `#6E88B0` | ZS-004-04 | `border-top: 1px solid` | 主区块标题下方、卡片头部分割 | +| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-top: 1px solid` | 卡片内部、密集列表分隔 | +| 虚线 | `#4A6491` | ZS-004-05 | `border-top: 1px dashed` | 次级 / 层级内分割，提示"非主结构" | +| 主色实线（高亮） | `#1677FF` | ZS-002-06 | `border-top: 1px solid` | 强调分隔，少量使用（如当前激活区块底边） | + +### 6.2 垂直分割线 + +垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。 + +| 类型 | 色值 | 来源 | 样式 | 使用场景 | +|------|------|------|------|----------| +| 实线（默认） | `#4A6491` | ZS-004-05 | `border-left: 1px solid` | 行内 inline 元素分割（面包屑、操作按钮组） | +| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-left: 1px solid` | 表格列分割、紧凑布局 | +| 虚线 | `#4A6491` | ZS-004-05 | `border-left: 1px dashed` | 多列对齐辅助、辅助参考线 | + +### 6.3 规格与间距 + +| 规则 | 取值 | +|------|------| +| 线宽 | `1px` | +| 水平分割线与上下元素间距 | `≥ 8px`（紧凑布局可用 `4px`） | +| 垂直分割线与左右元素间距 | `≥ 8px`（行内紧凑 `4px`） | +| 垂直分割线高度 | 与文字行高一致，约 `12–14px`（也可全高跟随容器） | +| 透明度 | 必要时叠 `opacity: 0.6` 实现"更弱"层级 | + +### 6.4 CSS 参考 + +```css +/* 默认水平分割线 */ +.divider-h { border-top: 1px solid #4A6491; } +.divider-h-strong { border-top: 1px solid #6E88B0; } +.divider-h-weak { border-top: 1px solid #2D4473; } +.divider-h-dashed { border-top: 1px dashed #4A6491; } +.divider-h-accent { border-top: 1px solid #1677FF; } + +/* 垂直分割线 */ +.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; } +.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; } +.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; } +``` + +--- + +## 7. 间距 + +> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。 + +### 7.1 间距阶梯 + +| 阶 | px | rem | 分组 | 典型场景 | +|----|------|--------|------|----------| +| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 | +| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 | +| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 | +| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 | +| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 | +| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 | +| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 | +| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 | + +> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。 + +### 7.2 使用原则 + +- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。 +- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。 +- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。 +- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。 +- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。 + +### 7.3 CSS Token 建议 + +```css +:root { + --spacing-1: 4px; /* 0.25rem */ + --spacing-2: 8px; /* 0.5rem */ + --spacing-3: 12px; /* 0.75rem */ + --spacing-4: 16px; /* 1rem */ + --spacing-5: 24px; /* 1.5rem */ + --spacing-6: 32px; /* 2rem */ + --spacing-7: 40px; /* 2.5rem */ + --spacing-8: 56px; /* 3.5rem */ +} +``` + +### 7.4 与已有规范的对齐 + +| 已有规则 | 对应阶 | +|----------|--------| +| §4.x 卡片圆角内边距 | `--spacing-4` (16px) | +| §5.3.4 主+默认按钮组合间距 `8px` | `--spacing-2` | +| §5.3.3 文本按钮间距 `16px` | `--spacing-4` | +| §6.3 分割线与上下元素间距 `≥ 8px` | `--spacing-2` 起 | + +--- + diff --git a/frontend-web/docs/ui规范-深蓝/01-导航.md b/frontend-web/docs/ui规范-深蓝/01-导航.md new file mode 100644 index 00000000..74106279 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/01-导航.md @@ -0,0 +1,780 @@ +# 深蓝色 UI 规范 · 01 导航（§8–§13） + +> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。 + +**本篇目录**：`8` 导航组件 · `9` 锚点与页签 · `10` 步骤条 · `11` 面包屑 · `12` 页头 · `13` 分页 + +--- + +## 8. 导航组件 + +> 适用于"大屏后台 / 控制台"类深蓝主题界面。整体结构 = 顶部导航 + 左侧分级菜单 + 多级下拉。所有颜色取自 ZS-002 / ZS-004 两个色系。 + +### 8.1 整体结构 + +``` +┌─ 顶部导航（Header）─ 高 56px ──────────────────────────────────────────────┐ +│ ≡ 二级菜单 二级菜单 二级菜单 〈一级菜单〉〈一级菜单〉 ⟪ XXXX系统 ⟫ 〈一级菜单〉 ⟳ 时间 ⌂ 返回首页 │ +├──┬──────────────────────────────────────────────────────────────────────────┤ +│ 三│ ┌─ 四级菜单（下拉面板）──┐ │ +│ 级│ │ ▾ 四级菜单 │ │ +│ 菜│ │ ▾ 五级菜单 │ │ +│ 单│ │ - 六级菜单 (active)│ │ +│ 三│ │ - 六级菜单 │ │ +│ 级│ │ ▸ 五级菜单 │ │ +│ 菜│ │ ▸ 四级菜单 │ │ +│ 单│ └────────────────────────┘ │ +│ …│ │ +└──┴──────────────────────────────────────────────────────────────────────────┘ +``` + +### 8.2 顶部导航（Header） + +#### 8.2.1 规格 + +| 属性 | 取值 | +|------|------| +| 高度 | `56px` | +| 左右 padding | `--spacing-4` (16px) | +| 背景 | 渐变 `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） | +| 底边 | `border-bottom: 1px solid #1A2F5A` (ZS-004-07) | +| 阴影 | `0 2px 8px rgba(6, 14, 36, 0.6)`（§3.1.4 一级阴影变体） | +| 文字基线 | `Noto Sans S Chinese`，垂直居中 | + +#### 8.2.2 二级菜单（左侧 Tabs，小号 14px） + +| 状态 | 文字 | 背景 | 装饰 | +|------|------|------|------| +| 默认 | `#6E88B0` (ZS-004-04) | `transparent` | — | +| Hover | `#C5CFE0` (ZS-004-02) | `rgba(22,119,255,0.08)` | — | +| 激活 | `#4096FF` (ZS-002-05) | `transparent` | 底部 `2px solid #4096FF` 高亮线 | + +- 字号 `14px Regular`，间距 `--spacing-3` (12px) +- 与最左侧的"折叠菜单 ≡"图标间距 `--spacing-4` (16px) + +#### 8.2.3 一级菜单（中部主导航，16px 带切角装饰） + +| 状态 | 文字 | 装饰 | +|------|------|------| +| 默认 | `#C5CFE0` (ZS-004-02) | 两端切角斜边，`border: 1px solid #1A2F5A` | +| Hover | `#4096FF` (ZS-002-05) | 切角线变 `#4096FF` | +| 激活 | `#FFFFFF` | 切角线 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.16)` | + +- 字号 `16px Medium` +- 切角推荐 `clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%)` +- 项间距 `--spacing-2` (8px) + +#### 8.2.4 系统标题（XXXX系统） + +- 字号 `20px Bold`，颜色 `#FFFFFF` +- 字体 `DOUYUFont` 或 Noto Sans Medium +- 左右装饰用主色蓝渐变线条：`linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，线宽 `1px` +- 居中相对 Header 几何中心，左右最少留 `--spacing-6` (32px) 间距给一级菜单 + +#### 8.2.5 右侧工具区（时间 / 图标 / 返回首页） + +| 元素 | 字号/尺寸 | 颜色 | +|------|----------|------| +| 更新时间文字 | `12px Regular` | `#6E88B0` (ZS-004-04) | +| 时间数值（数字） | `12px D-DIN Regular` | `#C5CFE0` (ZS-004-02) | +| 工具图标（刷新/上/家） | `16px` | `#6E88B0`，hover → `#4096FF` | +| 返回首页文字 | `14px Regular` | `#C5CFE0`，hover → `#4096FF` | + +- 元素间距 `--spacing-3` (12px) +- 整体右 padding `--spacing-4` (16px) + +### 8.3 侧边栏（三级菜单） + +#### 8.3.1 规格 + +| 属性 | 取值 | +|------|------| +| 宽度 | `64px`（仅图标 / 竖排文字） | +| 背景 | `#0C1836` (ZS-004-09) | +| 右边界 | `border-right: 1px solid #1A2F5A` (ZS-004-07) | +| 项高度 | `64px`（与宽度一致，呈正方形） | +| 项内间距 | 上下 `--spacing-3` (12px) | +| 字号 | `14px Medium`，竖排（`writing-mode: vertical-rl`）或正常排两行 | + +#### 8.3.2 状态配色 + +| 状态 | 背景 | 文字 | 左侧指示条 | +|------|------|------|-----------| +| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | 无 | +| Hover | `rgba(22,119,255,0.08)` | `#C5CFE0` (ZS-004-02) | 无 | +| 激活 | `#1A2F5A` (ZS-004-07) | `#FFFFFF` | 左侧 `2px solid #1677FF` (ZS-002-06) | + +### 8.4 下拉菜单面板（四级 / 五级 / 六级） + +#### 8.4.1 面板规格 + +| 属性 | 取值 | +|------|------| +| 背景 | `#122347` (ZS-004-08) | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） | +| 圆角 | `4px` | +| 内边距 | 上下 `--spacing-2` (8px) | +| 最小宽度 | `150px` | + +#### 8.4.2 菜单项规格 + +| 层级 | 缩进（padding-left） | 字号 | 展开图标 | 前缀 | +|------|---------------------|------|----------|------| +| 四级菜单 | `--spacing-3` (12px) | `14px Medium` | `▾ / ▸` | — | +| 五级菜单 | `--spacing-5` (24px) | `14px Regular` | `▾ / ▸` | — | +| 六级菜单 | `--spacing-6` (32px) | `14px Regular` | — | `-` 短横线 | + +- 行高 `32px` +- 项之间无分割线（靠缩进与图标区分层级） + +#### 8.4.3 菜单项配色 + +| 状态 | 背景 | 文字 | 展开图标 | +|------|------|------|----------| +| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | +| Hover | `rgba(22,119,255,0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` | +| 激活（当前选中） | `rgba(22,119,255,0.16)` | `#4096FF` (ZS-002-05) | `#1677FF` (ZS-002-06) | +| 父级（含激活子项） | `transparent` | `#FFFFFF` | `#1677FF` | +| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` | + +### 8.5 交互与动画 + +| 行为 | 动效 | +|------|------| +| 下拉面板展开 | `transform-origin: top; transform: scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` | +| 展开图标旋转 | `transform: rotate(0 → 90deg)`，`200ms ease-out` | +| Hover 背景过渡 | `background-color 120ms ease-out` | +| 激活底部高亮线（二级菜单） | `width 0% → 100%`，`240ms ease-out` | + +### 8.6 间距引用 + +| 位置 | 取值 | +|------|------| +| Header 内部元素间距 | `--spacing-2 / --spacing-3` | +| Header 与下方内容间距 | `0`（贴合，靠底边线与阴影区分） | +| 侧边栏与下拉面板间距 | `--spacing-1` (4px) | +| 下拉面板与触发元素间距 | `--spacing-1` (4px) | +| 同级菜单项之间 | `0`（紧贴排列，靠 hover/active 背景区分） | + +--- + +## 9. 锚点与页签 + +> 对应"4.2 导航组件-锚点"。三类组件共用主色蓝指示当前位置：**页签 / 锚点 / 回到顶部**。 +> +> 视觉参考：标签横向 / 标签纵向 / 锚点的三联图见设计稿「选项卡.png」——三种形态在本节均已规范化（§9.1 = 标签横纵向、§9.2 = 锚点）。 + +### 9.1 页签（Tabs） + +#### 9.1.1 横向页签（下划线-横向） + +| 状态 | 文字 | 下划线 | +|------|------|--------| +| 默认 | `#C5CFE0` (ZS-004-02) | 无 | +| Hover | `#4096FF` (ZS-002-05) | 无 | +| 激活 | `#4096FF` (ZS-002-05) | `2px solid #4096FF`，宽度与文字齐 | +| 失效 | `#4A6491` (ZS-004-05) | 无 | + +- 字号 `14px Medium` +- 项间距 `--spacing-5` (24px) +- 下划线与文字底部间距 `--spacing-2` (8px) +- 容器底边可叠一条 `1px solid #1A2F5A` (ZS-004-07) 作为基线，激活态的高亮线压在上面 + +#### 9.1.2 纵向页签（下划线-纵向） + +| 状态 | 文字 | 右侧指示线 | +|------|------|-----------| +| 默认 | `#C5CFE0` (ZS-004-02) | 无 | +| Hover | `#4096FF` (ZS-002-05) | 无 | +| 激活 | `#4096FF` (ZS-002-05) | 右侧 `2px solid #4096FF`，高度与文字齐 | +| 失效 | `#4A6491` (ZS-004-05) | 无 | + +- 字号 `14px Medium`，项高度 `32px` +- 项间距 `--spacing-2` (8px) +- 容器右边可叠一条 `1px solid #1A2F5A` 基线，激活指示线压在上面 + +### 9.2 锚点（Anchor） + +用于长内容页（如详情页、文档页）的章节快速跳转。 + +#### 9.2.1 结构 + +``` +│ 一级 +│ 一级 (active) +│ 二级 +│ 二级 +│ 一级 +│ 一级 +``` + +#### 9.2.2 规格 + +| 属性 | 取值 | +|------|------| +| 容器背景 | `#122347` (ZS-004-08) 或 `transparent`（嵌入页面侧栏时） | +| 左侧基线 | `1px solid #1A2F5A` (ZS-004-07) 通栏 | +| 项高度 | `32px` | +| 一级项左 padding | `--spacing-3` (12px) | +| 二级项左 padding | `--spacing-5` (24px) | +| 项间距 | `0`（贴合排列） | +| 字号 | `14px Regular` | + +#### 9.2.3 状态配色 + +| 状态 | 一级文字 | 二级文字 | 左侧指示条 | +|------|----------|----------|-----------| +| 默认 | `#C5CFE0` (ZS-004-02) | `#6E88B0` (ZS-004-04) | 无 | +| Hover | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) | 无 | +| 激活 | `#4096FF` (ZS-002-05) | — | 左侧 `2px solid #4096FF`，覆盖容器基线 | +| 父级（含激活子项） | `#FFFFFF` | — | — | + +- 激活态指示条与基线重合，宽 `2px`，色压主色蓝 `#4096FF` +- 二级项**不单独支持激活态**：当二级被点中时，其父级一级显示激活态，左侧指示条按父级位置渲染 + +#### 9.2.4 滚动同步 + +| 行为 | 规则 | +|------|------| +| 页面滚动 | 监听锚点对应区块进入视口的相对位置，自动切换激活态 | +| 点击锚点 | `behavior: smooth` 滚动到目标，激活指示条 `top` 过渡 `200ms ease-out` | +| 边界处理 | 滚动到页面顶部 → 第一个锚点激活；到页尾 → 最后一个锚点激活 | + +### 9.3 回到顶部（BackToTop） + +固定在视口右下角的悬浮按钮，向上滚动到页面顶部。 + +#### 9.3.1 规格 + +| 属性 | 取值 | +|------|------| +| 形状 | 圆形 `40px × 40px`（`border-radius: 50%`） | +| 图标 | `↑` 上箭头，`16px`，`#FFFFFF` | +| 距视口右边 | `--spacing-5` (24px) | +| 距视口下边 | `--spacing-6` (32px) | +| 出现时机 | 页面 `scrollTop > 200px` 时淡入；回到顶部后淡出 | +| 淡入/淡出 | `opacity 0 → 1` / `1 → 0`，`200ms ease-out` | + +#### 9.3.2 状态配色 + +| 状态 | 背景 | 阴影 | 图标 | +|------|------|------|------| +| 正常（默认） | `#1677FF` (ZS-002-06) | `0 2px 8px rgba(22,119,255,0.12)` (§3.1.4 一级阴影) | `#FFFFFF` | +| 悬停（Hover） | `#0958D9` (ZS-002-07) | `0 4px 16px rgba(22,119,255,0.24)` (§3.1.4 二级阴影) | `#FFFFFF` | +| 点按（Active） | `#003EB3` (ZS-002-08) | 阴影消失，按下感 | `#FFFFFF` | +| 失效 / 不显示 | — | — | 整体 `opacity: 0`，`pointer-events: none` | + +#### 9.3.3 悬停 Tooltip + +Hover 状态下方显示 `回到顶部` 提示气泡： + +| 属性 | 取值 | +|------|------| +| 文字 | `回到顶部`，`12px Regular` | +| 文字颜色 | `#C5CFE0` (ZS-004-02) | +| 背景 | `#1677FF` (ZS-002-06) | +| 圆角 | `2px` | +| 内边距 | 上下 `4px`，左右 `--spacing-2` (8px) | +| 与按钮间距 | `--spacing-2` (8px) | +| 出现时机 | Hover 进入 `300ms` 后显示，离开立即消失 | + +### 9.4 三者的差异与选用 + +| 组件 | 主要用途 | 视觉特征 | +|------|----------|---------| +| 页签 | 同层级内容切换（多 Tab 互斥） | 文字 + 下划线（横/纵） | +| 锚点 | 长页面内章节跳转 | 文字 + 左侧指示条 + 层级缩进 | +| 回到顶部 | 长页面快速返回起点 | 圆形悬浮按钮 + 上箭头 | + +--- + +## 10. 步骤条 + +> 对应「4.7 导航组件-步骤条」。用于多步流程的进度指引，按布局方向分**横向**与**纵向**两类，按使用场景分**弹窗步骤条**、**页面步骤条**、**纵向步骤条**三种。所有颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。 + +### 10.1 步骤节点（公共） + +每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换三种形态： + +| 状态 | 圆形外观 | 圆内符号 | 来源 | +|------|----------|----------|------| +| 已完成（Completed） | 描边圆，`2px solid #1677FF`，背景 `transparent` | `✓`（对勾，`#1677FF`） | ZS-002-06 | +| 当前（Current / Active） | 实心圆，背景 `#1677FF` | 步骤数字，`#FFFFFF` | ZS-002-06 / 白 | +| 未开始（Upcoming） | 描边圆，`1px solid #4A6491`，背景 `transparent` | 步骤数字，`#6E88B0` | ZS-004-05 / ZS-004-04 | +| 失效（Disabled） | 描边圆，`1px solid #2D4473`，背景 `transparent` | 步骤数字，`#4A6491` | ZS-004-06 / ZS-004-05 | + +**指示圆规格**： + +| 属性 | 取值 | +|------|------| +| 直径 | `24px` | +| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） | +| 对勾图标 | `12px`，居中 | +| 字体水平居中 | 数字 / 对勾 在圆几何中心 | + +**标题与描述文字**： + +| 元素 | 状态 | 字号 / 颜色 | 来源 | +|------|------|-------------|------| +| 标题 | 已完成 / 当前 | `14px Medium`，`#FFFFFF` | — | +| 标题 | 未开始 | `14px Medium`，`#6E88B0` | ZS-004-04 | +| 标题 | 失效 | `14px Medium`，`#4A6491` | ZS-004-05 | +| 描述 | 已完成 / 当前 | `12px Regular`，`#C5CFE0` | ZS-004-02 | +| 描述 | 未开始 / 失效 | `12px Regular`，`#6E88B0` → `#4A6491` | ZS-004-04 → ZS-004-05 | + +**连接线（步骤之间）**： + +| 类型 | 色值 | 来源 | 样式 | +|------|------|------|------| +| 已完成段（前一节点已完成） | `#1677FF` | ZS-002-06 | `1px dashed`（弹窗）/ `1px solid`（页面） | +| 未完成段 | `#4A6491` | ZS-004-05 | `1px dashed` | + +> 连接线在指示圆**两侧水平居中**（横向）或**正下方垂直**（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙，避免线穿圆。 + +### 10.2 弹窗步骤条（横向 · 描边圆为主） + +用于 Modal / Drawer 内引导多步操作的紧凑步骤条。指示圆**完成态用描边 + 对勾**而非实心，避免在弹窗背景上过于抢眼。 + +#### 10.2.1 布局 + +``` +( ✓ ) ┄┄┄┄┄ (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 ) + 标题 标题 标题 标题 标题 +(描述) (描述) (描述) (描述) (描述) +``` + +#### 10.2.2 规格 + +| 属性 | 取值 | +|------|------| +| 容器水平 padding | `--spacing-5` (24px) | +| 指示圆 → 标题间距 | `--spacing-2` (8px) | +| 标题 → 描述间距 | `--spacing-1` (4px) | +| 节点之间水平间距 | 节点间距自适应等分；连接线占用中间空间 | +| 连接线 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` | +| 文字对齐 | 标题、描述居中对齐于指示圆下方 | + +#### 10.2.3 两种变体 + +| 变体 | 适用 | +|------|------| +| **仅标题** | 步骤含义已经清晰（如「填写信息 / 确认 / 完成」），节省垂直空间 | +| **标题 + 描述** | 步骤名抽象需要一行小字补充时使用 | + +### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题） + +用于页面级流程（如「新建集群」类向导）。和弹窗步骤条相比，**已完成态指示圆改为实心填充 + 白色对勾**，视觉权重更高；首步标题可显示具体名称（如「新建集群」）而非「标题」占位。 + +#### 10.3.1 布局 + +``` +(✓) ────── (●2) ┄┄┄┄┄ ( 3 ) ┄┄┄┄┄ ( 4 ) ┄┄┄┄┄ ( 5 ) +新建集群 标题 标题 标题 标题 +(描述文本) (描述文本) (描述文本) (描述文本) (描述文本) +``` + +#### 10.3.2 与 §10.2 弹窗步骤条的差异 + +| 维度 | 弹窗步骤条 | 页面步骤条 | +|------|-----------|-----------| +| 完成态圆形 | 描边圆 + 蓝色对勾 | 实心蓝圆 + 白色对勾 | +| 完成段连接线样式 | `1px dashed #1677FF` | `1px solid #1677FF` | +| 标题文字号 | `14px Medium` | `14px Medium`（同） | +| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） | + +#### 10.3.3 完成态指示圆补充 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 已完成圆背景 | `#1677FF` | ZS-002-06 | +| 已完成圆内对勾 | `#FFFFFF` | — | +| 已完成圆边框 | 无（实心） | — | + +### 10.4 纵向步骤条 + +用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。 + +#### 10.4.1 布局 + +``` +仅标题: 标题 + 描述: + +(✓) 新建集群 (✓) 新建集群 + ┊ 描述文本描述 +(●2) 标题 ┊ + ┊ (●2) 标题 +( 3 ) 标题 描述文本描述 + ┊ ┊ +( 4 ) 标题 ( 3 ) 标题 + 描述文本描述 + ┊ + ( 4 ) 标题 + 描述文本描述 +``` + +#### 10.4.2 规格 + +| 属性 | 取值 | +|------|------| +| 指示圆 → 标题水平间距 | `--spacing-2` (8px) | +| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 | +| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 | +| 标题 → 描述间距 | `--spacing-1` (4px) | +| 连接线位置 | 上下两个指示圆**正下方垂直**，居中于圆心 | +| 连接线样式 | `1px dashed`，已完成段 `#1677FF`，未完成段 `#4A6491` | +| 文字左对齐 | 标题与描述左对齐，与指示圆右侧对齐基线 | + +#### 10.4.3 与横向步骤条共用规则 + +- 指示圆三态规格沿用 §10.1 +- 已完成态默认用**描边 + 对勾**（与 §10.2 弹窗一致）；若纵向步骤条用于页面级主流程，可切换为 §10.3 的实心圆变体 + +### 10.5 交互与动画 + +| 行为 | 动效 | +|------|------| +| 步骤切换（next） | 当前圆 `background: transparent → #1677FF`，`200ms ease-out`；同时上一步圆 `border-color: #4A6491 → #1677FF`，再用 `200ms` 切换为对勾图标淡入 | +| 步骤切换（prev / 回退） | 反向，未完成态恢复 `#4A6491` 边框，圆内数字淡入 | +| 连接线高亮 | 完成段 `border-color: #4A6491 → #1677FF`，`240ms ease-out` | +| Hover 节点（可点击） | 圆边框色暂时变 `#4096FF` (ZS-002-05)，标题文字 `#4096FF`，`120ms ease-out`；不可点击节点（未来步骤）无 hover | +| 点击节点 | 节点必须**已完成**才能点（回看），否则视为禁用；点击合法节点触发 `step:change` 事件 | + +### 10.6 状态机与可达性 + +| 当前步 = N | 节点 i 的状态 | +|-----------|----------------| +| `i < N` | Completed（已完成，可点回看） | +| `i === N` | Current（当前，不可点） | +| `i > N` | Upcoming（未开始，不可点） | +| `i.disabled` | Disabled（被显式禁用，例如条件未满足） | + +**键盘导航**： +- `Tab` 顺序在「已完成」节点之间流转，跳过 `Current / Upcoming / Disabled` +- 焦点节点圆外加 `2px solid #4096FF` 焦点环（`outline`，`offset 2px`） + +**屏幕阅读器**： +- 指示圆 `role="img"`，`aria-label="已完成第 N 步"` / `"当前第 N 步"` / `"未开始第 N 步"` +- 容器 `role="list"`，节点 `role="listitem"` +- 当前节点额外 `aria-current="step"` + +### 10.7 CSS Token 参考 + +```css +:root { + /* 步骤条节点 */ + --step-circle-size: 24px; + --step-circle-current-bg: #1677FF; /* ZS-002-06 */ + --step-circle-current-text: #FFFFFF; + --step-circle-done-border: #1677FF; /* ZS-002-06 */ + --step-circle-done-icon: #1677FF; /* 弹窗变体 */ + --step-circle-done-bg-page: #1677FF; /* 页面变体:实心 */ + --step-circle-done-icon-page: #FFFFFF; + --step-circle-upcoming-border: #4A6491; /* ZS-004-05 */ + --step-circle-upcoming-text: #6E88B0; /* ZS-004-04 */ + --step-circle-disabled-border: #2D4473; /* ZS-004-06 */ + --step-circle-disabled-text: #4A6491; /* ZS-004-05 */ + + /* 连接线 */ + --step-line-done: #1677FF; /* 已完成段 */ + --step-line-upcoming: #4A6491; /* 未完成段:ZS-004-05 */ + + /* 文字 */ + --step-title-active: #FFFFFF; + --step-title-inactive: #6E88B0; /* ZS-004-04 */ + --step-desc-active: #C5CFE0; /* ZS-004-02 */ + --step-desc-inactive: #6E88B0; /* ZS-004-04 */ +} +``` + +### 10.8 三种步骤条的选用决策 + +| 场景 | 选择 | +|------|------| +| Modal / Drawer 内多步表单 | §10.2 弹窗步骤条（描边圆，紧凑） | +| 页面级向导（独占大区域） | §10.3 页面步骤条（实心圆，视觉重） | +| 侧栏 / 详情页纵向流程 | §10.4 纵向步骤条 | +| 步骤数 ≤ 3 且无描述 | 优先「仅标题」变体 | +| 步骤名抽象需补充说明 | 用「标题 + 描述」变体 | +| 步骤数 > 7 | 不推荐用步骤条，改用「锚点」（§9.2）或分页 | + +--- + +## 11. 面包屑 + +> 对应「4.3 导航组件-面包屑」。用于显示当前位置在整个站点层级中的路径，配合「← 返回」按钮支持逐级回溯。颜色取自 ZS-002 主色蓝与 ZS-004 深蓝系。 + +### 11.1 标准形态 + +容器顶部带一个独立的容器 / 边框包裹： + +``` +🏠 | 概况 / 总概况 +``` + +带「返回」按钮的层级形态（一级到四级）： + +``` +一级: ← 返回 │ 现在位置 +二级: ← 返回 │ 上一级位置 / 现在位置 +三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置 +四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置 +``` + +### 11.2 规格 + +| 属性 | 取值 | +|------|------| +| 容器高度 | `40px` | +| 容器背景 | `#0C1836` (ZS-004-09) | +| 容器底边 | `1px solid #1A2F5A` (ZS-004-07) | +| 容器水平 padding | `--spacing-4` (16px) | +| 字号 | `14px Regular` | +| 元素间距（图标 / 文字 / 分隔符之间） | `--spacing-2` (8px) | +| 「返回」与首段路径之间分隔符 `│` | `1px solid #4A6491`，高度 `14px` | + +### 11.3 配色 + +| 角色 | 色值 | 来源 | 备注 | +|------|------|------|------| +| Home 图标 🏠 | `#4096FF` | ZS-002-05 | 默认主色，hover → `#1677FF` (ZS-002-06) | +| 「← 返回」图标 + 文字 | `#4096FF` | ZS-002-05 | 链接样式，hover 显示下划线 | +| 历史路径文字（可点击） | `#4096FF` | ZS-002-05 | 同链接配色 | +| 当前位置文字（最后一段） | `#FFFFFF` | — | 加粗 `14px Medium`，不可点击 | +| 分隔符 `/` | `#4A6491` | ZS-004-05 | 静态、不可点 | +| 分隔符 `│`（返回按钮与路径之间） | `#4A6491` | ZS-004-05 | 同上 | +| Hover 路径项 | `#1677FF` | ZS-002-06 | 文字色 + 下划线 | +| 失效路径项（无对应页） | `#4A6491` | ZS-004-05 | `cursor: not-allowed` | + +### 11.4 交互规则 + +- **点击「← 返回」**：逐步向上返回一级（等同浏览器 back） +- **点击文字路径**：快速跳回到对应任意上级页面 +- **当前位置**（最后一段）：不响应点击，仅作展示 +- **层级建议**：尽可能不超过 **4 级**；超过 4 级会让面包屑过长，应改用侧栏 / 锚点辅助 + +### 11.5 与导航的关系 + +面包屑**不替代**主导航（§8）： + +- 主导航 = 「我能去哪些地方」（站点结构） +- 面包屑 = 「我当前在哪里」（路径回溯） + +两者并存时，面包屑紧贴页面主内容区顶部，位于主导航下方、页头（§12）上方。 + +### 11.6 CSS 参考 + +```css +.breadcrumb { + display: flex; + align-items: center; + height: 40px; + padding: 0 var(--spacing-4); + background: #0C1836; + border-bottom: 1px solid #1A2F5A; + font-size: 14px; + gap: var(--spacing-2); +} +.breadcrumb-back { color: #4096FF; cursor: pointer; } +.breadcrumb-back:hover { color: #1677FF; text-decoration: underline; } +.breadcrumb-sep-bar { width: 1px; height: 14px; background: #4A6491; } +.breadcrumb-sep { color: #4A6491; } +.breadcrumb-link { color: #4096FF; cursor: pointer; } +.breadcrumb-link:hover { color: #1677FF; text-decoration: underline; } +.breadcrumb-current { color: #FFFFFF; font-weight: 500; } +``` + +--- + +## 12. 页头 + +> 对应「4.6 导航组件-分页」上半段示意。用于页面主内容区顶部、面包屑下方，承载页面标题与可选的说明 / Tabs。共有 4 种变体。 + +### 12.1 通用规格 + +| 属性 | 取值 | +|------|------| +| 容器高度 | `56px`（仅标题）/ `64px`（含 Tabs） | +| 背景 | `#0C1836` (ZS-004-09) | +| 底边 | `1px solid #1A2F5A` (ZS-004-07) | +| 水平 padding | `--spacing-5` (24px) | +| 文字基线 | 垂直居中 | + +### 12.2 四种变体 + +#### 12.2.1 基础页头 + +只有标题： + +``` +页头标题 +``` + +| 角色 | 色值 / 字号 | 来源 | +|------|-------------|------| +| 标题 | `18px Bold`，`#FFFFFF` | — | + +#### 12.2.2 页头 + 说明 + +标题后跟一段灰色说明文字： + +``` +页头标题 （这是一句简要说明） +``` + +| 角色 | 色值 / 字号 | 来源 | +|------|-------------|------| +| 标题 | `18px Bold`，`#FFFFFF` | — | +| 说明文字 | `14px Regular`，`#6E88B0` | ZS-004-04 | +| 标题 → 说明间距 | `--spacing-3` (12px) | — | + +说明用半角圆括号包裹，颜色与括号一致（不要让括号比文字更醒目）。 + +#### 12.2.3 页头 + 说明 icon + +标题后跟一个可悬停查看说明的图标： + +``` +页头标题 ⓘ +``` + +| 角色 | 色值 / 字号 | 来源 | +|------|-------------|------| +| 标题 | `18px Bold`，`#FFFFFF` | — | +| 说明 icon `ⓘ` 或 `?` | `16px`，`#6E88B0` | ZS-004-04 | +| Icon hover | `#4096FF` | ZS-002-05 | +| 标题 → 图标间距 | `--spacing-2` (8px) | — | + +Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文字。 + +#### 12.2.4 分 Tabs 页头 + +标题位置直接放横向页签（沿用 §9.1.1 横向页签配色），点击切换右侧主内容区： + +``` +标题 标题 标题 +───── +``` + +| 复用规则 | 说明 | +|----------|------| +| Tab 配色 | 完全沿用 §9.1.1 横向页签 | +| Tab 字号 | `16px Medium`（页头位置比一般 tab 略大） | +| Tab 间距 | `--spacing-5` (24px) | +| 激活态下划线 | `2px solid #4096FF`，宽与文字齐 | + +### 12.3 与右侧操作区的组合 + +页头右侧常承载主操作按钮（「+ 新建」、「导出」等）。规则： + +- 按钮组靠右对齐，右 padding 与左 padding 一致 (`--spacing-5`) +- 多按钮排列顺序参照 §5.3.4（默认按钮在左、主按钮在右），按钮间距 `--spacing-2` +- Tabs 页头中右侧操作区与 Tabs 同高居中 + +--- + +## 13. 分页 + +> 对应「4.6 导航组件-分页」下半段。三种形态——**正常分页 / 精简分页 / 导航式分页**——按页面信息量与可用空间选用。 + +### 13.1 正常分页 + +承载大列表，提供页码、跳转、每页条数选择： + +``` +共 240 项 < ① 2 3 4 5 … 24 > 每页 [10▾] 条 前往 [ ] 页 +``` + +#### 13.1.1 元素配色与规格 + +| 元素 | 字号 / 色值 | 来源 / 说明 | +|------|-------------|-------------| +| 「共 N 项」总数文字 | `14px Regular`，`#6E88B0` | ZS-004-04 | +| 页码按钮（默认） | `14px Regular`，`#C5CFE0`，背景 `transparent` | ZS-004-02 | +| 页码按钮（hover） | `#4096FF`，背景 `rgba(22,119,255,0.08)` | ZS-002-05 | +| 页码按钮（激活/当前页） | `#FFFFFF`，背景 `#1677FF`（实心圆） | ZS-002-06 | +| 页码按钮（失效） | `#4A6491`，背景 `transparent` | ZS-004-05 | +| 左右翻页箭头 `<` `>` | `14px`，`#6E88B0`，hover → `#4096FF` | ZS-004-04 → ZS-002-05 | +| 翻页箭头失效（首/末页） | `#4A6491` | ZS-004-05 | +| 省略号 `…` | `#6E88B0` | ZS-004-04，静态展示，不可点 | +| 每页条数下拉 `[10▾]` | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `60px` | +| 「前往 N 页」输入框 | 沿用 §14.1 输入框规格 | 高度 `28px`，宽 `48px` | + +#### 13.1.2 页码按钮规格 + +| 属性 | 取值 | +|------|------| +| 形状 | 圆形 `28px × 28px`（`border-radius: 50%`） | +| 默认背景 | `transparent` | +| 当前页背景 | `#1677FF` (ZS-002-06)，实心圆，白色数字 | +| 字号 | `14px Regular`（数字 D-DIN 或 Noto Sans） | +| 项间距 | `--spacing-1` (4px) | + +#### 13.1.3 元素间距 + +| 区段 | 间距 | +|------|------| +| 「共 N 项」→ 翻页区 | `--spacing-4` (16px) | +| 翻页区内（箭头 / 页码） | `--spacing-1` (4px) | +| 翻页区 → 每页下拉 | `--spacing-5` (24px) | +| 每页下拉 → 前往输入 | `--spacing-4` (16px) | + +### 13.2 精简分页 + +承载弹窗 / 表格紧凑场景，只暴露「当前页 / 总页数」与左右翻页： + +``` +共 1 项 < [ 1 ] / 10 > +``` + +#### 13.2.1 规格 + +| 元素 | 配色 / 备注 | +|------|------------| +| 「共 N 项」 | 同 §13.1.1 | +| `<` `>` 翻页箭头 | 同 §13.1.1 | +| `[ 1 ]` 当前页输入框 | 沿用 §14.1 输入框规格，高 `28px`，宽 `40px`，居中文字 | +| `/ N` 总页数 | `14px Regular`，`#6E88B0` (ZS-004-04) | +| 元素间距 | `--spacing-2` (8px) | + +#### 13.2.2 与正常分页的差异 + +| 维度 | 正常分页 | 精简分页 | +|------|----------|----------| +| 页码 | 点击式数字列表 | 输入框 + 总页数文字 | +| 跳转方式 | 点击数字 / 前往输入 | 直接修改输入框 | +| 每页条数 | 暴露下拉 | 不暴露（默认值由调用方决定） | +| 适用 | 列表 / 表格主内容区 | 弹窗、抽屉、卡片内嵌列表 | + +### 13.3 导航式分页 + +承载长文 / 详情页的「上一篇 / 下一篇」式翻页，只有方向，不暴露页码： + +``` +下一页 » +« 上一页 +``` + +#### 13.3.1 规格 + +| 元素 | 配色 / 备注 | +|------|------------| +| 「下一页」/「上一页」文字 + 箭头 | `14px Regular`，`#4096FF` (ZS-002-05) | +| Hover | `#1677FF` (ZS-002-06) + 下划线 | +| 失效（首/末篇） | `#4A6491` (ZS-004-05)，`cursor: not-allowed` | +| 箭头位置 | `下一页 »`（箭头在后）/ `« 上一页`（箭头在前） | +| 文字 → 箭头间距 | `--spacing-2` (8px) | +| 两个按钮纵向排列时项间距 | `--spacing-3` (12px) | + +### 13.4 三种分页的选用决策 + +| 场景 | 选择 | +|------|------| +| 后台列表 / 表格 | §13.1 正常分页 | +| Modal / Drawer 内嵌列表 | §13.2 精简分页 | +| 详情页前后翻 | §13.3 导航式分页 | +| 列表少于 1 页（项数 ≤ pageSize） | **不显示**分页 | +| 项数明确但页码可能很多（>50 页） | 用正常分页 + 隐藏中间页码（`...` 省略） | + +--- + diff --git a/frontend-web/docs/ui规范-深蓝/02-表单.md b/frontend-web/docs/ui规范-深蓝/02-表单.md new file mode 100644 index 00000000..8b6f93fd --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/02-表单.md @@ -0,0 +1,1619 @@ +# 深蓝色 UI 规范 · 02 表单（§14–§21） + +> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。 + +**本篇目录**：`14` 输入框 · `15` 选择器 · `16` 单选与多选 · `17` 日期选择器 · `18` 穿梭框 · `19` 树选择 · `20` 上传 · `21` 弹出式窗口 + +--- + +## 14. 输入框（搜索框） + +> 对应设计稿「输入框.png」。按使用场景分三类：**基本搜索框 / 后台系统搜索框 / 页面头部搜索框**。配色全部从 ZS-002 主色蓝与 ZS-004 深蓝系取。 + +### 14.1 公共规格 + +所有搜索框共用同一套尺寸 / 边框规格： + +| 属性 | 默认（正常） | 小号 | +|------|--------------|------| +| 高度 | `32px` | `28px` | +| 水平 padding | `--spacing-3` (12px) | `--spacing-2` (8px) | +| 圆角 | `2px`（§4.1） | `2px` | +| 字号 | `14px Regular` | `14px Regular` | +| 文字色 | `#C5CFE0` (ZS-004-02) | 同 | +| 占位符色 | `#6E88B0` (ZS-004-04) | 同 | +| 背景 | `#0C1836` (ZS-004-09) | 同 | + +#### 14.1.1 边框状态 + +| 状态 | 边框 | 来源 | +|------|------|------| +| 默认 | `1px solid #1A2F5A` | ZS-004-07 | +| Hover | `1px solid #4096FF` | ZS-002-05 | +| Focus | `1px solid #1677FF` + 外发光 `0 0 0 2px rgba(22,119,255,0.16)` | ZS-002-06 | +| 失效 | `1px solid #2D4473`，背景 `rgba(22,119,255,0.04)` | ZS-004-06 | +| 错误 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | ZS-001-06 | + +### 14.2 基本搜索框 + +#### 14.2.1 基础搜索框 + +输入框尾部带 🔍 图标，回车或点击图标触发搜索： + +``` +[ 搜索 🔍 ] +``` + +| 角色 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 | +| 图标 hover | `#4096FF` | ZS-002-05 | +| 图标 → 输入边缘间距 | `--spacing-2` (8px) | — | + +#### 14.2.2 分类搜索框（带前缀下拉） + +输入框左侧拼一个分类下拉，常用于「按协议搜 IP」等场景： + +``` +[ http:// ▾ ] [ 搜索 IP 地址 🔍 ] +``` + +| 角色 | 色值 / 规格 | 备注 | +|------|-------------|------| +| 前缀下拉宽度 | `auto`，最小 `72px` | 内容自适应 | +| 前缀下拉与输入框 | 共用同一组边框，**中间无缝**（公用一条 `1px #1A2F5A` 分隔） | 视为一体控件 | +| 前缀下拉箭头 `▾` | `12px`，`#6E88B0` | hover → `#4096FF` | +| 整体 focus 行为 | 焦点落到输入框时，**前缀下拉的边框也同步高亮** | — | + +### 14.3 后台系统常用搜索框 + +输入框 + 紧贴右侧的**实心蓝色搜索按钮**，常用于后台主内容区列表筛选： + +``` +[ 🔍 搜索任务集名称/负责人 ] [ 搜索 ] +``` + +#### 14.3.1 规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 左侧搜索图标 🔍 | `16px`，`#6E88B0` | ZS-004-04 | +| 图标 → 文字间距 | `--spacing-2` (8px) | — | +| 输入框右边框 | **无**（与按钮无缝拼接） | — | +| 按钮 | 沿用 §5.2.1 主按钮，圆角 `2px`，文字 `搜索` | — | +| 按钮高度 | 与输入框一致 `32px` | — | +| 按钮左侧 | 与输入框紧贴，**无间距** | — | + +### 14.4 页面头部搜索框 + +页头位置的搜索控件，支持四种扩展：**单行 / 高级搜索 / 历史记录 / 输入联想**。 + +#### 14.4.1 单行（最简） + +``` +[ 输入的文字 ] [ 搜索 ] +``` + +规格同 §14.3，仅省略左侧 🔍 图标，让输入文字占满。 + +#### 14.4.2 含高级搜索切换 + +右侧叠加一个文字按钮「高级搜索 ▾」，展开后显示模式选项： + +``` +[ 输入的文字 ] [ 搜索 ] 高级搜索 ▾ + ○ 模糊匹配 ● 精准匹配 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 「高级搜索 ▾」文字按钮 | `14px Regular`，`#4096FF`，hover `#1677FF` | ZS-002-05 → ZS-002-06 | +| 「高级搜索」与「搜索」按钮间距 | `--spacing-3` (12px) | — | +| 单选项「模糊匹配 / 精准匹配」 | 沿用通用 Radio 配色：未选 `1px solid #6E88B0`，已选实心 `#1677FF` | — | +| 单选项 → 搜索框纵向间距 | `--spacing-2` (8px) | — | + +#### 14.4.3 含历史记录 + +输入框下方显示最近搜索词列表，点击直接用该词搜索： + +``` +[ 输入的文字 ] [ 搜索 ] + +搜索记录词、搜索记录词、记录词 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 历史记录文字 | `12px Regular`，`#4096FF` | ZS-002-05 | +| 项间分隔符（顿号 `、`） | `#4A6491` | ZS-004-05（与文字色不同，弱化分隔） | +| 历史项 hover | `#1677FF` + 下划线 | ZS-002-06 | +| 历史区与搜索框纵向间距 | `--spacing-2` (8px) | — | + +#### 14.4.4 含输入联想下拉 + +用户输入时，下方弹出联想词面板： + +``` +[ 这是 ] [ 搜索 ] +┌─────────────────────────────────┐ +│ 这是搜索输入联想词 │ +│ 这是搜索输入联想词 │ +│ 这是搜索输入联想词 │ +│ 这是联想词 │ +│ 这是联想词悬浮 ←hovered │ +│ …… │ +└─────────────────────────────────┘ +``` + +##### 面板规格 + +| 属性 | 取值 | +|------|------| +| 背景 | `#122347` (ZS-004-08) | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影变体） | +| 圆角 | `2px`（与输入框一致） | +| 项高度 | `36px` | +| 项水平 padding | `--spacing-3` (12px) | +| 项字号 | `14px Regular`，`#C5CFE0` (ZS-004-02) | +| 面板宽度 | 与输入框等宽（不含右侧按钮） | +| 面板与输入框纵向间距 | `--spacing-1` (4px) | + +##### 项状态 + +| 状态 | 背景 | 文字 | +|------|------|------| +| 默认 | `transparent` | `#C5CFE0` | +| Hover（鼠标 / 键盘焦点） | `rgba(22,119,255,0.16)` 或 `#1A2F5A` (ZS-004-07) | `#FFFFFF` | +| 已点击（点选后回填输入框） | — | — | + +##### 键盘导航 + +- `↑` / `↓` 在联想词之间移动焦点（焦点项视觉等价于 Hover） +- `Enter` 选中焦点项并回填输入框 + 触发搜索 +- `Esc` 关闭面板，焦点回到输入框 + +#### 14.4.5 联想下拉 + 历史记录的关系 + +- **未输入时**：可显示历史记录（§14.4.3 横向展开形态） +- **开始输入时**：历史记录被联想下拉**取代**，不要并存 +- **清空输入框**：回到历史记录显示 + +### 14.5 三种搜索框的选用决策 + +| 场景 | 选择 | +|------|------| +| 表单内 / 卡片内的辅助搜索 | §14.2.1 基础搜索框（图标内嵌） | +| 需要按类型 / 协议过滤的搜索 | §14.2.2 分类搜索框（带前缀下拉） | +| 后台列表 / 表格顶部筛选 | §14.3 后台搜索框（输入 + 实心按钮） | +| 页面头部全局搜索 | §14.4 页面头部搜索框（按需开启高级 / 历史 / 联想） | + +### 14.6 CSS Token 参考 + +```css +:root { + --search-bg: #0C1836; /* ZS-004-09 */ + --search-border: #1A2F5A; /* ZS-004-07 */ + --search-border-hover: #4096FF; /* ZS-002-05 */ + --search-border-focus: #1677FF; /* ZS-002-06 */ + --search-border-error: #F5222D; /* ZS-001-06 */ + --search-text: #C5CFE0; /* ZS-004-02 */ + --search-placeholder: #6E88B0; /* ZS-004-04 */ + --search-icon: #6E88B0; + --search-icon-hover: #4096FF; + + /* 联想下拉 */ + --suggest-bg: #122347; /* ZS-004-08 */ + --suggest-item-hover: rgba(22,119,255,0.16); + --suggest-item-text: #C5CFE0; + --suggest-item-hover-text: #FFFFFF; + + /* 历史记录 */ + --history-text: #4096FF; + --history-text-hover: #1677FF; + --history-sep: #4A6491; +} +``` + +--- + +## 15. 选择器（Select / Multi-Select / Cascader） + +> 对应设计稿「多项选择.png」。覆盖**多项选择**与**多项带搜索**两种主要变体（基础单选选择器同规格，仅触发器不渲染 Tag、面板项不带复选框；级联选择器原则相同，差异在面板分栏横向铺开）。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框完全对齐。 + +### 15.1 公共规格 + +#### 15.1.1 触发器（Trigger） + +触发器即「请选择 ▾」或「已选 Tag … ▾」那一行。尺寸、边框、状态机与 §14.1 输入框完全对齐： + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `32px` | §14.1 | +| 圆角 | `2px` | §4.1 | +| 水平 padding | `--spacing-3` (12px) | §7.1 | +| 背景 | `#0C1836` (ZS-004-09) | — | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 占位文字 "请选择" | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 右侧箭头 `▾` | `12px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | + +边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。 + +#### 15.1.2 下拉面板（Panel） + +面板沿用 §14.4.4 联想下拉的容器规格，仅项内容不同： + +| 属性 | 取值 | +|------|------| +| 背景 | `#122347` (ZS-004-08) | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | +| 圆角 | `2px` | +| 项高度 | `36px` | +| 项水平 padding | `--spacing-3` (12px) | +| 项字号 | `14px Regular`，`#C5CFE0` (ZS-004-02) | +| 面板宽度 | 与触发器等宽（搜索框、底部按钮均内嵌等宽） | +| 面板与触发器纵向间距 | `--spacing-1` (4px) | + +#### 15.1.3 项状态 + +| 状态 | 背景 | 文字 | +|------|------|------| +| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | +| Hover / 键盘焦点 | `rgba(22,119,255,0.16)` 或 `#1A2F5A` | `#FFFFFF` | +| 已选中 | `transparent`（依赖左侧复选框示态，不改行底色） | `#FFFFFF` | +| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | + +点击行的任意位置等价于点击复选框（命中区 = 整行）。 + +--- + +### 15.2 多项选择 + +> 触发器内渲染**已选 Tag 列表**而不是单行文字；面板项左侧带**复选框**，多选不关闭面板。 + +``` +┌─────────────────────────────────────┐ +│ n1 × n2 × +1 × ▾ │ ← 触发器（已选 Tag） +└─────────────────────────────────────┘ +┌─────────────────────────────────────┐ ← 下拉面板 +│ ☑ n1 │ +│ ☐ n2 │ +│ ☐ n3 │ +│ ☐ n4 │ +│ ☐ n5 │ +├─────────────────────────────────────┤ +│ [+ 添加项] │ ← 可选：底部「添加」按钮（§15.2.4） +└─────────────────────────────────────┘ +``` + +#### 15.2.1 已选 Tag + +触发器内每个已选项渲染为一颗 Tag。**实心主色蓝底 + 白字**，右侧带关闭按钮 `×`。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 背景 | `#1677FF` (ZS-002-06) | — | +| 文字 | `12px Regular`，`#FFFFFF` | — | +| 圆角 | `2px` | — | +| 内边距 | `2px 6px` | — | +| Tag 间距 | `--spacing-1` (4px) | §7.1 | +| 关闭按钮 `×` | `12px`，`rgba(255,255,255,0.72)`，hover `#FFFFFF` | — | +| 折叠展示 `+N ×` | 当选中超过宽度可容纳时，把剩余 N 项收成一颗 `+N ×` Tag。Hover 显示 Tooltip 列出剩余项名；点击 `×` 清空溢出选项 | — | + +#### 15.2.2 复选项 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 复选框尺寸 | `14px × 14px` | — | +| 复选框圆角 | `2px` | — | +| 未选边框 | `1px solid #6E88B0` (ZS-004-04) | — | +| 未选背景 | `transparent` | — | +| 已选填充 | `#1677FF` (ZS-002-06) | — | +| 已选勾 ✓ | `#FFFFFF`，描边 `2px` | — | +| 半选填充 | `#1677FF` | — | +| 半选指示 | 中央横线 `width 8px / height 2px / #FFFFFF` | — | +| Hover 边框 | `#4096FF` (ZS-002-05) | — | +| 禁用边框 | `#4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | +| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 | + +#### 15.2.3 全选模式（顶部「全部」节点） + +面板首行可选地渲染一个「全部」聚合节点，作用类似一次性勾 / 取消所有项： + +``` +┌─────────────────────────────────────┐ +│ ▢ 全部 │ ← 半选 / 未选 / 全选三态 +│ ☑ n1 │ +│ ☐ n2 │ +└─────────────────────────────────────┘ +``` + +| 子状态 | 复选框外观 | 触发动作 | +|--------|-----------|----------| +| 一个都没选 | 空心，边框 `#6E88B0` | 点击 → 勾上**全部**子项 | +| 部分选中 | 实心 `#1677FF` + 中央 `2px` 白色横线（半选） | 点击 → 勾上**全部**剩余未选 | +| 全部选中 | 实心 `#1677FF` + 白色勾 ✓ | 点击 → 清空全部 | + +文字 "全部" 与下方项同色 `#C5CFE0`，不加粗。 + +#### 15.2.4 底部「+ 添加项」按钮 + +面板底部可选地嵌入一颗虚线主色按钮，常用于「在已知池子里允许用户**就地新增**一项」（如标签、自定义分类）： + +``` +┌─────────────────────────────────────┐ +│ [+ 正常] │ +└─────────────────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 高度 | `32px`（与复选项行齐） | — | +| 边框 | `1px dashed #1677FF` (ZS-002-06) | — | +| 背景 | `transparent` | — | +| 文字 | `14px Regular`，`#4096FF` (ZS-002-05) | — | +| 前缀图标 `+` | `12px`，与文字同色 | — | +| Hover | 背景 `rgba(22,119,255,0.16)`，文字 `#1677FF` | ZS-002-05 → ZS-002-06 | +| Active | 背景 `rgba(22,119,255,0.24)`，文字 `#FFFFFF` | — | +| 与最后一条复选项纵向分隔 | 上方分割线 `1px solid #1A2F5A` + `--spacing-1` (4px) 间距 | §6.1 | + +点击行为由业务自行实现（如弹出输入框、内联编辑）。 + +--- + +### 15.3 多项带搜索 + +> 在 §15.2 基础上，**面板顶部嵌入一行搜索框**，输入时实时过滤复选项列表。其它结构（已选 Tag / 复选项 / 全选 / 底部添加）完全沿用 §15.2。 + +``` +┌─────────────────────────────────────┐ +│ n1 × +1 × ▾ │ +└─────────────────────────────────────┘ +┌─────────────────────────────────────┐ +│ [ 搜索 🔍 ] │ ← 嵌入式搜索框（§15.3.1） +├─────────────────────────────────────┤ +│ ▢ 全部 │ +│ ☑ n1 │ +│ ☐ n2 │ +│ ☐ n3 │ +└─────────────────────────────────────┘ +``` + +#### 15.3.1 嵌入式搜索框 + +搜索框尺寸采用 §14.1 公共规格的**小号**（高度 28px），保持与面板视觉上的"嵌入感"： + +| 属性 | 取值 | +|------|------| +| 高度 | `28px`（小号） | +| 水平 padding | `--spacing-2` (8px) | +| 圆角 | `2px` | +| 背景 | `#0C1836` (ZS-004-09，比面板背景深一档) | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | +| 文字 | `14px Regular`，`#C5CFE0` | +| 占位符 | "搜索"，`#6E88B0` | +| 右侧 🔍 / ⊗ 图标 | `14px`，`#6E88B0`，hover `#4096FF` | +| 搜索框 → 列表项纵向间距 | `--spacing-2` (8px) + 分割线 `1px solid #1A2F5A` | + +输入非空时右侧图标切换为 `⊗`（清空），点击清空输入并恢复完整列表。 + +#### 15.3.2 加载与空状态 + +异步获取选项（如远程搜索）时，列表区按以下规则渲染： + +| 状态 | 渲染 | +|------|------| +| 加载中 | 文字 "加载中…"，单行居左，`14px Regular`，`#6E88B0`，行高 `32px` | +| 无匹配 | 文字 "无匹配项"，同上 | +| 网络错误 | 文字 "加载失败，点击重试"，`#FF7875` (ZS-001-04)，可点击 | + +--- + +### 15.4 选用决策 + +| 场景 | 选择 | +|------|------| +| 候选池 ≤ 10 项，单值 | §15.1 公共规格 + 去掉复选框（基础单选） | +| 候选池 ≤ 10 项，多值 | §15.2 多项选择 | +| 候选池 > 10 项 / 不可枚举 | §15.3 多项带搜索 | +| 候选池有层级关系（如部门 / 区域） | 级联选择器：每级独立面板横向铺开，单级内部规格同 §15.1~15.3 | +| 允许用户**新增不在候选池**的项 | 在 §15.2 / §15.3 末尾启用 §15.2.4「+ 添加项」按钮 | + +--- + +### 15.5 CSS Token 参考 + +```css +:root { + /* 触发器 —— 复用 §14 搜索框 */ + --select-trigger-bg: var(--search-bg); /* #0C1836 */ + --select-trigger-border: var(--search-border); /* #1A2F5A */ + --select-trigger-placeholder: var(--search-placeholder); /* #6E88B0 */ + --select-trigger-arrow: #6E88B0; + --select-trigger-arrow-hover: #4096FF; + + /* 下拉面板 —— 复用 §14.4.4 联想 */ + --select-panel-bg: var(--suggest-bg); /* #122347 */ + --select-panel-border: #1A2F5A; + --select-item-text: var(--suggest-item-text); /* #C5CFE0 */ + --select-item-hover-bg: var(--suggest-item-hover); /* rgba(22,119,255,0.16) */ + --select-item-hover-text: var(--suggest-item-hover-text); /* #FFFFFF */ + --select-item-disabled: #4A6491; /* ZS-004-05 */ + + /* 已选 Tag */ + --select-tag-bg: #1677FF; /* ZS-002-06 */ + --select-tag-text: #FFFFFF; + --select-tag-close: rgba(255,255,255,0.72); + --select-tag-close-hover: #FFFFFF; + + /* 复选框 */ + --check-border: #6E88B0; /* ZS-004-04 */ + --check-border-hover: #4096FF; /* ZS-002-05 */ + --check-fill: #1677FF; /* ZS-002-06 */ + --check-mark: #FFFFFF; + --check-disabled-border: #4A6491; /* ZS-004-05 */ + --check-disabled-bg: rgba(22,119,255,0.04); + + /* 底部「+ 添加项」 */ + --select-add-border: #1677FF; /* ZS-002-06 */ + --select-add-text: #4096FF; /* ZS-002-05 */ + --select-add-hover-bg: rgba(22,119,255,0.16); + --select-add-hover-text: #1677FF; + --select-add-active-bg: rgba(22,119,255,0.24); + --select-add-active-text: #FFFFFF; + + /* 加载 / 错误 */ + --select-loading-text: #6E88B0; + --select-error-text: #FF7875; /* ZS-001-04 */ +} +``` + +--- + +## 16. 单选与多选（Radio / Checkbox） + +> 对应设计稿「多选框.png」。本章定义独立作为表单字段使用的**单选（Radio）**和**多选（Checkbox）**两类原子控件，包含**未选 / 已选 / 未选禁用 / 已选禁用**四种状态。§15.2.2「多项选择的复选项」中的复选框直接复用本章 §16.3 规格，本章是单一真源。 + +### 16.1 公共规格 + +| 属性 | 取值 | +|------|------| +| 控件尺寸 | `14px × 14px` | +| 控件描边宽度 | `1px` | +| 控件 → 文字间距 | `--spacing-2` (8px)（§7.1） | +| 文字字号 | `14px Regular` | +| 行高 | `20px`（点击命中区与文字垂直对齐） | +| 同一组**横向相邻**项的间距 | `--spacing-6` (24px)（§7.1） | +| 同一组**纵向相邻**项的间距 | `--spacing-3` (12px)（§7.1） | + +整行（控件 + 文字）任意位置可点击 = 等效切换该项状态。 + +--- + +### 16.2 单选（Radio） + +> 一组互斥选项中只能选中一个。视觉为圆形描边 + 内圆实心点。 + +``` +○ 未选 ● 已选 ○ 未选禁用 ● 已选禁用 + (整组降饱和) +``` + +#### 16.2.1 外观规格 + +| 状态 | 外环 | 内圆 | 文字 | +|------|------|------|------| +| 未选 | `1px solid #4096FF` (ZS-002-05) + 背景 `transparent` | — | `#C5CFE0` (ZS-004-02) | +| 未选 Hover | `1px solid #1677FF` (ZS-002-06) | — | `#FFFFFF` | +| 已选 | `1px solid #1677FF` (ZS-002-06) | 中心实心圆 `6px × 6px`，`#1677FF` | `#FFFFFF` | +| 已选 Focus | 外环外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环 | — | `#FFFFFF` | +| 未选禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | `#4A6491` | +| 已选禁用 | `1px solid #4A6491` (ZS-004-05) | 中心实心圆 `6px × 6px`，`#4A6491` | `#4A6491` | + +外环与内圆均为正圆（`border-radius: 50%`）。 + +#### 16.2.2 与 label 组合使用 + +「基本使用-组合」场景：选中某 Radio 项后，**下方展开关联输入字段**（如 Antd 的 Form.Item 嵌入式组合）。 + +``` +● 已选 + + lable: [ ] + lable: [ ] +``` + +| 元素 | 规格 | +|------|------| +| Radio → 下方第一行 label 纵向间距 | `--spacing-3` (12px)（§7.1） | +| 嵌入字段左缩进 | 与 Radio 文字左边缘对齐（即外环宽 14px + 间距 8px = **22px 左缩进**） | +| 嵌入字段的 label 与 input | 沿用 §14.1 输入框规格 | +| 嵌入区分组背景 | 可选地用 `#1A2F5A` (ZS-004-07) 作浅色卡片底色，强化"属于该 Radio"的视觉归属 | + +--- + +### 16.3 多选（Checkbox） + +> 多个选项可同时选中，互不影响。视觉为方形描边 + 内填勾 ✓。 + +``` +☐ 未选 ☑ 已选 ☐ 未选禁用 ☑ 已选禁用 + (整组降饱和) +``` + +#### 16.3.1 外观规格 + +| 状态 | 边框 / 背景 | 勾 ✓ | 文字 | +|------|------------|------|------| +| 未选 | `1px solid #4096FF` (ZS-002-05) + 背景 `transparent` | — | `#C5CFE0` (ZS-004-02) | +| 未选 Hover | `1px solid #1677FF` (ZS-002-06) | — | `#FFFFFF` | +| 已选 | 实心填充 `#1677FF` (ZS-002-06) | `#FFFFFF`，描边 `2px` | `#FFFFFF` | +| 已选 Focus | 外加 `0 0 0 2px rgba(22,119,255,0.16)` 焦点环 | `#FFFFFF` | `#FFFFFF` | +| 半选 | 实心填充 `#1677FF` (ZS-002-06) | 中央横线 `8px × 2px`，`#FFFFFF` | `#FFFFFF` | +| 未选禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | `#4A6491` | +| 已选禁用 | 实心填充 `#4A6491` (ZS-004-05) | `#C5CFE0` 或 `rgba(255,255,255,0.4)` | `#4A6491` | + +复选框统一圆角 `2px`（§4.1）。 + +#### 16.3.2 与 label 组合使用 + +与 §16.2.2 完全一致 —— Checkbox 选中后下方展开嵌入式输入字段，缩进与间距规格相同（左缩进 22px、纵向间距 12px）。 + +``` +☑ 已选 + + lable: [ ] + lable: [ ] +``` + +--- + +### 16.4 状态对照表 + +| 状态 | Radio 外环 | Radio 内圆 | Checkbox 外框 | Checkbox 勾 | 文字 | +|------|-----------|-----------|--------------|------------|------| +| 未选 | `#4096FF` 描边 | — | `#4096FF` 描边 | — | `#C5CFE0` | +| Hover | `#1677FF` 描边 | — | `#1677FF` 描边 | — | `#FFFFFF` | +| 已选 | `#1677FF` 描边 | `#1677FF` 6px 圆 | `#1677FF` 填充 | `#FFFFFF` ✓ | `#FFFFFF` | +| 半选（仅 Checkbox） | — | — | `#1677FF` 填充 | `#FFFFFF` 横线 | `#FFFFFF` | +| Focus | + `0 0 0 2px rgba(22,119,255,0.16)` | — | + `0 0 0 2px rgba(22,119,255,0.16)` | — | `#FFFFFF` | +| 未选禁用 | `#4A6491` 描边 | — | `#4A6491` 描边 | — | `#4A6491` | +| 已选禁用 | `#4A6491` 描边 | `#4A6491` 6px 圆 | `#4A6491` 填充 | `#C5CFE0` ✓ | `#4A6491` | + +--- + +### 16.5 与 §15.2.2 的关系 + +§15.2.2「多项选择面板内的复选项」直接复用本章 §16.3 的复选框外观规格，**唯一差异**： + +- 在多项选择下拉面板里，**未选状态边框**是 `#6E88B0` (ZS-004-04，更"灰"的占位色)，而非本章 §16.3 默认的 `#4096FF`（更"蓝"的强调色） +- 原因：下拉面板里项数多，所有复选框同时蓝色描边会过于喧闹；独立表单字段里数量少（通常 2–4 项），用强调色更醒目 + +如需统一也可以全面采用本章规格 —— 二选一即可，但**一个项目内部应保持一致**。 + +--- + +### 16.6 CSS Token 参考 + +```css +:root { + /* 公共 */ + --field-size: 14px; + --field-border-w: 1px; + --field-radius: 2px; /* 仅 Checkbox 用 */ + --field-text: #C5CFE0; /* ZS-004-02 */ + --field-text-hover: #FFFFFF; + --field-text-disabled: #4A6491; /* ZS-004-05 */ + --field-focus-ring: 0 0 0 2px rgba(22,119,255,0.16); + + /* Radio */ + --radio-border: #4096FF; /* ZS-002-05 */ + --radio-border-hover: #1677FF; /* ZS-002-06 */ + --radio-border-checked: #1677FF; + --radio-dot: #1677FF; /* 中心 6×6 实心 */ + --radio-border-disabled: #4A6491; /* ZS-004-05 */ + --radio-dot-disabled: #4A6491; + --radio-bg-disabled: rgba(22,119,255,0.04); + + /* Checkbox */ + --checkbox-border: #4096FF; /* ZS-002-05 */ + --checkbox-border-hover: #1677FF; /* ZS-002-06 */ + --checkbox-fill-checked: #1677FF; /* ZS-002-06 */ + --checkbox-mark: #FFFFFF; + --checkbox-border-disabled: #4A6491; /* ZS-004-05 */ + --checkbox-fill-disabled: #4A6491; + --checkbox-mark-disabled: #C5CFE0; + --checkbox-bg-disabled: rgba(22,119,255,0.04); + + /* 组合：嵌入式 label + 输入框（§16.2.2 / §16.3.2） */ + --field-group-indent: 22px; /* 14px 控件 + 8px 间距 */ + --field-group-gap-y: var(--spacing-3); /* 12px */ +} +``` + +--- + +## 17. 日期选择器（DatePicker） + +> 对应设计稿「日期时间筛选框.png」。覆盖**单日期选择**与**日期范围选择**两种场景。面板包含**左侧快捷模式**（按天 / 按周 / 按月 / 自定义）、**起止输入区**、**双月日历主体**、**底部确认按钮**四块。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器完全对齐。 + +### 17.1 触发器（Trigger） + +触发器即「2021-12-09 📅」那一行。规格与 §14.1 输入框完全一致： + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `32px` | §14.1 | +| 圆角 | `2px` | §4.1 | +| 水平 padding | `--spacing-3` (12px) | §7.1 | +| 背景 | `#0C1836` (ZS-004-09) | — | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 默认日期文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)；占位时 "请选择日期" 用 `#6E88B0` (ZS-004-04) | — | +| 右侧 📅 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | + +边框状态机（默认 / hover / focus / 失效 / 错误）直接复用 §14.1.1。 + +**范围选择**触发器变体：宽度自动延展，内显示 `2021-12-09 至 2022-01-09`。 + +--- + +### 17.2 下拉面板（Panel） + +面板为**左 + 右**两栏组合： + +``` +┌──────────┬───────────────────────────────────────────────────────┐ +│ 按天 › │ [ 2021-12-09 ⊗ ] 至 [ 2021-12-09 ⊗ ] │ +│ 按周 › ├───────────────────────────────────────────────────────┤ +│ 按月 › │ « < 2021 年 12 月 > » « < 2022 年 1 月 > » │ +│ 自定义 │ 日 一 二 三 四 五 六 日 一 二 三 四 五 六 │ +│ │ 29 30 1 2 3 4 5 29 30 1 2 3 4 5 │ +│ │ 6 7 8 ⓿ 10 11 12 6 7 8 ⓿ 10 11 12 │ +│ │ 13 14 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ │ +│ │ 20 ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ │ +│ │ 27 ▓▓ ▓▓ ▓▓ ▓▓ 1 2 3 4 5 6 7 8 9 │ +│ │ 3 4 5 6 7 8 9 …… │ +│ ├───────────────────────────────────────────────────────┤ +│ │ [确定] [取消] │ +└──────────┴───────────────────────────────────────────────────────┘ + ⓿ = 起止日（实心蓝圆） ▓▓ = 范围内（浅蓝底矩形） +``` + +#### 17.2.1 面板容器规格 + +| 属性 | 取值 | +|------|------| +| 背景 | `#122347` (ZS-004-08) | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | +| 圆角 | `2px` | +| 与触发器纵向间距 | `--spacing-1` (4px) | +| 整体宽度 | 由左栏宽 `80px` + 右栏（双月并列）自适应得出 | +| 左右栏分隔线 | `1px solid #1A2F5A`（ZS-004-07） | + +--- + +### 17.3 左侧快捷模式（Sidebar） + +| 属性 | 取值 | +|------|------| +| 宽度 | `80px` | +| 项高度 | `36px` | +| 水平 padding | `--spacing-3` (12px) | +| 字号 | `14px Regular` | +| 右侧 `›` 图标（除"自定义"外） | `12px`，与文字同色 | + +#### 17.3.1 项状态 + +| 状态 | 背景 | 文字 | +|------|------|------| +| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | +| Hover | `rgba(22,119,255,0.16)` | `#FFFFFF` | +| 已选 | `#1677FF` (ZS-002-06) | `#FFFFFF` | + +#### 17.3.2 四种模式语义 + +| 模式 | 行为 | +|------|------| +| 按天 | 点击日期格 → 立即选中单日，关闭面板，触发器显示该日 | +| 按周 | hover 任意日期格 → **整周高亮**，点击 → 选中该周 | +| 按月 | 切换到月视图（日期格变成 12 个月名），点击 → 选中该月 | +| 自定义 | 默认显示双月日历，支持选中起止日做范围（详见 §17.5） | + +--- + +### 17.4 起止日期输入区（Range Inputs） + +仅在**自定义模式**下显示在右栏顶部： + +``` +[ 2021-12-09 ⊗ ] 至 [ 2021-12-09 ⊗ ] +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 输入框 | 沿用 §14.1 公共规格，宽度 `132px`，**只读**（点击日历格回填，不直接输入） | §14.1 | +| 中间 "至" 文字 | `14px Regular`，`#6E88B0` (ZS-004-04)，左右 padding `--spacing-3` (12px) | — | +| 右侧 `⊗` 清空按钮 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 输入区 → 日历主体纵向间距 | `--spacing-3` (12px) + 分割线 `1px solid #1A2F5A` | §6.1 | +| 整行右内 padding | `--spacing-4` (16px) | §7.1 | + +未选起 / 止时对应输入框留空显示占位 "开始日期" / "结束日期"（`#6E88B0`）。 + +--- + +### 17.5 双月日历主体（Calendar Grid） + +并列展示**当月**与**下月**两张日历，便于跨月选范围。 + +#### 17.5.1 标题栏 + +``` +« < 2021 年 12 月 > » +``` + +| 元素 | 色值 / 规格 | +|------|-------------| +| 年月文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | +| 翻页箭头 `‹ ›` | `14px`，`#6E88B0`，hover `#4096FF` | +| 翻年箭头 `« »` | `14px`，`#6E88B0`，hover `#4096FF` | +| 标题栏高度 | `36px` | +| 双月之间间距 | `--spacing-6` (24px)（§7.1） | + +行为：`«` `»` 翻年；`‹` `›` 翻月。左日历翻动时右日历同步前移一月，保持"双月连续"。 + +#### 17.5.2 星期表头 + +| 属性 | 取值 | +|------|------| +| 文字 | `日 一 二 三 四 五 六` | +| 字号 | `12px Regular` | +| 颜色 | `#6E88B0` (ZS-004-04) | +| 行高 | `28px` | + +#### 17.5.3 日期格规格 + +| 属性 | 取值 | +|------|------| +| 单元尺寸 | `28px × 28px`（点击命中区） | +| 数字字号 | `14px Regular` | +| 圆角 | `50%`（已选时实心圆） | +| 行间距 | `0`（紧凑排列） | + +#### 17.5.4 日期格状态 + +| 状态 | 背景 | 文字 | +|------|------|------| +| 当月普通 | `transparent` | `#C5CFE0` (ZS-004-02) | +| 上下月填充（如 12 月日历里显示的 11/29、11/30、1/1、1/2） | `transparent` | `#4A6491` (ZS-004-05) | +| 今天（无边框样式） | `transparent` + `1px solid #1677FF` | `#C5CFE0` | +| Hover | `rgba(22,119,255,0.16)` | `#FFFFFF` | +| 已选起止日 | 实心圆 `#1677FF` (ZS-002-06) | `#FFFFFF` | +| 范围内（起止之间） | `rgba(22,119,255,0.16)` 矩形（无圆角，左右相连成连续色带） | `#FFFFFF` | +| 范围内 + 端点 | 矩形底色 + 端点实心圆叠加（视觉上"圆形扣"在色带头尾） | `#FFFFFF` | +| 禁用（超出 min/max） | `transparent` | `#4A6491`，鼠标 `not-allowed` | + +> ⚠️ **范围色带的实现要点**：范围内日期格不能各自圆角，否则中间会出现空隙。推荐方案：每行整体作为容器，范围内的日期用同色底向左右各延伸 `4px` 模拟连续；端点处再叠加 `28×28` 实心圆。 + +--- + +### 17.6 底部「确定 / 取消」按钮 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 区域高度 | `48px` | +| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 右内 padding | `--spacing-4` (16px) | §7.1 | +| 按钮对齐 | 右对齐 | +| 「确定」 | 沿用 §5.2.1 主按钮（实心 `#1677FF`），尺寸"小号"`28px` | §5.2.1 | +| 「取消」 | 沿用 §5.2.2 默认按钮（描边 + 透明底），尺寸"小号"`28px` | §5.2.2 | +| 两按钮间距 | `--spacing-2` (8px) | §7.1 | + +行为： +- 「确定」 → 提交当前选择，关闭面板，触发器显示选中值 +- 「取消」 → 丢弃临时选择，关闭面板，触发器值不变 + +按 `Esc` 等价于「取消」；按 `Enter` 等价于「确定」（当选择合法时）。 + +--- + +### 17.7 选用决策与变体 + +| 场景 | 选择 | +|------|------| +| 单日期 | 触发器 + 单月日历（无左侧快捷栏，无起止输入区） | +| 日期范围（常见筛选） | 完整组合：左侧快捷栏 + 双月日历 + 起止输入区 | +| 仅按周 / 按月 / 按季度 | 左侧只保留对应模式项；右侧日历切换为相应粒度 | +| 带时间（小时 / 分） | 在 §17.4 起止输入区下方追加时分选择列（24h 滚轮，未在本节展开） | +| 多日期独立选（非连续） | 不推荐用本组件 —— 改用 §15 多项选择 + 日期值列表 | + +--- + +### 17.8 CSS Token 参考 + +```css +:root { + /* 触发器 —— 复用 §14 搜索框 */ + --date-trigger-bg: var(--search-bg); /* #0C1836 */ + --date-trigger-border: var(--search-border); /* #1A2F5A */ + --date-trigger-text: var(--search-text); /* #C5CFE0 */ + --date-trigger-placeholder: var(--search-placeholder); /* #6E88B0 */ + --date-trigger-icon: #6E88B0; + --date-trigger-icon-hover: #4096FF; /* ZS-002-05 */ + + /* 面板 —— 复用 §14.4.4 联想 */ + --date-panel-bg: var(--suggest-bg); /* #122347 */ + --date-panel-border: #1A2F5A; + --date-panel-divider: #1A2F5A; /* 左右栏 + 顶/底分割线 */ + + /* 左侧快捷栏 */ + --date-sidebar-w: 80px; + --date-sidebar-item-h: 36px; + --date-sidebar-text: #C5CFE0; /* ZS-004-02 */ + --date-sidebar-text-hover: #FFFFFF; + --date-sidebar-bg-hover: rgba(22,119,255,0.16); + --date-sidebar-bg-active: #1677FF; /* ZS-002-06 */ + --date-sidebar-text-active: #FFFFFF; + + /* 起止输入区 */ + --date-range-sep: #6E88B0; /* "至" 文字 */ + --date-range-clear: #6E88B0; + --date-range-clear-hover: #4096FF; + + /* 日历单元 */ + --date-cell-size: 28px; + --date-cell-text: #C5CFE0; /* 当月 */ + --date-cell-text-outside: #4A6491; /* 上下月填充, ZS-004-05 */ + --date-cell-text-disabled: #4A6491; + --date-cell-bg-hover: rgba(22,119,255,0.16); + --date-cell-text-hover: #FFFFFF; + --date-cell-bg-selected: #1677FF; /* 起止实心圆 */ + --date-cell-text-selected: #FFFFFF; + --date-cell-bg-in-range: rgba(22,119,255,0.16); /* 范围色带 */ + --date-cell-border-today: #1677FF; /* 今天 1px 边框 */ + + /* 标题栏 */ + --date-title-text: #C5CFE0; + --date-title-arrow: #6E88B0; + --date-title-arrow-hover: #4096FF; + --date-weekday-text: #6E88B0; /* 日一二…六 */ + + /* 底部按钮区 */ + --date-footer-h: 48px; + --date-footer-divider: #1A2F5A; +} +``` + +--- + +## 18. 穿梭框（Transfer） + +> 对应设计稿「5.18 输入-穿梭框」。用于在「源列表 / 目标列表」两栏之间搬移条目，中间用 `‹ ›` 方向按钮转移选中项。覆盖**基础用法**与**可搜索**两种变体；左栏可为**树形**（带层级 + 复选框），右栏为**已选平铺列表**。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §14 搜索框 / §15 选择器 / §16 复选框完全对齐。 + +### 18.1 整体结构 + +``` +┌─ 列表(0/13) ──────┐ ┌─ 已选(6/49) ──────┐ +│ ▸ ☐ XXXX公司 │ │ ☐ 李宏洋 │ +│ ▸ ☐ 总裁办 │ ┌──┐ │ ☐ 舒敌 │ +│ ▸ ☐ 人事部 │ │ ‹ │ │ ☑ 宴青 │ +│ ▸ ☐ 技术部 │ ├──┤ │ ☐ 陈平 │ +│ ☐ 张小刚 │ │ › │ │ ☐ 张小凡 │ +│ ☐ 李小红 │ └──┘ │ ☐ 李小红 │ +└───────────────────┘ └───────────────────┘ + 源栏（可树形） 方向按钮组 目标栏（已选平铺） +``` + +- 左 = **源列表**（待选），右 = **目标列表**（已选）；中间两颗上下排列的方向按钮 `‹`（移回源）/ `›`（移入目标）。 +- 两栏顶部各有一条**标题栏**，显示名称 + 计数 `(已选/总数)`，如 `列表(0/13)`、`已选(6/49)`。 +- 源栏支持**树形结构**（部门层级 + 叶子节点），目标栏为**平铺列表**。 + +### 18.2 外层容器与栏规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 外层分栏框背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 外层分栏框圆角 | `4px` | §4.1 | +| 外层内边距 | `--spacing-5` (24px) | §7.1 | +| 单栏宽度 | `≥ 240px`，两栏等宽 | — | +| 单栏背景 | `#122347` (ZS-004-08) | §3.1.2 卡片 | +| 单栏边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 单栏圆角 | `4px` | §4.1 | +| 栏体最小高度 | `360px`（不足时撑满，超出滚动） | — | +| 两栏与方向按钮组间距 | `--spacing-3` (12px) | §7.1 | + +### 18.3 栏标题栏（Header） + +标题栏是**实心主色蓝**横条，承载栏名 + 计数。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 背景 | `#1677FF` (ZS-002-06) | §1.1.6 主色 | +| 高度 | `40px` | — | +| 水平 padding | `--spacing-4` (16px) | §7.1 | +| 标题文字（如「列表」「已选」） | `14px Medium`，`#FFFFFF` | — | +| 计数文字 `(0/13)` | `14px Regular`，`rgba(255,255,255,0.85)` | — | +| 圆角 | 上方两角 `4px`，与栏体顶部贴合 | §4.1 | + +### 18.4 栏内条目 + +#### 18.4.1 平铺列表项（目标栏 / 源栏叶子） + +每行 = 复选框 + 文字，整行可点击切换勾选。复选框规格复用 §16.3。 + +| 状态 | 背景 | 复选框 | 文字 | +|------|------|--------|------| +| 默认 | `transparent` | 未选：`1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| Hover | `rgba(22,119,255,0.08)` | hover 边框 `#4096FF` (ZS-002-05) | `#FFFFFF` | +| 已选 | `transparent` | 实心填充 `#1677FF` (ZS-002-06) + 白勾 ✓ | `#FFFFFF` | +| 禁用 | `transparent` | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | `#4A6491` | + +| 属性 | 取值 | +|------|------| +| 行高 | `36px` | +| 水平 padding | `--spacing-3` (12px) | +| 复选框 → 文字间距 | `--spacing-2` (8px) | +| 项之间分隔 | 无分割线（靠 hover 背景区分） | + +#### 18.4.2 树形节点（源栏） + +源栏按部门层级缩进，父节点带展开箭头 `▸ / ▾`。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 展开箭头 `▸ / ▾` | `12px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | ZS-002-05 | +| 每级缩进 | `--spacing-4` (16px) | §7.1 | +| 父节点复选框 | 支持**半选**（部分子项选中），中央 `8px × 2px` 白色横线，填充 `#1677FF` | §16.3 半选 | +| 箭头 → 复选框间距 | `--spacing-1` (4px) | — | +| 节点文字 | 同 §18.4.1 平铺列表项配色 | — | + +> 勾选父节点 = 勾选其全部子孙；子项部分选中时父节点显示半选态（同 §15.2.3 全选逻辑）。 + +### 18.5 中间方向按钮组 + +两颗上下排列的小尺寸图标按钮，控制条目在两栏间转移。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 按钮尺寸 | `28px × 28px`（小号） | §5.1 | +| 圆角 | `2px` | §4.1 | +| 两按钮纵向间距 | `--spacing-2` (8px) | §7.1 | +| 图标 `‹` `›` | `14px`，`#FFFFFF` | — | +| **可用态**背景 | `#1677FF` (ZS-002-06) | §5.2.1 主按钮 | +| 可用态 Hover | `#0958D9` (ZS-002-07) | — | +| 可用态 Active | `#003EB3` (ZS-002-08) | — | +| **禁用态**背景 | `rgba(22,119,255,0.35)`，图标 `#6E88B0` (ZS-004-04) | §5.2.1 失效 | + +行为： +- `›`：把**源栏选中项**移入目标栏；源栏无选中时按钮禁用。 +- `‹`：把**目标栏选中项**移回源栏；目标栏无选中时按钮禁用。 +- 转移后两栏标题计数 `(已选/总数)` 同步刷新。 + +### 18.6 可搜索变体 + +在**两栏标题栏下方各嵌入一行搜索框**，输入时实时过滤本栏条目；树形栏过滤后保留命中项的祖先路径。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | +| 占位符 | "请输入"，`#6E88B0` (ZS-004-04) | — | +| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 搜索框背景 | `#0C1836` (ZS-004-09，比栏体深一档) | — | +| 搜索框水平外边距 | `--spacing-3` (12px)（与栏体左右留白对齐） | — | +| 搜索框 → 列表纵向间距 | `--spacing-2` (8px) | §7.1 | + +### 18.7 选用决策 + +| 场景 | 选择 | +|------|------| +| 候选项 ≤ 20、无层级 | §18.1 基础用法（两栏平铺） | +| 候选项有部门 / 分类层级 | 源栏启用 §18.4.2 树形节点 | +| 候选项较多 / 需快速定位 | §18.6 可搜索变体 | +| 仅单选搬移、候选少 | 不必用穿梭框，改用 §15 选择器 | + +### 18.8 CSS Token 参考 + +```css +:root { + /* 外层与栏 */ + --transfer-frame-bg: #0C1836; /* ZS-004-09 外层分栏 */ + --transfer-col-bg: #122347; /* ZS-004-08 单栏 */ + --transfer-col-border: #1A2F5A; /* ZS-004-07 */ + --transfer-col-radius: 4px; + + /* 标题栏 */ + --transfer-header-bg: #1677FF; /* ZS-002-06 */ + --transfer-header-text: #FFFFFF; + --transfer-header-count: rgba(255,255,255,0.85); + --transfer-header-h: 40px; + + /* 条目 */ + --transfer-item-h: 36px; + --transfer-item-text: #C5CFE0; /* ZS-004-02 */ + --transfer-item-text-on: #FFFFFF; + --transfer-item-hover-bg: rgba(22,119,255,0.08); + --transfer-item-disabled: #4A6491; /* ZS-004-05 */ + --transfer-tree-indent: 16px; + --transfer-tree-arrow: #6E88B0; /* ZS-004-04 */ + --transfer-tree-arrow-hover: #4096FF; /* ZS-002-05 */ + + /* 复选框（复用 §16.3） */ + --transfer-check-border: #6E88B0; /* ZS-004-04 */ + --transfer-check-fill: #1677FF; /* ZS-002-06 */ + --transfer-check-mark: #FFFFFF; + + /* 方向按钮 */ + --transfer-btn-size: 28px; + --transfer-btn-bg: #1677FF; /* ZS-002-06 */ + --transfer-btn-hover: #0958D9; /* ZS-002-07 */ + --transfer-btn-active: #003EB3; /* ZS-002-08 */ + --transfer-btn-disabled: rgba(22,119,255,0.35); + --transfer-btn-icon: #FFFFFF; + --transfer-btn-icon-disabled: #6E88B0; + + /* 搜索框（复用 §14.1 小号） */ + --transfer-search-h: 28px; + --transfer-search-bg: #0C1836; /* ZS-004-09 */ + --transfer-search-border: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 19. 树选择（TreeSelect） + +> 对应设计稿「5.19 输入-树选择」。触发器即一个「请选择 ▾」控件，下拉展开一棵**可折叠树**，叶子 / 节点可被选中。按值数分**单选 / 多选**，按是否带过滤分**无搜索 / 有搜索**，共 4 种组合。触发器规格复用 §15.1.1 选择器触发器；面板规格复用 §15.1.2 下拉面板；多选 Tag、复选框分别复用 §15.2.1、§16.3。配色全部从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 19.1 触发器（Trigger） + +| 变体 | 触发器内容 | 来源 | +|------|-----------|------| +| 单选 | 单行文字（已选节点名，如 `PC终端`）；占位 "请选择" | §15.1.1 | +| 多选 | 渲染已选 Tag 列表（`n1 × n1 ×`），超宽折叠成 `+N ×` | §15.2.1 | + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `32px` | §14.1 | +| 圆角 | `2px` | §4.1 | +| 背景 | `#0C1836` (ZS-004-09) | — | +| 边框 | `1px solid #1A2F5A`（默认）；状态机复用 §14.1.1 | ZS-004-07 | +| 右侧箭头 | 收起 `▾` / 展开 `▴`，`12px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | + +### 19.2 下拉面板（Panel） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#122347` (ZS-004-08) | §15.1.2 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 阴影 | `0 4px 16px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | — | +| 圆角 | `2px` | — | +| 内边距 | 上下 `--spacing-2` (8px) | §7.1 | +| 与触发器纵向间距 | `--spacing-1` (4px) | — | +| 面板宽度 | 与触发器等宽（最小 `220px`） | — | + +### 19.3 树节点（公共） + +``` +[-] 全部终端 + └ [-] 本级中心 + └ [-] PC终端 + ├ ─ 研发管理部 + ├ [-] 产品线 + │ ├ ▓ 开发小组 ← 选中（整行高亮） + │ └ ─ 测试小组 + └ ─ 未分组用户终端 + └ [+] 下级中心 ← 折叠（含未展开子树） +``` + +#### 19.3.1 节点规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 节点行高 | `32px` | — | +| 每级缩进 | `--spacing-4` (16px) | §7.1 | +| 展开 / 折叠图标 | 方形 `[-]` / `[+]`（含子树时显示），`12px`，描边 `1px solid #6E88B0`，符号 `#6E88B0` | ZS-004-04 | +| 图标 Hover | 描边 + 符号 `#4096FF` (ZS-002-05) | — | +| 叶子前缀 | 短横 `─`（占位对齐），`#4A6491` (ZS-004-05) | — | +| 图标 → 文字间距 | `--spacing-2` (8px) | — | +| 文字 | `14px Regular` | — | + +#### 19.3.2 节点状态配色 + +| 状态 | 行背景 | 文字 | 来源 | +|------|--------|------|------| +| 默认 | `transparent` | `#C5CFE0` (ZS-004-02) | — | +| Hover | `rgba(22,119,255,0.08)` | `#FFFFFF` | — | +| 选中（单选 / 命中叶子） | **整行实心高亮** `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 主色 | +| 父级（含选中子项，未自身选中） | `transparent` | `#FFFFFF` | — | +| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | — | + +> 单选选中态用**整行通栏蓝底**（不是仅文字变色），与下拉联想项的局部 hover 区分；点击节点空白处 = 选中该节点（父节点亦可选）。 + +### 19.4 单选变体 + +| 维度 | 规则 | +|------|------| +| 选中表现 | 点击节点 → 整行 `#1677FF` 高亮，回填触发器文字，**关闭面板** | +| 同时可选数 | 1（再选其它节点替换原值） | +| 触发器 | 单行文字 | +| 节点前缀 | 无复选框，仅展开图标 + 叶子短横 | + +### 19.5 多选变体 + +| 维度 | 规则 | +|------|------| +| 节点前缀 | 展开图标后增加**复选框**（规格复用 §16.3） | +| 选中表现 | 勾选复选框；命中行可叠加 `#1677FF` 整行高亮强调当前焦点 | +| 父子联动 | 勾父节点 → 勾全部子孙；子项部分选中 → 父节点**半选**（中央白横线） | +| 触发器 | 渲染已选 Tag（`n1 ×`），溢出折叠 `+N ×`（§15.2.1） | +| 关闭时机 | 多选**不关闭**面板，点触发器外部或箭头收起 | + +| 复选框状态 | 外观 | 来源 | +|-----------|------|------| +| 未选 | `1px solid #6E88B0` (ZS-004-04) + 透明底 | §16.5（面板内用灰描边） | +| 已选 | 实心 `#1677FF` (ZS-002-06) + 白勾 ✓ | §16.3 | +| 半选 | 实心 `#1677FF` + 中央 `8px × 2px` 白横线 | §16.3 | +| 禁用 | `1px solid #4A6491` (ZS-004-05) + 背景 `rgba(22,119,255,0.04)` | — | + +### 19.6 有搜索变体 + +面板顶部嵌入一行搜索框，输入时实时过滤树节点，**保留命中节点的祖先链**并自动展开。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 搜索框规格 | 沿用 §14.1 公共规格**小号**（高 `28px`） | §14.1 | +| 占位符 | "搜索"，`#6E88B0` (ZS-004-04) | — | +| 右侧 🔍 图标 | `14px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 搜索框背景 | `#0C1836` (ZS-004-09) | — | +| 搜索框 → 树主体间距 | `--spacing-2` (8px) + 分割线 `1px solid #1A2F5A` | §6.1 | +| 命中文字高亮（可选） | 关键字片段 `#4096FF` (ZS-002-05) | — | + +### 19.7 交互与动画 + +| 行为 | 动效 | 来源 | +|------|------|------| +| 面板展开 | `scaleY(0.95) → 1`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | +| 节点展开 / 折叠 | 子树高度 `0 → auto`，`[+]/[-]` 切换，`200ms ease-out` | — | +| 触发器箭头 | `▾ → ▴` 旋转 `180deg`，`200ms ease-out` | — | +| Hover 背景过渡 | `120ms ease-out` | §8.5 | + +### 19.8 选用决策 + +| 场景 | 选择 | +|------|------| +| 层级数据、选单个节点 | §19.4 单选 | +| 层级数据、选多个节点（含父子联动） | §19.5 多选 | +| 树节点多 / 需快速定位 | 叠加 §19.6 有搜索 | +| 需要在两栏之间搬移而非单纯选取 | 改用 §18 穿梭框 | +| 无层级的平铺多选 | 改用 §15.2 多项选择 | + +### 19.9 CSS Token 参考 + +```css +:root { + /* 触发器（复用 §15.1.1 / §14.1） */ + --tree-trigger-bg: #0C1836; /* ZS-004-09 */ + --tree-trigger-border: #1A2F5A; /* ZS-004-07 */ + --tree-trigger-text: #C5CFE0; /* ZS-004-02 */ + --tree-trigger-arrow: #6E88B0; /* ZS-004-04 */ + --tree-trigger-arrow-hover: #4096FF; /* ZS-002-05 */ + + /* 面板（复用 §15.1.2） */ + --tree-panel-bg: #122347; /* ZS-004-08 */ + --tree-panel-border: #1A2F5A; /* ZS-004-07 */ + + /* 节点 */ + --tree-node-h: 32px; + --tree-indent: 16px; + --tree-node-text: #C5CFE0; /* ZS-004-02 */ + --tree-node-text-on: #FFFFFF; + --tree-node-hover-bg: rgba(22,119,255,0.08); + --tree-node-selected-bg: #1677FF; /* ZS-002-06 整行高亮 */ + --tree-node-disabled: #4A6491; /* ZS-004-05 */ + --tree-toggle-border: #6E88B0; /* [+]/[-] 描边 */ + --tree-toggle-hover: #4096FF; /* ZS-002-05 */ + --tree-leaf-dash: #4A6491; /* 叶子短横 */ + + /* 多选复选框（复用 §16） */ + --tree-check-border: #6E88B0; /* ZS-004-04 面板内灰描边 */ + --tree-check-fill: #1677FF; /* ZS-002-06 */ + --tree-check-mark: #FFFFFF; + + /* 多选 Tag（复用 §15.2.1） */ + --tree-tag-bg: #1677FF; /* ZS-002-06 */ + --tree-tag-text: #FFFFFF; + --tree-tag-close: rgba(255,255,255,0.72); + + /* 搜索框（复用 §14.1 小号） */ + --tree-search-h: 28px; + --tree-search-bg: #0C1836; /* ZS-004-09 */ + --tree-search-border: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 20. 上传（Upload） + +> 对应设计稿「5.20 输入-上传（上）」。覆盖三种形态：**上传组件**（label + 触发按钮 + 文件名回填框）、**批量上传**（拖拽区 + 文件表格 + 底部操作）、**批量上传中**（带状态列的文件列表）。按钮复用 §5.2，输入框复用 §14.1，表格分割线复用 §6，状态色取 §1.1.2 渐红系（错误）与 §1.1.4 渐青系（成功）。其余配色从渐蓝系（ZS-002）与深蓝系（ZS-004）取。 + +### 20.1 上传组件（单文件 · 表单内） + +表单字段形态：左 `label` + 触发按钮 + 说明 + 文件名回填框。 + +``` +label [ ⬆ 上传文件 ] + 支持 DOCX/ZIP/PDF 格式，文件大小不超过 2 MB。 + 下载示例文件 +label [ 未选择文件 ] [ 选择文件 ] +``` + +#### 20.1.1 元素规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| `label` 文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | §12.2.2 | +| 「⬆ 上传文件」按钮 | 沿用 §5.2.2 默认按钮（描边 `#6E88B0` + 透明底 + `#C5CFE0` 文字），前缀上传图标同文字色 | §5.3.2 | +| 帮助说明文字 | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 「下载示例文件」链接 | `14px Regular`，`#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 文本按钮 | +| 文件名回填框 | 沿用 §14.1 输入框（高 `32px`，只读），占位 "未选择文件" `#6E88B0` | §14.1 | +| 「选择文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF` + 白字） | §5.2.1 | +| 回填框 → 按钮间距 | `--spacing-2` (8px) | §7.1 | +| 行与行纵向间距 | `--spacing-3` (12px) | §7.1 | + +### 20.2 批量上传（拖拽区 + 文件表格） + +``` +[ ⬆ 上传文件 ] 支持批量上传，上传格式为txt文件 +┌───────────────────────────────────────────────┐ +│ 文件名 大小 状态 操作 │ ← 表头 +├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ +│ │ +│ 释放鼠标 │ ← 空态 / 拖拽提示 +│ │ +└───────────────────────────────────────────────┘ + [ 取消 ] [ 开始上传 ] +``` + +#### 20.2.1 触发区 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 「⬆ 上传文件」按钮 | 沿用 §5.2.1 主按钮（实心 `#1677FF`），前缀上传图标白色 | §5.3.2 | +| 右侧格式说明 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 按钮 → 说明间距 | `--spacing-3` (12px) | §7.1 | + +#### 20.2.2 拖拽区 / 文件表格容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.3（凹陷感） | +| 容器边框 | `1px dashed #1A2F5A`（空闲）；**拖拽悬停时** `1px dashed #4096FF` (ZS-002-05) | §6.1 虚线 | +| 圆角 | `4px` | §4.1 | +| 空态提示文字「释放鼠标」 | `14px Regular`，`#4096FF` (ZS-002-05)，居中 | — | +| 容器最小高度 | `200px` | — | + +#### 20.2.3 表头 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 列 | `文件名 / 大小 / 状态 / 操作` | — | +| 文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 表头底分割线 | `1px dashed #4A6491` (ZS-004-05) | §6.1 虚线 | +| 行高 | `40px` | — | +| 水平 padding | `--spacing-4` (16px) | §7.1 | + +#### 20.2.4 底部操作 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | +| 「开始上传」 | 沿用 §5.2.1 主按钮 | §5.2.1 | +| 按钮排列 | 默认按钮在左、主按钮在右 | §5.3.4 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | +| 操作区与表格间距 | `--spacing-4` (16px)，右对齐 | §7.1 | + +### 20.3 批量上传中（带状态列） + +文件入列后逐行显示上传状态，状态色按结果区分。 + +``` +┌───────────────────────────────────────────────────────┐ +│ 文件名 大小 状态 操作 │ +├╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┤ +│ 文件名.txt ✓ 上传成功 删除 │ +│ 文件名是六个字…txt 40K ⊘ 文件格式有误 删除 │ +│ 文件名.txt 40K ◌ 上传40%… 删除 │ +│ 文件名.txt 40K ◌ 上传40%… 删除 │ +│ 文件名.txt 40K ◷ 待上传 删除 │ +└───────────────────────────────────────────────────────┘ + [ 取消 ] [ 开始上传 ] +``` + +#### 20.3.1 数据行规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 行高 | `40px` | — | +| 行间分割线 | `1px dashed #2D4473` (ZS-004-06，弱化) | §6.1 | +| 文件名文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长 `…` 省略中部 | — | +| 大小文字（数字） | `14px Regular`（D-DIN / Arial），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 「删除」操作 | 沿用 §5.2.3 文本按钮，默认 `#4096FF`，hover `#1677FF` + 下划线 | §5.2.3 | + +#### 20.3.2 状态列配色 + +| 状态 | 图标 | 图标 / 文字色 | 来源 | +|------|------|--------------|------| +| 上传成功 | ✓（实心圆勾） | `#13C2C2` (ZS-003-06，渐青/成功) | §1.1.4 | +| 文件格式有误 / 失败 | ⊘（实心圆叹号） | `#F5222D` (ZS-001-06，渐红/错误) | §1.1.2 | +| 上传中（带百分比） | ◌（旋转环） | `#1677FF` (ZS-002-06)，环旋转 `1.2s linear infinite` | §5.4.2 加载 | +| 待上传（排队） | ◷（时钟） | `#4096FF` (ZS-002-05) | §1.1.6 | + +| 属性 | 取值 | +|------|------| +| 状态图标尺寸 | `16px` | +| 图标 → 文字间距 | `--spacing-2` (8px) | +| 状态文字字号 | `14px Regular` | +| 进度文字（"上传40%…"） | 与所在状态图标同色 | + +> 进度可叠加细进度条：行底 `2px` 高，已传段 `#1677FF` (ZS-002-06)，未传段 `#1A2F5A` (ZS-004-07)，宽度按百分比。 + +### 20.4 状态流转 + +| 流转 | 触发 | +|------|------| +| 待上传 → 上传中 | 点击「开始上传」，按队列依次启动 | +| 上传中 → 上传成功 | 服务端返回 2xx，图标切 ✓，行可保留或淡出 | +| 上传中 → 失败 | 网络 / 服务端错误，图标切 ⊘，文字 `#F5222D`，可点「删除」或重试 | +| 校验即失败 | 入列时格式 / 大小不符，直接标「文件格式有误」，不进入上传 | +| 任意态 → 移除 | 点「删除」从列表移除（上传中则中断请求） | + +### 20.5 选用决策 + +| 场景 | 选择 | +|------|------| +| 表单内单文件（头像 / 附件） | §20.1 上传组件 | +| 多文件批量、需拖拽 | §20.2 批量上传 | +| 多文件需逐条看进度 / 结果 | §20.3 批量上传中 | +| 仅展示已传文件、不再上传 | 用只读文件列表，去掉状态列与底部操作 | + +### 20.6 CSS Token 参考 + +```css +:root { + /* 触发按钮（复用 §5.2） */ + --upload-btn-primary-bg: #1677FF; /* ZS-002-06 主按钮 */ + --upload-btn-outline-border: #6E88B0; /* ZS-004-04 默认按钮 */ + --upload-btn-outline-text: #C5CFE0; /* ZS-004-02 */ + + /* 说明 / 链接 */ + --upload-help-text: #4096FF; /* ZS-002-05 */ + --upload-tip-text: #6E88B0; /* ZS-004-04 */ + --upload-link: #4096FF; /* ZS-002-05 */ + --upload-link-hover: #1677FF; /* ZS-002-06 */ + + /* 文件名回填框（复用 §14.1） */ + --upload-input-bg: #0C1836; /* ZS-004-09 */ + --upload-input-border: #1A2F5A; /* ZS-004-07 */ + --upload-input-placeholder:#6E88B0; /* ZS-004-04 */ + + /* 拖拽区 / 表格容器 */ + --upload-drop-bg: #0C1836; /* ZS-004-09 */ + --upload-drop-border: #1A2F5A; /* ZS-004-07 虚线 */ + --upload-drop-border-active:#4096FF; /* ZS-002-05 拖拽悬停 */ + --upload-drop-hint: #4096FF; /* "释放鼠标" */ + + /* 表格 */ + --upload-th-text: #C5CFE0; /* ZS-004-02 */ + --upload-th-divider: #4A6491; /* ZS-004-05 表头虚线 */ + --upload-row-divider: #2D4473; /* ZS-004-06 行间虚线 */ + --upload-filename-text: #C5CFE0; /* ZS-004-02 */ + --upload-size-text: #6E88B0; /* ZS-004-04 */ + --upload-action-text: #4096FF; /* ZS-002-05 删除 */ + + /* 状态列 */ + --upload-status-success: #13C2C2; /* ZS-003-06 成功 */ + --upload-status-error: #F5222D; /* ZS-001-06 失败 */ + --upload-status-loading: #1677FF; /* ZS-002-06 上传中 */ + --upload-status-pending: #4096FF; /* ZS-002-05 待上传 */ + + /* 进度条 */ + --upload-progress-done: #1677FF; /* ZS-002-06 */ + --upload-progress-track: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 21. 弹出式窗口（Modal / Dialog） + +> 对应设计稿「弹出式窗口」。居中模态弹窗，承载多步表单 / 编辑流程。结构 = 遮罩 + 标题栏（含关闭）+ 可选 Tabs + 可选步骤条 + 表单主体 + 底部操作。Tabs 复用 §9.1.1、步骤条复用 §10.2、各表单控件复用 §14~17；本节额外定义弹窗容器、表单项布局，以及截图中出现但前文未覆盖的几个表单原子（分段按钮组 / 密码框 / 文本域 / 数字+单位 / 错误态）。配色从 §1.1.2 渐红系（错误）、§1.1.3 渐蓝系（ZS-002）、§1.1.5 深蓝系（ZS-004）取。 + +### 21.1 遮罩与容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 遮罩背景 | `rgba(6, 14, 36, 0.6)`（基于 ZS-004-10） | §3.1.4 | +| 遮罩动画 | `opacity 0 → 1`，`200ms ease-out` | — | +| 容器背景 | `linear-gradient(180deg, #122347 0%, #0C1836 100%)`（ZS-004-08 → ZS-004-09） | §8.2.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px`（§4.1 Modal/Drawer） | §4.1 | +| 容器阴影 | `0 8px 32px rgba(6, 14, 36, 0.6)`（§3.1.4 三级阴影） | §3.1.4 | +| 容器内边距 | `--spacing-6` (32px) | §7.1 | +| 弹出动画 | `scale(0.96) → 1` + `opacity 0 → 1`，`200ms ease-out` | — | +| 宽度档位 | 小 `480px` / 中 `640px` / 大 `800px`（按内容选） | — | + +### 21.2 标题栏 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题文字 | `20px Bold`，`#FFFFFF`，**水平居中** | §2.1.2 | +| 标题下分隔线 | `linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%)`，`1px` 高 | §8.2.4 | +| 关闭按钮 `×` | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` (ZS-002-05) | §5.2.4 | +| 关闭按钮位置 | 右上角，距容器上 / 右内边距对齐 | — | +| 标题栏 → 主体间距 | `--spacing-5` (24px) | §7.1 | + +### 21.3 内嵌 Tabs 与步骤条 + +| 组件 | 复用 | 备注 | +|------|------|------| +| 顶部 Tabs（`Tab1选中 / Tab2默认`） | §9.1.1 横向页签 | 激活 `#4096FF` + `2px` 下划线，下方通栏基线 `1px solid #1A2F5A` | +| 步骤条（`第一步 ✓ / 第二步 ② / 第三步 ③`） | §10.2 弹窗步骤条 | 完成态描边圆 + 蓝勾，当前态实心 `#1677FF` + 白字，未开始描边 `#4A6491`；连接线 `1px dashed` | +| Tabs → 步骤条间距 | `--spacing-5` (24px) | — | +| 步骤条 → 表单间距 | `--spacing-5` (24px) | — | + +### 21.4 表单项布局 + +弹窗内表单采用**左 label + 右控件**横向布局。 + +| 元素 | 规格 | 来源 | +|------|------|------| +| label 文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，**右对齐** | — | +| label 列宽 | 固定（如 `96px`），右侧留 `--spacing-3` (12px) 到控件 | §7.1 | +| 必填星号 `*` | `#F5222D` (ZS-001-06)，置于 label 前 | §1.1.2 | +| 表单项纵向间距 | `--spacing-4` (16px) | §7.1 | +| 控件默认宽度 | 撑满 label 右侧剩余区 | — | +| label 与控件垂直对齐 | 控件首行基线居中 | — | + +#### 21.4.1 错误态与校验信息 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 错误边框 | `1px solid #F5222D` + 外发光 `0 0 0 2px rgba(245,34,45,0.16)` | §14.1.1 错误 | +| 错误提示文字（如「输入表单内容报错」） | `12px Regular`，`#F5222D` (ZS-001-06) | §1.1.2 | +| 提示文字位置 | 控件正下方，左对齐于控件 | — | +| 控件 → 提示文字间距 | `--spacing-1` (4px) | §7.1 | + +### 21.5 表单控件补充 + +截图中出现、前文未单列的控件原子： + +#### 21.5.1 分段按钮组（Segmented，如「一级风险 / 二级风险」） + +并排互斥按钮，选中态高亮。 + +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 未选 | `transparent` | `1px solid #6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) | +| 选中 | `rgba(22,119,255,0.16)` | `1px solid #1677FF` (ZS-002-06) | `#4096FF` (ZS-002-05) | +| Hover（未选） | `rgba(22,119,255,0.08)` | `#4096FF` | `#4096FF` | +| 禁用 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` | + +- 高度 `32px`，圆角 `2px`（§4.1），内边距 `0 14px` +- 相邻项间距 `--spacing-2` (8px)（独立按钮形态）；若做无缝连体段则共用一条 `1px #1A2F5A` 分隔 + +#### 21.5.2 密码输入框（可见性切换） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 输入框 | 沿用 §14.1 公共规格 | §14.1 | +| 掩码字符 | `●` / `*`，`#C5CFE0` | — | +| 右侧眼睛图标 `👁 / 👁‍🗨` | `16px`，`#6E88B0`，hover `#4096FF` | ZS-002-05 | +| 切换行为 | 点击图标在「明文 / 掩码」间切换 | — | + +#### 21.5.3 禁用输入框（「未填-禁用」） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 边框 | `1px solid #2D4473` (ZS-004-06) | §14.1.1 失效 | +| 背景 | `rgba(22,119,255,0.04)` | — | +| 占位 / 文字 | `#4A6491` (ZS-004-05) | — | +| 光标 | `not-allowed` | — | + +#### 21.5.4 文本域（Textarea） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 边框 / 背景 / 状态机 | 同 §14.1 输入框 | §14.1 | +| 最小高度 | `96px`（约 4 行） | — | +| 内边距 | `--spacing-3` (12px) | §7.1 | +| 占位文字 | "请输入"，`#6E88B0` | — | +| 圆角 | `2px` | §4.1 | +| 右下角缩放手柄 | 可选，`#4A6491` | — | + +#### 21.5.5 数字 + 单位输入（「100 天」） + +输入框右侧无缝拼一个**实心主色蓝单位块**。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 数字输入区 | 沿用 §14.1，右边框去除（与单位块拼接） | §14.1 | +| 单位块背景 | `#1677FF` (ZS-002-06) | §14.3 后台搜索框按钮 | +| 单位块文字 | `14px Regular`，`#FFFFFF` | — | +| 单位块内边距 | `0 --spacing-3`（12px） | — | +| 整体高度 | `32px`，右侧两角圆角 `2px` | §4.1 | + +#### 21.5.6 行内日期 / 范围 / 下拉 / 复选 + +| 控件 | 复用 | +|------|------| +| 「威胁类型 请选择 ▾」 | §15.1 选择器触发器 | +| 「首发时间」日期时间 | §17.1 日期触发器（错误态见 §21.4.1） | +| 「周期 … 至 …」范围 | §17.1 范围触发器变体 | +| 「该账户仅允许…」复选框 | §16.3 多选 | + +### 21.6 底部操作 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 区域顶部间距 | `--spacing-5` (24px)（与主体留白） | §7.1 | +| 按钮对齐 | 右对齐（也可整体居中，跟随设计稿——本稿居中） | §5.3.4 | +| 「取消」 | 沿用 §5.2.2 默认按钮 | §5.2.2 | +| 「保存」/「确定」 | 沿用 §5.2.1 主按钮 | §5.2.1 | +| 排列顺序 | 默认按钮在左、主按钮在右 | §5.3.4 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 21.7 交互 + +| 行为 | 规则 | +|------|------| +| 打开 | 遮罩淡入 + 容器 `scale(0.96)→1`，焦点落到首个可输入控件 | +| 关闭 | 点 `×` / 「取消」 / 遮罩外 / `Esc`；有未保存改动时可二次确认 | +| 提交 | 「保存」前做校验，失败项标 §21.4.1 错误态并滚动到首个错误 | +| 焦点陷阱 | `Tab` 循环限制在弹窗内（不泄漏到背景页面） | + +### 21.8 CSS Token 参考 + +```css +:root { + /* 遮罩与容器 */ + --modal-mask: rgba(6,14,36,0.6); /* ZS-004-10 */ + --modal-bg-top: #122347; /* ZS-004-08 */ + --modal-bg-bottom: #0C1836; /* ZS-004-09 */ + --modal-border: #1A2F5A; /* ZS-004-07 */ + --modal-radius: 4px; + --modal-shadow: 0 8px 32px rgba(6,14,36,0.6); + + /* 标题 */ + --modal-title-text: #FFFFFF; + --modal-title-line: linear-gradient(90deg, transparent, #1677FF, transparent); + --modal-close: #6E88B0; /* ZS-004-04 */ + --modal-close-hover: #4096FF; /* ZS-002-05 */ + + /* 表单项 */ + --form-label: #C5CFE0; /* ZS-004-02 */ + --form-required: #F5222D; /* ZS-001-06 */ + --form-error-border: #F5222D; + --form-error-ring: 0 0 0 2px rgba(245,34,45,0.16); + --form-error-text: #F5222D; + + /* 分段按钮组 */ + --seg-border: #6E88B0; /* ZS-004-04 未选 */ + --seg-selected-bg: rgba(22,119,255,0.16); + --seg-selected-border: #1677FF; /* ZS-002-06 */ + --seg-selected-text: #4096FF; /* ZS-002-05 */ + + /* 数字+单位 */ + --unit-addon-bg: #1677FF; /* ZS-002-06 */ + --unit-addon-text: #FFFFFF; + + /* 禁用输入 */ + --input-disabled-border:#2D4473; /* ZS-004-06 */ + --input-disabled-bg: rgba(22,119,255,0.04); + --input-disabled-text: #4A6491; /* ZS-004-05 */ +} +``` + +--- + diff --git a/frontend-web/docs/ui规范-深蓝/03-数据展示.md b/frontend-web/docs/ui规范-深蓝/03-数据展示.md new file mode 100644 index 00000000..21099f04 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/03-数据展示.md @@ -0,0 +1,1379 @@ +# 深蓝色 UI 规范 · 03 数据展示（§22–§34） + +> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。 + +**本篇目录（§22–§34）**：`22` 卡片 · `23` 折叠面板 · `24` 描述列表 · `25` 列表 · `26` 时间轴(节点型) · `27` 进度条 · `28` 表格 · `29` 标签 · `30` 树形控件 · `31` 时间轴(长文本) · `32` 对话框 · `33` 全局提示 · `34` 气泡确认 + +--- + +## 22. 卡片（Card） + +> 对应设计稿「卡片」基本形式与组合（分组信息卡片）。覆盖**基础卡片**（标题 + 操作）、**新增占位卡片**、**信息卡片**（头像 + 字段 + 标签 + 统计）三类。容器 / 阴影 / 占位卡片配色直接沿用 §3.1，按钮 / 文本按钮沿用 §5，标签沿用 §15.2.1。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 22.1 基础卡片（标题 + 操作） + +``` +┌───────────────────────────┐ +│ ▎标题16PX ✏️ ⋯ │ ← 标题栏（左竖条 + 标题 + 右操作） +├───────────────────────────┤ +│ 卡片内容 … │ +└───────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 卡片圆角 | `4px` | §4.1 | +| 卡片阴影 | `0 2px 8px rgba(22,119,255,0.12)`（§3.1.4 一级） | §3.1.4 | +| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | +| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §1.1.6 | +| 编辑图标 ✏️ | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` | §3.1.2 | +| 更多图标 ⋯ | `16px`，`#6E88B0`，hover `#4096FF` | — | +| 标题栏内边距 | `--spacing-4` (16px) | §7.1 | +| 标题栏底分割线 | `1px solid #1A2F5A` | §6.1 | +| 内容区内边距 | `--spacing-4` (16px) | §7.1 | +| 卡片 hover | 阴影升二级 `0 4px 16px rgba(22,119,255,0.24)` | §3.1.4 | + +### 22.2 新增占位卡片 + +虚线描边的「+ 新增」入口，沿用 §3.1.3。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 背景 | `#0C1836` (ZS-004-09，与外层同色营造凹陷) | §3.1.3 | +| 虚线边框 | `1px dashed #4096FF` (ZS-002-05) | §3.1.3 | +| 加号图标 `+` | `24px`，`#4096FF`，居中 | §3.1.3 | +| 圆角 | `4px` | §4.1 | +| Hover | 边框 + 加号 `#1677FF` (ZS-002-06)，背景 `rgba(22,119,255,0.08)` | — | +| 尺寸 | 与同行内容卡片等高等宽 | — | + +### 22.3 信息卡片（头像 + 字段 + 标签 + 统计） + +用于「分组信息卡片」——展示个体 / 媒体 / 人物等档案条目。 + +``` +┌──────────────────────────────────────┐ +│ ▎个体 ✏️ 标签 ✕ │ ← 头部：类型标识 + 操作 +│ 👤 姓名（Name-name） 🔖 在线标签 │ ← 头像 + 主名 + 状态标签 +│ 基本信息 样下功能▾ 线上发声▾ │ ← 字段/操作行 +│ 国家/地区：国家恒及 │ +│ 职能：职务职务 │ +│ 关注度排行：#话题二 #话题二 #话题二 │ ← 标签组 +└──────────────────────────────────────┘ +``` + +#### 22.3.1 结构与配色 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | — | +| 类型标识（个体 / 媒体）左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | +| 类型标识文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 头像占位 | 方/圆 `40px`，底色 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | — | +| 主名文字 | `16px Medium`，`#FFFFFF` | — | +| 字段标签（"国家/地区：") | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 字段值 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 行内操作（"线上发声 ▾"） | 沿用 §5.3.1 文字+下拉按钮（默认 Outline） | §5.3.1 | +| 状态标签（"在线"等） | 沿用 §15.2.1 Tag（实心 `#1677FF` + 白字）或成功态 `#13C2C2`（ZS-003-06） | §15.2.1 / §1.1.4 | +| 话题标签（`#话题`） | `12px`，文字 `#4096FF` (ZS-002-05)，背景 `rgba(22,119,255,0.12)`，圆角 `2px` | — | +| 头部操作图标 ✏️ / ✕ | `16px`，`#6E88B0`，hover `#4096FF` | §22.1 | +| 字段行纵向间距 | `--spacing-2` (8px) | §7.1 | +| 区块之间间距 | `--spacing-3` (12px) | §7.1 | + +#### 22.3.2 带统计的媒体卡片变体 + +媒体类卡片在字段区下方追加「平台 + 数值」统计行（如 Facebook 群组数量）： + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 平台图标 | `16px`，原色或 `#4096FF` 单色化 | — | +| 统计标签（"群组数量"） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 统计数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | +| 统计行分隔 | `1px solid #2D4473`（弱化） | §6.1 | + +### 22.4 卡片栅格与间距 + +| 规则 | 取值 | 来源 | +|------|------|------| +| 卡片之间横向间距 | `--spacing-6` (32px) | §7.1 | +| 卡片之间纵向间距 | `--spacing-6` (32px) | §7.1 | +| 卡片内容内边距 | `--spacing-4` (16px) | §7.1 | +| 分组标题（"分组信息卡片"）→ 卡片区 | `--spacing-5` (24px) | §7.1 | + +### 22.5 CSS Token 参考 + +```css +:root { + /* 卡片容器 */ + --card-bg: #122347; /* ZS-004-08 */ + --card-border: #1A2F5A; /* ZS-004-07 */ + --card-radius: 4px; + --card-shadow: 0 2px 8px rgba(22,119,255,0.12); + --card-shadow-hover: 0 4px 16px rgba(22,119,255,0.24); + + /* 标题 */ + --card-title-text: #C5CFE0; /* ZS-004-02 */ + --card-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --card-action-icon: #6E88B0; /* ZS-004-04 */ + --card-action-hover: #4096FF; /* ZS-002-05 */ + + /* 新增占位 */ + --card-add-bg: #0C1836; /* ZS-004-09 */ + --card-add-border: #4096FF; /* ZS-002-05 虚线 */ + --card-add-hover: #1677FF; /* ZS-002-06 */ + + /* 信息卡片 */ + --card-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --card-name-text: #FFFFFF; + --card-field-label: #6E88B0; /* ZS-004-04 */ + --card-field-value: #C5CFE0; /* ZS-004-02 */ + --card-topic-tag-text:#4096FF; /* ZS-002-05 */ + --card-topic-tag-bg: rgba(22,119,255,0.12); + --card-stat-num: #C5CFE0; /* ZS-004-02 */ + --card-stat-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 23. 折叠面板（Collapse / 手风琴） + +> 对应设计稿「折叠」。覆盖**基础折叠**（标题 + 描述）、**列表概览折叠 + 图标**、**手风琴折叠**（同时仅一项展开）、**列表项折叠**（右侧带计数 + 展开链接）四类。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，与 §8 导航下拉 / §9.2 锚点一致。 + +### 23.1 基础折叠（标题 + 描述） + +``` +收起态: 展开态: +┌────────────────────────┐ ┌────────────────────────┐ +│ 标题 ▾ │ │ 标题 ▴ │ +│ 描述文字说明 │ │ 描述文字说明 │ +└────────────────────────┘ ├────────────────────────┤ + │ 展开后的内容区 … │ + └────────────────────────┘ +``` + +#### 23.1.1 头部规格 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 头部背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 头部边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 头部圆角 | `4px`（展开时下两角变直角） | §4.1 | +| 标题文字 | `16px Medium`，`#C5CFE0` (ZS-004-02)；展开时 `#FFFFFF` | — | +| 描述文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 展开箭头 `▾ / ▴` | `14px`，`#6E88B0`，hover `#4096FF` (ZS-002-05) | ZS-002-05 | +| 头部高度 | `≥ 48px`（含描述时自适应） | — | +| 头部内边距 | `--spacing-4` (16px) | §7.1 | +| 头部 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | + +#### 23.1.2 内容区 + +| 属性 | 取值 | +|------|------| +| 背景 | `#0C1836` (ZS-004-09，比头部深一档) | +| 内边距 | `--spacing-4` (16px) | +| 顶部分割线 | `1px solid #1A2F5A` (ZS-004-07) | +| 文字 | `14px Regular`，`#C5CFE0` | + +### 23.2 列表概览折叠 + 图标 + +头部标题前增加一个小图标（业务图标），其余同 §23.1。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 前缀小图标 | `16px`，`#4096FF` (ZS-002-05) | — | +| 图标 → 标题间距 | `--spacing-2` (8px) | §7.1 | + +### 23.3 手风琴折叠（互斥单开） + +多个折叠项垂直堆叠，**同一时刻仅允许一项展开**，展开新项时自动收起其它项。 + +``` +┌────────────────────────────────────────┐ +│ ▸ 把了 1300 多万元！他们靠卖「口罩」… 收起 │ ← 展开项（高亮） +│ 描述正文段落描述正文段落 … │ +├────────────────────────────────────────┤ +│ ▸ 某条新闻标题某条新闻标题 … 展开 │ +├────────────────────────────────────────┤ +│ ▸ 某科学家�证据曝光为何争不下 … 展开 │ +└────────────────────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 项之间分隔 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 收起项标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 展开项标题 | `14px Medium`，`#FFFFFF` | — | +| 展开项左强调条 | 可选 `2px solid #1677FF` (ZS-002-06)，贴左缘 | §8.3.2 激活 | +| 右侧「展开 / 收起」文字按钮 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` | §5.2.3 | +| 行高 | `≥ 40px` | — | + +### 23.4 列表项折叠（右侧计数 + 展开） + +紧凑列表，每行右侧带一个计数徽标 + 「展开」链接（常用于评论 / 回复折叠）。 + +``` +收起的折叠标题某某某某某 🔺 6405 展开 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，过长省略 | — | +| 计数图标 | `12px`，`#F5222D`（热度红，ZS-001-06）或 `#4096FF` | §1.1.2 / §1.1.6 | +| 计数数字 | `14px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 「展开 / 收起」 | 沿用 §5.2.3 文本按钮 | §5.2.3 | +| 行高 | `36px` | — | +| 行间分割线 | `1px solid #2D4473`（弱化） | §6.1 | +| 行 Hover 背景 | `rgba(22,119,255,0.08)` | — | + +### 23.5 交互与动画 + +| 行为 | 动效 | 来源 | +|------|------|------| +| 展开 / 收起 | 内容高度 `0 → auto`，`opacity 0 → 1`，`200ms ease-out` | §8.5 | +| 箭头旋转 | `▾ → ▴`（`rotate 180deg`），`200ms ease-out` | §8.5 | +| 手风琴互斥 | 展开新项时旧项同步收起，两者动画并行 | — | +| Hover 背景过渡 | `120ms ease-out` | §8.5 | + +### 23.6 三种折叠的选用决策 + +| 场景 | 选择 | +|------|------| +| 单个区块「展开看详情」 | §23.1 基础折叠 | +| 带分类图标的概览块 | §23.2 列表概览折叠 + 图标 | +| 多块互斥、节省纵向空间 | §23.3 手风琴折叠 | +| 长列表内逐条折叠（评论 / 回复） | §23.4 列表项折叠 | + +### 23.7 CSS Token 参考 + +```css +:root { + /* 头部 */ + --collapse-head-bg: #122347; /* ZS-004-08 */ + --collapse-head-border: #1A2F5A; /* ZS-004-07 */ + --collapse-title: #C5CFE0; /* ZS-004-02 */ + --collapse-title-open: #FFFFFF; + --collapse-desc: #6E88B0; /* ZS-004-04 */ + --collapse-arrow: #6E88B0; + --collapse-arrow-hover: #4096FF; /* ZS-002-05 */ + --collapse-head-hover-bg: rgba(22,119,255,0.08); + --collapse-icon: #4096FF; /* 前缀图标 */ + + /* 内容区 */ + --collapse-body-bg: #0C1836; /* ZS-004-09 */ + --collapse-body-divider: #1A2F5A; /* ZS-004-07 */ + + /* 手风琴 / 列表项 */ + --collapse-item-divider: #1A2F5A; /* ZS-004-07 */ + --collapse-item-active-bar:#1677FF; /* ZS-002-06 */ + --collapse-toggle-text: #4096FF; /* ZS-002-05 文本按钮 */ + --collapse-toggle-hover: #1677FF; /* ZS-002-06 */ + --collapse-count-icon: #F5222D; /* ZS-001-06 热度 */ + --collapse-count-num: #6E88B0; /* ZS-004-04 */ + --collapse-row-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 24. 描述列表（Descriptions） + +> 对应设计稿「6.7 数据展示-描述」。用于档案 / 详情页的**键值对表格**展示（账号名 / 密码等字段）。整体是一张带边框的两列表格：左列字段名、右列字段值，行底色**斑马交替**。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 24.1 区块标题 + +``` +▎资源信息 +──────────────────────── +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题左竖条 | `3px × 16px`，`#1677FF` (ZS-002-06) | §22.1 | +| 标题文字 | `16px Bold`，`#C5CFE0` (ZS-004-02) | §3.1.2 | +| 标题下分隔线 | `1px solid #1A2F5A` (ZS-004-07)，通栏 | §6.1 | +| 标题 → 表格间距 | `--spacing-4` (16px) | §7.1 | + +### 24.2 表格容器与单元格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 外层容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 表格边框 | `1px solid #1A2F5A` (ZS-004-07)（外框 + 单元格描边） | §6.1 | +| 单元格行高 | `44px` | — | +| 单元格水平 padding | `--spacing-4` (16px) | §7.1 | +| 标签列（左）宽度 | 固定 `≥ 120px` | — | +| 圆角 | 外层 `4px`，内部单元格直角 | §4.1 | + +### 24.3 行配色（斑马交替） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标签列文字（"账号名 / 密码"） | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 值列文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 奇数行背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 偶数行背景 | `#0C1836` (ZS-004-09，略深，形成斑马) | §3.1.1 | +| 行 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | +| 行间 / 列间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | + +### 24.4 值内操作（如密码「查看」） + +值列可内嵌文本按钮（如密码掩码后的「查看」切换明文）。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 掩码字符 | `*` / `●`，`#C5CFE0` (ZS-004-02) | — | +| 「查看 / 隐藏」 | 沿用 §5.2.3 文本按钮，`#4096FF` → hover `#1677FF` + 下划线 | §5.2.3 | +| 掩码 → 操作间距 | `--spacing-2` (8px) | §7.1 | + +### 24.5 布局变体 + +| 变体 | 说明 | 来源 | +|------|------|------| +| 单列（一问一答竖排） | 每行一个字段，标签列固定宽，值列撑满（本节默认） | — | +| 双列（一行两组键值） | 宽容器下并排两组「标签+值」，组间分割线 `1px solid #1A2F5A` | §6.2 | +| 纯展示无边框 | 去掉单元格描边，仅保留行间细线 `1px solid #2D4473`，用于轻量详情 | §6.1 | + +### 24.6 选用决策 + +| 场景 | 选择 | +|------|------| +| 档案 / 详情字段（键值对） | §24 描述列表 | +| 多行同结构数据（可排序 / 翻页） | 改用数据表格 Table（另见表格规范） | +| 字段数 ≤ 4 且轻量 | §24.5 纯展示无边框变体 | + +### 24.7 CSS Token 参考 + +```css +:root { + /* 区块标题 */ + --desc-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --desc-title-text: #C5CFE0; /* ZS-004-02 */ + --desc-title-divider: #1A2F5A; /* ZS-004-07 */ + + /* 表格 */ + --desc-wrap-bg: #0C1836; /* ZS-004-09 */ + --desc-border: #1A2F5A; /* ZS-004-07 */ + --desc-row-h: 44px; + --desc-label-text: #C5CFE0; /* ZS-004-02 */ + --desc-value-text: #C5CFE0; /* ZS-004-02 */ + --desc-row-odd-bg: #122347; /* ZS-004-08 斑马奇行 */ + --desc-row-even-bg: #0C1836; /* ZS-004-09 斑马偶行 */ + --desc-row-hover-bg: rgba(22,119,255,0.08); + + /* 值内操作 */ + --desc-action-text: #4096FF; /* ZS-002-05 查看 */ + --desc-action-hover: #1677FF; /* ZS-002-06 */ + + /* 无边框变体 */ + --desc-light-divider: #2D4473; /* ZS-004-06 */ +} +``` + +--- + +## 25. 列表（List） + +> 对应设计稿「6.9 数据展示-列表」。用于信息流 / 评论 / 动态等条目列表，每条 = 头像 + 主名 + 来源标识 + 时间 + 正文。整体包在一个卡片容器内，条目之间用细分割线隔开。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 25.1 容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px` | §4.1 | +| 容器内边距 | `--spacing-5` (24px) | §7.1 | +| 区块标题「列表」 | `16px Bold`，`#FFFFFF`，置于容器外上方 | §12.2.1 | + +### 25.2 列表条目 + +``` +👤ⓕ Speaker Kevin McCarthy 2023-12-31 18:00:00 + 48923056 + 当我们的退伍军人重新进入平民生活时，他们应该得到最好的职业机会…… +────────────────────────────────────────────────────────────────────── +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 头像 | `40px` 方/圆，底色 `#1A2F5A` (ZS-004-07) | §22.3.1 | +| 来源角标（如 Ⓕ Facebook） | `14px`，叠在头像右下角，原色或 `#4096FF` 单色化 | — | +| 主名文字 | `16px Bold`，`#FFFFFF` | — | +| 副 ID（如 `48923056`） | `14px Regular`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 时间文字（右上角） | `14px Regular`（D-DIN 数字），`#4096FF` (ZS-002-05) | §2.1.2 | +| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02)，行高 `1.6` | — | +| 头像 → 文字间距 | `--spacing-3` (12px) | §7.1 | +| 主名 → 副 ID 间距 | `--spacing-1` (4px) | §7.1 | +| 副 ID → 正文间距 | `--spacing-2` (8px) | §7.1 | +| 条目内边距 | 上下 `--spacing-4` (16px) | §7.1 | +| 条目间分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 条目 Hover 背景 | `rgba(22,119,255,0.08)` | §8.4.3 | + +### 25.3 变体与状态 + +| 变体 / 状态 | 规则 | +|------------|------| +| 带操作的条目 | 右侧追加文本按钮区（点赞 / 评论 / 更多），沿用 §5.2.3、§5.3.3 | +| 正文折叠 | 超过 N 行用「展开」收起，沿用 §23.4 列表项折叠 | +| 空列表 | 居中提示「暂无数据」，`14px Regular`，`#6E88B0` (ZS-004-04) | +| 加载更多 | 底部「加载更多 »」文本按钮（§5.3.3）或滚动自动加载 | + +### 25.4 CSS Token 参考 + +```css +:root { + --list-wrap-bg: #0C1836; /* ZS-004-09 */ + --list-wrap-border: #1A2F5A; /* ZS-004-07 */ + --list-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --list-name-text: #FFFFFF; + --list-subid-text: #4096FF; /* ZS-002-05 */ + --list-time-text: #4096FF; /* ZS-002-05 */ + --list-body-text: #C5CFE0; /* ZS-004-02 */ + --list-divider: #1A2F5A; /* ZS-004-07 */ + --list-row-hover-bg: rgba(22,119,255,0.08); + --list-empty-text: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 26. 时间轴（Timeline） + +> 对应设计稿「6.11 数据展示」左半与「全局时间轴」。覆盖**基础时间轴点**、**卡片式时间轴**、**全局时间轴**（横向刻度 + 区间滑块）三类。节点圆 / 连接线沿用 §10 步骤条逻辑，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 26.1 基础时间轴点（纵向） + +``` +● WirdPress多处绝对路径泄漏 +┊ 12-03 02:21:47 +● WirdPress多处绝对路径泄漏 +┊ 12-03 02:21:47 +● WirdPress多处绝对路径泄漏 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 容器背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 节点圆点 | 实心圆 `8px`，`#1677FF` (ZS-002-06)；外可加 `2px` 同色半透明光圈 | §10.1 | +| 连接线 | `1px solid #2D4473` (ZS-004-06)，垂直贯穿节点 | §10.1 | +| 标题文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 时间文字 | `12px Regular`（D-DIN），`#6E88B0` (ZS-004-04) | §2.1.2 | +| 节点圆 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 节点垂直间距 | `--spacing-5` (24px)，圆心到圆心 | §10.4.2 | +| 当前 / 最新节点 | 圆点加亮 `#4096FF` + 外光圈 | — | + +### 26.2 卡片式时间轴 + +每个时间节点挂一张内容卡片（时间在卡外、内容在卡内）。 + +``` +● 2021-12-03 14:25:44 +┊ ┌──────────────────────────┐ +┊ │ 零报告上报 │ +┊ │ 安全状况： 今日无安全风险 │ +┊ └──────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 节点圆点 / 连接线 | 同 §26.1 | — | +| 时间标题 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 卡片背景 | `#0C1836` (ZS-004-09，比容器深一档) | §3.1.3 | +| 卡片边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 卡片圆角 | `4px` | §4.1 | +| 卡片内边距 | `--spacing-3` (12px) | §7.1 | +| 卡片标题（"零报告上报"） | `14px Medium`，`#C5CFE0` | — | +| 字段标签（"安全状况："） | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 字段值（"今日无安全风险"） | `14px Regular`，`#4096FF` (ZS-002-05) | — | +| 时间 → 卡片间距 | `--spacing-2` (8px) | §7.1 | + +### 26.3 全局时间轴（横向刻度 + 区间滑块） + +顶部横条，承载连续时间刻度与一个可拖拽的**区间选择滑块**。 + +``` + ● +├──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤ +04-03 04-04 04-03 04-04 ▓▓▓▓▓▓▓▓ 04-04 04-03 … + └─区间滑块（蓝色高亮段）─┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轨道背景 | `#0C1836` (ZS-004-09) | — | +| 刻度基线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 刻度文字（日期） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 游标点（顶部 ●） | 实心圆 `8px`，`#FFFFFF` + `1px #1677FF` 描边 | — | +| 选中区间段 | `rgba(22,119,255,0.32)` 矩形底 + 上下边 `1px solid #1677FF` | §1.1.6 | +| 区间两端手柄 | `4px × 全高` 实心 `#1677FF` (ZS-002-06) | — | +| 轨道高度 | `≥ 56px`（含刻度文字） | — | +| Hover 刻度 | 文字 `#4096FF` | §1.1.6 | + +### 26.4 选用决策 + +| 场景 | 选择 | +|------|------| +| 纯事件流（标题 + 时间） | §26.1 基础时间轴点 | +| 每个节点带结构化内容 | §26.2 卡片式时间轴 | +| 长跨度时间筛选 / 缩放 | §26.3 全局时间轴（区间滑块） | + +### 26.5 CSS Token 参考 + +```css +:root { + --timeline-wrap-bg: #122347; /* ZS-004-08 */ + --timeline-wrap-border: #1A2F5A; /* ZS-004-07 */ + --timeline-dot: #1677FF; /* ZS-002-06 */ + --timeline-dot-active: #4096FF; /* ZS-002-05 */ + --timeline-line: #2D4473; /* ZS-004-06 */ + --timeline-title: #C5CFE0; /* ZS-004-02 */ + --timeline-time: #6E88B0; /* ZS-004-04 */ + + /* 卡片式 */ + --timeline-card-bg: #0C1836; /* ZS-004-09 */ + --timeline-card-border: #1A2F5A; /* ZS-004-07 */ + --timeline-field-label: #6E88B0; /* ZS-004-04 */ + --timeline-field-value: #4096FF; /* ZS-002-05 */ + + /* 全局时间轴 */ + --gtimeline-track-bg: #0C1836; /* ZS-004-09 */ + --gtimeline-baseline: #1A2F5A; /* ZS-004-07 */ + --gtimeline-tick: #6E88B0; /* ZS-004-04 */ + --gtimeline-range-fill: rgba(22,119,255,0.32); + --gtimeline-range-edge: #1677FF; /* ZS-002-06 */ + --gtimeline-cursor: #FFFFFF; +} +``` + +--- + +## 27. 进度条（Progress） + +> 对应设计稿「6.11 数据展示-进度条」右半。覆盖**标准线性进度条**、**小型进度条**、**环形进度条**三类。进度色按语义分**成功 / 进行中 / 失败**三态。 +> +> ℹ️ **语义色说明**：成功绿 / 警告橙已正式收录 §1.1.9 功能语义色，本节进度色统一引用之（见 §27.4 与 `tokens.css` 的 `--func-*`）。 + +### 27.1 标准线性进度条 + +``` +████████████████████████ 100% ✓ ← 成功（绿） +██████████████░░░░░░░░░░ 80% ✗ ← 失败（红） +██████████████░░░░░░░░░░ 80% ← 进行中（橙） +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轨道（未完成段） | `#1A2F5A` (ZS-004-07) | §6.1 | +| 已完成段-成功 | `#52C41A`（成功绿，§1.1.9） / 近似 `#13C2C2`(ZS-003-06) | §27.4 | +| 已完成段-失败 | `#F5222D` (ZS-001-06) | §1.1.2 | +| 已完成段-进行中 | `#FAAD14`（警告橙，§1.1.9） | §27.4 | +| 条高 | `8px`，圆角 `4px`（两端半圆） | §4.1 | +| 百分比文字 | `14px Regular`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | +| 尾部状态图标 | 成功 ✓（绿圆）/ 失败 ✗（红圆），`16px` | §20.3.2 | +| 条 → 百分比间距 | `--spacing-2` (8px) | §7.1 | + +### 27.2 小型进度条 + +用于较窄区域（如表格单元格内）。规格同 §27.1，仅尺寸收缩： + +| 属性 | 取值 | +|------|------| +| 条高 | `4px` | +| 百分比文字 | `12px Regular` | +| 尾部状态图标 | `12px` | +| 条宽 | 自适应容器（最小 `48px`） | + +### 27.3 环形进度条 + +``` + ╭───╮ ╭───╮ ╭───╮ + │22.4%│ │47.8%│ │82.0%│ + │ 名称│ │ 名称│ │ 名称│ + ╰───╯ ╰───╯ ╰───╯ + (蓝) (橙) (红/混) +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 环轨道（底） | `#1A2F5A` (ZS-004-07) | — | +| 环进度段 | 按语义取 成功绿 / 进行中橙 / 失败红 / 主色蓝 `#1677FF` | §27.4 | +| 环宽 | `6px`，端点圆头（`stroke-linecap: round`） | — | +| 中心百分比 | `16px Bold`（D-DIN），`#FFFFFF` | §2.1.2 | +| 中心名称 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 直径 | `72px`（默认） | — | +| 起始角 | 顶部 12 点钟，顺时针填充 | — | + +### 27.4 状态语义色（引用 §1.1.9） + +> 进度条 / §29 状态标签的语义色统一引用 §1.1.9 功能语义色，CSS 用 `tokens.css` 的 `--func-*`；下表保留来源对照。 + +| 语义 | 色值 | §1.1.9 来源 | Token | +|------|-----------|--------------|------| +| 成功 / 已完成 | `#52C41A` | 补充色绿 | `--func-success` | +| 进行中 / 警告 | `#FAAD14` | 补充色橙 | `--func-warning` | +| 失败 / 错误 | `#F5222D` | ZS-001-06 | `--func-error` | +| 信息 / 默认 | `#1677FF` / `#4096FF` | ZS-002-06 / ZS-002-05 | `--func-info` | +| 处理中 / 等待 | `#13C2C2` | ZS-003-06 | `--func-processing` | + +> 历史说明：成功绿 / 警告橙此前未进标准色，现已正式收录 §1.1.9，本节与 §29 状态标签均引用之。 + +### 27.5 CSS Token 参考 + +```css +:root { + /* 功能语义色（定义见 §1.1.9 / tokens.css；此处为分册自包含副本） */ + --func-success: #52C41A; /* 成功绿 §1.1.9 */ + --func-warning: #FAAD14; /* 警告橙 §1.1.9 */ + --func-error: #F5222D; /* ZS-001-06 */ + --func-info: #1677FF; /* ZS-002-06 */ + --func-processing: #13C2C2; /* ZS-003-06 */ + + /* 进度条 */ + --progress-track: #1A2F5A; /* ZS-004-07 */ + --progress-success: var(--func-success); + --progress-error: var(--func-error); + --progress-active: var(--func-warning); + --progress-num: #C5CFE0; /* ZS-004-02 */ + + /* 环形 */ + --circle-track: #1A2F5A; /* ZS-004-07 */ + --circle-num: #FFFFFF; + --circle-label: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 28. 表格（Table） + +> 对应设计稿「6.13 数据展示-表格」。后台列表主力组件：表头 + 数据行（斑马 / hover / 选中）+ 勾选列 + 内联编辑 + 状态列（复用 §29 标签）+ 操作列（复用 §5.2.3 文本按钮）。表头 / 边框 / 斑马沿用 §24 描述列表与 §6 分割线规则。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 28.1 表格容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 外边框 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 圆角 | `4px` | §4.1 | + +### 28.2 表头（Header） + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 表头背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 表头文字 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 表头行高 | `44px` | — | +| 列水平 padding | `--spacing-4` (16px) | §7.1 | +| 表头底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 排序图标 `▲▼` | `12px`，默认 `#4A6491`，激活 `#4096FF` | §1.1.6 | +| 列分割线（可选） | `1px solid #2D4473`（弱化） | §6.2 | + +### 28.3 数据行（Body） + +| 状态 | 背景 | 来源 | +|------|------|------| +| 奇数行 | `#0C1836` (ZS-004-09) | §24.3 | +| 偶数行 | `#122347` (ZS-004-08) | §24.3 | +| Hover | `rgba(22,119,255,0.08)` | §8.4.3 | +| 选中行 | `rgba(22,119,255,0.16)` + 左 `2px solid #1677FF` | §8.3.2 | + +| 元素 | 色值 / 规格 | +|------|-------------| +| 单元格文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | +| 行高 | `44px` | +| 数字列（手机号 / 卡号等） | D-DIN / Arial，`#C5CFE0`，可右对齐 | +| 行间分割线 | `1px solid #1A2F5A` (ZS-004-07) | + +### 28.4 勾选列（Selection） + +| 元素 | 规格 | 来源 | +|------|------|------| +| 复选框 | 沿用 §16.3（面板内灰描边变体 §16.5） | §16 | +| 表头全选框 | 支持半选（部分行选中） | §15.2.3 | +| 列宽 | `48px`，居中 | — | +| 选中行联动 | 勾选 → 行底色切换为「选中行」态 | §28.3 | + +### 28.5 内联编辑单元格 + +单元格可切换为输入态（如「卡池地址 100 M」可编辑），校验失败显示红框 + 气泡。 + +| 状态 | 规格 | 来源 | +|------|------|------| +| 可编辑态 | 单元格内嵌 §14.1 小号输入框（高 `28px`） | §14.1 | +| 带单位 | 数字 + 单位块（§21.5.5），单位 `M` 实心蓝 | §21.5.5 | +| 错误态 | `1px solid #F5222D` + 外发光，下方 / 悬浮气泡提示「Table约束输入提示」`#F5222D` | §14.1.1 / §21.4.1 | +| 气泡背景 | `#F5222D` 或暗底 `#122347` + 红字 | §1.1.2 | + +### 28.6 状态列与操作列 + +| 列 | 规格 | 来源 | +|------|------|------| +| 状态（`● 普通` / `● 特殊`） | 圆点 + 文字标签，沿用 §29.3 圆点标签 | §29.3 | +| 整体状态（`已完成` / `已失败`） | 实心 / 描边状态标签，沿用 §29.4 | §29.4 | +| 操作（`查看 / 编辑 / 重置`） | §5.2.3 文本按钮，间距 `--spacing-3` (12px)，无分隔符 | §5.3.3 | +| 操作列对齐 | 通常右对齐或固定列 | — | + +### 28.7 固定列 / 滚动 / 空态 + +| 行为 | 规则 | +|------|------| +| 横向滚动 | 列总宽超容器时横向滚动；首列（勾选）/ 末列（操作）可 `position: sticky` 固定 | +| 固定列阴影 | 固定列边缘加 `4px` 渐变阴影 `rgba(6,14,36,0.6)` 提示可滚动 | +| 空数据 | 表体居中「暂无数据」，`#6E88B0` (ZS-004-04) | +| 加载中 | 表体覆盖半透明遮罩 `rgba(6,14,36,0.4)` + 居中旋转图标 `#1677FF` | +| 分页 | 表格下方接 §13 分页 | + +### 28.8 CSS Token 参考 + +```css +:root { + --table-wrap-bg: #0C1836; /* ZS-004-09 */ + --table-border: #1A2F5A; /* ZS-004-07 */ + + /* 表头 */ + --table-head-bg: #122347; /* ZS-004-08 */ + --table-head-text: #C5CFE0; /* ZS-004-02 */ + --table-sort-idle: #4A6491; /* ZS-004-05 */ + --table-sort-active: #4096FF; /* ZS-002-05 */ + + /* 数据行 */ + --table-row-odd: #0C1836; /* ZS-004-09 */ + --table-row-even: #122347; /* ZS-004-08 */ + --table-row-hover: rgba(22,119,255,0.08); + --table-row-selected: rgba(22,119,255,0.16); + --table-row-selected-bar:#1677FF; /* ZS-002-06 */ + --table-cell-text: #C5CFE0; /* ZS-004-02 */ + --table-row-divider: #1A2F5A; /* ZS-004-07 */ + + /* 内联编辑错误 */ + --table-edit-error: #F5222D; /* ZS-001-06 */ + + /* 操作列 */ + --table-action-text: #4096FF; /* ZS-002-05 */ + --table-action-hover: #1677FF; /* ZS-002-06 */ + + /* 空 / 加载 */ + --table-empty-text: #6E88B0; /* ZS-004-04 */ + --table-loading-mask: rgba(6,14,36,0.4); +} +``` + +--- + +## 29. 标签（Tag） + +> 对应设计稿「6.14 数据展示-标签」。分两大类：**标签形式**（文字按钮标签 / 图标+文字标签 / 圆点+文字标签 / 动态标签）与**状态标签**（描边 / 实心 / 图标三种风格，覆盖 未开始·等待中·进行中·已完成·已失败·待更新 六语义）。功能语义色见 §1.1.9 / §27.4。 + +### 29.1 文字按钮标签 + +可点击的属性标签，用于重点突出标记。 + +| 状态 | 背景 | 文字 | 来源 | +|------|------|------|------| +| 默认 | `rgba(22,119,255,0.12)` | `#4096FF` (ZS-002-05) | — | +| 禁用 | `rgba(22,119,255,0.06)` | `#4A6491` (ZS-004-05) | — | +| 激活 / 选中 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §1.1.6 | + +| 属性 | 取值 | +|------|------| +| 高度 | `24px` | +| 圆角 | `2px`（§4.1） | +| 内边距 | `2px 8px` | +| 字号 | `12px Regular` | + +### 29.2 图标 + 文字标签 + +前缀业务图标增强辨识（如 Ⓣ Twitter、✓ 完成）。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 默认（描边） | 背景 `rgba(22,119,255,0.12)`，图标+文字 `#4096FF` | §29.1 | +| 选中（实心） | 背景 `#1677FF` (ZS-002-06)，图标+文字 `#FFFFFF` | — | +| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | +| 图标尺寸 | `14px` | — | + +### 29.3 圆点 + 文字标签 + +无底色，靠前缀圆点区分语义（属性多 / 复杂、又不需突出时用）。 + +| 语义 | 圆点色 | 文字 | 来源 | +|------|--------|------|------| +| 普通 | `#13C2C2` (ZS-003-06) | `#C5CFE0` (ZS-004-02) | §1.1.4 | +| 特殊 | `#FAAD14`（警告橙，§27.4） | `#C5CFE0` | §27.4 | +| 异常 | `#F5222D` (ZS-001-06) | `#C5CFE0` | §1.1.2 | + +| 属性 | 取值 | +|------|------| +| 圆点尺寸 | `6px`，正圆 | +| 圆点 → 文字间距 | `--spacing-2` (8px) | +| 字号 | `14px Regular` | + +### 29.4 动态标签（可增删） + +可动态添加 / 删除的标签集合（如筛选列表、关键词）。 + +``` +[ people.com.cn × ] [ +1 × ] [ + 标签 ] +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标签底 | `rgba(22,119,255,0.12)`，文字 `#C5CFE0` (ZS-004-02) | — | +| 关闭 `×` | `12px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | +| 折叠 `+N ×` | 溢出折叠（同 §15.2.1） | §15.2.1 | +| 「+ 标签」新增钮 | `1px dashed #4096FF` (ZS-002-05) + 透明底 + `+ 标签` 蓝字 | §3.1.3 | +| 新增钮 hover | 边框 + 文字 `#1677FF` (ZS-002-06) | — | +| 标签间距 | `--spacing-1` (4px) | §7.1 | + +### 29.5 状态标签（三风格 × 六语义） + +六个语义统一映射到功能语义色（§27.4）： + +| 语义 | 主色 | 来源 | +|------|------|------| +| 未开始 | `#4096FF` (ZS-002-05) 或中性灰 `#6E88B0` | §1.1.6 / ZS-004-04 | +| 等待中 | `#13C2C2` (ZS-003-06) | §1.1.4 | +| 进行中 | `#FAAD14`（警告橙，§27.4） | §27.4 | +| 已完成 | `#52C41A`（成功绿，§27.4） | §27.4 | +| 已失败 | `#F5222D` (ZS-001-06) | §1.1.2 | +| 待更新 | `#1677FF` (ZS-002-06) | §1.1.6 | + +#### 29.5.1 风格 A — 描边（Outline） + +| 元素 | 规格 | +|------|------| +| 背景 | `transparent` 或语义色 `12%` 透明底 | +| 边框 | `1px solid` 语义色 | +| 文字 | 语义色 | +| 高度 / 圆角 | `24px` / `2px` | + +#### 29.5.2 风格 B — 实心（Filled） + +| 元素 | 规格 | +|------|------| +| 背景 | 语义色 `24%`~`100%`（截图为浅色实心底） | +| 文字 | 深色语义场用 `#FFFFFF`；浅底场用语义深色 | +| 高度 / 圆角 | `24px` / `2px` | + +#### 29.5.3 风格 C — 图标 + 文字 + +前缀语义图标（⊖ 就绪 / ◷ 等待 / ◐ 进行 / ✓ 成功 / ✗ 失败 / ◷ 待更）： + +| 元素 | 规格 | 来源 | +|------|------|------| +| 图标色 | 同语义色 | §27.4 | +| 文字色 | 语义色或 `#C5CFE0` | — | +| 图标尺寸 | `14px` | — | +| 图标 → 文字间距 | `--spacing-1` (4px) | §7.1 | + +### 29.6 CSS Token 参考 + +```css +:root { + /* 语义色复用 §27.4 */ + /* --func-success / --func-warning / --func-error / --func-info / --func-processing */ + + /* 文字 / 图标 / 圆点标签 */ + --tag-soft-bg: rgba(22,119,255,0.12); + --tag-soft-text: #4096FF; /* ZS-002-05 */ + --tag-active-bg: #1677FF; /* ZS-002-06 */ + --tag-active-text: #FFFFFF; + --tag-disabled-text: #4A6491; /* ZS-004-05 */ + --tag-dot-normal: #13C2C2; /* ZS-003-06 普通 */ + --tag-dot-special: var(--func-warning); /* 特殊 */ + --tag-dot-error: #F5222D; /* ZS-001-06 异常 */ + + /* 动态标签 */ + --tag-close: #6E88B0; /* ZS-004-04 */ + --tag-close-hover: #FFFFFF; + --tag-add-border: #4096FF; /* ZS-002-05 虚线 */ + --tag-add-hover: #1677FF; /* ZS-002-06 */ + + /* 状态标签语义 */ + --status-pending: #4096FF; /* 未开始 ZS-002-05 */ + --status-waiting: #13C2C2; /* 等待中 ZS-003-06 */ + --status-running: var(--func-warning); /* 进行中 */ + --status-done: var(--func-success); /* 已完成 */ + --status-failed: #F5222D; /* 已失败 ZS-001-06 */ + --status-update: #1677FF; /* 待更新 ZS-002-06 */ +} +``` + +--- + +## 30. 树形控件（Tree · 展示型） + +> 对应设计稿「6.16 数据展示-树形控件」。区别于 §19 树选择（下拉触发器形态），本节是**直接平铺在页面中的树**：带**虚线连接线**、`[+] / [-]` 方框展开器、节点复选框，且节点可**内联挂表单控件**（单选 / 日期 / 数字+单位）。节点状态与复选框沿用 §19 / §16，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 30.1 容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §3.1.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 容器圆角 | `4px` | §4.1 | +| 容器内边距 | `--spacing-5` (24px) | §7.1 | + +### 30.2 节点与连接线 + +``` +☐ 一级 +├╌ ☐ 主账号贴文 ● 按照发文起始时间 [2021-12-09 📅] ○ 按照条数 前[最多24]条 +│ ├╌ ☐ 贴文评论 前 [最多24] 条 +│ ├╌ ☐ 评论账号列表 前 [最多24] 条 +│ └╌ ☐ 转发账号列表 前 [最多24] 条 +│ ├╌ ☐ 粉丝列表 前 [最多24] 条 +│ └╌ ☐ 好友列表 前 [最多24] 条 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 连接线 | `1px dashed #4A6491` (ZS-004-05)，L 形连父子 | §6.1 虚线 | +| 每级缩进 | `--spacing-5` (24px) | §7.1 | +| 节点复选框 | 沿用 §16.3（面板内灰描边 §16.5） | §16 | +| 节点文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | §19.3.2 | +| 节点行高 | `≥ 40px`（含内联控件时自适应） | — | +| 复选框 → 文字间距 | `--spacing-2` (8px) | §7.1 | + +### 30.3 方框展开器（`[+] / [-]`） + +带子树的节点用方框图标，区别于 §19 的纯三角箭头。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 方框尺寸 | `14px × 14px`，`1px solid #6E88B0` (ZS-004-04) | §19.3.1 | +| 方框背景 | `transparent` | — | +| 符号 `+` / `-` | `#6E88B0`，居中 | — | +| Hover | 边框 + 符号 `#4096FF` (ZS-002-05) | §1.1.6 | +| 折叠态 `+` / 展开态 `-` | 点击切换子树显隐 | — | +| 方框 → 连接线 | 方框压在虚线连接点上 | — | + +### 30.4 节点内联表单控件 + +节点右侧可挂载与该节点关联的配置控件，全部复用既有规范： + +| 控件 | 复用 | 备注 | +|------|------|------| +| 单选（`● 按照发文起始时间` / `○ 按照条数`） | §16.2 Radio | 未选 `#4096FF` 描边，已选实心 `#1677FF` | +| 日期（`2021-12-09 📅`） | §17.1 日期触发器 | 高 `28px` 小号 | +| 数字 + 单位（`前 [最多24] 条`） | §14.1 输入 + §21.5.5 单位 | 前后缀文字「前」「条」`#6E88B0` | +| 前后缀文字 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 控件与节点文字横向间距 | `--spacing-3` (12px) | §7.1 | +| 多控件之间间距 | `--spacing-4` (16px) | §7.1 | + +### 30.5 复选父子联动 + +| 行为 | 规则 | 来源 | +|------|------|------| +| 勾父节点 | 勾选其全部子孙 | §18.4.2 | +| 子项部分选中 | 父节点显示**半选**（中央 `8px×2px` 白横线） | §16.3 | +| 全选 / 全不选 | 顶层「一级」节点等价全选开关 | §15.2.3 | + +### 30.6 纯展示树变体（右图） + +无内联控件、仅 `[+]/[-]` + 复选框 + 「一级 / 二级」层级的精简树： + +| 元素 | 规格 | +|------|------| +| 节点 | 复选框 + 文字（`一级` / `二级`） | +| 展开器 | `[+] / [-]` 方框（同 §30.3） | +| 连接线 | `1px dashed #4A6491` | +| 选中 | 复选框实心 `#1677FF` + 白勾；行可叠 `rgba(22,119,255,0.08)` hover | +| 节点行高 | `36px` | + +### 30.7 与 §19 树选择的差异 + +| 维度 | §19 树选择（TreeSelect） | §30 树形控件（Tree） | +|------|--------------------------|----------------------| +| 形态 | 触发器 + 下拉面板 | 直接平铺页面 | +| 展开器 | 三角 `▸ / ▾` | 方框 `[+] / [-]` | +| 连接线 | 无（靠缩进） | 有，`1px dashed` | +| 选中表现 | 整行蓝底高亮 | 复选框示态为主 | +| 内联控件 | 无 | 支持（单选 / 日期 / 数字+单位） | +| 用途 | 表单取值 | 数据展示 / 多维配置 | + +### 30.8 CSS Token 参考 + +```css +:root { + --tree2-wrap-bg: #0C1836; /* ZS-004-09 */ + --tree2-wrap-border: #1A2F5A; /* ZS-004-07 */ + --tree2-line: #4A6491; /* ZS-004-05 虚线连接 */ + --tree2-indent: 24px; + --tree2-node-text: #C5CFE0; /* ZS-004-02 */ + --tree2-row-hover: rgba(22,119,255,0.08); + + /* 方框展开器 */ + --tree2-toggle-border: #6E88B0; /* ZS-004-04 */ + --tree2-toggle-symbol: #6E88B0; + --tree2-toggle-hover: #4096FF; /* ZS-002-05 */ + + /* 复选框（复用 §16） */ + --tree2-check-border: #6E88B0; /* ZS-004-04 */ + --tree2-check-fill: #1677FF; /* ZS-002-06 */ + --tree2-check-mark: #FFFFFF; + + /* 内联控件前后缀文字 */ + --tree2-affix-text: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 31. 时间轴（长文本：横向 / 纵向） + +> 对应设计稿「6.19 数据展示-时间轴（上）/（下）」。在 §26 时间轴基础上扩展两种**承载长文本**的形态：**横向时间轴**（节点沿水平轴上下交替展开长文本）与**纵向长文本时间轴**（日期 + 富内容卡片）。节点圆 / 连接线 / 全局时间轴沿用 §26，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，年份强调点引入 §1.1.2 渐红系。 + +### 31.1 横向时间轴（横向长文本） + +节点挂在一条水平主轴上，文本块**上下交替**分布，避免拥挤；轴上按时间标注年份 / 日期锚点。 + +``` + 2023年1月7日 2021年7月18日 2002年1月 + 长文本说明… 长文本说明… 长文本说明… + ▲ ▲ ▲ +───┼──────────┼─────────┼──────────┼─────────┼──── ← 水平主轴 + │ ▼ │ ▼ │ + 长文本… 长文本… + 2021年 2016年8月 +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 水平主轴 | `1px solid #2D4473` (ZS-004-06) | §6.1 | +| 节点三角 / 圆点 | `8px`，`#1677FF` (ZS-002-06)；指向轴的小三角 | §26.1 | +| 年份 / 日期锚点（强调） | `14px Bold`，`#F5222D`（红，ZS-001-06）或 `#4096FF`（蓝） | §1.1.2 / §1.1.6 | +| 普通时间标题 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 长文本正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6` | — | +| 文本块背景（可选卡片） | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | +| 节点水平间距 | 自适应等分，最小 `--spacing-7` (40px) | §7.1 | +| 文本块 → 轴间距 | `--spacing-3` (12px) | §7.1 | +| 横向滚动 | 节点超容器宽时横向滚动，可配 §26.3 全局时间轴联动缩放 | §26.3 | + +### 31.2 纵向长文本时间轴 + +左侧时间轴线，每个节点对应一张**富内容卡片**（缩略图 / 头像 + 标签 + 长正文）。 + +``` +● 2023-09-09 +┊ ┌──────────────────────────────────────────┐ +┊ │ 👤 人物名 [标签] │ +┊ │ 长正文长正文长正文长正文长正文长正文… │ +┊ └──────────────────────────────────────────┘ +● 2023-09-09 +┊ ┌──────────────────────────────────────────┐ +┊ │ 🖼 缩略图 [标签] │ +┊ │ 长正文… │ +┊ └──────────────────────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轴线 | `1px solid #2D4473` (ZS-004-06)，纵向贯穿 | §26.1 | +| 节点圆点 | 实心 `8px`，`#1677FF` (ZS-002-06) | §26.1 | +| 日期标题 | `14px Medium`，`#4096FF` (ZS-002-05) | §1.1.6 | +| 卡片容器 | `#122347` (ZS-004-08) + `1px solid #1A2F5A` + 圆角 `4px` | §3.1.2 | +| 卡片内边距 | `--spacing-3` (12px) | §7.1 | +| 头像 / 缩略图 | `40px`（头像圆 / 缩略方），底 `#1A2F5A` | §22.3.1 | +| 主名 / 来源 | `14px Medium`，`#C5CFE0` (ZS-004-02) | — | +| 状态标签 | 沿用 §29 标签（语义色见 §27.4） | §29 | +| 长正文 | `14px Regular`，`#6E88B0` (ZS-004-04)，行高 `1.6`，可「展开」折叠（§23.4） | §23.4 | +| 日期 → 卡片间距 | `--spacing-2` (8px) | §7.1 | +| 节点垂直间距 | `--spacing-6` (32px) | §7.1 | + +### 31.3 选用决策 + +| 场景 | 选择 | +|------|------| +| 短事件流（标题 + 时间） | §26.1 基础时间轴点 | +| 节点带结构化小卡 | §26.2 卡片式时间轴 | +| 跨度大、按时间轴铺陈长文本 | §31.1 横向时间轴 | +| 每节点是图文长内容（资讯 / 档案） | §31.2 纵向长文本时间轴 | +| 需缩放 / 区间筛选 | 叠加 §26.3 全局时间轴 | + +### 31.4 CSS Token 参考 + +```css +:root { + /* 横向长文本 */ + --htl-axis: #2D4473; /* ZS-004-06 主轴 */ + --htl-node: #1677FF; /* ZS-002-06 */ + --htl-anchor-emph: #F5222D; /* ZS-001-06 年份强调 */ + --htl-anchor-blue: #4096FF; /* ZS-002-05 */ + --htl-title: #C5CFE0; /* ZS-004-02 */ + --htl-body: #6E88B0; /* ZS-004-04 */ + --htl-card-bg: #122347; /* ZS-004-08 */ + --htl-card-border: #1A2F5A; /* ZS-004-07 */ + + /* 纵向长文本 */ + --vtl-line: #2D4473; /* ZS-004-06 */ + --vtl-node: #1677FF; /* ZS-002-06 */ + --vtl-date: #4096FF; /* ZS-002-05 */ + --vtl-card-bg: #122347; /* ZS-004-08 */ + --vtl-card-border: #1A2F5A; /* ZS-004-07 */ + --vtl-avatar-bg: #1A2F5A; /* ZS-004-07 */ + --vtl-name: #C5CFE0; /* ZS-004-02 */ + --vtl-body: #6E88B0; /* ZS-004-04 */ +} +``` + +--- + +## 32. 对话框（Dialog / 确认框） + +> 对应设计稿「7.1 消息提醒-对话框」。轻量确认弹窗，承载一句提示 + 「取消 / 确定」。是 §21 弹出式窗口的**精简变体**：标题用**左竖条**而非居中、主体仅一行信息、无 Tabs / 步骤条 / 表单。遮罩 / 容器 / 底部按钮沿用 §21，配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取。 + +### 32.1 容器与遮罩 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 遮罩 | `rgba(6,14,36,0.6)` | §21.1 | +| 容器背景 | `#0C1836` (ZS-004-09)（也可用 §21 渐变） | §21.1 | +| 容器边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 8px 32px rgba(6,14,36,0.6)`（三级） | §3.1.4 | +| 宽度 | `400px`（小） | — | +| 内边距 | `0`（标题栏 / 主体 / 底部各自带 padding） | — | + +### 32.2 标题栏 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 标题栏背景 | `#122347` (ZS-004-08) | §3.1.2 | +| 标题左竖条 | `3px × 14px`，`#1677FF` (ZS-002-06) | §22.1 | +| 标题文字（"提示"） | `16px Medium`，`#FFFFFF` | — | +| 关闭 `×` | `16px`，`#6E88B0`，hover `#4096FF` | §5.2.4 | +| 标题栏高度 | `48px` | — | +| 标题栏底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | +| 水平 padding | `--spacing-4` (16px) | §7.1 | + +### 32.3 主体与底部 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 主体文字（"这是一段信息"） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 主体内边距 | `--spacing-4` (16px) | §7.1 | +| 主体最小高度 | `80px` | — | +| 底部按钮区 | 右对齐，右内 padding `--spacing-4` (16px)，下内 padding `--spacing-4` | §7.1 | +| 「取消」 | §5.2.2 默认按钮，小号 `28px` | §5.2.2 | +| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 32.4 类型变体 + +对话框可携带语义图标（同 §27.4 / §33 语义色）置于主体文字前： + +| 类型 | 图标 | 主色 | +|------|------|------| +| 信息（默认） | ⓘ `#1677FF` (ZS-002-06) | 蓝 | +| 成功 | ✓ `--func-success` | 绿 | +| 警告 | ! `--func-warning` | 橙 | +| 错误 | ✗ `#F5222D` (ZS-001-06) | 红 | + +### 32.5 与 §21 的差异 / CSS Token + +| 维度 | §21 弹出式窗口 | §32 对话框 | +|------|---------------|-----------| +| 标题 | 居中 + 渐变下划线 | 左竖条 + 左对齐 | +| 内容 | Tabs / 步骤条 / 多字段表单 | 一句提示（可带语义图标） | +| 宽度 | `480~800px` | `400px` | +| 用途 | 编辑 / 多步流程 | 确认 / 告知 | + +```css +:root { + --dialog-bg: #0C1836; /* ZS-004-09 */ + --dialog-border: #1A2F5A; /* ZS-004-07 */ + --dialog-head-bg: #122347; /* ZS-004-08 */ + --dialog-title-bar: #1677FF; /* ZS-002-06 左竖条 */ + --dialog-title-text: #FFFFFF; + --dialog-close: #6E88B0; /* ZS-004-04 */ + --dialog-close-hover: #4096FF; /* ZS-002-05 */ + --dialog-body-text: #C5CFE0; /* ZS-004-02 */ + --dialog-divider: #1A2F5A; /* ZS-004-07 */ +} +``` + +--- + +## 33. 全局提示（Message / Alert） + +> 对应设计稿「7.3 消息提醒-全局提示」。顶部居中、自动消失、不打断操作的轻量级反馈。覆盖**信息 / 成功 / 警告 / 错误**四语义，每条分**带关闭 ×** 与 **带「查看详情」操作** 两变体。语义色统一引用 §1.1.9 / §27.4 功能语义色。 + +### 33.1 触发按钮（语义实心钮） + +页面侧触发演示用的四颗实心语义按钮： + +| 类型 | 背景 | 图标 + 文字 | 来源 | +|------|------|------------|------| +| 信息提示 | `#1677FF` (ZS-002-06) | ⓘ + 白字 | §1.1.6 | +| 成功提示 | `--func-success`（绿） | ✓ + 白字 | §27.4 | +| 警告提示 | `--func-warning`（橙） | ! + 白字 | §27.4 | +| 错误提示 | `#F5222D` (ZS-001-06) | ✗ + 白字 | §1.1.2 | + +按钮规格沿用 §5.2.1（高 `32px`，圆角 `2px`，前缀图标 `--spacing-1` 间距）。 + +### 33.2 提示条（Message 单条） + +``` +┌────────────────────────────────────────────────┐ +│ ✓ 恭喜！你所提交的信息已经审核通过。 × │ ← 变体 A：带关闭 +└────────────────────────────────────────────────┘ +┌────────────────────────────────────────────────┐ +│ ✓ 恭喜！你所提交的信息已经审核通过。 查看详情 │ ← 变体 B：带操作 +└────────────────────────────────────────────────┘ +``` + +#### 33.2.1 通用规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 高度 | `40px`（单行） | — | +| 圆角 | `2px` | §4.1 | +| 水平 padding | `--spacing-4` (16px) | §7.1 | +| 语义图标 | `16px`，置于最左，语义色 | §27.4 | +| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 正文文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 左侧强调边 | `3px solid` 语义色（可选，增强辨识） | §6.1 | +| 顶部弹出动画 | 顶部居中 `translateY(-100%) → 0` + `opacity`，`200ms ease-out` | §8.5 | +| 自动消失 | 默认 `3s` 后淡出（错误类可设不自动消失） | — | + +#### 33.2.2 四语义底色 + +| 语义 | 背景（约 12~16% 透明语义底） | 图标 / 强调色 | 来源 | +|------|------------------------------|--------------|------| +| 成功 | `rgba(82,196,26,0.16)` | `--func-success` ✓ | §27.4 | +| 错误 | `rgba(245,34,45,0.16)` | `#F5222D` ✗ (ZS-001-06) | §1.1.2 | +| 信息 | `rgba(22,119,255,0.16)` | `#1677FF` ⓘ (ZS-002-06) | §1.1.6 | +| 警告 | `rgba(250,173,20,0.16)` | `--func-warning` ! | §27.4 | + +> 底色叠在页面深蓝背景上呈低饱和语义色块；文字保持 `#C5CFE0` 高可读，仅图标与边用满饱和语义色。 + +#### 33.2.3 右侧元素（二选一） + +| 变体 | 元素 | 规格 | 来源 | +|------|------|------|------| +| A 带关闭 | `×` | `14px`，`#6E88B0`，hover `#FFFFFF` | §15.2.1 | +| B 带操作 | 「查看详情」 | §5.2.3 文本按钮，**颜色取所在语义色**（成功=绿 / 错误=红 / 信息=蓝 / 警告=橙），hover 加深 | §5.2.3 | + +### 33.3 多条堆叠 + +| 规则 | 取值 | +|------|------| +| 堆叠方向 | 顶部居中，新消息在下 / 旧消息上推（或反之，跟随实现） | +| 条间距 | `--spacing-2` (8px) | +| 最大同时显示 | 建议 `≤ 5` 条，超出排队 | + +### 33.4 与 §32 对话框的区别 + +| 维度 | §33 全局提示 | §32 对话框 | +|------|-------------|-----------| +| 打断性 | 不打断（自动消失） | 打断（需用户确认） | +| 位置 | 顶部居中悬浮 | 屏幕居中 + 遮罩 | +| 操作 | 至多一个「查看详情」 | 取消 / 确定 | +| 用途 | 操作结果即时反馈 | 二次确认 / 重要告知 | + +### 33.5 CSS Token 参考 + +```css +:root { + /* 语义色复用 §27.4：--func-success / --func-warning / --func-error / --func-info */ + + /* 提示条通用 */ + --msg-text: #C5CFE0; /* ZS-004-02 */ + --msg-close: #6E88B0; /* ZS-004-04 */ + --msg-close-hover: #FFFFFF; + + /* 四语义底色 */ + --msg-success-bg: rgba(82,196,26,0.16); + --msg-success-fg: #52C41A; /* --func-success */ + --msg-error-bg: rgba(245,34,45,0.16); + --msg-error-fg: #F5222D; /* ZS-001-06 */ + --msg-info-bg: rgba(22,119,255,0.16); + --msg-info-fg: #1677FF; /* ZS-002-06 */ + --msg-warning-bg: rgba(250,173,20,0.16); + --msg-warning-fg: #FAAD14; /* --func-warning */ +} +``` + +--- + +## 34. 气泡确认（Popconfirm） + +> 对应设计稿「7.4 消息提醒-气泡确认」。锚定在触发元素（如「删除」按钮）上的小型确认气泡，带指向箭头 + 问号图标 + 一句确认语 + 「取消 / 确定」。比 §32 对话框更轻、无遮罩、就地确认。配色从 §1.1.3 渐蓝系（ZS-002）与 §1.1.5 深蓝系（ZS-004）取，问号图标用 §27.4 警告橙。 + +### 34.1 结构 + +``` + [ 删除 ] ← 触发按钮 + ▲ ← 指向箭头 +┌─────────────────────┐ +│ ❓ 这是一段内容确定删除吗？│ +│ 取消 [确定] │ +└─────────────────────┘ +``` + +### 34.2 气泡容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#0C1836` (ZS-004-09)（或 `#122347`） | §3.1 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 4px 16px rgba(6,14,36,0.6)`（三级阴影变体） | §3.1.4 | +| 内边距 | `--spacing-3` (12px) | §7.1 | +| 最小宽度 | `200px` | — | +| 指向箭头 | `8px` 三角，与容器同底色 + 同边框，指向触发元素 | — | +| 与触发元素间距 | `--spacing-2` (8px) | §7.1 | + +### 34.3 内容与按钮 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 问号图标 ❓ | `16px`，圆形实心 `--func-warning`（橙），白色 `?` | §27.4 | +| 图标 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 确认文字 | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 文字 → 按钮区纵向间距 | `--spacing-3` (12px) | §7.1 | +| 按钮区对齐 | 右对齐 | — | +| 「取消」 | §5.2.3 文本按钮（`#4096FF`，hover `#1677FF`）或 §5.2.2 默认按钮小号 | §5.2.3 | +| 「确定」 | §5.2.1 主按钮，小号 `28px` | §5.2.1 | +| 按钮间距 | `--spacing-2` (8px) | §7.1 | + +### 34.4 弹出方位与交互 + +| 行为 | 规则 | +|------|------| +| 方位 | 默认在触发元素**正下方**（`top` 箭头）；空间不足时自动翻转到上 / 左 / 右 | +| 打开 | `scale(0.95)→1` + `opacity 0→1`，`transform-origin` 指向箭头，`200ms ease-out` | +| 关闭 | 点「取消」/「确定」/ 点击气泡外部 / `Esc` | +| 「确定」 | 执行危险操作（如删除）后关闭；可在确认按钮上叠 §5.4.2 Loading | +| 无遮罩 | 不阻塞背景，仅就地确认 | + +### 34.5 与 §32 对话框的区别 + +| 维度 | §34 气泡确认 | §32 对话框 | +|------|-------------|-----------| +| 锚定 | 贴触发元素（带箭头） | 屏幕居中 | +| 遮罩 | 无 | 有 | +| 体量 | 极小（一句话 + 两钮） | 小弹窗（标题栏 + 主体 + 底部） | +| 用途 | 行内危险操作就地确认（删除 / 重置） | 较正式的确认 / 告知 | + +### 34.6 CSS Token 参考 + +```css +:root { + --popconfirm-bg: #0C1836; /* ZS-004-09 */ + --popconfirm-border: #1A2F5A; /* ZS-004-07 */ + --popconfirm-shadow: 0 4px 16px rgba(6,14,36,0.6); + --popconfirm-icon: #FAAD14; /* --func-warning 问号 */ + --popconfirm-text: #C5CFE0; /* ZS-004-02 */ + --popconfirm-cancel: #4096FF; /* ZS-002-05 文本按钮 */ + --popconfirm-cancel-hover: #1677FF;/* ZS-002-06 */ + --popconfirm-ok-bg: #1677FF; /* ZS-002-06 主按钮 */ +} +``` + +--- + diff --git a/frontend-web/docs/ui规范-深蓝/04-图表.md b/frontend-web/docs/ui规范-深蓝/04-图表.md new file mode 100644 index 00000000..143530e6 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/04-图表.md @@ -0,0 +1,573 @@ +# 深蓝色 UI 规范 · 04 图表（§35–§41） + +> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。 + +**本篇目录**：`35` 图表通用规范 · `36` 柱状图 · `37` 折线图 · `38` 甘特图 · `39` 环形图 · `40` 关系图/散点图 · `41` 图表色值 + +--- + +## 35. 图表通用规范（Chart 基础） + +> 对应设计稿「8. 图表」系列（柱状图 / 折线图 / 甘特图）。本节先约定**所有图表共用**的容器、标题、坐标轴、网格、图例、Tooltip、配色与空状态；§36 起按图表类型补充各自细则。配色一律取自 §1.1.8 图表配色与 §1.1.5 深蓝系，不另造色。 + +### 35.1 图表容器 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `#0C1836` (ZS-004-09)，嵌入卡片时随 §22 卡片 `#122347` | §3.1 | +| 圆角 | `4px` | §4.1 | +| 内边距 | `--spacing-5` (24px) | §7.1 | +| 多图并排间距 | `--spacing-6` (32px) | §7.1 | +| 边框（可选） | `1px solid #1A2F5A` (ZS-004-07) | — | + +### 35.2 图表标题 + +设计稿中标题统一为「**主色蓝竖条 ▌ + 文字**」的小标题样式。 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 左侧竖条 | `3px × 14px`，`#1677FF` (ZS-002-06)，圆角 `1px` | §1.1.6 | +| 竖条 → 文字间距 | `--spacing-2` (8px) | §7.1 | +| 标题文字 | `16px Bold`，`#FFFFFF`（或 `#C5CFE0`） | §2.1.2 | +| 标题 → 图表区间距 | `--spacing-4` (16px) | §7.1 | +| 副标题 / 单位 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | + +> 部分卡片标题不带竖条（如「标题（BW）」「数据采集XXX」），此时直接用 `16px Bold #C5CFE0`，与 §22 卡片标题一致。 + +### 35.3 坐标轴 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 轴线（X / Y 基线） | `1px solid #2D4473` (ZS-004-06) | §6.1 | +| 刻度文字（轴标签） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 轴标题 / 类目名（如「类型」「2012」） | `12px Regular`，`#4096FF` (ZS-002-05) 或 `#6E88B0` | — | +| 刻度线（tick） | 通常隐藏，仅留网格线 | — | +| 轴名称单位 | `12px`，`#6E88B0`，置于轴末端 | — | + +### 35.4 网格线（splitLine） + +| 类型 | 色值 | 样式 | 使用场景 | +|------|------|------|----------| +| 主网格（默认） | `#2D4473` (ZS-004-06) | `1px dashed` | 柱状 / 折线的 Y 向参考线 | +| 弱化网格 | `#1A2F5A` (ZS-004-07) | `1px dashed` | 密集图表、次要参考 | + +> 深色背景下网格一律用**虚线**且低对比，避免抢戏；纵向类目方向通常不画网格。 + +### 35.5 图例（Legend） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 位置 | 右上角（多数）或顶部居中 | — | +| 色块（marker） | `10px` 方块 / 圆点，取系列色 | §1.1.8 | +| 色块 → 文字间距 | `--spacing-1` (4px) | §7.1 | +| 图例文字 | `12px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 项间距 | `--spacing-3` (12px) | §7.1 | +| 未选中态（点击隐藏系列） | 色块 + 文字置灰 `#4A6491` (ZS-004-05) | §1.1.5 | + +### 35.6 Tooltip（悬浮提示） + +鼠标悬停时跟随的浮层（如折线图「1月10日 异常率12.9%」、「5.32」）。 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 背景 | `rgba(12,24,54,0.92)`（ZS-004-09 92%） | §3.1 | +| 边框 | `1px solid #1A2F5A` (ZS-004-07) | — | +| 圆角 | `4px` | §4.1 | +| 阴影 | `0 4px 16px rgba(6,14,36,0.6)` | §3.1.4 | +| 内边距 | 上下 `--spacing-2`，左右 `--spacing-3` | §7.1 | +| 标题行（日期 / 类目） | `12px Medium`，`#FFFFFF` | — | +| 数值行 | `12px Regular`，色块（系列色）+ 名称 `#6E88B0` + 数值 `#C5CFE0` | — | +| 指示线（axisPointer） | `1px dashed #4096FF` (ZS-002-05)，或半透明竖向高亮带 `rgba(22,119,255,0.12)` | §6.1 | + +> 设计稿中数据点 hover 常显示一个**实心小标签**（如圆点 + 数值 `5.32`）：标签背景 `#122347`，文字 `#FFFFFF`，圆点取系列色，圆角 `2px`。 + +### 35.7 数据点与标记 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 折线拐点（默认） | 不显示或 `2px` 实心点 | — | +| 折线拐点（hover / 强调） | `空心圆`，描边 `2px` 系列色，填充 `#0C1836`，直径 `6px` | — | +| 高亮竖带（选中区间） | `rgba(22,119,255,0.12)` 矩形，无边框 | §3.1 | + +### 35.8 图表配色引用 + +| 用途 | 色序 | 来源 | +|------|------|------| +| 多系列（面积大：柱 / 折线 / 饼） | `#1677FF → #13C2C2 → #4096FF → #36CFC9 → #69B1FF → #5CDBD3 → #91CAFF → #87E8DE` | §1.1.8 通用图表色序 | +| 小面积（散点 / 迷你图 / 徽标） | `#4096FF → #36CFC9 → #FF4D4F → #FFA39E → #6388FF → #478880` | §1.1.8 小面积色序 | +| 语义系列（成功 / 警告 / 错误） | 绿 `--func-success` / 橙 `--func-warning` / 红 `#F5222D` | §27.4 / §1.1.2 | + +> 设计稿柱状图出现的「绿(Paper) / 橙(Project) / 蓝(Book)」三系列，对应**语义化分类**：绿取 §27.4 成功绿、橙取 §27.4 警告橙、蓝取主色 `#1677FF`；若为无语义的并列分类，应改用通用图表色序避免误读。 + +### 35.9 空状态 / 加载 + +| 状态 | 表现 | +|------|------| +| 加载中 | 图表区居中显示旋转图标 `#4096FF` + 文字「加载中…」`12px #6E88B0`（沿用 §5.4.2） | +| 无数据 | 居中占位插画 / 文字「暂无数据」`14px #6E88B0` | + +--- + +## 36. 柱状图（Column / Bar） + +> 对应设计稿「8.1 图表-柱状图」。涵盖**堆叠柱 / 分组柱 / 条形图（横向）/ 排行进度条**四种形态。容器、坐标轴、网格、图例、Tooltip 全部沿用 §35。 + +### 36.1 通用规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 柱体圆角 | 顶部 `2px`（堆叠柱仅最顶段圆角） | §4.1 | +| 柱宽 | 类目宽度的 `40%~60%` | — | +| 同组柱间距 | `--spacing-1` (4px) | §7.1 | +| 类目（组）间距 | 自适应等分 | — | +| 数值标签（可选） | `12px Regular`，`#C5CFE0`，置柱顶上方 `--spacing-1` | — | + +### 36.2 堆叠柱状图（如「标题」Paper/Project/Book） + +| 元素 | 配色 | 来源 | +|------|------|------| +| 系列 1（Book / 底段） | `#69B1FF` (ZS-002-04) 或主色 `#1677FF` | §1.1.3 | +| 系列 2（Project / 中段） | `--func-warning`（橙） | §27.4 | +| 系列 3（Paper / 顶段） | `--func-success`（绿） | §27.4 | +| 段间分隔 | `1px` 容器底色 `#0C1836` 描边，制造堆叠缝隙 | — | +| Y 轴类目标签「类型」 | `12px`，`#4096FF` (ZS-002-05) | §35.3 | + +### 36.3 分组柱状图（如「标题（BW）」「标题」双系列） + +| 元素 | 配色 | 来源 | +|------|------|------| +| 系列依次取色 | 通用图表色序 `#1677FF / #13C2C2 / #4096FF …` | §1.1.8 | +| 设计稿 BW 三色变体 | 蓝 `#69B1FF` / 绿 `--func-success` / 橙 `--func-warning` | §35.8 | +| 双系列变体 | 蓝 `#69B1FF`(ZS-002-04) + 橙 `--func-warning` | — | + +### 36.4 条形图（横向，如「标题」x 轴 0–400） + +| 属性 | 取值 | 来源 | +|------|------|------| +| 方向 | 水平，类目在 Y 轴、数值在 X 轴 | — | +| 条体颜色 | `#69B1FF` (ZS-002-04)（单系列）或图表色序 | §1.1.3 | +| 条体圆角 | 右端 `2px` | §4.1 | +| 类目标签「类型」 | 左对齐，`12px #6E88B0` | §35.3 | +| X 轴刻度 | `0 / 100 / 200 / 300 / 400`，`12px #6E88B0` | §35.3 | + +### 36.5 排行进度条（如「数据采集XXX」TOP1–5） + +横向「标签 + 渐变进度条 + 数值」的榜单形态。 + +``` +TOP1 项目任务名称一 15,465 +■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓ +TOP2 项目任务名称二 15,234 +■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ +``` + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 排名 + 名称（TOPn 项目任务名称） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 数值（右对齐） | `16px D-DIN Regular`，`#FFFFFF` | §2.1.2 | +| 进度条高度 | `8px`，圆角 `4px` | §4.1 | +| 进度填充 | 渐变 `linear-gradient(90deg, #1677FF 0%, #13C2C2 100%)`（主色蓝→主色青） | §1.1.8 | +| 进度轨道（底槽） | `#1A2F5A` (ZS-004-07) | §1.1.5 | +| 行间距 | `--spacing-4` (16px) | §7.1 | +| 名称行 → 进度条间距 | `--spacing-2` (8px) | §7.1 | + +### 36.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 柱体由 `0` 向目标高度 / 长度增长，`scaleY/scaleX 0→1`，`400ms ease-out`，按系列依次 `60ms` 错峰 | +| Hover 柱 | 该柱亮度 `+8%`，弹出 §35.6 Tooltip，axisPointer 高亮该类目竖带 | +| Hover 进度条 | 数值放大或显示绝对值 Tooltip | + +--- + +## 37. 折线图（Line / Area） + +> 对应设计稿「8.2 图表-折线图」与「8.3 多系列折线」。涵盖**迷你面积图 / 单线（含异常点 Tooltip）/ 长时序面积图（带缩略轴）/ 多系列折线**。容器、轴、网格、图例、Tooltip 沿用 §35。 + +### 37.1 线条与面积 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 线宽 | `2px` | — | +| 线条颜色 | 取图表色序，单线默认 `#1677FF` (ZS-002-06) | §1.1.8 | +| 平滑 | `smooth`（曲线）或折线，按数据性质选用 | — | +| 面积填充（单线） | 自顶向下渐变 `rgba(22,119,255,0.32) → rgba(22,119,255,0)` | §3.1 | +| 拐点 | 默认隐藏，hover 显示空心圆（§35.7） | — | + +### 37.2 迷你面积图（如左上「图表标题」+ 已选/未选 标签） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 顶部切换标签（已选 / 未选） | §29 标签：选中 `#1677FF` 实心白字 / 未选 `transparent` + `1px #6E88B0` 边、`#6E88B0` 字 | §29 | +| 线条 | `2px #4096FF` (ZS-002-05) | — | +| 面积渐变 | `rgba(64,150,255,0.32) → 0` | — | +| 当前值标签（如 `59.32`） | 实心小牌 `#122347` 背景 / `#FFFFFF` 文字，圆角 `2px`，定位于末端点 | §35.6 | +| 轴标签（日期） | `12px #6E88B0` | §35.3 | + +### 37.3 单线异常点图（如中部「5-1…5-12」+「1月10日 异常率12.9%」） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 主线 | `2px #1677FF` | — | +| 面积渐变 | `rgba(22,119,255,0.32) → 0` | — | +| 选中竖带 | `rgba(22,119,255,0.12)` 矩形高亮当前 X 区间 | §35.7 | +| 异常点标记 | 空心圆 `6px`，描边 `#FAAD14`（警告橙），填充 `#0C1836` | §27.4 | +| Tooltip（日期 + 指标） | §35.6；指标行如「异常率 12.9%」用 `--func-warning` 橙强调 | §35.6 | +| Y 轴（0–2500） | `12px #6E88B0`，虚线网格 `#2D4473` | §35.3 / §35.4 | + +### 37.4 长时序面积图 + 缩略轴（如底部「图表标题」1986–2024） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 主线 | `2px #36CFC9`（标准青）或 `#4096FF` | §1.1.4 | +| 面积渐变 | `rgba(54,207,201,0.24) → 0` | — | +| 数据点标签（如 `2.43`） | 实心小牌（§35.6），定位于选中点上方 | — | +| 缩略轴（dataZoom，右下迷你图） | 缩略折线 `#4A6491`；滑窗手柄 `#1677FF`，选中区 `rgba(22,119,255,0.16)` | §1.1.5 / §1.1.6 | +| X 轴年份 | `12px #6E88B0`，密集时隔项显示 | §35.3 | + +### 37.5 多系列折线图（如「图表标题」XXX/XXX/都是/无反应） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 图例（顶部居中） | 方块 marker + 文字，项间距 `--spacing-3` | §35.5 | +| 系列 1（XXX） | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | +| 系列 2（XXX） | 蓝 `#1677FF` (ZS-002-06) | §1.1.3 | +| 系列 3（都是） | 橙 `--func-warning` | §27.4 | +| 系列 4（无反应） | 绿 `--func-success` 或青 `#36CFC9` | §27.4 / §1.1.4 | +| 线宽 | `2px`，多系列**不填充面积**（避免互相遮挡） | — | +| 拐点 | 全程显示 `4px` 空心圆（描边系列色，填充 `#0C1836`） | §35.7 | +| 选中竖带 + Tooltip | hover 竖带 `rgba(22,119,255,0.12)`，Tooltip 列出各系列值（如 `5.32`） | §35.6 | +| Y 轴（0–10） / X 轴（年份） | `12px #6E88B0`，横向虚线网格 `#2D4473` | §35.3 / §35.4 | + +### 37.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 线条沿路径绘制 `stroke-dashoffset` 动画，`600ms ease-out`；面积同步淡入 | +| Hover | 显示 §35.6 Tooltip + 竖向 axisPointer 高亮带；对应拐点放大为空心圆 | +| 图例点击 | 切换系列显隐，隐藏态图例置灰 `#4A6491`（§35.5） | +| 缩略轴拖拽 | 主图 X 轴范围实时联动，`100ms` 节流 | + +--- + +## 38. 甘特图（Gantt） + +> 对应设计稿「甘特图」。以时间为横轴、任务行为纵轴的进度条排期图。深蓝背景上以**交替行底纹 + 渐变任务条 + 箭头收尾**呈现，配色取 §1.1.8 图表色序与语义色。 + +### 38.1 结构 + +``` + 1 2 3 … 15 16 17 … 31 ← 时间刻度表头 + Jan ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▶ ← 任务条（带箭头收尾） + Feb ▐▓▓▓▓▓▓▓▓▓▶ + Mar ▐▓▓▓▓▓▓▓▶ + … + Dec ▐▓▓▓▓▓▓▓▓▓▓▓▶ + ● Lorem ipsum 1 ● Lorem ipsum 2 … ← 底部图例 +``` + +### 38.2 表格框架 + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 容器背景 | `#0C1836` (ZS-004-09) | §35.1 | +| 时间刻度表头（1–31 / 月） | `12px Regular`，`#C5CFE0` (ZS-004-02) | §35.3 | +| 行标签（Jan…Dec） | `14px Regular`，`#C5CFE0` | — | +| 行高 | `28px`，行间距 `--spacing-1` (4px) | §7.1 | +| 行底纹（轨道） | `#122347` (ZS-004-08)，整行通栏，圆角 `2px` | §1.1.5 | +| 行底纹（隔行可选） | 奇偶交替 `#122347` / `#0F1C3D` | — | +| 列分隔（可选） | `1px dashed #1A2F5A` (ZS-004-07) | §6.2 | + +### 38.3 任务条 + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 条高 | `16px`，垂直居中于行内 | — | +| 圆角 | `2px`（左端）；右端收**箭头**三角表示方向 | §4.1 | +| 填充 | 沿条向右渐变（系列色 `0%` → 同色 70% 透明 `100%`），叠加斜纹/点纹理增强层次 | §1.1.8 | +| 纹理 | `repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px)` | — | +| 箭头收尾 | 与条同色实心三角，`6px`，指向时间推进方向 | — | +| 进度（可选） | 条内再叠一段高饱和系列色表示完成比例 | — | + +### 38.4 任务分类配色（对应底部图例 Lorem ipsum 1–5） + +| 图例 | 圆点 / 任务条主色 | 来源 | +|------|------------------|------| +| Lorem ipsum 1 | 橙 `--func-warning` | §27.4 | +| Lorem ipsum 2 | 红 `#FF4D4F` (ZS-001-05) | §1.1.2 | +| Lorem ipsum 3 | 青绿 `#36CFC9` (ZS-003-05) | §1.1.4 | +| Lorem ipsum 4 | 浅蓝 `#91CAFF` (ZS-002-03) | §1.1.3 | +| Lorem ipsum 5 | 主色蓝 `#1677FF` (ZS-002-06) | §1.1.3 | + +### 38.5 图例与表头 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 底部图例圆点 | `10px` 圆形，取 §38.4 分类色 | §35.5 | +| 图例文字 | `14px Regular`，`#C5CFE0` | — | +| 图例项间距 | `--spacing-5` (24px) | §7.1 | +| 表头 → 首行间距 | `--spacing-3` (12px) | §7.1 | + +### 38.6 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 任务条由左端起点向右展开 `scaleX 0→1`（`transform-origin:left`），`400ms ease-out`，按行错峰 `60ms` | +| Hover 任务条 | 整条亮度 `+8%`，弹出 §35.6 Tooltip（任务名 / 起止日期 / 进度） | +| Hover 行 | 行底纹由 `#122347` → `#1A2F5A` (ZS-004-07) | +| 今日线（可选） | 一条 `1px dashed #4096FF` (ZS-002-05) 竖线标注当前日期 | §6.2 | + +### 38.7 CSS Token 参考（§35–§38 共用） + +```css +:root { + /* 图表容器与标题 */ + --chart-bg: #0C1836; /* ZS-004-09 */ + --chart-title-bar: #1677FF; /* ZS-002-06 标题竖条 */ + --chart-title-text: #FFFFFF; + --chart-subtitle: #6E88B0; /* ZS-004-04 */ + + /* 坐标轴与网格 */ + --chart-axis-line: #2D4473; /* ZS-004-06 */ + --chart-axis-label: #6E88B0; /* ZS-004-04 */ + --chart-axis-cat: #4096FF; /* ZS-002-05 类目名 */ + --chart-grid: #2D4473; /* ZS-004-06 虚线网格 */ + --chart-grid-weak: #1A2F5A; /* ZS-004-07 */ + + /* 图例 / Tooltip */ + --chart-legend-text: #C5CFE0; /* ZS-004-02 */ + --chart-legend-off: #4A6491; /* ZS-004-05 未选中 */ + --chart-tooltip-bg: rgba(12,24,54,0.92); + --chart-tooltip-border:#1A2F5A; /* ZS-004-07 */ + --chart-tooltip-title: #FFFFFF; + --chart-tooltip-value: #C5CFE0; + --chart-axispointer: #4096FF; /* ZS-002-05 */ + --chart-highlight-band:rgba(22,119,255,0.12); + + /* 通用图表色序（面积大） */ + --chart-c1: #1677FF; --chart-c2: #13C2C2; --chart-c3: #4096FF; --chart-c4: #36CFC9; + --chart-c5: #69B1FF; --chart-c6: #5CDBD3; --chart-c7: #91CAFF; --chart-c8: #87E8DE; + + /* 小面积图表色序 */ + --chart-s1: #4096FF; --chart-s2: #36CFC9; --chart-s3: #FF4D4F; + --chart-s4: #FFA39E; --chart-s5: #6388FF; --chart-s6: #478880; + + /* 排行进度条（§36.5） */ + --rank-bar-fill: linear-gradient(90deg, #1677FF 0%, #13C2C2 100%); + --rank-bar-track: #1A2F5A; /* ZS-004-07 */ + --rank-value: #FFFFFF; + + /* 甘特图（§38） */ + --gantt-track: #122347; /* ZS-004-08 行底纹 */ + --gantt-row-hover: #1A2F5A; /* ZS-004-07 */ + --gantt-c1: #FAAD14; /* 警告橙 */ + --gantt-c2: #FF4D4F; /* ZS-001-05 */ + --gantt-c3: #36CFC9; /* ZS-003-05 */ + --gantt-c4: #91CAFF; /* ZS-002-03 */ + --gantt-c5: #1677FF; /* ZS-002-06 */ + --gantt-today: #4096FF; /* ZS-002-05 今日线 */ +} +``` + +> 项目当前未引入图表库；若后续接入 ECharts，可将以上 token 注入主题（`backgroundColor` / `axisLine.lineStyle.color` / `splitLine.lineStyle` / `color[]` 色序 / `tooltip.backgroundColor` 等），保持与本规范一致。 +> +> **关于多系列填充色**：§36–§38 表格中标注的系列色用于说明语义映射；**实际多系列图表的系列填充色一律以 §41 图表色值（设计稿 8.7）为准**——即淡色系 `#FA9196 / #FFCC80 / #97EBCD / #A2E1F9 / #80BCFF …`，按系列数量取对应色序。§1.1.8 的高彩度色序仅用于需要强对比的强调场景（如单色进度条渐变、KPI 高亮）。 + +--- + +## 39. 环形图（Donut / Ring） + +> 对应设计稿「8.3 图表-环形图」。中心带总量数字的占比环图，按分类数量分**三环 / 四环 / 五环 / 六环 / 七环 / 八环**等变体。环段配色取 §41 图表色值（淡色系列），中心总量与引导标签取深蓝系字体色。 + +### 39.1 结构 + +``` + 三环 / 四环 …（标题） + ╭──────────╮ + Media│ │Social + 28% │ 34801 │ 36% + │ XXX总量 │ + ╰──────────╯ + News 28% +``` + +### 39.2 环体规格 + +| 属性 | 取值 | 来源 | +|------|------|------| +| 外径 | 容器短边的 `60%~70%` | — | +| 内径（中空比） | 外径的 `62%`（环宽约 `38%`） | — | +| 环段间隙 | `2px`（用容器底色 `#0C1836` 描边分隔） | §35.1 | +| 环段圆角 | `2px`（段端微圆角，可选） | §4.1 | +| 环段配色 | 按分类数取 §41 对应「N 色」色序 | §41 | +| 起始角 / 方向 | 顶部 `90°` 起，顺时针 | — | + +### 39.3 中心与标签 + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 中心主数值（如 `34801`） | `26px Bold D-DIN`，`#FFFFFF` | §2.1.2 | +| 中心说明（如 `XXX总量`） | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 引导标签名（如 `Social`） | `12px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 引导标签占比（如 `36%`） | `12px Regular`，`#FFFFFF` 或对应环段色 | — | +| 引导线 | `1px solid #4A6491` (ZS-004-05) 折线，从环段引至外侧标签 | §6.1 | +| 变体标题（三环 / 四环…） | `14px Medium`，`#C5CFE0`，居中于图上方 | §35.2 | + +### 39.4 交互 + +| 行为 | 动效 | +|------|------| +| 入场 | 环段沿顺时针扫出 `0°→终值`，`600ms ease-out`，按段错峰 `60ms` | +| Hover 环段 | 该段沿半径外扩 `4px`（`offset`），中心数值切换为该段值 + 占比，弹出 §35.6 Tooltip | +| 图例点击 | 切换分类显隐，其余环段占比按比例重算 | + +--- + +## 40. 关系图 / 散点图（Network / Scatter） + +> 对应设计稿「8.6 图表-散点图」「关系图」。用于展示账号、节点间关系的力导向网络图与散点分布。深蓝背景上以**发光节点 + 渐隐连线 + 平台聚类**呈现，节点配色取主色蓝 / 警告橙 / 危险红做分类，节点尺寸映射权重。 + +### 40.1 节点（Node） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 形状 | 圆形（普通节点）/ 头像圆（账号节点，`2px` 描边）/ 六边形（聚合节点） | — | +| 直径 | `8px ~ 40px`，按权重（连接数 / 数值）线性映射 | — | +| 分类色 A（本方 / 主） | `#1677FF` (ZS-002-06) | §1.1.3 | +| 分类色 B（异常 / 外部） | `--func-warning`（橙） | §27.4 | +| 分类色 C（高危 / 标红） | `#FF4D4F` (ZS-001-05) | §1.1.2 | +| 节点发光（重点节点） | `0 0 12px` 同色 40% 透明外发光 | §3.1 | +| 节点文字（数值 / 名称） | `12px Regular`，`#FFFFFF`（节点内）/ `#C5CFE0`（节点外） | — | +| 中心 / 焦点节点 | 加大直径 + 强发光，橙色 `--func-warning` 高亮 | — | + +### 40.2 连线（Edge） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 线宽 | `1px`（普通）/ `2px`（强关系） | — | +| 颜色 | `#4A6491` (ZS-004-05) 半透明，或取**起点节点分类色** 40% 透明 | §1.1.5 | +| 渐隐 | 由中心向外渐隐（`opacity 0.6 → 0.15`），弱化边缘视觉噪声 | — | +| 方向（有向） | 末端箭头 `4px`，同线色 | — | +| 高亮态（hover 节点时） | 关联边升为节点分类色满饱和、`2px`，无关边降至 `opacity 0.08` | — | + +### 40.3 散点图（Scatter，纯坐标分布） + +| 元素 | 规格 / 配色 | 来源 | +|------|-------------|------| +| 散点 | 实心圆 `6px ~ 16px`（尺寸可映射第三维） | — | +| 配色 | 小面积色序（§41 或 §1.1.8 小面积），分类着色 | §41 | +| 坐标轴 / 网格 | 沿用 §35.3 / §35.4 | §35 | +| 气泡变体 | 半透明填充 `35%` + `1px` 同色描边，避免重叠遮挡 | — | + +### 40.4 平台聚类与图例（如 Facebook / Twitter / 微博 / TikTok） + +| 元素 | 规格 | 来源 | +|------|------|------| +| 聚类标签 | 平台名 `14px Medium`，对应聚类主色（如蓝 / 橙 / 红） | — | +| 聚类辅文 | 数值 `12px Regular`，`#6E88B0` | — | +| 图例（XXX / XXX） | 方块 marker + 文字，置右下角 | §35.5 | +| 更新提示（如「近30分钟更新数据」） | `12px Regular`，`#6E88B0`，右下角 | — | + +### 40.5 控制区（关系图侧栏） + +设计稿左侧含「选择目标」下拉 + 分类勾选列表（主页发帖 / 群组发帖 / 私信 / 点赞 / 转发 / 帖子评论 / Pages内容 / 目标的主页帖子）+「添加账号 / 全选账号」按钮。 + +| 元素 | 规格 | 来源 | +|------|------|------| +| 「选择目标」下拉 | 沿用 §15 选择器 | §15 | +| 分类列表项 | `14px Regular`，前缀分类色圆点 `8px`，沿用 §16 多选 | §16 | +| 「添加账号」 | §5.2.2 默认按钮（含 `+` 图标） | §5.3.2 | +| 「全选账号」 | §5.2.3 文本按钮 | §5.2.3 | +| 刷新图标（右上 ⟳） | `16px`，`#6E88B0`，hover `#4096FF` | §8.2.5 | + +### 40.6 交互 + +| 行为 | 动效 | +|------|------| +| 力导向布局 | 节点入场后力导向收敛，`tick` 动画 `~800ms` 后静止 | +| Hover 节点 | 高亮关联边与邻接节点（§40.2），其余降透明；弹出 §35.6 Tooltip（节点名 / 类型 / 指标） | +| 点击节点 | 居中聚焦该节点并展开其一度关系；可下钻 | +| 缩放 / 平移 | 滚轮缩放 `0.5×~3×`，拖拽平移画布 | +| 拖拽节点 | 可手动拖拽固定节点位置 | + +--- + +## 41. 图表色值（Chart Palette · 多系列色序） + +> 对应设计稿「8.7 图表-色值」。这是**全站图表多系列填充的权威色序**（淡色系，深蓝背景上柔和、区分度高）。按系列数量从「三色」到「十色」各有固定取色顺序——系列数为 N 时直接取「N 色」整行，**不要自行截取或乱序**。如需超过十色或特殊场景，由 UI 设计师按整体风格补充。 + +### 41.1 基础色板 + +| 色名 | 色值 | 色相 | +|------|------|------| +| 粉红 | `#FA9196` | 红 | +| 橙红 | `#FCA58F` | 橙红 | +| 橙 | `#FDB887` | 橙 | +| 浅橙 | `#FFCC80` | 黄橙 | +| 黄绿 | `#DCD69A` | 黄绿 | +| 浅绿 | `#BAE1B3` | 绿 | +| 青绿 | `#97EBCD` | 青绿 | +| 浅青 | `#9EE4EA` | 青 | +| 浅蓝 | `#A2E1F9` | 天蓝 | +| 蓝 | `#80BCFF` | 蓝 | + +### 41.2 按系列数取色序 + +| 系列数 | 取色顺序 | +|--------|----------| +| 三色 | `#FA9196` · `#97EBCD` · `#80BCFF` | +| 四色 | `#FA9196` · `#FFCC80` · `#97EBCD` · `#A2E1F9` | +| 五色 | `#FA9196` · `#FFCC80` · `#97EBCD` · `#A2E1F9` · `#80BCFF` | +| 六色 | `#FA9196` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` | +| 七色 | `#FA9196` · `#FCA58F` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` | +| 八色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` | +| 九色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#DCD69A` · `#BAE1B3` · `#97EBCD` · `#A2E1F9` · `#80BCFF` | +| 十色 | `#FA9196` · `#FCA58F` · `#FDB887` · `#FFCC80` · `#DCD69A` · `#BAE1B3` · `#97EBCD` · `#9EE4EA` · `#A2E1F9` · `#80BCFF` | + +> 规律：色序整体沿「红 → 橙 → 黄绿 → 绿 → 青 → 蓝」色相环渐变铺开；系列数增加时在中间插入过渡色，**首色恒为 `#FA9196`、末色恒为 `#80BCFF`**，保证冷暖两端锚定不变。 + +### 41.3 与既有规范的关系 + +| 色序 | 用途 | 来源 | +|------|------|------| +| §41 淡色系列（本节） | 图表**多系列填充**（柱 / 折线 / 环形 / 散点分类）默认色序 | 设计稿 8.7 | +| §1.1.8 通用图表色序（高彩度） | 强对比强调：单色渐变进度条、KPI 高亮、需要醒目的单系列 | §1.1.8 | +| §27.4 / §1.1.2 语义色 | 带语义的系列（成功 / 警告 / 错误 / 信息） | §27.4 | + +> 三者优先级：**有语义 → 用语义色；多分类并列 → 用 §41；需强调单值 → 用 §1.1.8 高彩度**。§36–§40 中标注的具体系列色为语义示例，实际并列分类应回落到本节色序。 + +### 41.4 CSS Token 参考 + +```css +:root { + /* §41 图表多系列色板（淡色系，设计稿 8.7） */ + --chart-p-red: #FA9196; + --chart-p-redorange:#FCA58F; + --chart-p-orange: #FDB887; + --chart-p-amber: #FFCC80; + --chart-p-olive: #DCD69A; + --chart-p-green: #BAE1B3; + --chart-p-teal: #97EBCD; + --chart-p-cyan: #9EE4EA; + --chart-p-skyblue: #A2E1F9; + --chart-p-blue: #80BCFF; +} +``` + +```js +// 按系列数取色序（接入 ECharts 时用作 option.color） +export const CHART_PALETTES = { + 3: ['#FA9196', '#97EBCD', '#80BCFF'], + 4: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9'], + 5: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9', '#80BCFF'], + 6: ['#FA9196', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'], + 7: ['#FA9196', '#FCA58F', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'], + 8: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'], + 9: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'], + 10: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#9EE4EA', '#A2E1F9', '#80BCFF'], +} +``` + +--- + diff --git a/frontend-web/docs/ui规范-深蓝/05-页面范例.md b/frontend-web/docs/ui规范-深蓝/05-页面范例.md new file mode 100644 index 00000000..81e551e6 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/05-页面范例.md @@ -0,0 +1,320 @@ +# 深蓝色 UI 规范 · 05 页面范例（§42–§44） + +> 《深蓝色 UI 规范》分册之一。基础令牌见 `00-基础-色彩字体间距.md`，可 import 的变量见 `tokens.css`，总目录与 §索引见 `README.md`。`§N` 编号全局唯一。 + +**本篇目录**：`42` 表单弹窗范例 · `43` 卡片列表页 · `44` 数据概览仪表盘 + +--- + +## 42. 表单弹窗范例（添加 / 编辑标题） + +> 对应设计稿「添加/编辑标题」弹窗（截图 ui-25）。这是 §21 弹出式窗口在「专项 / 标题录入」场景下的落地范例：容器 / 遮罩 / 标题栏 / 底部按钮全部沿用 §21，本节补充截图中出现而 §21 未单列的两个原子——**复合输入行**（输入框 + 行内下拉 + 行内按钮）与**行内「添加项」实心按钮**（+ 类别一 / + 类别二），并给出完整表单项清单。配色从 §1.1.2 渐红系（必填星号）、§1.1.3 渐蓝系（ZS-002，主色 / 下拉 / 按钮）、§1.1.5 深蓝系（ZS-004，label / 边框 / 容器）取。 + +### 42.1 整体布局 + +``` +┌──────────────────────────────────────────────────────────────┐ +│ 添加/编辑标题 ✕ │ ← 标题居中 + 关闭 +│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ ← 发光分割线 +│ │ +│ * 专项名称 [请输入内容 ] [一键导入历史专项模板▾] [预览] │ ← 复合输入行 +│ * 专项简介 [请输入内容 ] │ +│ * 国家地区 [ ▾ ] │ +│ * 涉及类别 [ + 类别一 ] [ + 类别二 ] │ ← 行内添加按钮 +│ * 显示指数 [请选择 ▾ ] │ +│ │ +│ [ 取消 ] [ 保存 ] │ ← 底部居中 +└──────────────────────────────────────────────────────────────┘ +``` + +### 42.2 容器与标题（沿用 §21） + +| 元素 | 取值 | 来源 | +|------|------|------| +| 遮罩 / 容器 / 圆角 / 阴影 | 全部沿用 §21.1 | §21.1 | +| 容器宽度 | 大档 `800px`（复合输入行需要横向空间） | §21.1 | +| 标题文字 | `添加/编辑标题`，`20px Bold`，`#FFFFFF`，居中 | §21.2 | +| 标题发光分割线 | `linear-gradient(90deg, transparent, #1677FF, transparent)`，`1px` 高 | §8.2.4 / §21.2 | +| 关闭 `✕` | `16px`，`#6E88B0` (ZS-004-04)，hover `#4096FF` (ZS-002-05) | §21.2 | + +### 42.3 表单项（左 label + 右控件，沿用 §21.4） + +| 行 | label | 控件 | 复用 | +|----|-------|------|------| +| 1 | `* 专项名称` | 复合输入行（见 §42.4） | §42.4 | +| 2 | `* 专项简介` | 单行输入框，占位「请输入内容」 | §14.1 | +| 3 | `* 国家地区` | 选择器（▾，空态占位） | §15.1 | +| 4 | `* 涉及类别` | 行内「添加项」实心按钮组（见 §42.5） | §42.5 | +| 5 | `* 显示指数` | 选择器（▾，占位「请选择」） | §15.1 | + +- label `14px Regular`，`#C5CFE0` (ZS-004-02)，右对齐；必填星号 `*` `#F5222D` (ZS-001-06) 置于 label 前（§21.4） +- 表单项纵向间距 `--spacing-4` (16px)（§7.1） + +### 42.4 复合输入行（输入框 + 行内下拉 + 行内按钮） + +「专项名称」行把主输入框、「一键导入历史专项模板」下拉、「预览」主按钮拼在同一行。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 主输入框 | 沿用 §14.1，弹性撑满左侧剩余宽 | §14.1 | +| 行内下拉「一键导入历史专项模板 ▾」 | 沿用 §15.1 选择器触发器，固定宽（约 `200px`），占位文字 `#6E88B0` | §15.1 | +| 行内按钮「预览」 | §5.2.1 主按钮（实心 `#1677FF` + 白字） | §5.2.1 | +| 元素间水平间距 | `--spacing-2` (8px) | §7.1 | +| 三者垂直对齐 | 统一 `32px` 高，基线居中 | §5.1 | + +### 42.5 行内「添加项」实心按钮（+ 类别一 / + 类别二） + +「涉及类别」用一排实心主色蓝按钮，左侧 `+` 图标，点击进入对应类别的添加 / 编辑流程。 + +| 状态 | 背景 | 文字 / 图标 | 来源 | +|------|------|-------------|------| +| 默认 | `#1677FF` (ZS-002-06) | `#FFFFFF` | §5.2.1 / §5.3.2 | +| Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` | §5.2.1 | +| Active | `#003EB3` (ZS-002-08) | `#FFFFFF` | §5.2.1 | + +- 高度 `32px`，圆角 `2px`（§4.1），内边距 `0 14px`（§5.1） +- `+` 图标与文字同色 `#FFFFFF`，间距 `--spacing-1` (4px)（§5.3.2） +- 按钮之间间距 `--spacing-2` (8px) +- 与 §21.5.1 分段按钮组的区别：分段组是**互斥单选**（选中才高亮）；此处每个按钮都是**独立的添加入口**，常驻主色实心。 + +### 42.6 底部操作（沿用 §21.6） + +| 元素 | 规格 | 来源 | +|------|------|------| +| 对齐 | 居中（跟随截图） | §21.6 | +| 「取消」 | §5.2.2 默认按钮（Outline） | §5.2.2 | +| 「保存」 | §5.2.1 主按钮（实心蓝） | §5.2.1 | +| 顺序 / 间距 | 取消在左、保存在右；间距 `--spacing-2` (8px) | §5.3.4 | + +### 42.7 CSS Token 参考 + +```css +:root { + /* 复合输入行 */ + --field-row-gap: 8px; /* --spacing-2 元素间距 */ + --field-addon-select-w: 200px; /* 行内下拉固定宽 */ + --field-row-h: 32px; /* 统一高度 */ + + /* 行内添加按钮（沿用主按钮） */ + --addbtn-bg: #1677FF; /* ZS-002-06 */ + --addbtn-bg-hover: #0958D9; /* ZS-002-07 */ + --addbtn-bg-active: #003EB3; /* ZS-002-08 */ + --addbtn-text: #FFFFFF; +} +``` + +--- + +## 43. 卡片列表页（监测任务卡片） + +> 对应设计稿「监测任务卡片列表」（截图 ui-26）。这是 §22 卡片在「监测任务管理」场景下的整页范例：顶部导航沿用 §8、左侧三级菜单沿用 §8.3、卡片容器沿用 §22，本节补充**页面工具条**（搜索 + 添加 + 排序）与**监测任务卡片**的专用布局（头部 + 总量 KPI + 平台统计矩阵 + 底部操作 + 空态）。配色从 §1.1.3 渐蓝系（ZS-002，主色 / KPI 数字）与 §1.1.5 深蓝系（ZS-004，容器 / 文字）取。 + +### 43.1 整体布局 + +``` +┌─ Header（§8.2）──────────────────────────────────────────────┐ +├──┬────────────────────────────────────────────────────────────┤ +│三│ [🔍 搜索关键词/任务名称 ] [+ 添加任务] 排序: 创建时间▾ ↑升序 │ ← 工具条 +│级│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────┐ │ +│菜│ │ 莫某某 10247│ │ 冯某某 10247│ │ 钱某艺 10247│ │ 赵磊 12 │ │ ← 卡片网格 +│单│ │ 社交媒体(52)│ │ 社交媒体(52)│ │ 社交媒体(52)│ │ ... │ │ +│ │ │ [开始监测] │ │ [开始监测] │ │ [开始监测] │ │ │ │ +│ │ └────────────┘ └────────────┘ └────────────┘ └──────────┘ │ +└──┴────────────────────────────────────────────────────────────┘ +``` + +### 43.2 页面工具条 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 搜索框 | 沿用 §14.2 基本搜索框，占位「搜索关键词 / 任务名称」 | §14.2 | +| 「+ 添加任务」 | §5.3.2 图标 + 文字主按钮（实心 `#1677FF` + 白字 + `+`） | §5.3.2 | +| 排序标签「排序」 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 排序字段「创建时间 ▾」 | §15.1 选择器触发器（小号） | §15.1 | +| 升 / 降序切换「↑ 升序 / ↓ 降序」 | §5.2.3 文本按钮，激活向 `#4096FF` (ZS-002-05) | §5.2.3 | +| 工具条 → 卡片区间距 | `--spacing-5` (24px) | §7.1 | +| 工具条内元素间距 | `--spacing-3` (12px) | §7.1 | + +### 43.3 监测任务卡片 + +``` +┌──────────────────────────────────────┐ +│ 👤 莫某某 10247 │ ← 头部：头像+名称 / 右上总量 +│ 2023-09-09 09:13:00 总数量 │ +│ ──────────────────────────────────── │ +│ 社交媒体 (52) │ ← 统计区标题 +│ 微博 16 推特 8 facebook 16 │ ← 平台统计矩阵 +│ 抖音 12 土豆 6 大牛网 9 │ +│ ──────────────────────────────────── │ +│ url: t.djxqbjhgf9y.cn 也方开夫某利地址│ +│ [ 开始监测 ] │ ← 底部操作 +└──────────────────────────────────────┘ +``` + +#### 43.3.1 结构与配色 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片容器 | 同 §22.1（背景 `#122347` / 边框 `#1A2F5A` / 圆角 `4px` / 一级阴影） | §22.1 | +| 头像占位 | 圆 `40px`，底 `#1A2F5A` (ZS-004-07)，图标 `#6E88B0` | §22.3 | +| 任务名（莫某某） | `16px Medium`，`#FFFFFF` | §22.3 | +| 创建时间 | `12px Regular`（D-DIN 数字），`#6E88B0` (ZS-004-04) | §8.2.5 | +| 总量数值（10247） | `26px Bold`（D-DIN），`#4096FF` (ZS-002-05) | §2.1.2 / §1.1.3 | +| 总量标签「总数量」 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 头部底分割线 | `1px solid #1A2F5A` (ZS-004-07) | §6.1 | + +#### 43.3.2 平台统计矩阵 + +统计区为「平台名 + 数值」多列网格（如 社交媒体 (52) 下的 微博 / 推特 / facebook…）。 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 区标题「社交媒体 (52)」 | `14px Medium`，`#C5CFE0` (ZS-004-02)；括号计数 `#6E88B0` | — | +| 平台名 | `14px Regular`，`#6E88B0` (ZS-004-04) | — | +| 平台数值（数字） | `16px Bold`（D-DIN），`#C5CFE0` (ZS-004-02) | §2.1.2 | +| 矩阵列数 | 3 列等分，行间距 `--spacing-2` (8px) | §7.1 | +| 名 / 值间距 | `--spacing-1` (4px) | §7.1 | + +#### 43.3.3 底部操作 + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 「开始监测」 | §5.2.1 主按钮（实心 `#1677FF`）；运行中切 §5.4.2 加载态 | §5.2.1 / §5.4.2 | +| 次要链接（如 url / 地址） | §5.2.3 文本按钮 `#4096FF` (ZS-002-05) | §5.2.3 | +| 操作区上分割线 | `1px solid #2D4473`（弱化） | §6.1 | + +#### 43.3.4 空态卡片变体 + +部分卡片暂无数据（总量 `0` + 占位）： + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 总量数值 | `0`，`26px Bold`，`#6E88B0` (ZS-004-04，弱化非主色) | — | +| 占位文字「暂无数据」 | `14px Regular`，`#6E88B0` (ZS-004-04)，居中 | §35.9 | +| 占位插画 | 灰度线性图标，`#4A6491` (ZS-004-05) | §35.9 | + +### 43.4 卡片栅格（沿用 §22.4） + +| 规则 | 取值 | 来源 | +|------|------|------| +| 列数 | 自适应，常用 3~4 列 | — | +| 卡片横 / 纵间距 | `--spacing-6` (32px) | §22.4 | +| 卡片内边距 | `--spacing-4` (16px) | §22.4 | + +### 43.5 CSS Token 参考 + +```css +:root { + /* 监测任务卡片 */ + --task-card-name: #FFFFFF; + --task-card-time: #6E88B0; /* ZS-004-04 */ + --task-kpi-num: #4096FF; /* ZS-002-05 总量数字 */ + --task-kpi-label: #6E88B0; /* ZS-004-04 */ + --task-stat-name: #6E88B0; /* ZS-004-04 平台名 */ + --task-stat-num: #C5CFE0; /* ZS-004-02 平台数值 */ + --task-divider: #1A2F5A; /* ZS-004-07 头部分割 */ + --task-divider-weak: #2D4473; /* ZS-004-06 操作区分割 */ + --task-empty-text: #6E88B0; /* ZS-004-04 空态 */ +} +``` + +--- + +## 44. 数据概览仪表盘（KPI 指标条 + 综合图表） + +> 对应设计稿「资源使用率概览大屏」（截图 ui-27）。这是一张把 §35–§41 各图表与 §28 表格、§9.1 页签组合在一起的概览页。本节补充截图顶部出现而前文未单列的新原子——**KPI 指标卡条**（图标 + 标签 + 大数值 + 已用 + 迷你环 + 同比 / 环比箭头徽标），其余区块均引用既有章节。配色从 §1.1.3 渐蓝系（ZS-002，主色 / 数值）、§1.1.4 渐青系（ZS-003，辅色）、§1.1.5 深蓝系（ZS-004，容器 / 文字）取；涨跌语义色见 §44.2。 + +### 44.1 整体布局 + +``` +┌──┬────────────────────────────────────────────────────────────┐ +│三│ ▓ KPI 指标条（账号/设备/浏览器/代理IP/VPS/邮箱/手机卡/链卡服 使用率）▓│ +│级│ ┌─ ▌XXX标题 ───────────────┐ ┌─ ▌XXX标题（资源列表）────────┐│ +│菜│ │ [全部|账号资源|设备指标…] │ │ 🔍搜索 排序 ││ +│单│ │ ◐异常率40% ╱╲折线异常点 │ │ 资源资料 关联设备 2024-… ││ +│ │ │ 总量300 正常270 异常30 │ │ …（§28 表格行） ││ +│ │ └───────────────────────────┘ └──────────────────────────────┘│ +│ │ ┌─ ▌XXX标题 ───────────────────────┐ ┌─ ▌XXX标题 ──────────┐│ +│ │ │ 异常分析 饼 + 折线（§37 / §39） │ │ ◐300/270 + 趋势饼 ││ +│ │ └────────────────────────────────────┘ └─────────────────────┘│ +└──┴────────────────────────────────────────────────────────────┘ +``` + +### 44.2 涨跌语义色 + +| 语义 | 色值 | 来源 | +|------|------|------| +| 上升 / 正向（▲） | `#13C2C2` (ZS-003-06，辅色青) | §1.1.4 | +| 下降 / 负向（▼） | `#F5222D` (ZS-001-06，主色红) | §1.1.2 | +| 持平 | `#6E88B0` (ZS-004-04) | §1.1.5 | + +> 涨跌仅用语义色，不混入图表多系列色；正向用辅色青（ZS-003）而非主色蓝，避免与 KPI 数值蓝撞色。 + +### 44.3 KPI 指标卡条 + +横向一排等宽指标卡，每张承载一个使用率指标（如「账号使用率 139 已用」+ 迷你环 + 同比箭头）。 + +``` +┌────────────────────────┐ +│ 🅰 账号使用率 │ ← 图标 + 标签 +│ 139 ◐ 45% ▲ │ ← 大数值 + 迷你环 + 同比 +│ 已用 同比 │ +└────────────────────────┘ +``` + +| 元素 | 色值 / 规格 | 来源 | +|------|-------------|------| +| 卡片容器 | 背景 `#122347` (ZS-004-08)，边框 `1px solid #1A2F5A`，圆角 `4px`，一级阴影 | §22.1 | +| 指标图标 | `20px`，主色 `#4096FF` (ZS-002-05) 单色化 | §1.1.6 | +| 指标标签（账号使用率） | `14px Regular`，`#C5CFE0` (ZS-004-02) | — | +| 大数值（139） | `26px Bold`（D-DIN），`#FFFFFF` | §2.1.2 | +| 单位 / 说明「已用」 | `12px Regular`，`#6E88B0` (ZS-004-04) | — | +| 迷你环（mini-donut） | 直径 `32px`，环宽 `4px`，已用段 `#1677FF` (ZS-002-06)，底环 `#2D4473` (ZS-004-06) | §39.2 | +| 环内百分比 | `12px Bold`（D-DIN），`#FFFFFF` | §39.3 | +| 同比 / 环比箭头徽标 | `12px`，▲ 用 `#13C2C2`、▼ 用 `#F5222D`（见 §44.2） | §44.2 | +| 卡片宽度 | 等分横排（8 张则各占 1/8），最小宽 `160px` | — | +| 卡片间距 | `--spacing-4` (16px) | §7.1 | +| 卡片内边距 | `--spacing-4` (16px) | §7.1 | + +### 44.4 区块组合引用 + +| 区块 | 复用 | 备注 | +|------|------|------| +| 区块标题（▌XXX标题） | §35.2 图表标题（主色蓝竖条 + 文字） | — | +| 分类页签（全部 / 账号资源 / …） | §9.1.1 横向页签 | 激活 `#4096FF` + `2px` 下划线 | +| 日期筛选（右上 `2023-02`） | §17.1 日期触发器 | — | +| 异常率环形图（40% / 总量300 / 正常270 / 异常30） | §39 环形图 | 正常段主色蓝、异常段 `#F5222D`（§44.2） | +| 折线异常点图（1月10日 异常率12.9%） | §37.3 单线异常点图 + §35.6 Tooltip | 异常点用红 `#F5222D` 强调 | +| 资源列表表格 | §28 表格 + §14.2 搜索 + §13 分页 | — | +| 异常分析饼 / 趋势饼 | §39 环形图 | 多系列回落 §41 色序 | +| 容器 / 内边距 / 多图间距 | §35.1 图表容器 | `--spacing-5` / `--spacing-6` | + +### 44.5 交互 + +| 行为 | 规则 | +|------|------| +| KPI 卡 hover | 卡片阴影升二级（§3.1.4），迷你环高亮，弹出 §35.6 Tooltip（已用 / 总量 / 同比明细） | +| 页签切换 | 切换分类后下方图表与表格联动刷新（§9.1.1） | +| 图表 hover | 沿用各图表节交互（§37.6 / §39.4 等） | +| 日期筛选变更 | 重新拉取区块数据，图表入场动画重放 | + +### 44.6 CSS Token 参考 + +```css +:root { + /* KPI 指标卡 */ + --kpi-card-bg: #122347; /* ZS-004-08 */ + --kpi-card-border: #1A2F5A; /* ZS-004-07 */ + --kpi-icon: #4096FF; /* ZS-002-05 */ + --kpi-label: #C5CFE0; /* ZS-004-02 */ + --kpi-value: #FFFFFF; + --kpi-sub: #6E88B0; /* ZS-004-04 已用 */ + --kpi-ring-used: #1677FF; /* ZS-002-06 迷你环已用段 */ + --kpi-ring-track: #2D4473; /* ZS-004-06 迷你环底 */ + + /* 涨跌语义 */ + --trend-up: #13C2C2; /* ZS-003-06 上升（辅色青） */ + --trend-down: #F5222D; /* ZS-001-06 下降（红） */ + --trend-flat: #6E88B0; /* ZS-004-04 持平 */ +} +``` diff --git a/frontend-web/docs/ui规范-深蓝/README.md b/frontend-web/docs/ui规范-深蓝/README.md new file mode 100644 index 00000000..65b49a39 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/README.md @@ -0,0 +1,82 @@ +# 深蓝色 UI 规范（拆分版） + +面向开发的深蓝主题设计规范。原单文件 `../ui修改-深蓝.md`（约 5200 行）已按模块拆分到本目录，便于按需查阅、减少 diff 冲突，也方便配合 AI 只加载相关分册。 + +> **颜色唯一来源**：所有色值以 **§1 色彩**（见 [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md)）为准，可执行变量见 [`tokens.css`](./tokens.css)。业务代码 **import `tokens.css` 并用 `var(--token)`**，不要硬编码 HEX。 + +## 分册 + +| 文件 | 章节 | 内容 | +|------|------|------| +| [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md) | §1–§7 | 色彩 / 字体 / 阴影 / 圆角 / 按钮 / 分割线 / 间距 | +| [`01-导航.md`](./01-导航.md) | §8–§13 | 导航组件 / 锚点页签 / 步骤条 / 面包屑 / 页头 / 分页 | +| [`02-表单.md`](./02-表单.md) | §14–§21 | 输入框 / 选择器 / 单复选 / 日期 / 穿梭框 / 树选择 / 上传 / 弹窗 | +| [`03-数据展示.md`](./03-数据展示.md) | §22–§34 | 卡片 / 折叠 / 描述列表 / 列表 / 时间轴 / 进度条 / 表格 / 标签 / 树 / 对话框 / 提示 / 气泡确认 | +| [`04-图表.md`](./04-图表.md) | §35–§41 | 图表通用 / 柱状 / 折线 / 甘特 / 环形 / 关系散点 / 图表色值 | +| [`05-页面范例.md`](./05-页面范例.md) | §42–§44 | 表单弹窗 / 卡片列表页 / 数据概览仪表盘 | +| [`tokens.css`](./tokens.css) | — | 全量 CSS 变量（颜色 / 间距 / 圆角 / 阴影 / 字体），可直接 import | + +## § 索引（编号 → 所在文件） + +章节编号 `§N` 全局唯一、跨文件不变；文中 `§N` / `§N.x` 引用按下表定位。 + +| § | 标题 | 文件 | +|---|------|------| +| §1 | 色彩 | 00 | +| §2 | 字体 | 00 | +| §3 | 阴影 | 00 | +| §4 | 圆角 | 00 | +| §5 | 按钮 | 00 | +| §6 | 分割线 | 00 | +| §7 | 间距 | 00 | +| §8 | 导航组件 | 01 | +| §9 | 锚点与页签 | 01 | +| §10 | 步骤条 | 01 | +| §11 | 面包屑 | 01 | +| §12 | 页头 | 01 | +| §13 | 分页 | 01 | +| §14 | 输入框（搜索框） | 02 | +| §15 | 选择器 | 02 | +| §16 | 单选与多选 | 02 | +| §17 | 日期选择器 | 02 | +| §18 | 穿梭框 | 02 | +| §19 | 树选择 | 02 | +| §20 | 上传 | 02 | +| §21 | 弹出式窗口（Modal） | 02 | +| §22 | 卡片 | 03 | +| §23 | 折叠面板 | 03 | +| §24 | 描述列表 | 03 | +| §25 | 列表 | 03 | +| §26 | 时间轴（节点型） | 03 | +| §27 | 进度条 | 03 | +| §28 | 表格 | 03 | +| §29 | 标签 | 03 | +| §30 | 树形控件 | 03 | +| §31 | 时间轴（长文本） | 03 | +| §32 | 对话框（确认框） | 03 | +| §33 | 全局提示 | 03 | +| §34 | 气泡确认 | 03 | +| §35 | 图表通用规范 | 04 | +| §36 | 柱状图 | 04 | +| §37 | 折线图 | 04 | +| §38 | 甘特图 | 04 | +| §39 | 环形图 | 04 | +| §40 | 关系图 / 散点图 | 04 | +| §41 | 图表色值 | 04 | +| §42 | 表单弹窗范例 | 05 | +| §43 | 卡片列表页 | 05 | +| §44 | 数据概览仪表盘 | 05 | + +## 约定 + +- **颜色**：以 §1 为准，代码用 `tokens.css` 的 `var(--token)`。功能语义色（成功/警告/错误/信息/处理中）见 §1.1.9 / `--func-*`。 +- **间距**：仅用 §7 的 8px 阶梯（`--spacing-1..8`），禁用 5px / 13px 等非阶梯值。 +- **圆角**：按钮/输入/标签 `2px`，卡片/分栏/弹窗 `4px`（`--radius-*`）。 +- **跨节引用**：保留 `§N` 编号，用上方「§ 索引」定位文件。 +- **名称易混点**：§26 时间轴(节点型) ↔ §31 时间轴(长文本)；§21 弹出式窗口(Modal) ↔ §32 对话框(确认框)。 +- **图表两套色板**：§1.1.8（高彩度，强调单值）与 §41（淡色系，多分类并列）并存，优先级见 §41.3。 + +## 维护 + +- 改色 / 改间距 → 先改 **`tokens.css` + §1/§7**，组件分册回落引用，不在分册里另立硬编码。 +- 新增整页范例 → 进 `05-页面范例.md`，沿用既有组件 § 与 `tokens.css`。 diff --git a/frontend-web/docs/ui规范-深蓝/tokens.css b/frontend-web/docs/ui规范-深蓝/tokens.css new file mode 100644 index 00000000..aeee2529 --- /dev/null +++ b/frontend-web/docs/ui规范-深蓝/tokens.css @@ -0,0 +1,211 @@ +/* ============================================================================= + * 深蓝色 UI 规范 · 设计令牌（tokens.css） + * ----------------------------------------------------------------------------- + * 这是《深蓝色 UI 规范》全站颜色 / 间距 / 圆角 / 阴影 / 字体的唯一可执行来源。 + * 开发时优先 import 本文件并使用 var(--token)，不要在业务代码里硬编码 HEX。 + * + * 文档对应： + * §1 色彩 → 原始色阶 --zs-*、功能语义 --func-*、装饰/图表色板 + * §2 字体 → --font-* / --fs-* + * §3 阴影 → --shadow-* + * §4 圆角 → --radius-* + * §7 间距 → --spacing-* + * 组件级 token（--card-* / --modal-* / --kpi-* 等）保留在各分册的「CSS Token 参考」 + * 小节中，均回落到本文件的原始/语义 token。 + * ========================================================================== */ + +:root { + /* --------------------------------------------------------------------------- + * 1. 原始色阶（§1.1.2–§1.1.5）—— 01 最浅 → 10 最深 + * ------------------------------------------------------------------------ */ + + /* 渐红系 ZS-001 —— 警示 / 错误 / 强调 */ + --zs-001-01: #FFF1F0; + --zs-001-02: #FFCCC7; + --zs-001-03: #FFA39E; + --zs-001-04: #FF7875; + --zs-001-05: #FF4D4F; + --zs-001-06: #F5222D; + --zs-001-07: #CF1322; + --zs-001-08: #A8071A; + --zs-001-09: #820014; + --zs-001-10: #5C0011; + + /* 渐蓝系 ZS-002 —— 信息 / 链接 / 次级操作（含主色） */ + --zs-002-01: #E6F4FF; + --zs-002-02: #BAE0FF; + --zs-002-03: #91CAFF; + --zs-002-04: #69B1FF; + --zs-002-05: #4096FF; + --zs-002-06: #1677FF; + --zs-002-07: #0958D9; + --zs-002-08: #003EB3; + --zs-002-09: #002C8C; + --zs-002-10: #001D6C; + + /* 渐青系 ZS-003 —— 成功 / 在线 / 数据高亮（含辅色） */ + --zs-003-01: #E6FFFB; + --zs-003-02: #B5F5EC; + --zs-003-03: #87E8DE; + --zs-003-04: #5CDBD3; + --zs-003-05: #36CFC9; + --zs-003-06: #13C2C2; + --zs-003-07: #08979C; + --zs-003-08: #006D75; + --zs-003-09: #00474F; + --zs-003-10: #002329; + + /* 深蓝系 ZS-004 —— 背景 / 容器 / 导航 / 文字（主题核心） */ + --zs-004-01: #E8EDF5; + --zs-004-02: #C5CFE0; + --zs-004-03: #9BADC8; + --zs-004-04: #6E88B0; + --zs-004-05: #4A6491; + --zs-004-06: #2D4473; + --zs-004-07: #1A2F5A; + --zs-004-08: #122347; + --zs-004-09: #0C1836; + --zs-004-10: #060E24; + + /* --------------------------------------------------------------------------- + * 2. 功能角色色（§1.1.6）—— 从色阶提取的语义别名 + * ------------------------------------------------------------------------ */ + --color-primary: var(--zs-002-06); /* #1677FF 主操作 */ + --color-primary-hover: var(--zs-002-07); /* #0958D9 */ + --color-primary-active: var(--zs-002-08); /* #003EB3 */ + --color-link: var(--zs-002-05); /* #4096FF 链接 / 文本按钮 */ + --color-accent: var(--zs-003-06); /* #13C2C2 辅色 */ + + --color-text: var(--zs-004-02); /* #C5CFE0 正文字体 */ + --color-text-secondary: var(--zs-004-04); /* #6E88B0 次级字体 */ + --color-text-disabled: var(--zs-004-05); /* #4A6491 禁用字体 */ + --color-text-strong: #FFFFFF; /* 标题 / 强调 */ + + --color-bg-page: var(--zs-004-09); /* #0C1836 页面背景 */ + --color-bg-container: var(--zs-004-07); /* #1A2F5A 容器背景 */ + --color-bg-card: var(--zs-004-08); /* #122347 卡片背景 */ + --color-bg-deepest: var(--zs-004-10); /* #060E24 全局底色 */ + --color-border: var(--zs-004-07); /* #1A2F5A 容器边框 */ + --color-border-strong: var(--zs-004-04); /* #6E88B0 控件边框 */ + --color-white: #FFFFFF; + + /* --------------------------------------------------------------------------- + * 3. 功能语义色（§1.1.9）—— 成功/警告/错误/信息/处理中 + * 成功绿、警告橙为标准色系外补充色；其余复用色阶。 + * ------------------------------------------------------------------------ */ + --func-success: #52C41A; /* 补充色 · 成功绿 */ + --func-warning: #FAAD14; /* 补充色 · 警告橙 */ + --func-error: var(--zs-001-06); /* #F5222D */ + --func-info: var(--zs-002-06); /* #1677FF */ + --func-processing: var(--zs-003-06); /* #13C2C2 */ + + /* 浅底变体（Message / Alert / Tag 背景，16% 透明度） */ + --func-success-bg: rgba(82, 196, 26, 0.16); + --func-warning-bg: rgba(250, 173, 20, 0.16); + --func-error-bg: rgba(245, 34, 45, 0.16); + --func-info-bg: rgba(22, 119, 255, 0.16); + + /* --------------------------------------------------------------------------- + * 4. 小面积装饰色（§1.1.7）—— 仅点缀 / 徽标，勿做大面积背景 + * ------------------------------------------------------------------------ */ + --deco-violet: #6388FF; + --deco-danger: #F5222D; + --deco-brand-blue: #12306C; + --deco-teal: #478880; + --deco-alert: #950404; + + /* --------------------------------------------------------------------------- + * 5. 字体（§2） + * ------------------------------------------------------------------------ */ + --font-zh: 'Noto Sans S Chinese', 'Noto Sans SC', system-ui, sans-serif; + --font-num: 'D-DIN', 'Noto Sans S Chinese', sans-serif; /* 数据数字 */ + --font-digital:'DS-Digital', 'D-DIN', sans-serif; /* 大屏特殊数字 */ + --font-logo: 'DOUYUFont', 'Noto Sans S Chinese', sans-serif; + --font-table: 'Arial', 'Noto Sans S Chinese', sans-serif; /* 表格数字 */ + + /* 常用字号（后台系统，§2.1.2） */ + --fs-12: 12px; + --fs-14: 14px; + --fs-16: 16px; + --fs-18: 18px; + --fs-20: 20px; + --fs-24: 24px; + --fs-26: 26px; + + /* --------------------------------------------------------------------------- + * 6. 间距（§7）—— 8px 基准，密(≤16) / 疏(≥24)，禁用非阶梯值 + * ------------------------------------------------------------------------ */ + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 12px; + --spacing-4: 16px; + --spacing-5: 24px; + --spacing-6: 32px; + --spacing-7: 40px; + --spacing-8: 56px; + + /* --------------------------------------------------------------------------- + * 7. 圆角（§4） + * ------------------------------------------------------------------------ */ + --radius-button: 2px; + --radius-input: 2px; + --radius-tag: 2px; + --radius-card: 4px; + --radius-panel: 4px; + --radius-modal: 4px; + + /* --------------------------------------------------------------------------- + * 8. 阴影（§3.1.4） + * ------------------------------------------------------------------------ */ + --shadow-1: 0 2px 8px rgba(22, 119, 255, 0.12); /* 卡片悬浮 */ + --shadow-2: 0 4px 16px rgba(22, 119, 255, 0.24); /* hover / 弹出层 */ + --shadow-3: 0 8px 32px rgba(6, 14, 36, 0.6); /* Dialog / Drawer */ + --shadow-modal-mask: rgba(6, 14, 36, 0.6); /* 遮罩 */ + + /* 常用渐变 */ + --gradient-header: linear-gradient(180deg, #122347 0%, #0C1836 100%); /* 顶栏 §8.2.1 */ + --gradient-title-line: linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%); /* 标题发光线 §8.2.4 */ +} + +/* ============================================================================= + * 图表多系列色板 + * ========================================================================== */ +:root { + /* 通用图表色序（§1.1.8，面积大：柱/折线/饼，高彩度） */ + --chart-g-1: #1677FF; + --chart-g-2: #13C2C2; + --chart-g-3: #4096FF; + --chart-g-4: #36CFC9; + --chart-g-5: #69B1FF; + --chart-g-6: #5CDBD3; + --chart-g-7: #91CAFF; + --chart-g-8: #87E8DE; + + /* 小面积图表色序（§1.1.8，散点/迷你图/徽标） */ + --chart-s-1: #4096FF; + --chart-s-2: #36CFC9; + --chart-s-3: #FF4D4F; + --chart-s-4: #FFA39E; + --chart-s-5: #6388FF; + --chart-s-6: #478880; + + /* 多系列填充色板（§41，淡色系，分类并列默认色序） */ + --chart-p-red: #FA9196; + --chart-p-redorange: #FCA58F; + --chart-p-orange: #FDB887; + --chart-p-amber: #FFCC80; + --chart-p-olive: #DCD69A; + --chart-p-green: #BAE1B3; + --chart-p-teal: #97EBCD; + --chart-p-cyan: #9EE4EA; + --chart-p-skyblue: #A2E1F9; + --chart-p-blue: #80BCFF; +} + +/* + * 图表配色优先级（§41.3）： + * 有语义 → 用 --func-*；多分类并列 → 用 --chart-p-*（§41 色板）； + * 需强调单值 → 用 --chart-g-* / --chart-s-*（§1.1.8 高彩度）。 + * + * 接入 ECharts 时按系列数取 option.color，见 §41.4 的 CHART_PALETTES。 + */ diff --git a/frontend-web/docs/浅红色ui修改.md b/frontend-web/docs/浅红色ui修改.md index f2cdb310..38374add 100644 --- a/frontend-web/docs/浅红色ui修改.md +++ b/frontend-web/docs/浅红色ui修改.md @@ -1,310 +1,1786 @@ -# 浅色红色 UI 规范对齐 — 实施计划 - -> 依据：`H:\页面设计\UI设计规范\浅色红色设计规范-前端用.pdf`（共 104 页） -> 范围：**仅对齐 Light 模式（红色主题）**，**不改动图表部分** +# 浅红色 UI 规范 --- -## ⚠️ 重要约束（必读） +## 1. 色彩 -### 1. 主题切换必须保留 -项目使用 `next-themes` 实现 Light/Dark 切换： +### 1.1 标准色 -- `:root` → Light 模式（红色品牌，对应本规范） -- `.dark` → Dark 模式（蓝色品牌，**不在本次范围内**） -- 切换组件入口：`src/components/theme-provider.tsx` +色彩体系分为**主色**与**辅色**两大类。 -**所有改动只能动 `:root` 块和 light-only 选择器，禁止动 `.dark` 块和 `dark:` 前缀样式。** +- **主色**：渐红系（ZS-001）、渐蓝系（ZS-002），用于品牌表达与核心交互。 +- **辅色**：渐橙系（FS-001）、渐绿系（FS-002）、渐青系（FS-003）、中性灰系（FS-004），用于状态提示、数据可视化与文字 / 背景 / 分割线。 -### 2. 不动图表 -本次跳过 `chart-1` ~ `chart-5` 颜色变量和所有图表组件。 - -### 3. 同一 token 双模式都用时如何改 -若变量同时被 light/dark 使用（如 `--radius`、按钮 `h-*`、`--primary-foreground`），改动后需在 Dark 模式下回归检查，确保没有破坏。 +每个色系按明度从浅到深编号（`-01` 最浅，数字越大越深），并附两种渐变色（`-14` 线性渐变、`-15` 径向渐变）。本主题为**浅色主题**：以白 / 浅灰作大面积背景，以深色作正文，红色为品牌强调主色。 --- -## 改动总目标对照 +#### 1.1.1 色系总览 -| 类别 | UI 规范 | 现状 | 差异 | -|------|--------|------|------| -| 主品牌红 | `#F5222D` | `#d92121` (`oklch(0.52 0.19 27)`) | 偏差 | -| 深色品牌 | `#CF1322` / `#A8071A` | 未使用 | 缺失 | -| 圆角-按钮 | 2px | 12px (`--radius: 0.75rem`) | 严重偏大 | -| 圆角-卡片 | 4px | 12px | 严重偏大 | -| 按钮高度（正常）| 32px | 36px (`h-9`) | 偏大 4px | -| 按钮高度（小）| 24px | 32px (`h-8`) | 偏大 8px | -| 输入框高度 | 32px | 36px (`h-9`) | 偏大 4px | -| 中文字体 | NotoSansSChinese | 系统字体 | 未引入 | -| 数字字体 | D-DIN | 系统字体 | 未引入 | -| 间距体系 | 8px 基准（4/8/12/16/24/32/40/56）| Tailwind 默认 | 基本一致 | +| 类别 | 色系 | 用途定位 | 代码前缀 | +|------|------|----------|----------| +| 主色 | 渐红系 | 品牌主色、强调操作、警示与错误 | ZS-001 | +| 主色 | 渐蓝系 | 信息、链接、次级操作 | ZS-002 | +| 辅色 | 渐橙系 | 警告、进行中、提示标签 | FS-001 | +| 辅色 | 渐绿系 | 成功、在线、通过状态 | FS-002 | +| 辅色 | 渐青系 | 数据高亮、图表、辅助信息 | FS-003 | +| 辅色 | 中性灰系 | 背景、文字、图标、分割线 | FS-004 | + +> 每个色系内：`-01 ~ -03` 为**浅色**（用于大面积底色）；`-04 ~ -09` 为**中亮色**（用于标签、图表、提示等）；`-10` 及以后为**深色**（用于小面积按钮、图标等）；`-14 / -15` 为渐变色（用于特殊装饰性小面积底色）。 --- -## 分步实施计划 +#### 1.1.2 主色 · 渐红系（ZS-001） -### Step 1 — 颜色变量对齐（Light 模式） +品牌主色系。用于主操作按钮、重要强调、错误与危险告警。 -**文件**：`src/styles/globals.css` -**只动 `:root` 块（第 242-277 行），保持 `.dark` 块原样** - -#### 1.1 主色映射 - -| 角色 | 规范值 | 用途 | -|------|--------|------| -| 主色 | `#F5222D` | `--primary`、`--ring`、`--sidebar-primary` | -| 主色 hover | `#CF1322` | 按钮 hover 状态（新增辅助变量） | -| 主色 active | `#A8071A` | 按钮按下状态 | -| 主色淡 1 | `#FEEDED` | `--accent`（极淡红，背景） | -| 主色淡 2 | `#FDDADC` | hover bg、tag 背景 | -| 主色淡 3 | `#FCB5B9` | 浅边框、selected 态 | -| 危险色 | `#F5222D` | `--destructive` | - -#### 1.2 新增工程变量（建议加在 `:root` 内） - -```css -/* 红色主题阶梯色（规范色板）*/ ---brand-50: #FEFAFA; ---brand-100: #FEF6F6; ---brand-200: #FEEDED; ---brand-300: #FDDADC; ---brand-400: #FCB5B9; ---brand-500: #FA9196; ---brand-600: #F86C73; ---brand-700: #F74750; ---brand-800: #F5222D; /* ← 主色 */ ---brand-900: #CF1322; /* ← hover */ ---brand-950: #A8071A; /* ← active */ - -/* 辅色（规范）*/ ---accent-orange: #FF9900; ---accent-green: #2FD69A; ---accent-cyan: #45C3F3; -``` - -#### 1.3 `--workspace-brand` 同步 - -`:root` 内：`--workspace-brand: #F5222D;`（从 `#d92121` 改） -`.dark` 内：**不动**（保持 `#3b82f6` 蓝色） - -#### 1.4 验收 -- 切到 Light 模式：所有按钮、链接、选中态使用规范红 -- 切到 Dark 模式：依然是原蓝色品牌（无变化） +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| ZS-001 | `#CF1322` | 深色 | 品牌代表红（默认主色基准） | +| ZS-001-01 | `#FEFAFA` | 浅色 | 极浅红，大面积底色 | +| ZS-001-02 | `#FEF6F6` | 浅色 | 浅红底色 | +| ZS-001-03 | `#FEEDED` | 浅色 | 浅红底色 / 错误背景 | +| ZS-001-04 | `#FDDADC` | 中亮色 | — | +| ZS-001-05 | `#FCB5B9` | 中亮色 | — | +| ZS-001-06 | `#FA9196` | 中亮色 | — | +| ZS-001-07 | `#F86C73` | 中亮色 | 浅红 Tag / 图表 | +| ZS-001-08 | `#F74750` | 中亮色 | — | +| ZS-001-09 | `#F5222D` | 中亮色 | **标准红**，主按钮 / 图标 | +| ZS-001-10 | `#BC0D1E` | 深色 | 深红，Hover | +| ZS-001-11 | `#A8071A` | 深色 | 深红，Active / Press | +| ZS-001-12 | `#820014` | 深色 | 极深红 | +| ZS-001-13 | `#5C0011` | 深色 | 最深红 | +| ZS-001-14 | `#F5222D → #A8071A` | 线性渐变 | 装饰底色 | +| ZS-001-15 | `#F86C73 → #F5222D` | 径向渐变 | 装饰底色 | --- -### Step 2 — 圆角规范化 +#### 1.1.3 主色 · 渐蓝系（ZS-002） -**文件**：`src/styles/globals.css`（`--radius` 是全局变量，light/dark 共用） +用于信息提示、链接、次级按钮与图表。 -#### 2.1 改动方案（推荐） +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| ZS-002 | `#0062D9` | 深色 | 蓝色代表色（基准） | +| ZS-002-01 | `#F9FCFF` | 浅色 | 极浅蓝，大面积底色 | +| ZS-002-02 | `#F4F9FF` | 浅色 | 浅蓝底色 | +| ZS-002-03 | `#EAF4FF` | 浅色 | 浅蓝底色 / 信息背景 | +| ZS-002-04 | `#D4E9FF` | 中亮色 | — | +| ZS-002-05 | `#AAD2FF` | 中亮色 | — | +| ZS-002-06 | `#80BCFF` | 中亮色 | — | +| ZS-002-07 | `#55A6FE` | 中亮色 | 浅蓝 Tag / 图表 | +| ZS-002-08 | `#2B8FFE` | 中亮色 | — | +| ZS-002-09 | `#0079FE` | 中亮色 | **标准蓝**，链接 / 信息主色 | +| ZS-002-10 | `#0056C6` | 深色 | 深蓝，Hover | +| ZS-002-11 | `#004AB3` | 深色 | 深蓝，Active | +| ZS-002-12 | `#00368C` | 深色 | 极深蓝 | +| ZS-002-13 | `#002466` | 深色 | 最深蓝 | +| ZS-002-14 | `#0079FE → #004AB3` | 线性渐变 | 装饰底色 | +| ZS-002-15 | `#55A6FE → #0079FE` | 径向渐变 | 装饰底色 | -按规范：按钮 2px、卡片/页面框 4px。但当前许多组件依赖 `rounded-md` / `rounded-lg`，全局把 `--radius` 改成 4px 会引起视觉跳变。 +--- -**采用细粒度策略：** +#### 1.1.4 辅色 · 渐橙系（FS-001） + +用于警告、进行中、待处理等中性偏提醒状态。 + +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| FS-001 | `#D97B00` | 深色 | 橙色代表色（基准） | +| FS-001-01 | `#FFFCF9` | 浅色 | 极浅橙，大面积底色 | +| FS-001-02 | `#FFFAF4` | 浅色 | 浅橙底色 | +| FS-001-03 | `#FFF6EA` | 浅色 | 浅橙底色 / 警告背景 | +| FS-001-04 | `#FFEED4` | 中亮色 | — | +| FS-001-05 | `#FFDDAA` | 中亮色 | — | +| FS-001-06 | `#FFCC80` | 中亮色 | — | +| FS-001-07 | `#FFBB55` | 中亮色 | 浅橙 Tag / 图表 | +| FS-001-08 | `#FFAA2B` | 中亮色 | — | +| FS-001-09 | `#FF9900` | 中亮色 | **标准橙**，警告主色 | +| FS-001-10 | `#C66D00` | 深色 | 深橙，Hover | +| FS-001-11 | `#B35F00` | 深色 | 深橙，Active | +| FS-001-12 | `#8C4600` | 深色 | 极深橙 | +| FS-001-13 | `#663000` | 深色 | 最深橙 | +| FS-001-14 | `#FF9900 → #B35F00` | 线性渐变 | 装饰底色 | +| FS-001-15 | `#FFBB55 → #FF9900` | 径向渐变 | 装饰底色 | + +--- + +#### 1.1.5 辅色 · 渐绿系（FS-002） + +用于成功、在线、通过、已完成等正向状态。 + +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| FS-002 | `#1EB07F` | 深色 | 绿色代表色（基准） | +| FS-002-01 | `#FAFEFD` | 浅色 | 极浅绿，大面积底色 | +| FS-002-02 | `#F6FDFB` | 浅色 | 浅绿底色 | +| FS-002-03 | `#EEFCF7` | 浅色 | 浅绿底色 / 成功背景 | +| FS-002-04 | `#DCF8EE` | 中亮色 | — | +| FS-002-05 | `#BAF1DD` | 中亮色 | — | +| FS-002-06 | `#97EBCD` | 中亮色 | — | +| FS-002-07 | `#74E4BC` | 中亮色 | 浅绿 Tag / 图表 | +| FS-002-08 | `#52DDAB` | 中亮色 | — | +| FS-002-09 | `#2FD69A` | 中亮色 | **标准绿**，成功主色 | +| FS-002-10 | `#189D72` | 深色 | 深绿，Hover | +| FS-002-11 | `#118A65` | 深色 | 深绿，Active | +| FS-002-12 | `#07634B` | 深色 | 极深绿 | +| FS-002-13 | `#043D30` | 深色 | 最深绿 | +| FS-002-14 | `#2FD69A → #118A65` | 线性渐变 | 装饰底色 | +| FS-002-15 | `#74E4BC → #2FD69A` | 径向渐变 | 装饰底色 | + +--- + +#### 1.1.6 辅色 · 渐青系（FS-003） + +用于数据高亮、图表配色、辅助信息标识。 + +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| FS-003 | `#2F9ACC` | 深色 | 青色代表色（基准） | +| FS-003-01 | `#FBFDFE` | 浅色 | 极浅青，大面积底色 | +| FS-003-02 | `#F7FCFE` | 浅色 | 浅青底色 | +| FS-003-03 | `#EFFAFE` | 浅色 | 浅青底色 | +| FS-003-04 | `#E0F5FD` | 中亮色 | — | +| FS-003-05 | `#C1EBFB` | 中亮色 | — | +| FS-003-06 | `#A2E1F9` | 中亮色 | — | +| FS-003-07 | `#83D7F7` | 中亮色 | 浅青 Tag / 图表 | +| FS-003-08 | `#64CDF5` | 中亮色 | — | +| FS-003-09 | `#45C3F3` | 中亮色 | **标准青**，数据高亮主色 | +| FS-003-10 | `#2788B9` | 深色 | 深青，Hover | +| FS-003-11 | `#1E76A6` | 深色 | 深青，Active | +| FS-003-12 | `#115580` | 深色 | 极深青 | +| FS-003-13 | `#0B3959` | 深色 | 最深青 | +| FS-003-14 | `#45C3F3 → #1E76A6` | 线性渐变 | 装饰底色 | +| FS-003-15 | `#83D7F7 → #45C3F3` | 径向渐变 | 装饰底色 | + +--- + +#### 1.1.7 辅色 · 中性灰系（FS-004） + +承载页面背景、正文、备注文字、图标与分割线。浅色主题的核心承载色系。 + +| 编号 | 色值 | 明度分组 | 说明 | +|------|------|----------|------| +| FS-004 | `#222222` | 深色 | 中性代表色（基准） | +| FS-004-01 | `#FFFFFF` | 浅色 | 纯白，页面 / 容器背景、白色文字 | +| FS-004-02 | `#FAFAFA` | 浅色 | 浅灰背景 | +| FS-004-03 | `#F5F5F5` | 浅色 | 浅灰背景 / 分割区底 | +| FS-004-04 | `#E8E8E8` | 中亮色 | 分割线 / 边框 | +| FS-004-05 | `#DBDBDB` | 中亮色 | 边框 / 禁用底 | +| FS-004-06 | `#C1C1C1` | 中亮色 | 禁用文字 / 占位符 | +| FS-004-07 | `#A6A6A6` | 中亮色 | 备注文字 / 图标 | +| FS-004-08 | `#7F7F7F` | 中亮色 | 次级文字 | +| FS-004-09 | `#575757` | 中亮色 | 次要正文 | +| FS-004-10 | `#3D3D3D` | 深色 | 正文加强 | + +> 灰系用途分层：`01 ~ 03` 背景 / 白色文字 / 分割线；`04 ~ 09` 备注文字及图标；`10` 与基准 `#222222` 用于正文。 + +--- + +#### 1.1.8 功能色（主色 / 字体色 / 辅色 / 背景色） + +从标准色系中提取，用于具体 UI 角色指定。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 主色（Primary） | `#F5222D` | ZS-001-09 | +| 主色 Hover | `#CF1322` | ZS-001 | +| 主色 Active | `#A8071A` | ZS-001-11 | +| 信息 / 链接色 | `#0079FE` | ZS-002-09 | +| 成功色 | `#2FD69A` | FS-002-09 | +| 警告色 | `#FF9900` | FS-001-09 | +| 错误色 | `#F5222D` | ZS-001-09 | +| 正文字体色 | `#222222` | FS-004 | +| 次级字体色 | `#575757` | FS-004-09 | +| 备注 / 占位字体色 | `#A6A6A6` | FS-004-07 | +| 禁用字体色 | `#C1C1C1` | FS-004-06 | +| 页面背景色 | `#FAFAFA` | FS-004-02 | +| 容器背景色 | `#FFFFFF` | FS-004-01 | +| 分割线 | `#E8E8E8` | FS-004-04 | + +--- + +#### 1.1.9 小面积装饰色 + +用于图标点缀、徽标、少量强调，不用于大面积背景。 + +| 色值 | 来源 | 说明 | +|------|------|------| +| `#F5222D` | ZS-001-09 | 红色，危险 / 品牌徽标 | +| `#0079FE` | ZS-002-09 | 蓝色，信息点缀 | +| `#FF9900` | FS-001-09 | 橙色，提醒点缀 | +| `#2FD69A` | FS-002-09 | 绿色，在线点 | +| `#45C3F3` | FS-003-09 | 青色，数据点缀 | + +--- + +#### 1.1.10 图表配色 + +> **以 §25.1 图表通用色序为准**。本小节给出的是从主 / 辅色提取的强调型色序，适用于需要突出对比的少量序列；柱状 / 饼 / 环 / 面积等多分类图表的标准柔和色序见 [§25 图表](#25-图表)。 + +**通用图表色序**（面积较大，如柱状图、折线图、饼图）： + +| 序号 | 色值 | 来源 | +|------|------|------| +| 1 | `#F5222D` | ZS-001-09 | +| 2 | `#0079FE` | ZS-002-09 | +| 3 | `#FF9900` | FS-001-09 | +| 4 | `#2FD69A` | FS-002-09 | +| 5 | `#45C3F3` | FS-003-09 | +| 6 | `#FA9196` | ZS-001-06 | +| 7 | `#55A6FE` | ZS-002-07 | +| 8 | `#FFBB55` | FS-001-07 | + +**小面积图表色序**（面积较小，如散点、小徽章、迷你图）： + +| 序号 | 色值 | 来源 | +|------|------|------| +| 1 | `#F86C73` | ZS-001-07 | +| 2 | `#55A6FE` | ZS-002-07 | +| 3 | `#74E4BC` | FS-002-07 | +| 4 | `#FFBB55` | FS-001-07 | +| 5 | `#83D7F7` | FS-003-07 | +| 6 | `#A6A6A6` | FS-004-07 | + +--- + +#### 1.1.11 CSS Token 建议 ```css :root { - --radius: 0.25rem; /* 4px → 卡片/页面框 */ -} + /* 主色 · 渐红系 ZS-001 */ + --zs-001: #CF1322; + --zs-001-01: #FEFAFA; --zs-001-02: #FEF6F6; --zs-001-03: #FEEDED; + --zs-001-04: #FDDADC; --zs-001-05: #FCB5B9; --zs-001-06: #FA9196; + --zs-001-07: #F86C73; --zs-001-08: #F74750; --zs-001-09: #F5222D; + --zs-001-10: #BC0D1E; --zs-001-11: #A8071A; --zs-001-12: #820014; + --zs-001-13: #5C0011; -@theme inline { - --radius-sm: 2px; /* 按钮、tag */ - --radius-md: calc(var(--radius) - 1px); /* 3px → 输入框 */ - --radius-lg: var(--radius); /* 4px → 卡片 */ - --radius-xl: calc(var(--radius) + 4px); /* 8px → 弹窗 */ - --radius-2xl: calc(var(--radius) + 8px); /* 12px → 大卡片 */ + /* 主色 · 渐蓝系 ZS-002 */ + --zs-002: #0062D9; + --zs-002-01: #F9FCFF; --zs-002-02: #F4F9FF; --zs-002-03: #EAF4FF; + --zs-002-04: #D4E9FF; --zs-002-05: #AAD2FF; --zs-002-06: #80BCFF; + --zs-002-07: #55A6FE; --zs-002-08: #2B8FFE; --zs-002-09: #0079FE; + --zs-002-10: #0056C6; --zs-002-11: #004AB3; --zs-002-12: #00368C; + --zs-002-13: #002466; + + /* 辅色 · 渐橙系 FS-001 */ + --fs-001: #D97B00; + --fs-001-01: #FFFCF9; --fs-001-02: #FFFAF4; --fs-001-03: #FFF6EA; + --fs-001-04: #FFEED4; --fs-001-05: #FFDDAA; --fs-001-06: #FFCC80; + --fs-001-07: #FFBB55; --fs-001-08: #FFAA2B; --fs-001-09: #FF9900; + --fs-001-10: #C66D00; --fs-001-11: #B35F00; --fs-001-12: #8C4600; + --fs-001-13: #663000; + + /* 辅色 · 渐绿系 FS-002 */ + --fs-002: #1EB07F; + --fs-002-01: #FAFEFD; --fs-002-02: #F6FDFB; --fs-002-03: #EEFCF7; + --fs-002-04: #DCF8EE; --fs-002-05: #BAF1DD; --fs-002-06: #97EBCD; + --fs-002-07: #74E4BC; --fs-002-08: #52DDAB; --fs-002-09: #2FD69A; + --fs-002-10: #189D72; --fs-002-11: #118A65; --fs-002-12: #07634B; + --fs-002-13: #043D30; + + /* 辅色 · 渐青系 FS-003 */ + --fs-003: #2F9ACC; + --fs-003-01: #FBFDFE; --fs-003-02: #F7FCFE; --fs-003-03: #EFFAFE; + --fs-003-04: #E0F5FD; --fs-003-05: #C1EBFB; --fs-003-06: #A2E1F9; + --fs-003-07: #83D7F7; --fs-003-08: #64CDF5; --fs-003-09: #45C3F3; + --fs-003-10: #2788B9; --fs-003-11: #1E76A6; --fs-003-12: #115580; + --fs-003-13: #0B3959; + + /* 辅色 · 中性灰系 FS-004 */ + --fs-004: #222222; + --fs-004-01: #FFFFFF; --fs-004-02: #FAFAFA; --fs-004-03: #F5F5F5; + --fs-004-04: #E8E8E8; --fs-004-05: #DBDBDB; --fs-004-06: #C1C1C1; + --fs-004-07: #A6A6A6; --fs-004-08: #7F7F7F; --fs-004-09: #575757; + --fs-004-10: #3D3D3D; + + /* 功能色（语义别名） */ + --color-primary: var(--zs-001-09); /* #F5222D */ + --color-primary-hover: var(--zs-001); /* #CF1322 */ + --color-primary-active: var(--zs-001-11); /* #A8071A */ + --color-link: var(--zs-002-09); /* #0079FE */ + --color-success: var(--fs-002-09); /* #2FD69A */ + --color-warning: var(--fs-001-09); /* #FF9900 */ + --color-error: var(--zs-001-09); /* #F5222D */ + --color-text: var(--fs-004); /* #222222 */ + --color-text-secondary: var(--fs-004-09); /* #575757 */ + --color-text-tertiary: var(--fs-004-07); /* #A6A6A6 */ + --color-text-disabled: var(--fs-004-06); /* #C1C1C1 */ + --color-bg-page: var(--fs-004-02); /* #FAFAFA */ + --color-bg-container: var(--fs-004-01); /* #FFFFFF */ + --color-border: var(--fs-004-04); /* #E8E8E8 */ } ``` -#### 2.2 例外保留（设计感样式） -以下组件**圆角不改**，保持设计稿原貌： -- `.workspace-user-bubble`（聊天气泡，圆角 `1.6rem 1.6rem 0.5rem 1.6rem`） -- `.workspace-assistant-card`（圆角 `1.75rem`） -- `.gemini-gradient-border`（圆角 `1.5rem`） +--- -#### 2.3 验收 -- 普通按钮变为近直角（2px） -- 卡片维持温和圆角（4px） -- 聊天气泡、AI 卡片不变形 +## 2. 字体 + +字体规范分**大屏页面**与**后台系统**两套，分别对应可视化大屏与管理后台两类场景。 + +### 2.1 大屏页面字体规范 + +#### 2.1.1 中文字体：Noto Sans S Chinese + +| 样式 | 使用场景 | +|------|----------| +| 24px Bold | 一级标题 | +| 24px Medium | 次要一级标题 | +| 22px Medium | 二级标题 | +| 22px Regular | 正文 | +| 20px Regular | 排版空间有限的正文 | + +#### 2.1.2 数字字体：D-DIN + +| 样式 | 使用场景 | +|------|----------| +| 32px Bold | 重要数据展示 | +| 32px Regular | 普通数据展示 | +| 26px Bold | 常规数据展示 | +| 26px Regular | 常规数据展示 | + +#### 2.1.3 特殊数字：DS-Digital + +| 样式 | 使用场景 | +|------|----------| +| 50px Bold | 大屏主数据展示 | + +#### 2.1.4 表格数字：Arial + +| 样式 | 使用场景 | +|------|----------| +| 20px Regular | 表格横纵轴数字 | --- -### Step 3 — 按钮组件尺寸对齐 +### 2.2 后台系统字体规范 -**文件**：`src/components/ui/button.tsx` +#### 2.2.1 中文字体：Noto Sans S Chinese -#### 3.1 改 size 变体（规范：小 24px / 正常 32px） +| 样式 | 使用场景 | +|------|----------| +| 18px Bold | 导航、一级标题 | +| 18px Medium | 次要一级标题 | +| 16px Bold | 二级标题 | +| 16px Medium | 次要二级标题 | +| 16px Regular | 正文、按钮内部文字等 | +| 16px Light | 次要正文 | -| size | 规范 | 当前 | 改后 | +#### 2.2.2 数字字体：D-DIN + +| 样式 | 使用场景 | +|------|----------| +| 26px Bold | 重要数据展示 | +| 26px Regular | 普通数据展示 | +| 24px Bold | 常规数据展示（小） | +| 24px Regular | 常规数据展示（小） | + +#### 2.2.3 LOGO 字体：DOUYUFont + +| 样式 | 使用场景 | +|------|----------| +| 20px 文字样式 | 页面顶部系统名称 | + +#### 2.2.4 表格数字：Arial + +| 样式 | 使用场景 | +|------|----------| +| 16px Regular | 表格横纵轴数字 | +| 14px Regular | 表格横纵轴的数字（空间有限） | + +--- + +## 3. 阴影 + +> 浅色主题采用**中性投影**（基于 FS-004 `#222222`）营造层级，避免使用彩色外发光。卡片以纯白 `#FFFFFF` 浮于浅灰页面背景 `#FAFAFA` 之上，靠投影与边框区分。 + +### 3.1 容器与卡片配色 + +#### 3.1.1 卡片（标题 + 操作） + +白底卡片，标题在左、操作区在右（文字操作或图标操作）。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#FFFFFF` | FS-004-01 | +| 卡片边框 | `#E8E8E8` | FS-004-04 | +| 卡片阴影 | `0 2px 8px rgba(34, 34, 34, 0.08)` | 基于 FS-004 中性投影 | +| 标题文字（16px Bold） | `#222222` | FS-004（正文色） | +| 操作按钮文字 | `#F5222D` | ZS-001-09（主色红，链接型操作） | +| 次级操作图标（✏️ / ⋯） | `#A6A6A6` | FS-004-07（备注图标色） | + +#### 3.1.2 卡片新增（占位卡片） + +虚线描边的"新增入口"卡片，用于引导用户添加内容。 + +| 角色 | 色值 | 来源 | +|------|------|------| +| 卡片背景 | `#FFFFFF` | FS-004-01 | +| 虚线边框 | `#DBDBDB` | FS-004-05 | +| 加号图标 | `#A6A6A6` | FS-004-07 | +| Hover 边框 | `#F5222D` | ZS-001-09（悬停时提示可点击） | +| Hover 加号 | `#F5222D` | ZS-001-09 | + +#### 3.1.3 阴影投影规则 + +| 层级 | 阴影值 | 使用场景 | +|------|--------|----------| +| 一级阴影（卡片浮起） | `0 2px 8px rgba(34, 34, 34, 0.08)` | 普通卡片 | +| 二级阴影（hover / 强调） | `0 4px 16px rgba(34, 34, 34, 0.12)` | 卡片 hover、悬浮按钮、弹出层 | +| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(34, 34, 34, 0.16)` | Dialog、Drawer | + +--- + +## 4. 圆角 + +### 4.1 圆角统一规范 + +| 元素 | 圆角值 | 说明 | +|------|--------|------| +| 按钮 | `2px` | 所有按钮（主 / 次要 / 默认 / 文本）统一使用 | +| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 | +| 页面分栏框 | `4px` | 外层容器、分栏区域 | +| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 | +| Tag / Badge | `2px` | 与按钮一致 | +| Modal / Drawer | `4px` | 与卡片一致 | + +--- + +## 5. 按钮 + +> 全部圆角 `2px`，文字字号 `14px`，字体 Noto Sans S Chinese Regular。配色取自 ZS-001 主色红与 FS-004 中性灰。 + +### 5.1 按钮尺寸 + +| 规格 | 高度 | 内边距 | 使用场景 | +|------|------|--------|----------| +| 小 | `24px` | `0 8px` | 空间小的板块内部，如表格中、卡片标题等 | +| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 | + +### 5.2 按钮类型与配色 + +#### 5.2.1 主按钮（Primary） + +> 一个操作区域只能有一个主按钮。 + +| 状态 | 背景 | 边框 | 文字 | |------|------|------|------| -| `sm` | 24px | h-8 (32px) | `h-6 px-2 text-xs` | -| `default` | 32px | h-9 (36px) | `h-8 px-3 text-sm` | -| `lg` | — | h-10 (40px) | 保留 `h-10`（用于 Banner/登录场景）| +| 默认 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` | +| Hover | `#CF1322` (ZS-001) | — | `#FFFFFF` | +| Active | `#A8071A` (ZS-001-11) | — | `#FFFFFF` | +| 失效 | `#A6A6A6` (FS-004-07) | — | `#FFFFFF` | -#### 3.2 圆角 -- 默认按钮：`rounded-sm`（2px） +#### 5.2.2 次要按钮（Secondary / Outline-Primary） -#### 3.3 主按钮配色 -- bg：`bg-primary` -- hover：`hover:bg-[var(--brand-900)]`（深红 `#CF1322`） -- active：`active:bg-[var(--brand-950)]`（更深 `#A8071A`） -- disabled：`disabled:opacity-50`（保留） +重要度低于主按钮、高于默认按钮。红色描边 + 红色文字。 -#### 3.4 次要按钮 / 文本按钮 -- 次要按钮（`outline` variant）：边框 `border-primary`，文字 `text-primary` -- 文本按钮（`ghost` variant）：仅文字色 `text-primary`，hover 背景 `--brand-200` +| 状态 | 背景 | 边框 | 文字 | +|------|------|------|------| +| 默认 | `#FFFFFF` | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) | +| Hover | `#FEEDED` (ZS-001-03) | `#CF1322` (ZS-001) | `#CF1322` (ZS-001) | +| Active | `#FDDADC` (ZS-001-04) | `#A8071A` (ZS-001-11) | `#A8071A` (ZS-001-11) | +| 失效 | `#FFFFFF` | `#FCB5B9` (ZS-001-05) | `#FCB5B9` (ZS-001-05) | -#### 3.5 验收 -检查所有调用 `