# 深蓝色 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 */
}
```

---