智能体列表
This commit is contained in:
fengxiangdebaozi committed
1 parent
6cf4404243
commit
45eb46c3f3
11 files changed
+1457
-171
No files matched your search
@@ -1535,3 +1535,673 @@ Hover 弹出 Tooltip（沿用 §9.3.3 Tooltip 配色），承载完整说明文
|
||||
--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;
|
||||
}
|
||||
```
|
||||
Reference in new issue
Block a user