HaloPay
首页
/
组件库样式
A
Admin
组件库样式详情
将所有组件的每个状态平铺展示，便于逐项核对视觉规范。
1. 颜色 (Colors)
Brand (品牌色)
Primary
#555DFF
#555DFF
80% Opacity
#555DFF (80%)
#555DFF (80%)
50% Opacity
#555DFF (50%)
#555DFF (50%)
10% Opacity
#555DFF (10%)
#555DFF (10%)
Functional (功能色)
Success
#00B600
#00B600
Failed/Danger
#FF3B3B
#FF3B3B
Warning
#FF9D00
#FF9D00
Link
#555DFF
#555DFF
Neutrals (中性色)
Text Primary
#1A1A1A
#1A1A1A
Text Secondary
#808080
#808080
Text Quaternary
#A3A3A3
#A3A3A3
Border/Fill
#EBEBEB
#EBEBEB
Background
#F7F7F7
#F7F7F7
2. 字体 (Typography)
Large Title
20px Bold
页面主标题
Headline
16px Bold
章节标题
Body Medium
14px Medium
默认UI文字
Body Regular
14px Regular
段落/辅助文字
Callout
12px Medium
标签/Tag
Caption
10px Regular
元信息/时间
Numbers
1,234,567.89
Manrope Tabular Nums
3. 按钮 (Buttons)
Primary Button
默认
悬浮
按下
禁用
加载中
Secondary Button
默认
悬浮
按下
禁用
加载中
Ghost Button
默认
悬浮
按下
禁用
Danger Button
默认
悬浮
按下
禁用
加载中
按钮尺寸 (Sizes)
大
中
小
4. 表单控件 (Form Elements)
Input Field
Default (Placeholder)
Hover
Focus
Filled
Disabled
Error
请输入有效内容
Select Box
Default (Placeholder)
请选择
Hover
请选择
Focus / Open
已选选项
选项 A
选项 B
选项 C
Selected
已选选项
Disabled
不可选择
Date Input
Default (Placeholder)
请选择日期
Hover
请选择日期
Focus
2026-03-11
Filled (Single)
2026-03-11
Filled (Range)
2026-03-01 ~ 2026-03-11
Disabled
不可选择
Checkbox
Unchecked
Hover
Checked
Disabled (Unchecked)
Disabled (Checked)
Radio
Unselected
Hover
Selected
Disabled (Unselected)
Disabled (Selected)
Switch
Off
On
Disabled (Off)
Disabled (On)
5. 状态标签 (Status Badges)
Success
已完成
Warning
处理中
Failed
失败
Info
进行中
Default
未知
6. 表格 (Tables)
| 行状态 | Header 1 | Header 2 | Status | Action |
|---|---|---|---|---|
| Default | Row Data | Sample Text | Active | |
| Hover | Row Data | Sample Text | Pending | |
| Selected | Row Data | Sample Text | Info | |
| Disabled | Row Data | Sample Text | Inactive | Edit |
7. 日期选择 (Date Picker)
日期单元格状态 (Date Cell States)
Default
15
Hover
15
Selected
15
Today
15
In Range
15
Disabled
15
Other Month
15
Single Date Picker
2026年3月
日
一
二
三
四
五
六
Range Date Picker (Continuous)
2026年3月
日
一
二
三
四
五
六
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2026年4月
日
一
二
三
四
五
六
1
2
3
4
8. 三层级权限选择器 (Permission Selector)
8.1 触发器 (Trigger) 状态
整体样式
管理员
Default (Placeholder)
请选择角色权限
Hover
请选择角色权限
Focus / Open
管理员
Selected (Closed)
管理员
Disabled
不可选择
8.2 角色列表项 (Level 1 — Role Tab) 状态
整体样式 — 角色列表
超级管理员
管理员
财务
运营
客服
只读
Default
运营
Hover
运营
Selected / Active
管理员
Disabled
只读
8.3 功能模块列表项 (Level 2 — Module Tab) 状态
整体样式 — 模块列表（角色=管理员）
订单管理
归集管理
Default
归集管理
Hover
归集管理
Selected / Active
订单管理
Disabled
资金管理
8.4 操作权限标签 (Level 3 — Action Tag) 状态
整体样式 — 操作权限列表（模块=订单管理）
查看
新增
编辑
删除
导出
Default
查看
Hover
新增
Selected / Active
编辑
Disabled
删除
Danger Active
删除
8.5 完整展开面板 (Full Panel — Open State)
触发器 + 下拉三栏面板的完整组合预览，直接展示展开状态
管理员
从预设角色中选择一个权限模板，包含角色 / 模块 / 操作三级。
角色
超级管理员
管理员
财务
运营
客服
只读
功能模块
订单管理
归集管理
操作权限
查看
新增
编辑
删除
导出
8.6 收起状态 (Closed State)
面板关闭，仅显示触发器和已选角色
管理员
9. 下拉菜单 (Dropdown Menu)
9.1 下拉容器 (Dropdown Container)
下拉面板的容器样式，包含边框、圆角和阴影
Default（关闭态）
Open（展开态）
全部
USDT
TRX
Disabled（禁用态）
9.2 单选菜单项状态 (Single-select Item States)
单选下拉列表中每一行菜单项的不同状态
整体样式
全部
JST
USDT
TRX
Rel
Default
USDT
Hover
USDT
Selected / Active
USDT
Disabled
USDT
9.3 带图标菜单项状态 (Icon + Text Item States)
带图标的菜单项在不同状态下的展示
整体样式
Dashboard
Settings
Profile
Default
Dashboard
Hover
Dashboard
Selected / Active
Dashboard
Disabled
Dashboard
9.4 多选菜单项状态 (Multi-select Item States)
带 Checkbox 的多选下拉菜单项在不同状态下的展示
整体样式
USDT
TRX
BTC
ETH
Unchecked Default
TRX
Unchecked Hover
TRX
Checked
USDT
Checked Hover
USDT
Disabled
ETH
9.5 分隔线与分组标题 (Divider & Group Header)
菜单中的分组标题和分隔线样式
带分隔线
全部
USDT
TRX
BTC
带分组标题
主要币种
USDT
BTC
其他币种
TRX
JST
9.6 带搜索的下拉菜单 (Searchable Dropdown)
顶部带搜索输入框的下拉菜单
有搜索结果
USD
USDT
USDC
无搜索结果
XYZ
未找到匹配项
10. 通知提示 (Toast)
Success
操作成功
Error
操作失败
Warning
请注意
Info
i
提示信息