315 lines
12 KiB
Markdown
315 lines
12 KiB
Markdown
# 浅红色 UI 规范 · 二、按钮与表单输入
|
||
|
||
> 返回 [规范目录](README.md) | 本篇：按钮 · 表单 · 输入框 · 选择按钮 · 标签输入框 · 上传
|
||
|
||
---
|
||
|
||
## 5. 按钮
|
||
|
||
> 全部圆角 `2px`，文字字号 `14px`，字体 Noto Sans S Chinese Regular。配色取自 ZS-001 主色红与 FS-004 中性灰。
|
||
|
||
### 5.1 按钮尺寸
|
||
|
||
| 规格 | 高度 | 内边距 | 使用场景 |
|
||
|------|------|--------|----------|
|
||
| 小 | `24px` | `0 8px` | 空间小的板块内部，如表格中、卡片标题等 |
|
||
| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 |
|
||
|
||
### 5.2 按钮类型与配色
|
||
|
||
#### 5.2.1 主按钮（Primary）
|
||
|
||
> 一个操作区域只能有一个主按钮。
|
||
|
||
| 状态 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 默认 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
|
||
| Hover | `#CF1322` (ZS-001) | — | `#FFFFFF` |
|
||
| Active | `#A8071A` (ZS-001-11) | — | `#FFFFFF` |
|
||
| 失效 | `#A6A6A6` (FS-004-07) | — | `#FFFFFF` |
|
||
|
||
#### 5.2.2 次要按钮（Secondary / Outline-Primary）
|
||
|
||
重要度低于主按钮、高于默认按钮。红色描边 + 红色文字。
|
||
|
||
| 状态 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 默认 | `#FFFFFF` | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
|
||
| Hover | `#FEEDED` (ZS-001-03) | `#CF1322` (ZS-001) | `#CF1322` (ZS-001) |
|
||
| Active | `#FDDADC` (ZS-001-04) | `#A8071A` (ZS-001-11) | `#A8071A` (ZS-001-11) |
|
||
| 失效 | `#FFFFFF` | `#FCB5B9` (ZS-001-05) | `#FCB5B9` (ZS-001-05) |
|
||
|
||
#### 5.2.3 默认按钮（Default）
|
||
|
||
用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。中性描边。
|
||
|
||
| 状态 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 默认 | `#FFFFFF` | `#DBDBDB` (FS-004-05) | `#222222` (FS-004) |
|
||
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
|
||
| Active | `#F5F5F5` (FS-004-03) | `#CF1322` (ZS-001) | `#CF1322` (ZS-001) |
|
||
| 禁用 | `#F5F5F5` (FS-004-03) | `#E8E8E8` (FS-004-04) | `#C1C1C1` (FS-004-06) |
|
||
|
||
#### 5.2.4 文本按钮（Text）
|
||
|
||
用于表格操作、文件下载等。无背景与边框，靠文字色识别。
|
||
|
||
| 状态 | 文字 | 装饰 |
|
||
|------|------|------|
|
||
| 默认 | `#F5222D` (ZS-001-09) | 无下划线 |
|
||
| Hover | `#CF1322` (ZS-001) | 显示下划线（与文字同色） |
|
||
| Active | `#A8071A` (ZS-001-11) | 下划线 |
|
||
| 失效 | `#C1C1C1` (FS-004-06) | 无装饰 |
|
||
|
||
#### 5.2.5 图标按钮（Icon-only）
|
||
|
||
用于增强辨识度或节省空间。仅图标，无文字。
|
||
|
||
| 变体 | 背景 | 边框 | 图标颜色 |
|
||
|------|------|------|----------|
|
||
| 描边（默认） | `#FFFFFF` | `#DBDBDB` (FS-004-05) | `#575757` (FS-004-09) |
|
||
| 描边 Hover | `#FAFAFA` | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
|
||
| 主色（填充） | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
|
||
| 主色 Hover | `#CF1322` (ZS-001) | — | `#FFFFFF` |
|
||
| 浅色（弱填充） | `#FEEDED` (ZS-001-03) | — | `#F5222D` (ZS-001-09) |
|
||
|
||
### 5.3 按钮组合
|
||
|
||
#### 5.3.1 文字 + 下拉按钮（含 ⌄）
|
||
|
||
| 形态 | 配色规则 |
|
||
|------|----------|
|
||
| 默认（Outline） | 沿用 §5.2.3 默认按钮，箭头 ⌄ 与文字同色 `#222222` |
|
||
| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ⌄ 同步白色 `#FFFFFF` |
|
||
|
||
#### 5.3.2 图标 + 文字按钮（如 `+ 正常`）
|
||
|
||
| 形态 | 配色规则 |
|
||
|------|----------|
|
||
| 默认（Outline） | 沿用 §5.2.3，左侧图标颜色与文字一致 `#222222` |
|
||
| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` |
|
||
|
||
#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"、"收起 ^"）
|
||
|
||
| 角色 | 色值 |
|
||
|------|------|
|
||
| 文字 + 图标（默认） | `#F5222D` (ZS-001-09) |
|
||
| 文字 + 图标（Hover） | `#CF1322` (ZS-001) |
|
||
| 失效 | `#C1C1C1` (FS-004-06) |
|
||
|
||
> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。
|
||
|
||
#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）
|
||
|
||
- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作）
|
||
- **按钮间距**：`8px`
|
||
- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]`
|
||
- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.3
|
||
|
||
### 5.4 其他按钮
|
||
|
||
#### 5.4.1 悬浮状态（Floating）
|
||
|
||
用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。
|
||
|
||
| 状态 | 阴影 |
|
||
|------|------|
|
||
| 默认 | `0 2px 8px rgba(34, 34, 34, 0.08)`（§3.1.3 一级阴影） |
|
||
| Hover | `0 4px 16px rgba(34, 34, 34, 0.12)`（§3.1.3 二级阴影） |
|
||
| Active | 阴影消失，按下感 |
|
||
|
||
#### 5.4.2 加载中（Loading）
|
||
|
||
用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。
|
||
|
||
| 角色 | 色值 |
|
||
|------|------|
|
||
| 背景 | `#F5222D` (ZS-001-09) |
|
||
| 文字 | `#FFFFFF` |
|
||
| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` |
|
||
| 不可点击 | 鼠标 `cursor: not-allowed` |
|
||
|
||
> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
|
||
|
||
---
|
||
|
||
## 12. 表单（Form）
|
||
|
||
> 页面级表单可参照弹窗表单，**操作按钮置于左下角**。容器为白底卡片，标题下叠 `1px solid #E8E8E8` 分割线。
|
||
|
||
### 12.1 基础表单结构
|
||
|
||
| 元素 | 规格 / 配色 |
|
||
|------|-------------|
|
||
| 容器背景 | `#FFFFFF` (FS-004-01)，圆角 `4px` |
|
||
| 表单标题 | `16px Bold`，`#222222` (FS-004)，下叠 `1px solid #E8E8E8` |
|
||
| 字段标签（label） | `14px Regular`，`#575757` (FS-004-09)，左对齐 |
|
||
| 字段垂直间距 | `--spacing-3` (12px) |
|
||
| 输入控件 | 见 §13 输入框 |
|
||
| 操作按钮区 | 置于左下角，主按钮 + 默认按钮（§5.3.4），间距 `--spacing-2` (8px) |
|
||
|
||
### 12.2 开关（Switch）
|
||
|
||
| 状态 | 轨道背景 | 滑块 | 文字 |
|
||
|------|----------|------|------|
|
||
| 开（ON） | `#F5222D` (ZS-001-09) | `#FFFFFF` 圆点 | "开" `#FFFFFF` |
|
||
| 关（OFF） | `#DBDBDB` (FS-004-05) | `#FFFFFF` 圆点 | "关" `#A6A6A6` (FS-004-07) |
|
||
| 禁用 | `#E8E8E8` (FS-004-04) | `#FFFFFF` | `#C1C1C1` |
|
||
|
||
- 轨道高 `20px`，圆角全圆；切换过渡 `transform 160ms ease-out`
|
||
|
||
### 12.3 表格内报错（Table 报错）
|
||
|
||
行内可编辑表格的校验错误态。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 表头背景 | `#FEEDED` (ZS-001-03) |
|
||
| 表头文字 | `#222222` (FS-004)，`14px Medium` |
|
||
| 行（默认） | 背景 `#FFFFFF`，底边 `1px solid #F5F5F5` (FS-004-03) |
|
||
| 行（hover / 选中） | 背景 `#FEF6F6` (ZS-001-02) |
|
||
| 正文文字 | `#222222` (FS-004) |
|
||
| 错误输入框边框 | `1px solid #F5222D` (ZS-001-09) |
|
||
| 单位后缀（如 `M`） | addon 背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757` |
|
||
| 错误提示气泡 | 背景 `#F5222D`，文字 `#FFFFFF` `12px`，圆角 `2px`，带向上箭头，定位于出错输入框下方 |
|
||
| 复选框（选中） | 勾选填充 `#F5222D`，对勾 `#FFFFFF` |
|
||
|
||
---
|
||
|
||
## 13. 输入框（Input）
|
||
|
||
> 字号 `16px`，高度 `32px`，圆角 `2px`，内边距 `0 12px`，背景 `#FFFFFF`。
|
||
|
||
### 13.1 基础状态
|
||
|
||
| 状态 | 边框 | 背景 | 文字 / 占位符 |
|
||
|------|------|------|--------------|
|
||
| 未填（默认） | `1px solid #DBDBDB` (FS-004-05) | `#FFFFFF` | 占位符 `#A6A6A6` (FS-004-07) |
|
||
| 聚焦（Focus） | `1px solid #F5222D` (ZS-001-09) | `#FFFFFF` | 文字 `#222222` |
|
||
| 已填 | `1px solid #DBDBDB` | `#FFFFFF` | 文字 `#222222` (FS-004) |
|
||
| 未填 · 禁用 | `1px solid #E8E8E8` (FS-004-04) | `#F5F5F5` (FS-004-03) | 占位符 `#C1C1C1` (FS-004-06)，`cursor: not-allowed` |
|
||
| 已填 · 禁用 | `1px solid #E8E8E8` | `#F5F5F5` | 文字 `#A6A6A6` |
|
||
| 错误（Error） | `1px solid #F5222D` | `#FFFFFF` | 文字 `#222222`，下方红色提示文字 `12px #F5222D` |
|
||
|
||
### 13.2 带操作 / 特殊输入框
|
||
|
||
| 类型 | 说明 | 配色 |
|
||
|------|------|------|
|
||
| 未填 / 已填 · 操作 | 尾部带操作图标（如 ⚙） | 图标 `#A6A6A6`，hover `#F5222D` |
|
||
| 密码 · 不可见 | 尾部带可见性切换 👁 | 图标 `#A6A6A6`，点击切换明 / 密文 |
|
||
| 前置标签 | 头部下拉（如 `http:// ▾`） | addon 背景 `#FAFAFA`，边框 `#DBDBDB`，文字 `#575757` |
|
||
| 后置标签 | 尾部下拉（如 `.com ▾`） | 同前置标签 |
|
||
| 前后置标签 | 头尾各一段 addon | 同上；输入区与 addon 共用一条外边框 |
|
||
|
||
---
|
||
|
||
## 14. 选择按钮（单选 / 多选式）
|
||
|
||
> 以按钮形态替代传统单选 / 复选，提升点击区域与辨识度。每组提供三种"已选"填充强度，可按对比需要选用；布局分**相连**（segmented）与**分离**两种。
|
||
|
||
### 14.1 选择按钮（基础）
|
||
|
||
| 状态 / 变体 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 未选 | `#FFFFFF` | `1px solid #DBDBDB` (FS-004-05) | `#222222` (FS-004) |
|
||
| 已选 · 描边 | `#FFFFFF` | `1px solid #F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) |
|
||
| 已选 · 浅填 | `#FEEDED` (ZS-001-03) | `1px solid #FCB5B9` (ZS-001-05) | `#F5222D` (ZS-001-09) |
|
||
| 已选 · 实填 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
|
||
| 禁用 | `#F5F5F5` (FS-004-03) | `1px solid #E8E8E8` | `#C1C1C1` (FS-004-06) |
|
||
|
||
- 高度 `32px`，内边距 `0 14px`，圆角 `2px`，字号 `14px`
|
||
- **相连布局**：按钮紧贴，仅最外两端圆角，相邻共用边框
|
||
- **分离布局**：按钮间距 `--spacing-2` (8px)，各自独立圆角
|
||
|
||
### 14.2 选择按钮（带统计）
|
||
|
||
在文案后附计数，如 `已选(230)`。配色完全沿用 §14.1，计数文字与主文字同色（实填态为 `#FFFFFF`）。
|
||
|
||
### 14.3 按钮式页签（带图标）
|
||
|
||
文案前带图标（如 `田`），用于视图 / 模式切换。
|
||
|
||
| 状态 / 变体 | 背景 | 边框 | 图标 + 文字 |
|
||
|------|------|------|-------------|
|
||
| 正常（未激活） | `#FFFFFF` | `1px solid #DBDBDB` | `#222222` |
|
||
| 激活 · 描边 | `#FFFFFF` | `1px solid #F5222D` | `#F5222D` |
|
||
| 激活 · 实填 | `#F5222D` (ZS-001-09) | — | `#FFFFFF` |
|
||
|
||
- 图标与文字间距 `--spacing-1` (4px)，其余规格同 §14.1
|
||
|
||
---
|
||
|
||
## 15. 标签输入框（Tag Input）
|
||
|
||
> 在输入框内以"标签 + 自由输入"混合录入，支持单行 / 多行，含字数统计。
|
||
|
||
### 15.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器边框 | `1px solid #DBDBDB` (FS-004-05)，圆角 `2px` |
|
||
| 聚焦边框 | `1px solid #F5222D` (ZS-001-09) |
|
||
| 容器背景 | `#FFFFFF` |
|
||
| 内边距 | `--spacing-2` (8px) |
|
||
| 标签与标签间距 | `--spacing-1` (4px) |
|
||
| 右下角支持拖拽缩放（多行） | `resize: vertical` |
|
||
|
||
### 15.2 标签（Tag）配色
|
||
|
||
| 元素 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 标签背景 | `#F5F5F5` (FS-004-03) | — |
|
||
| 标签文字 | `#575757` (FS-004-09) | — |
|
||
| 关闭图标 `×` | `#A6A6A6` (FS-004-07) | hover `#F5222D` |
|
||
| 占位符（请输入） | `#A6A6A6` (FS-004-07) | — |
|
||
| 字数统计（如 `2/100`） | `#A6A6A6` (FS-004-07) | 超限时变 `#F5222D` |
|
||
|
||
> 折叠多标签时可用 `+N` 形式聚合（如 `+1 ×`），样式同普通标签。
|
||
|
||
---
|
||
|
||
## 16. 上传（Upload）
|
||
|
||
> 含单文件、批量上传、拖拽上传三种形态。操作按钮中"开始上传 / 上传"为主按钮，"取消"为默认按钮。
|
||
|
||
### 16.1 上传触发器
|
||
|
||
| 形态 | 配色 |
|
||
|------|------|
|
||
| 上传按钮（⬆ 上传文件） | 默认按钮（§5.2.3），含上传图标 |
|
||
| 选择文件输入 | 只读输入框（§13）+ 右侧"选择文件"默认按钮 |
|
||
| 提示文字 | `12px Regular`，`#A6A6A6` (FS-004-07)，如"支持 DOCX/ZIP/PDF，文件大小不超过 2MB" |
|
||
| 示例文件链接（下载 / 查看示例文件） | 文本按钮 `#F5222D` (ZS-001-09)，hover `#CF1322` |
|
||
|
||
### 16.2 拖拽区（Drop Zone）
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 背景 | `#FAFAFA` (FS-004-02) |
|
||
| 边框 | `1px dashed #DBDBDB` (FS-004-05) |
|
||
| 拖入高亮 | 边框 `1px dashed #F5222D` (ZS-001-09)，背景 `#FEF6F6` (ZS-001-02) |
|
||
| 提示文字（释放鼠标） | `#A6A6A6` (FS-004-07) |
|
||
|
||
### 16.3 文件列表与状态
|
||
|
||
列表表头：文件名 / 大小 / 状态 / 操作。各状态配色：
|
||
|
||
| 状态 | 图标 | 文字色 |
|
||
|------|------|--------|
|
||
| 上传成功 | ✓ 圆形，`#2FD69A` (FS-002-09) | `#189D72` (FS-002-10) |
|
||
| 文件格式有误 / 失败 | ❗ 圆形，`#F5222D` (ZS-001-09) | `#F5222D` |
|
||
| 上传中（如 上传 40%） | ⟳ 旋转，`#F5222D` (ZS-001-09) | `#575757` (FS-004-09) |
|
||
| 待上传 | 🕐 时钟，`#A6A6A6` (FS-004-07) | `#A6A6A6` |
|
||
| 操作列「删除」 | — | 文本按钮 `#A6A6A6`，hover `#F5222D` |
|
||
|
||
### 16.4 底部操作
|
||
|
||
`[ 取消 ]（默认按钮） [ 开始上传 ]（主按钮 #F5222D）`，间距 `--spacing-2` (8px)，右对齐。
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
> 返回 [规范目录](README.md)
|