1620 lines
69 KiB
Markdown
1620 lines
69 KiB
Markdown
# 深蓝色 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 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|