ZartUI · 页头规范预览

变体一：按钮 + 搜索栏

完整页头

按钮状态对比

主按钮（默认 / Hover）

次要按钮（默认 / Hover）

规格参数

区域	属性	规格值
容器	背景	`#FFFFFF`
	内边距	`12px 16px`
	布局	左侧按钮组 + 右侧搜索栏，左右两端对齐
主按钮（新增）	尺寸 / 圆角	`32px` 高，左右内边距 `16px`，全圆角 `16px`
	颜色	背景 `#FFFFFF`，边框 `#DDE1EB`，图标与文字 `#3388FF`
	Hover	边框变为 `#3388FF`
次要按钮（导出/导入/下载模板/批量删除/归档/高级搜索/设置）	尺寸 / 圆角	`32px` 高，全圆角 `16px`
	颜色	背景 `#FFFFFF`，边框 `#DDE1EB`，文字 `#223355`
	Hover	边框与文字色 `#3388FF`
按钮间距	gap	`8px`
搜索框	整体尺寸	高 `32px`，宽 `280px`（输入框 + 搜索按钮）
	输入框	左侧全圆角 `16px 0 0 16px`，边框 `1px solid #DDE1EB`，右边框去除避免双线
	搜索按钮	宽 `40px`，右侧全圆角 `0 16px 16px 0`，边框同输入框
	搜索图标 / 占位文字	颜色 `#A8B4C8`
	占位文字	"请输入关键字搜索"
设置按钮	图标 + 文字	六边形外框 + 中心圆圈的设置图标 + "设置"文字，规格同次要按钮

变体二：标题 + 搜索栏

完整页头

规格参数

区域	属性	规格值
容器	高度	`56px`
容器	底部分隔线	`1px solid #E9ECF2`
左侧标题	字号	`18px`
	字重	`500`
	颜色	`#081126`
右侧	组件	常规搜索框 + 高级搜索按钮 + 设置按钮，规格同变体一右侧

变体三：标题 + 操作按钮

完整页头

规格参数

区域	属性	规格值
容器	高度	`56px`
容器	底部分隔线	`1px solid #E9ECF2`
左侧标题	字号	`18px`
	字重	`500`
	颜色	`#081126`
取消 / 重置（次要）	尺寸 / 圆角	高 `32px`，左右内边距 `16px`，圆角 `4px`（矩形按钮）
	颜色	背景 `#FFFFFF`，边框 `#DDE1EB`，文字 `#223355`
	Hover	边框与文字 `#3388FF`
确定（主按钮）	尺寸 / 圆角	高 `32px`，左右内边距 `16px`，圆角 `4px`
	颜色	背景 `#3388FF`，文字 `#FFFFFF`
	Hover	背景 `#2167D9`
按钮间距	gap	`8px`，按钮顺序：取消 → 重置 → 确定

变体四：仅标题

完整页头

规格参数

区域	属性	规格值
容器	高度	`56px`
容器	底部分隔线	`1px solid #E9ECF2`
左侧标题	字号	`18px`
	字重	`500`
	颜色	`#081126`

变体五：标题+操作按钮 + 二级标签

完整页头（高 96px）

规格参数

区域	属性	规格值
容器	总高度	`96px`（56px 标题行 + 40px 标签行）
容器	底部分隔线	`1px solid #E9ECF2`
第一行	高度	`56px`
	左侧标题	`18px · 500 · #081126`
	右侧按钮	取消 / 重置（矩形次要） + 确定（矩形主），规格同变体三
第二行（二级标签）	高度	`40px`
	标签项	内边距 `0 20px`，字号 `14px`
	默认 / Hover	文字 `#223355`；Hover 背景 `#F5F7FA`
	选中	文字 `#3388FF`，字重 `500`；底部 `2px` 指示线，宽度等于文字宽度

二级页头 · 变体一：返回箭头 + 标题 + 操作按钮

完整页头

规格参数

区域	属性	规格值
容器	底部分隔线	`1px solid #E9ECF2`
左侧	返回箭头	线状图标 `16×16px`，颜色 `#6B7A99`，Hover `#3388FF`，可点击
	标题	`14px · 500`，颜色 `#081126`
	箭头与标题间距	`8px`
右侧按钮	取消 / 重置	矩形次要按钮，规格同变体三
右侧按钮	确定	矩形主按钮，背景 `#3388FF`

二级页头 · 变体二：二级标签 + 说明/关闭

完整页头（高 40px）

规格参数

区域	属性	规格值
容器	高度	`40px`
容器	底部分隔线	`1px solid #E9ECF2`
左侧	二级标签	7 个二级标签，左侧边距为 `0`，样式同二级标签规范
右侧图标按钮	按钮尺寸	`32×32px`
	图标	`16×16px`，线状（说明 / 关闭）
	图标颜色	`#A8B4C8`；说明 Hover `#3388FF`；关闭 Hover `#FF4433`

二级页头 · 变体三：标题 + 取消/重置/保存

完整页头

规格参数

区域	属性	规格值
容器	底部分隔线	`1px solid #E9ECF2`
左侧标题	样式	`14px · 500`，颜色 `#081126`
右侧按钮	取消 / 重置	矩形次要按钮
右侧按钮	保存	矩形主按钮，背景 `#3388FF`

二级页头 · 变体四：标题 + 搜索/高级搜索/设置

完整页头

规格参数

区域	属性	规格值
容器	底部分隔线	`1px solid #E9ECF2`
左侧标题	样式	`14px · 500`，颜色 `#081126`
右侧	组件	常规搜索框 + 高级搜索 + 设置（全圆角次要按钮），规格同变体二右侧

返回组件首页