# 组件设计规范

## 组件的通用状态

每个交互组件必须定义以下 6 种状态：

| 状态 | 说明 | 视觉变化 |
|:----|:-----|:---------|
| **Default** | 默认/正常状态 | 基础样式 |
| **Hover** | 鼠标悬停 | 背景色加深 +10% / 阴影 |
| **Active/Pressed** | 鼠标按下/触摸 | 背景色加深 +20% / 缩小 |
| **Focus** | 键盘聚焦 | 外发光 / 边框高亮 |
| **Disabled** | 禁用状态 | 降低不透明度至 40%–50% |
| **Loading** | 加载中 | 显示加载指示器，禁用交互 |

## 按钮规范

### 按钮层级

| 层级 | 视觉权重 | 使用频率 | 页面数量建议 |
|:----|:---------|:---------|:------------|
| **Primary（主要）** | 最高，品牌色填充 | 每个场景 1 个 | 每页 ≤ 1 个 |
| **Secondary（次要）** | 中等，描边或浅底 | 多个 | 每页 ≤ 3 个 |
| **Text（文字）** | 最低，仅文字 | 辅助操作 | 不限 |
| **Danger（危险）** | 红色强调 | 删除/危险操作 | 按需 |

### 按钮尺寸

| 尺寸 | 高度 | 水平内边距 | 字号 | 适用场景 |
|:----|:----|:----------|:----|:---------|
| XL | 48px | 24px | 16px | 全屏宽度/大操作 |
| LG | 40px | 20px | 15px | 表单主要操作 |
| MD | 32px | 16px | 14px | **默认尺寸** |
| SM | 28px | 12px | 12px | 表格/密集操作 |
| XS | 24px | 8px | 12px | 工具条/标签操作 |

### 禁用场景规则
- 主要操作按钮禁用时，需提供 Tooltip 说明原因
- 危险操作需二次确认（弹窗或撤销机制）

## 输入框规范

| 属性 | 标准值 |
|:----|:-------|
| 高度 | 32px（MD） |
| 水平内边距 | 12px |
| 边框色 | `color-neutral-border` |
| 聚焦边框色 | `color-brand-primary` |
| 错误边框色 | `color-semantic-error` |
| 占位文字色 | `color-neutral-text-placeholder` |
| 圆角 | `radius-sm`（4px） |
| 标签位置 | 上方（默认）/ 左对齐 |

### 输入框反馈状态

| 状态 | 视觉反馈 | 提示文字 |
|:----|:---------|:---------|
| Normal | 默认边框 | 无 |
| Focus | 蓝色边框 + 阴影 | 无 |
| Error | 红色边框 + 红色阴影 | 错误原因 |
| Success | 绿色边框 + 勾选图标 | 可选 |
| Warning | 橙色边框 | 警告说明 |
| Disabled | 灰色背景 50% 不透明度 | 无 |

## 模态框规范

| 属性 | 标准值 |
|:----|:-------|
| 遮罩色 | rgba(0, 0, 0, 45%) |
| 内边距 | 24px |
| 圆角 | `radius-lg`（16px） |
| 关闭方式 | 点击遮罩（可配置）、点击 X、按 ESC |
| 标题栏 | 16px Bold |
| 底部操作栏 | 右对齐按钮 |

### 模态框尺寸

| 尺寸 | 宽度 | 适用内容 |
|:----|:----|:---------|
| SM | 420px | 确认/提示 |
| MD | 520px | 表单编辑 |
| LG | 720px | 复杂表单/详情 |
| XL | 960px | 全功能/多标签 |

## 组件命名规范

```
{组件名}-{变体}-{状态}-{朝向?}
示例：btn-primary-hover, input-error, modal-lg
```