wsk/deerflow-code

Fork 0

gozeros b638b541d0 初始化

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

12 KiB

Raw Permalink Blame History

浅红色 UI 规范 · 二、按钮与表单输入

返回规范目录　|　本篇：按钮 · 表单 · 输入框 · 选择按钮 · 标签输入框 · 上传

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)，右对齐。

返回规范目录

12 KiB Raw Permalink Blame History Unescape Escape