HaloPay
A

组件库样式规范 (Design System)

本项目的基础 UI 组件规范，用于统一全局样式。

1. 颜色 (Colors)

Brand (品牌色)

Primary
#555DFF
80% Opacity
#555DFF (80%)
50% Opacity
#555DFF (50%)
10% Opacity
#555DFF (10%)

Functional (功能色)

Success
#00B600
Failed/Danger
#FF3B3B
Warning
#FF9D00
Link
#555DFF

Neutrals (中性色)

Text Primary
#1A1A1A
Text Secondary
#808080
Text Quaternary
#A3A3A3
Border/Fill
#EBEBEB
Background
#F7F7F7

2. 字体 (Typography)

Large Title - 20px Bold

Used for Page Titles

Headline - 16px Bold

Used for Section Headers

Body Medium - 14px Medium

Default UI Text

Body Regular - 14px Regular

Paragraph / Secondary Text

Callout - 12px Medium

Labels / Tags

Caption - 10px Regular

Meta info / Time

1,234,567.89

Numbers (Manrope Tabular Nums)

3. 按钮 (Buttons)

Types

Sizes (Height)

4. 表单控件 (Form Elements)

Input Field

Select Box

Date Inputs

Checkbox & Radio

Switch

5. 状态标签 (Status Badges)

Success / 已完成 Warning / 处理中 Failed / 失败 Info / 进行中 Default / 未知

6. 表格 (Tables)

Header 1 Header 2 Header 3 Action
Row 1 Data Sample Text Active
Row 2 Data Sample Text Inactive

7. 日期选择 (Date Picker)

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)

用于为成员授予角色 → 模块 → 操作三级权限的下拉选择组件。

从预设角色中选择一个权限模板，包含角色 / 模块 / 操作三级。
角色
超级管理员
管理员
财务
运营
客服
只读
功能模块
操作权限

3. 通知提示 (Toast)

Variants

Action completed successfully

Operation failed

Attention required

i

Information message