UI 设计规范
本规范旨在统一项目UI设计，提升用户体验和开发效率。
一、 颜色规范
| 颜色名称 | 十六进制 | RGB | 用途 |
|---|
| 主色调 | #007bff | (0, 123, 255) | 按钮、链接、主要功能元素 |
| 次要色调 | #6c757d | (108, 117, 125) | 文本、辅助元素、分割线 |
| 背景色 | #f8f9fa | (248, 249, 250) | 页面背景 |
| 警示色 | #dc3545 | (220, 53, 69) | 错误提示、警告信息 |
| 成功色 | #28a745 | (40, 167, 69) | 成功提示、确认信息 |
二、 尺寸规范
本规范采用基于 8px 的倍数系统，方便设计和开发。
- 间距: 8px, 16px, 24px, 32px, 40px ...
- 字体大小:
- 标题1: 24px
- 标题2: 20px
- 标题3: 16px
- 正文: 14px
- 辅助文本: 12px
- 按钮高度: 40px
- 输入框高度: 40px
- 图标大小: 16px, 24px, 32px
三、 常用组件规范
3.1 按钮
| 属性 | 说明 | 示例 |
|---|
| 类型 | 主按钮、次要按钮、危险按钮 | primary, secondary, danger |
| 尺寸 | 默认、小、大 | default, small, large |
| 状态 | 默认、禁用、加载中 | default, disabled, loading |
| 图标 | 按钮可包含图标，图标位于按钮文本的左侧或右侧 | <Button icon="search">搜索</Button> |
3.2 输入框
| 属性 | 说明 | 示例 |
|---|
| 类型 | 文本输入框、密码输入框、数字输入框 | text, password, number |
| 状态 | 默认、禁用、错误 | default, disabled, error |
| 图标 | 输入框可包含图标，图标位于输入框的右侧 | <Input placeholder="请输入内容" icon="user"/> |
| 辅助文本 | 用于提供输入提示或错误信息 | |
3.3 列表
| 属性 | 说明 |
|---|
| 类型 | 普通列表、卡片列表 |
| 排版 | 水平、垂直 |
| 图标 | 列表项可包含图标 |
四、 排版规范
- 字体: Roboto (或等效字体)
- 行高: 1.5
- 字重: 常规 (400)
五、 图标规范
