# 组件设计规范 常用 UI 组件的设计规范，确保一致性。 --- ## 🔘 按钮（Button） ### 尺寸规范 | 尺寸 | 高度 | 内边距 | 字体 | |-----|-----|-------|-----| | Small | 32px | px-3 py-1.5 | text-sm | | Default | 40px | px-4 py-2 | text-base | | Large | 48px | px-6 py-3 | text-lg | ### 样式变体 **主要按钮：** ```html ``` **次要按钮：** ```html ``` **危险按钮：** ```html ``` **文字按钮：** ```html ``` **图标按钮：** ```html ``` --- ## 📥 输入框（Input） ### 基础输入框 ```html
``` ### 带图标输入框 ```html
``` ### 错误状态 ```html

请输入有效的邮箱地址

``` --- ## ☑️ 复选框与单选框 ### 复选框 ```html ``` ### 单选框组 ```html
``` ### 开关（Toggle） ```html ``` --- ## 📋 下拉选择（Select） ### 原生选择器 ```html
``` ### 自定义下拉（按钮式） ```html
``` --- ## 🃏 卡片（Card） ### 基础卡片 ```html

卡片标题

卡片内容描述...

``` ### 带图片卡片 ```html

标题

描述...

``` ### 统计卡片 ```html

总收入

↑ 12%

¥48,290

``` --- ## 🔔 警告提示（Alert） ### 信息提示 ```html

提示

这是一条信息提示。

``` ### 成功提示 ```html

操作成功！

``` ### 警告提示 ```html

注意

请检查您的输入。

``` ### 错误提示 ```html

出错了

无法连接到服务器。

``` --- ## 🎴 徽章（Badge） ```html 标签 ● 活跃 ● 待处理 ● 已停止 12 ``` --- ## 📊 进度条 ### 线性进度条 ```html
``` ### 带标签进度条 ```html
进度 60%
``` ### 步骤进度条 ```html
1
2
3
``` --- ## 🗂️ 标签页（Tabs） ### 水平标签 ```html
``` ### 胶囊标签 ```html
``` --- ## 🧭 导航 ### 面包屑 ```html ``` ### 分页 ```html
...
``` --- ## 📝 设计令牌（Design Tokens） ### 圆角 ``` rounded-none: 0px rounded-sm: 2px rounded: 4px rounded-md: 6px rounded-lg: 8px rounded-xl: 12px rounded-2xl: 16px rounded-3xl: 24px rounded-full: 9999px ``` ### 阴影 ``` shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05) shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1) shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1) shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1) ``` ### 间距 ``` 基础单位: 4px (0.25rem) space-1: 4px space-2: 8px space-3: 12px space-4: 16px space-5: 20px space-6: 24px space-8: 32px space-10: 40px space-12: 48px space-16: 64px ``` --- **记住：** 组件的一致性 = 品牌的专业性。