wsk/deerflow-code

Fork 0

gozeros b638b541d0 初始化

2026-09-07 18:24:55 +08:00

69 KiB

Raw Permalink Blame History

深蓝色 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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 参考

: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 */
}

69 KiB Raw Permalink Blame History Unescape Escape