# Element Plus 设计系统规范

> 基于 Element Plus 2.13.6 版本
> 本文档作为项目设计的唯一真理来源（Single Source of Truth）

---

## 目录

### [基础设计变量](#基础设计变量)
- [颜色系统](#颜色系统)
- [字体排版](#字体排版)
- [间距与布局](#间距与布局)
- [圆角与阴影](#圆角与阴影)
- [Z-Index 层级](#z-index-层级)

### [基础组件](#基础组件)
- [Button 按钮](#button-按钮)
- [Border 边框](#border-边框)
- [Color 色彩](#color-色彩)
- [Container 布局容器](#container-布局容器)
- [Icon 图标](#icon-图标)
- [Layout 布局](#layout-布局)
- [Link 链接](#link-链接)
- [Text 文本](#text-文本)
- [Scrollbar 滚动条](#scrollbar-滚动条)
- [Space 间距](#space-间距)
- [Splitter 分隔面板](#splitter-分隔面板)
- [Typography 排版](#typography-排版)

### [配置组件](#配置组件)
- [Config Provider 全局配置](#config-provider-全局配置)

### [表单组件](#表单组件)
- [Autocomplete 自动补全输入框](#autocomplete-自动补全输入框)
- [Cascader 级联选择器](#cascader-级联选择器)
- [Checkbox 多选框](#checkbox-多选框)
- [Color Picker 颜色选择器](#color-picker-颜色选择器)
- [Date Picker 日期选择器](#date-picker-日期选择器)
- [DateTime Picker 日期时间选择器](#datetime-picker-日期时间选择器)
- [Form 表单组件](#form-表单组件)
- [Input 输入框](#input-输入框)
- [Input Number 数字输入框](#input-number-数字输入框)
- [Input Tag 标签输入框](#input-tag-标签输入框)
- [Mention 提及](#mention-提及)
- [Radio 单选框](#radio-单选框)
- [Rate 评分](#rate-评分)
- [Select 选择器](#select-选择器)
- [Slider 滑块](#slider-滑块)
- [Switch 开关](#switch-开关)
- [Time Picker 时间选择器](#time-picker-时间选择器)
- [Time Select 时间选择](#time-select-时间选择)
- [Transfer 穿梭框](#transfer-穿梭框)
- [TreeSelect 树形选择](#treeselect-树形选择)
- [Upload 上传器](#upload-上传器)

### [数据展示](#数据展示)
- [Avatar 头像](#avatar-头像)
- [Badge 徽章](#badge-徽章)
- [Calendar 日历](#calendar-日历)
- [Card 卡片](#card-卡片)
- [Carousel 走马灯](#carousel-走马灯)
- [Collapse 折叠面板](#collapse-折叠面板)
- [Descriptions 描述列表](#descriptions-描述列表)
- [Empty 空状态](#empty-空状态)
- [Image 图片](#image-图片)
- [Pagination 分页](#pagination-分页)
- [Progress 进度条](#progress-进度条)
- [Result 结果](#result-结果)
- [Skeleton 骨架屏](#skeleton-骨架屏)
- [Table 表格](#table-表格)
- [Tag 标签](#tag-标签)
- [Timeline 时间线](#timeline-时间线)
- [Tour 漫游式引导](#tour-漫游式引导)
- [Tree 树形控件](#tree-树形控件)
- [Statistic 统计组件](#statistic-统计组件)
- [Segmented 分段控制器](#segmented-分段控制器)

### [导航组件](#导航组件)
- [Affix 固钉](#affix-固钉)
- [Anchor 锚点](#anchor-锚点)
- [Backtop 回到顶部](#backtop-回到顶部)
- [Breadcrumb 面包屑](#breadcrumb-面包屑)
- [Dropdown 下拉菜单](#dropdown-下拉菜单)
- [Menu 菜单](#menu-菜单)
- [Page Header 页头](#page-header-页头)
- [Steps 步骤条](#steps-步骤条)
- [Tabs 标签页](#tabs-标签页)

### [反馈组件](#反馈组件)
- [Alert 提示](#alert-提示)
- [Dialog 对话框](#dialog-对话框)
- [Drawer 抽屉](#drawer-抽屉)
- [Loading 加载](#loading-加载)
- [Message 消息提示](#message-消息提示)
- [Message Box 消息弹出框](#message-box-消息弹出框)
- [Notification 通知](#notification-通知)
- [Popconfirm 气泡确认框](#popconfirm-气泡确认框)
- [Popover 弹出框](#popover-弹出框)
- [Tooltip 文字提示](#tooltip-文字提示)

### [其他组件](#其他组件)
- [Divider 分割线](#divider-分割线)
- [Watermark 水印](#watermark-水印)

---

## 基础设计变量

### 颜色系统

#### 主色
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-color-primary` | `#409eff` | 主题色，用于主要操作按钮、链接、选中状态 |
| `--el-color-primary-light-1` | `#53a8ff` | 主色浅1级，用于 hover 状态 |
| `--el-color-primary-light-2` | `#66b1ff` | 主色浅2级 |
| `--el-color-primary-light-3` | `#79bbff` | 主色浅3级 |
| `--el-color-primary-light-4` | `#8cc5ff` | 主色浅4级 |
| `--el-color-primary-light-5` | `#a0cfff` | 主色浅5级 |
| `--el-color-primary-light-6` | `#b3d8ff` | 主色浅6级 |
| `--el-color-primary-light-7` | `#c6e2ff` | 主色浅7级 |
| `--el-color-primary-light-8` | `#d9ecff` | 主色浅8级 |
| `--el-color-primary-light-9` | `#ecf5ff` | 主色浅9级，用于背景色 |
| `--el-color-primary-dark-2` | `#337ecc` | 主色深2级，用于 active 状态 |

#### 功能色
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-color-success` | `#67c23a` | 成功色，用于成功提示、完成状态 |
| `--el-color-warning` | `#e6a23c` | 警告色，用于警告提示、注意状态 |
| `--el-color-danger` | `#f56c6c` | 危险色，用于错误提示、删除操作 |
| `--el-color-error` | `#f56c6c` | 错误色，同危险色 |
| `--el-color-info` | `#909399` | 信息色，用于一般信息提示 |

#### 中性色 - 文本
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-text-color-primary` | `#303133` | 主要文本颜色，用于标题、重要文字 |
| `--el-text-color-regular` | `#606266` | 常规文本颜色，用于正文 |
| `--el-text-color-secondary` | `#909399` | 次要文本颜色，用于辅助说明 |
| `--el-text-color-placeholder` | `#a8abb2` | 占位符颜色 |
| `--el-text-color-disabled` | `#c0c4cc` | 禁用文本颜色 |

#### 中性色 - 边框
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-border-color` | `#dcdfe6` | 基础边框颜色 |
| `--el-border-color-light` | `#e4e7ed` | 浅色边框 |
| `--el-border-color-lighter` | `#ebeef5` | 更浅边框 |
| `--el-border-color-extra-light` | `#f2f6fc` | 极浅边框 |
| `--el-border-color-dark` | `#d4d7de` | 深色边框 |
| `--el-border-color-darker` | `#cdd0d6` | 更深边框 |

#### 中性色 - 填充
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-fill-color` | `#f0f2f5` | 基础填充色 |
| `--el-fill-color-light` | `#f5f7fa` | 浅色填充 |
| `--el-fill-color-lighter` | `#fafafa` | 更浅填充 |
| `--el-fill-color-extra-light` | `#fafcff` | 极浅填充 |
| `--el-fill-color-dark` | `#ebedf0` | 深色填充 |
| `--el-fill-color-darker` | `#e6e8eb` | 更深填充 |
| `--el-fill-color-blank` | `#ffffff` | 空白填充（白色） |

#### 中性色 - 背景
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-bg-color` | `#ffffff` | 基础背景色 |
| `--el-bg-color-page` | `#f2f3f5` | 页面背景色 |
| `--el-bg-color-overlay` | `#ffffff` | 浮层背景色 |

#### 基础色
| 变量名 | Hex 值 | 用途说明 |
|--------|--------|----------|
| `--el-color-white` | `#ffffff` | 白色 |
| `--el-color-black` | `#000000` | 黑色 |

### 字体排版

#### 字体族
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-font-family` | `'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif` | 默认字体族 |

#### 字号
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-font-size-extra-large` | `20px` | 超大字号，用于大标题 |
| `--el-font-size-large` | `18px` | 大字号，用于次级标题 |
| `--el-font-size-medium` | `16px` | 中等字号，用于小标题 |
| `--el-font-size-base` | `14px` | 基础字号，用于正文 |
| `--el-font-size-small` | `13px` | 小字号，用于辅助文字 |
| `--el-font-size-extra-small` | `12px` | 超小字号，用于标注、提示 |

#### 字重
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-font-weight-primary` | `500` | 主要字重，用于强调文字 |

#### 行高
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-font-line-height-primary` | `1.5` | 主要行高，用于正文 |

### 间距与布局

#### 组件尺寸
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-component-size-large` | `40px` | 大号组件高度 |
| `--el-component-size` | `32px` | 默认组件高度 |
| `--el-component-size-small` | `24px` | 小号组件高度 |

#### 间距系统
Element Plus 采用 **4px 基准** 的间距系统，所有间距均为 4 的倍数。

| 间距值 | 使用场景 |
|--------|----------|
| `4px` | 最小间距，用于紧凑布局 |
| `8px` | 小组件间距 |
| `12px` | 中等间距 |
| `16px` | 标准间距，常用 |
| `20px` | 较大间距 |
| `24px` | 大间距 |
| `32px` | 超大间距 |

### 圆角与阴影

#### 圆角
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-border-radius-base` | `4px` | 基础圆角，用于按钮、输入框 |
| `--el-border-radius-small` | `2px` | 小圆角，用于标签、徽章 |
| `--el-border-radius-round` | `20px` | 圆形，用于圆形按钮 |
| `--el-border-radius-circle` | `100%` | 完全圆形，用于头像 |

#### 阴影
| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-box-shadow` | `0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)` | 基础阴影，用于卡片、浮层 |
| `--el-box-shadow-light` | `0px 0px 12px rgba(0, 0, 0, 0.12)` | 浅色阴影，用于下拉菜单 |
| `--el-box-shadow-lighter` | `0px 0px 6px rgba(0, 0, 0, 0.12)` | 更浅阴影，用于轻微浮起 |
| `--el-box-shadow-dark` | `0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16)` | 深色阴影，用于模态框 |

### Z-Index 层级

| 变量名 | 值 | 用途说明 |
|--------|-----|----------|
| `--el-index-normal` | `1` | 正常层级 |
| `--el-index-top` | `1000` | 顶层，用于固定定位元素 |
| `--el-index-popper` | `2000` | 弹出层，用于下拉、弹窗 |

---

## 基础组件

### Button 按钮

#### 概述
按钮用于触发即时操作，是最常用的交互组件之一。

#### 设计规格

##### 类型
| 类型 | 背景色 | 文字色 | 边框色 | 用途说明 |
|------|--------|--------|--------|----------|
| Primary | `--el-color-primary` | `#ffffff` | 同背景 | 主要操作按钮 |
| Success | `--el-color-success` | `#ffffff` | 同背景 | 成功操作按钮 |
| Warning | `--el-color-warning` | `#ffffff` | 同背景 | 警告操作按钮 |
| Danger | `--el-color-danger` | `#ffffff` | 同背景 | 危险操作按钮 |
| Info | `--el-color-info` | `#ffffff` | 同背景 | 信息操作按钮 |
| Default | `--el-fill-color-blank` | `--el-text-color-regular` | `--el-border-color` | 默认按钮 |

##### 尺寸
| 尺寸 | 高度 | 字号 | 水平padding |
|------|------|------|-------------|
| Large | `40px` | `--el-font-size-large` | `20px` |
| Default | `32px` | `--el-font-size-base` | `16px` |
| Small | `24px` | `--el-font-size-small` | `12px` |

##### 状态
| 状态 | 背景色变化 | 文字色变化 | 说明 |
|------|------------|------------|------|
| Hover | 变浅一级 | 不变 | 鼠标悬停 |
| Active | 变深一级 | 不变 | 点击激活 |
| Disabled | `--el-fill-color-light` | `--el-text-color-disabled` | 禁用状态 |

##### CSS 变量
```css
--el-button-font-weight: var(--el-font-weight-primary);
--el-button-border-radius: var(--el-border-radius-base);
--el-button-hover-link-text-color: var(--el-color-primary-light-3);
```

---

### Border 边框

#### 概述
定义边框样式规范，包括圆角和边框线。

#### 设计规格

##### 圆角
| 类型 | 值 | 用途说明 |
|------|-----|----------|
| 小圆角 | `2px` | 标签、徽章等小组件 |
| 基础圆角 | `4px` | 按钮、输入框、卡片等 |
| 圆形 | `20px` | 圆形按钮 |
| 完全圆形 | `100%` | 头像、圆形图标背景 |

##### 边框
| 属性 | 值 | 用途说明 |
|------|-----|----------|
| 边框宽度 | `1px` | 所有边框统一宽度 |
| 边框样式 | `solid` | 实线边框 |
| 默认颜色 | `--el-border-color` | 默认边框颜色 |
| Hover颜色 | `--el-color-primary` | 输入框等组件hover时 |

---

### Color 色彩

#### 概述
Element Plus 的色彩系统，包含主题色、功能色和中性色。

#### 设计规格

##### 主题色梯度
| 色阶 | Hex | CSS变量 | 用途 |
|------|-----|---------|------|
| 基础 | `#409eff` | `--el-color-primary` | 主要操作 |
| 浅1 | `#53a8ff` | `--el-color-primary-light-1` | hover |
| 浅2 | `#66b1ff` | `--el-color-primary-light-2` | - |
| 浅3 | `#79bbff` | `--el-color-primary-light-3` | - |
| 浅4 | `#8cc5ff` | `--el-color-primary-light-4` | - |
| 浅5 | `#a0cfff` | `--el-color-primary-light-5` | - |
| 浅6 | `#b3d8ff` | `--el-color-primary-light-6` | - |
| 浅7 | `#c6e2ff` | `--el-color-primary-light-7` | - |
| 浅8 | `#d9ecff` | `--el-color-primary-light-8` | - |
| 浅9 | `#ecf5ff` | `--el-color-primary-light-9` | 背景 |
| 深2 | `#337ecc` | `--el-color-primary-dark-2` | active |

##### 功能色
| 类型 | Hex | CSS变量 | 用途 |
|------|-----|---------|------|
| 成功 | `#67c23a` | `--el-color-success` | 成功状态 |
| 警告 | `#e6a23c` | `--el-color-warning` | 警告状态 |
| 危险 | `#f56c6c` | `--el-color-danger` | 危险/删除 |
| 错误 | `#f56c6c` | `--el-color-error` | 错误状态 |
| 信息 | `#909399` | `--el-color-info` | 信息提示 |

---

### Container 布局容器

#### 概述
用于页面整体布局的容器组件，包含 Header、Aside、Main、Footer。

#### 设计规格

##### 布局结构
```
+------------------+
|     Header       |  高度: 60px (推荐)
+------------------+
|        |         |
|  Aside |  Main   |  Aside宽度: 200-300px
|        |         |  Main: flex: 1
+------------------+
|     Footer       |  高度: 40-60px
+------------------+
```

##### CSS 变量
```css
--el-container-header-height: 60px;
--el-container-aside-width: 200px;
--el-container-footer-height: 60px;
```

---

### Icon 图标

#### 概述
Element Plus 提供了一套精美的图标系统。

#### 设计规格

##### 图标尺寸
| 类型 | 大小 | 用途说明 |
|------|------|----------|
| 默认 | `1em` | 跟随文字大小 |
| 大图标 | `16px` | 独立图标 |
| 超大图标 | `28px` | 强调图标 |

##### CSS 变量
```css
--el-icon-size: 1em;
--el-icon-large-size: 28px;
```

---

### Layout 布局

#### 概述
基于 24 栅格系统的布局组件。

#### 设计规格

##### 栅格系统
- 总列数：24 列
- 间距：通过 `gutter` 属性设置，推荐 `16px` 或 `24px`

##### 断点
| 断点 | 宽度 | 用途 |
|------|------|------|
| xs | `<768px` | 超小屏（手机） |
| sm | `≥768px` | 小屏（平板） |
| md | `≥992px` | 中屏（小桌面） |
| lg | `≥1200px` | 大屏（桌面） |
| xl | `≥1920px` | 超大屏 |

---

### Link 链接

#### 概述
文本链接组件，用于页面内导航或外部链接。

#### 设计规格

##### 类型
| 类型 | 颜色 | 用途说明 |
|------|------|----------|
| Default | `--el-text-color-regular` | 默认链接 |
| Primary | `--el-color-primary` | 主要链接 |
| Success | `--el-color-success` | 成功链接 |
| Warning | `--el-color-warning` | 警告链接 |
| Danger | `--el-color-danger` | 危险链接 |
| Info | `--el-color-info` | 信息链接 |

##### 状态
| 状态 | 效果 |
|------|------|
| Hover | 下划线 + 颜色变浅 |
| Active | 颜色变深 |
| Disabled | 禁用色 + 不可点击 |

---

### Text 文本

#### 概述
文本样式组件，提供丰富的文本样式配置。

#### 设计规格

##### 字号
| 类型 | 值 | CSS变量 | 用途 |
|------|-----|---------|------|
| 超大 | `20px` | `--el-font-size-extra-large` | 大标题 |
| 大 | `18px` | `--el-font-size-large` | 次级标题 |
| 中等 | `16px` | `--el-font-size-medium` | 小标题 |
| 基础 | `14px` | `--el-font-size-base` | 正文 |
| 小 | `13px` | `--el-font-size-small` | 辅助文字 |
| 超小 | `12px` | `--el-font-size-extra-small` | 标注 |

##### 字重
| 类型 | 值 | 用途 |
|------|-----|------|
| 正常 | `400` | 常规文字 |
| 中等 | `500` | 强调文字 |
| 粗体 | `600` | 标题文字 |

##### 颜色
使用 `--el-text-color-*` 系列变量。

---

### Scrollbar 滚动条

#### 概述
自定义滚动条样式组件。

#### 设计规格

##### 滚动条尺寸
| 属性 | 值 |
|------|-----|
| 宽度 | `6px` (垂直) |
| 高度 | `6px` (水平) |

##### 滚动条颜色
| 状态 | 颜色 |
|------|------|
| 默认 | `rgba(0, 0, 0, 0.2)` |
| Hover | `rgba(0, 0, 0, 0.3)` |
| 拖拽 | `rgba(0, 0, 0, 0.4)` |

---

### Space 间距

#### 概述
统一间距组件，用于控制组件之间的间距。

#### 设计规格

##### 间距值
| 类型 | 值 | 用途 |
|------|-----|------|
| 小 | `8px` | 紧凑布局 |
| 默认 | `12px` | 标准间距 |
| 大 | `16px` | 宽松布局 |
| 超大 | `24px` | 超大间距 |

---

### Splitter 分隔面板

#### 概述
可调整大小的分隔面板组件。

#### 设计规格

##### 分隔条
| 属性 | 值 |
|------|-----|
| 宽度（垂直） | `2px` |
| 高度（水平） | `2px` |
| 背景色 | `--el-border-color` |
| Hover色 | `--el-color-primary` |

---

### Typography 排版

#### 概述
排版组件，用于标题、段落等文本内容的样式规范。

#### 设计规格

##### 标题
| 级别 | 字号 | 字重 | 行高 | 用途 |
|------|------|------|------|------|
| H1 | `--el-font-size-extra-large` | `600` | `1.4` | 页面主标题 |
| H2 | `--el-font-size-large` | `600` | `1.4` | 章节标题 |
| H3 | `--el-font-size-medium` | `600` | `1.4` | 小节标题 |
| H4 | `--el-font-size-base` | `600` | `1.4` | 组标题 |
| H5 | `--el-font-size-base` | `500` | `1.4` | 子标题 |
| H6 | `--el-font-size-small` | `500` | `1.4` | 小小标题 |

##### 段落
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `400` |
| 行高 | `1.6` |
| 颜色 | `--el-text-color-regular` |

##### 文字样式
| 类型 | 颜色 | 用途 |
|------|------|------|
| 主要 | `--el-text-color-primary` | 重要文字 |
| 常规 | `--el-text-color-regular` | 正文 |
| 次要 | `--el-text-color-secondary` | 辅助说明 |
| 占位符 | `--el-text-color-placeholder` | 输入框提示 |
| 禁用 | `--el-text-color-disabled` | 禁用文字 |

---

## 配置组件

### Config Provider 全局配置

#### 概述
全局配置组件，用于配置整个应用的默认设置。

#### 设计规格

##### 可配置项
| 配置项 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `locale` | Object | zh-cn | 语言配置 |
| `size` | String | default | 组件尺寸 |
| `z-index` | Number | 2000 | 弹出层z-index |
| `namespace` | String | el | CSS前缀 |

---

## 表单组件

### Autocomplete 自动补全输入框

#### 概述
带输入建议的自动补全输入框。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 | 字号 |
|------|------|------|
| Large | `40px` | `--el-font-size-large` |
| Default | `32px` | `--el-font-size-base` |
| Small | `24px` | `--el-font-size-small` |

##### 下拉列表
| 属性 | 值 |
|------|-----|
| 最大高度 | `280px` |
| 项高度 | `34px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |

---

### Cascader 级联选择器

#### 概述
多级级联选择器，用于选择有层级关系的数据。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 |
|------|------|
| Large | `40px` |
| Default | `32px` |
| Small | `24px` |

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最小宽度 | `200px` |
| 项高度 | `34px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow` |

---

### Checkbox 多选框

#### 概述
多选框组件，用于选择一个或多个选项。

#### 设计规格

##### 尺寸
| 属性 | 值 |
|------|-----|
| 输入框大小 | `14px × 14px` |
| 字号 | `--el-font-size-base` |
| 圆角 | `--el-border-radius-small` |

##### 状态
| 状态 | 边框色 | 背景色 | 图标色 |
|------|--------|--------|--------|
| 默认 | `--el-border-color` | 透明 | - |
| Hover | `--el-color-primary` | 透明 | - |
| 选中 | `--el-color-primary` | `--el-color-primary` | `#ffffff` |
| 禁用 | `--el-border-color` | `--el-fill-color-light` | `--el-text-color-placeholder` |

---

### Color Picker 颜色选择器

#### 概述
用于选择颜色的选择器组件。

#### 设计规格

##### 面板
| 属性 | 值 |
|------|-----|
| 宽度 | `280px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow` |

---

### Date Picker 日期选择器

#### 概述
用于选择日期的选择器组件。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 |
|------|------|
| Large | `40px` |
| Default | `32px` |
| Small | `24px` |

##### 日期面板
| 属性 | 值 |
|------|-----|
| 单元格宽度 | `36px` |
| 单元格高度 | `32px` |
| 圆角 | `--el-border-radius-base` |

##### 状态
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 今天 | 透明 | `--el-color-primary` |
| 选中 | `--el-color-primary` | `#ffffff` |
| 范围 | `--el-color-primary-light-9` | `--el-color-primary` |
| Hover | `--el-color-primary-light-9` | `--el-color-primary` |

---

### DateTime Picker 日期时间选择器

#### 概述
同时选择日期和时间的选择器组件。

#### 设计规格

##### 面板
| 属性 | 值 |
|------|-----|
| 宽度 | `300px` |
| 确认栏高度 | `40px` |

---

### Form 表单组件

#### 概述
表单容器组件，用于收集用户输入。

#### 设计规格

##### 布局
| 类型 | 标签位置 | 用途 |
|------|----------|------|
| 垂直 | 上 | 默认布局 |
| 水平 | 左/右 | 并排布局 |
| 行内 | 左 | 行内表单 |

##### 标签
| 属性 | 值 |
|------|-----|
| 宽度（水平） | `80px` (推荐) |
| 对齐 | right (推荐) |

##### 表单项间距
| 属性 | 值 |
|------|-----|
| 垂直间距 | `22px` |

---

### Input 输入框

#### 概述
基础文本输入框组件。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 | 字号 |
|------|------|------|
| Large | `40px` | `--el-font-size-large` |
| Default | `32px` | `--el-font-size-base` |
| Small | `24px` | `--el-font-size-small` |

##### 状态
| 状态 | 边框色 | 背景色 |
|------|--------|--------|
| 默认 | `--el-border-color` | `--el-fill-color-blank` |
| Hover | `--el-border-color-hover` | `--el-fill-color-blank` |
| Focus | `--el-color-primary` | `--el-fill-color-blank` |
| 禁用 | `--el-border-color` | `--el-fill-color-light` |

##### 内边距
| 尺寸 | 水平padding |
|------|-------------|
| Large | `16px` |
| Default | `12px` |
| Small | `8px` |

---

### Input Number 数字输入框

#### 概述
仅允许输入数字的输入框组件。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 | 按钮宽度 |
|------|------|----------|
| Large | `40px` | `32px` |
| Default | `32px` | `24px` |
| Small | `24px` | `20px` |

---

### Input Tag 标签输入框

#### 概述
用于输入标签的输入框组件，支持动态添加标签。

#### 设计规格

##### 标签样式
| 属性 | 值 |
|------|-----|
| 高度 | `24px` (small) |
| 圆角 | `--el-border-radius-small` |
| 间距 | `4px` |

---

### Mention 提及

#### 概述
提及组件，用于在输入时提及他人。

#### 设计规格

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最大高度 | `280px` |
| 项高度 | `34px` |
| 圆角 | `--el-border-radius-base` |

---

### Radio 单选框

#### 概述
单选框组件，用于在一组选项中选择一个。

#### 设计规格

##### 尺寸
| 属性 | 值 |
|------|-----|
| 圆形直径 | `14px` |
| 内圆直径 | `8px` |
| 字号 | `--el-font-size-base` |

##### 状态
| 状态 | 边框色 | 内圆色 |
|------|--------|--------|
| 默认 | `--el-border-color` | 透明 |
| Hover | `--el-color-primary` | 透明 |
| 选中 | `--el-color-primary` | `--el-color-primary` |
| 禁用 | `--el-border-color` | `--el-text-color-placeholder` |

---

### Rate 评分

#### 概述
评分组件，用于星级评分。

#### 设计规格

##### 图标
| 属性 | 值 |
|------|-----|
| 大小 | `18px` |
| 间距 | `4px` |
| 未选中色 | `--el-fill-color` |
| 选中色 | `--el-color-warning` |

---

### Select 选择器

#### 概述
下拉选择器组件。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 |
|------|------|
| Large | `40px` |
| Default | `32px` |
| Small | `24px` |

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最大高度 | `280px` |
| 项高度 | `34px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |

##### 选项状态
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` |
| Hover | `--el-fill-color-light` | `--el-text-color-primary` |
| 选中 | `--el-color-primary-light-9` | `--el-color-primary` |
| 禁用 | 透明 | `--el-text-color-disabled` |

---

### Slider 滑块

#### 概述
滑块组件，用于在范围内选择数值。

#### 设计规格

##### 轨道
| 属性 | 值 |
|------|-----|
| 高度 | `6px` |
| 背景色 | `--el-fill-color` |
| 激活色 | `--el-color-primary` |
| 圆角 | `3px` |

##### 滑块
| 属性 | 值 |
|------|-----|
| 大小 | `16px` |
| 背景色 | `#ffffff` |
| 边框色 | `--el-border-color` |
| Hover大小 | `20px` |

---

### Switch 开关

#### 概述
开关组件，用于切换两种状态。

#### 设计规格

##### 尺寸
| 尺寸 | 宽度 | 高度 |
|------|------|------|
| Default | `40px` | `20px` |
| Small | `32px` | `16px` |

##### 状态
| 状态 | 背景色 | 滑块色 |
|------|--------|--------|
| 关闭 | `--el-border-color` | `#ffffff` |
| 开启 | `--el-color-primary` | `#ffffff` |

---

### Time Picker 时间选择器

#### 概述
时间选择器组件。

#### 设计规格

##### 面板
| 属性 | 值 |
|------|-----|
| 列宽 | `56px` |
| 项高度 | `32px` |
| 最大高度 | `200px` |

---

### Time Select 时间选择

#### 概述
选择特定时间点的选择器。

#### 设计规格

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最大高度 | `200px` |
| 项高度 | `34px` |

---

### Transfer 穿梭框

#### 概述
双栏穿梭选择框组件。

#### 设计规格

##### 面板
| 属性 | 值 |
|------|-----|
| 宽度 | `200px` |
| 高度 | `300px` |
| 圆角 | `--el-border-radius-base` |
| 边框 | `--el-border-color` |

---

### TreeSelect 树形选择

#### 概述
树形结构的选择器组件。

#### 设计规格

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最大高度 | `280px` |
| 项高度 | `34px` |
| 缩进 | `16px` |

---

### Upload 上传器

#### 概述
文件上传组件。

#### 设计规格

##### 上传区域
| 属性 | 值 |
|------|-----|
| 宽度 | `100px` (推荐) |
| 高度 | `100px` (推荐) |
| 边框 | `1px dashed --el-border-color` |
| 圆角 | `--el-border-radius-base` |
| Hover边框 | `--el-color-primary` |

---

## 数据展示

### Avatar 头像

#### 概述
头像组件，用于展示用户头像或信息。

#### 设计规格

##### 尺寸
| 尺寸 | 值 | 用途 |
|------|-----|------|
| Large | `40px` | 大头像 |
| Default | `32px` | 默认头像 |
| Small | `24px` | 小头像 |

##### 形状
| 类型 | 圆角 |
|------|------|
| Circle | `50%` |
| Square | `--el-border-radius-base` |

##### 背景色
| 类型 | 颜色 |
|------|------|
| 默认 | `--el-fill-color` |
| 主题色 | `--el-color-primary` |

---

### Badge 徽章

#### 概述
徽章组件，用于展示数量或状态标记。

#### 设计规格

##### 徽章
| 属性 | 值 |
|------|-----|
| 最小宽度 | `18px` |
| 高度 | `18px` |
| 圆角 | `9px` |
| 字号 | `12px` |
| 背景色 | `--el-color-danger` |
| 文字色 | `#ffffff` |

##### 点
| 属性 | 值 |
|------|-----|
| 大小 | `8px` |
| 圆角 | `50%` |
| 背景色 | `--el-color-danger` |

---

### Calendar 日历

#### 概述
日历组件，用于展示日期信息。

#### 设计规格

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |

##### 单元格
| 属性 | 值 |
|------|-----|
| 最小高度 | `80px` |
| 边框 | `--el-border-color-lighter` |

---

### Card 卡片

#### 概述
卡片容器组件。

#### 设计规格

##### 卡片
| 属性 | 值 |
|------|-----|
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow` |
| 背景色 | `--el-bg-color` |

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 边框 | `--el-border-color-lighter` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `16px` |

---

### Carousel 走马灯

#### 概述
走马灯组件，用于轮播展示。

#### 设计规格

##### 指示器
| 属性 | 值 |
|------|-----|
| 类型 | 圆点/按钮 |
| 大小 | `8px` (圆点) |
| 间距 | `4px` |
| 默认色 | `--el-border-color` |
| 激活色 | `--el-color-primary` |

##### 箭头
| 属性 | 值 |
|------|-----|
| 大小 | `36px` |
| 背景 | `rgba(0,0,0,0.2)` |
| Hover背景 | `rgba(0,0,0,0.4)` |

---

### Collapse 折叠面板

#### 概述
折叠面板组件，用于分组展示内容。

#### 设计规格

##### 面板
| 属性 | 值 |
|------|-----|
| 边框 | `--el-border-color-lighter` |
| 圆角 | `--el-border-radius-base` |

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `48px` |
| 背景色 | `--el-fill-color-blank` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `16px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |

---

### Descriptions 描述列表

#### 概述
描述列表组件，用于展示键值对信息。

#### 设计规格

##### 头部
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |
| 底部间距 | `16px` |

##### 表格
| 属性 | 值 |
|------|-----|
| 标签宽度 | `100px` (推荐) |
| 标签颜色 | `--el-text-color-regular` |
| 内容颜色 | `--el-text-color-primary` |
| 边框 | `--el-border-color-lighter` |

---

### Empty 空状态

#### 概述
空状态组件，用于展示无数据状态。

#### 设计规格

##### 图标
| 属性 | 值 |
|------|-----|
| 大小 | `80px` |
| 颜色 | `--el-fill-color` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-secondary` |
| 间距 | `16px` |

---

### Image 图片

#### 概述
图片组件，支持预览等功能。

#### 设计规格

##### 预览遮罩
| 属性 | 值 |
|------|-----|
| 背景色 | `rgba(0,0,0,0.8)` |
| 图标大小 | `24px` |
| 图标色 | `#ffffff` |

---

### Pagination 分页

#### 概述
分页组件，用于数据分页展示。

#### 设计规格

##### 分页按钮
| 属性 | 值 |
|------|-----|
| 最小宽度 | `32px` |
| 高度 | `32px` |
| 圆角 | `--el-border-radius-small` |
| 字号 | `--el-font-size-base` |

##### 状态
| 状态 | 背景色 | 文字色 | 边框色 |
|------|--------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` | 透明 |
| Hover | `--el-fill-color-light` | `--el-color-primary` | 透明 |
| 当前页 | `--el-color-primary` | `#ffffff` | `--el-color-primary` |
| 禁用 | 透明 | `--el-text-color-disabled` | 透明 |

##### 跳转
| 属性 | 值 |
|------|-----|
| 输入框宽度 | `50px` |
| 输入框高度 | `32px` |

---

### Progress 进度条

#### 概述
进度条组件，用于展示进度。

#### 设计规格

##### 进度条
| 属性 | 值 |
|------|-----|
| 高度 | `6px` |
| 圆角 | `3px` |
| 背景色 | `--el-fill-color` |
| 进度色 | `--el-color-primary` |

##### 状态色
| 状态 | 颜色 |
|------|------|
| 成功 | `--el-color-success` |
| 警告 | `--el-color-warning` |
| 危险 | `--el-color-danger` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-regular` |

---

### Result 结果

#### 概述
结果组件，用于展示操作结果。

#### 设计规格

##### 图标
| 属性 | 值 |
|------|-----|
| 大小 | `64px` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |
| 间距 | `8px` |

##### 描述
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-secondary` |

---

### Skeleton 骨架屏

#### 概述
骨架屏组件，用于加载时的占位。

#### 设计规格

##### 骨架项
| 属性 | 值 |
|------|-----|
| 背景色 | `--el-fill-color` |
| 圆角 | `--el-border-radius-small` |
| 动画 | 闪烁效果 |

##### 段落
| 类型 | 高度 | 宽度 |
|------|------|------|
| 标题 | `16px` | `40%` |
| 正文 | `12px` | `100%` |

---

### Table 表格

#### 概述
表格组件，用于展示结构化数据。

#### 设计规格

##### 表头
| 属性 | 值 |
|------|-----|
| 高度 | `40px` |
| 背景色 | `--el-fill-color-light` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |
| 边框 | `--el-border-color-lighter` |

##### 单元格
| 属性 | 值 |
|------|-----|
| 高度 | `40px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |
| 边框 | `--el-border-color-lighter` |

##### 状态
| 状态 | 背景色 |
|------|--------|
| Hover | `--el-fill-color-light` |
| 选中 | `--el-color-primary-light-9` |
| 条纹 | `--el-fill-color-lighter` |

---

### Tag 标签

#### 概述
标签组件，用于标记和分类。

#### 设计规格

##### 尺寸
| 尺寸 | 高度 | 字号 | 内边距 |
|------|------|------|--------|
| Large | `32px` | `--el-font-size-base` | `12px` |
| Default | `24px` | `--el-font-size-small` | `8px` |
| Small | `20px` | `--el-font-size-extra-small` | `6px` |

##### 类型
| 类型 | 背景色 | 边框色 | 文字色 |
|------|--------|--------|--------|
| Primary | `--el-color-primary-light-9` | `--el-color-primary-light-7` | `--el-color-primary` |
| Success | `--el-color-success-light-9` | `--el-color-success-light-7` | `--el-color-success` |
| Warning | `--el-color-warning-light-9` | `--el-color-warning-light-7` | `--el-color-warning` |
| Danger | `--el-color-danger-light-9` | `--el-color-danger-light-7` | `--el-color-danger` |
| Info | `--el-color-info-light-9` | `--el-color-info-light-7` | `--el-color-info` |

##### 圆角
| 属性 | 值 |
|------|-----|
| 默认 | `--el-border-radius-small` |
| 圆形 | `高度/2` |

---

### Timeline 时间线

#### 概述
时间线组件，用于展示时间轴事件。

#### 设计规格

##### 节点
| 属性 | 值 |
|------|-----|
| 大小 | `12px` |
| 默认色 | `--el-border-color` |
| 主色 | `--el-color-primary` |
| 成功色 | `--el-color-success` |
| 警告色 | `--el-color-warning` |
| 危险色 | `--el-color-danger` |

##### 线条
| 属性 | 值 |
|------|-----|
| 宽度 | `2px` |
| 颜色 | `--el-border-color` |

##### 内容
| 属性 | 值 |
|------|-----|
| 间距 | `16px` |
| 字号 | `--el-font-size-base` |

---

### Tour 漫游式引导

#### 概述
漫游式引导组件，用于新手引导。

#### 设计规格

##### 浮层
| 属性 | 值 |
|------|-----|
| 宽度 | `350px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-dark` |
| 背景色 | `--el-bg-color` |

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `16px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |

##### 底部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 内边距 | `0 16px` |

---

### Tree 树形控件

#### 概述
树形控件组件，用于展示树形结构数据。

#### 设计规格

##### 节点
| 属性 | 值 |
|------|-----|
| 高度 | `34px` |
| 缩进 | `16px` |
| Hover背景 | `--el-fill-color-light` |

##### 展开图标
| 属性 | 值 |
|------|-----|
| 大小 | `16px` |
| 颜色 | `--el-text-color-secondary` |

---

### Statistic 统计组件

#### 概述
统计组件，用于展示统计数据。

#### 设计规格

##### 数值
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-extra-large` |
| 字重 | `600` |
| 颜色 | `--el-text-color-primary` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-secondary` |
| 间距 | `4px` |

---

### Segmented 分段控制器

#### 概述
分段控制器组件，用于在多个选项间切换。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 高度 | `32px` |
| 背景色 | `--el-fill-color` |
| 圆角 | `--el-border-radius-base` |

##### 选项
| 属性 | 值 |
|------|-----|
| 高度 | `28px` |
| 字号 | `--el-font-size-base` |
| 圆角 | `--el-border-radius-small` |

##### 状态
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` |
| 激活 | `--el-bg-color` | `--el-text-color-primary` |
| Hover | `--el-fill-color-light` | `--el-text-color-primary` |

---

## 导航组件

### Affix 固钉

#### 概述
固钉组件，用于固定元素位置。

#### 设计规格

##### 固定位置
| 属性 | 值 |
|------|-----|
| z-index | `--el-index-top` |
| 背景色 | `--el-bg-color` |

---

### Anchor 锚点

#### 概述
锚点组件，用于页面内导航。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 宽度 | `150px` (推荐) |
| 边框 | `2px` |
| 边框色 | `--el-color-primary` |
| 圆角 | `--el-border-radius-small` |

##### 链接
| 属性 | 值 |
|------|-----|
| 高度 | `34px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |
| 激活色 | `--el-color-primary` |

---

### Backtop 回到顶部

#### 概述
回到顶部组件。

#### 设计规格

##### 按钮
| 属性 | 值 |
|------|-----|
| 大小 | `40px` |
| 圆角 | `50%` |
| 背景色 | `--el-bg-color` |
| 阴影 | `--el-box-shadow` |
| 图标色 | `--el-color-primary` |

---

### Breadcrumb 面包屑

#### 概述
面包屑导航组件。

#### 设计规格

##### 分隔符
| 属性 | 值 |
|------|-----|
| 颜色 | `--el-text-color-placeholder` |
| 间距 | `8px` |

##### 链接
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |
| 当前页颜色 | `--el-text-color-primary` |

---

### Dropdown 下拉菜单

#### 概述
下拉菜单组件。

#### 设计规格

##### 触发按钮
| 属性 | 值 |
|------|-----|
| 高度 | `32px` (default) |
| 内边距 | `0 12px` |

##### 下拉面板
| 属性 | 值 |
|------|-----|
| 最小宽度 | `100px` |
| 最大高度 | `280px` |
| 项高度 | `34px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |
| 背景色 | `--el-bg-color` |

##### 选项状态
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` |
| Hover | `--el-fill-color-light` | `--el-text-color-primary` |
| 禁用 | 透明 | `--el-text-color-disabled` |

##### 分隔线
| 属性 | 值 |
|------|-----|
| 高度 | `1px` |
| 颜色 | `--el-border-color-lighter` |
| 间距 | `4px` |

---

### Menu 菜单

#### 概述
导航菜单组件。

#### 设计规格

##### 菜单项
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 字号 | `--el-font-size-base` |
| 图标大小 | `18px` |
| 图标右边距 | `8px` |

##### 状态（水平模式）
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` |
| Hover | 透明 | `--el-color-primary` |
| 激活 | 透明 | `--el-color-primary` |

##### 状态（垂直模式）
| 状态 | 背景色 | 文字色 |
|------|--------|--------|
| 默认 | 透明 | `--el-text-color-regular` |
| Hover | `--el-fill-color-light` | `--el-text-color-primary` |
| 激活 | `--el-color-primary-light-9` | `--el-color-primary` |

##### 子菜单
| 属性 | 值 |
|------|-----|
| 缩进 | `24px` |
| 背景色 | `--el-fill-color-lighter` |

---

### Page Header 页头

#### 概述
页面头部组件，包含标题、面包屑、操作等。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 高度 | `60px` |
| 内边距 | `0 20px` |
| 背景色 | `--el-bg-color` |
| 边框 | `--el-border-color-lighter` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |

##### 返回按钮
| 属性 | 值 |
|------|-----|
| 大小 | `24px` |
| 颜色 | `--el-text-color-regular` |
| Hover色 | `--el-color-primary` |

---

### Steps 步骤条

#### 概述
步骤条组件，用于展示流程进度。

#### 设计规格

##### 步骤节点
| 属性 | 值 |
|------|-----|
| 大小 | `24px` |
| 字号 | `--el-font-size-base` |
| 线宽 | `2px` |

##### 状态
| 状态 | 节点色 | 线色 | 文字色 |
|------|--------|------|--------|
| 未完成 | `--el-border-color` | `--el-border-color` | `--el-text-color-secondary` |
| 进行中 | `--el-color-primary` | `--el-color-primary` | `--el-color-primary` |
| 已完成 | `--el-color-primary` | `--el-color-primary` | `--el-text-color-primary` |
| 错误 | `--el-color-danger` | `--el-color-danger` | `--el-color-danger` |

---

### Tabs 标签页

#### 概述
标签页组件，用于切换不同内容面板。

#### 设计规格

##### 标签
| 属性 | 值 |
|------|-----|
| 高度 | `40px` |
| 字号 | `--el-font-size-base` |
| 间距 | `20px` |

##### 状态
| 状态 | 文字色 | 边框色 |
|------|--------|--------|
| 默认 | `--el-text-color-regular` | 透明 |
| Hover | `--el-text-color-primary` | 透明 |
| 激活 | `--el-color-primary` | `--el-color-primary` |

##### 指示条
| 属性 | 值 |
|------|-----|
| 高度 | `2px` |
| 颜色 | `--el-color-primary` |

---

## 反馈组件

### Alert 提示

#### 概述
提示组件，用于展示重要提示信息。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 内边距 | `8px 16px` |
| 圆角 | `--el-border-radius-base` |
| 字号 | `--el-font-size-base` |

##### 类型
| 类型 | 背景色 | 边框色 | 图标色 |
|------|--------|--------|--------|
| Success | `--el-color-success-light-9` | `--el-color-success-light-7` | `--el-color-success` |
| Warning | `--el-color-warning-light-9` | `--el-color-warning-light-7` | `--el-color-warning` |
| Error | `--el-color-danger-light-9` | `--el-color-danger-light-7` | `--el-color-danger` |
| Info | `--el-color-info-light-9` | `--el-color-info-light-7` | `--el-color-info` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 间距 | `4px` |

##### 描述
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-secondary` |

---

### Dialog 对话框

#### 概述
模态对话框组件。

#### 设计规格

##### 遮罩
| 属性 | 值 |
|------|-----|
| 背景色 | `rgba(0, 0, 0, 0.5)` |
| z-index | `2000` |

##### 弹窗
| 属性 | 值 |
|------|-----|
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-dark` |
| 背景色 | `--el-bg-color` |
| 最小宽度 | `30%` |

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 内边距 | `0 20px` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |
| 边框 | `--el-border-color-lighter` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `20px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |

##### 底部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 内边距 | `0 20px` |
| 边框 | `--el-border-color-lighter` |
| 对齐 | `right` |

---

### Drawer 抽屉

#### 概述
抽屉组件，从屏幕边缘滑出的面板。

#### 设计规格

##### 遮罩
| 属性 | 值 |
|------|-----|
| 背景色 | `rgba(0, 0, 0, 0.5)` |
| z-index | `2000` |

##### 抽屉
| 属性 | 值 |
|------|-----|
| 背景色 | `--el-bg-color` |
| 阴影 | `--el-box-shadow-dark` |
| 宽度 | `30%` (默认) |

##### 头部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 内边距 | `0 20px` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 边框 | `--el-border-color-lighter` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `20px` |

---

### Loading 加载

#### 概述
加载组件，用于展示加载状态。

#### 设计规格

##### 遮罩
| 属性 | 值 |
|------|-----|
| 背景色 | `rgba(255, 255, 255, 0.9)` |

##### 加载图标
| 属性 | 值 |
|------|-----|
| 大小 | `32px` |
| 颜色 | `--el-color-primary` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-secondary` |
| 间距 | `8px` |

---

### Message 消息提示

#### 概述
消息提示组件，用于展示操作反馈。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 最大宽度 | `calc(100vw - 32px)` |
| 内边距 | `10px 16px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |
| 背景色 | `--el-bg-color` |

##### 图标
| 属性 | 值 |
|------|-----|
| 大小 | `16px` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-primary` |

##### 类型
| 类型 | 图标色 |
|------|--------|
| Success | `--el-color-success` |
| Warning | `--el-color-warning` |
| Error | `--el-color-danger` |
| Info | `--el-color-info` |

---

### Message Box 消息弹出框

#### 概述
消息弹出框组件，用于确认操作。

#### 设计规格

##### 弹窗
| 属性 | 值 |
|------|-----|
| 宽度 | `420px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-dark` |
| 背景色 | `--el-bg-color` |

##### 头部
| 属性 | 值 |
|------|-----|
| 内边距 | `15px 20px 10px` |
| 字号 | `--el-font-size-base` |
| 字重 | `500` |

##### 内容区
| 属性 | 值 |
|------|-----|
| 内边距 | `10px 20px` |
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-regular` |

##### 底部
| 属性 | 值 |
|------|-----|
| 高度 | `50px` |
| 内边距 | `5px 20px` |

---

### Notification 通知

#### 概述
通知组件，用于展示系统通知。

#### 设计规格

##### 容器
| 属性 | 值 |
|------|-----|
| 宽度 | `330px` |
| 内边距 | `14px 16px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow` |
| 背景色 | `--el-bg-color` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |

##### 内容
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-regular` |
| 间距 | `4px` |

---

### Popconfirm 气泡确认框

#### 概述
气泡确认框组件。

#### 设计规格

##### 浮层
| 属性 | 值 |
|------|-----|
| 内边距 | `12px 16px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |
| 背景色 | `--el-bg-color` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 颜色 | `--el-text-color-primary` |

##### 按钮
| 属性 | 值 |
|------|-----|
| 尺寸 | `small` |
| 间距 | `8px` |

---

### Popover 弹出框

#### 概述
弹出框组件。

#### 设计规格

##### 浮层
| 属性 | 值 |
|------|-----|
| 最小宽度 | `150px` |
| 内边距 | `12px` |
| 圆角 | `--el-border-radius-base` |
| 阴影 | `--el-box-shadow-light` |
| 背景色 | `--el-bg-color` |

##### 标题
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-base` |
| 字重 | `500` |
| 颜色 | `--el-text-color-primary` |
| 边框 | `--el-border-color-lighter` |

---

### Tooltip 文字提示

#### 概述
文字提示组件。

#### 设计规格

##### 浮层
| 属性 | 值 |
|------|-----|
| 内边距 | `8px 12px` |
| 圆角 | `4px` |
| 背景色 | `rgba(0, 0, 0, 0.8)` |
| 文字色 | `#ffffff` |
| 字号 | `--el-font-size-small` |

---

## 其他组件

### Divider 分割线

#### 概述
分割线组件，用于分隔内容。

#### 设计规格

##### 线条
| 属性 | 值 |
|------|-----|
| 高度 | `1px` |
| 颜色 | `--el-border-color-lighter` |

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `--el-font-size-small` |
| 颜色 | `--el-text-color-regular` |
| 内边距 | `0 16px` |

---

### Watermark 水印

#### 概述
水印组件，用于添加页面水印。

#### 设计规格

##### 文字
| 属性 | 值 |
|------|-----|
| 字号 | `16px` |
| 颜色 | `rgba(0, 0, 0, 0.1)` |
| 间距 | `24px` |

---

## CSS 变量使用指南

### 基本用法

Element Plus 使用 CSS 自定义属性（CSS Variables）来实现主题定制。所有变量都以 `--el-` 为前缀。

```css
/* 获取变量值 */
color: var(--el-color-primary);
background-color: var(--el-bg-color);

/* 设置变量值 */
:root {
  --el-color-primary: #your-color;
}
```

### 自定义主题

#### 方法一：通过 SCSS 变量覆盖

```scss
// styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #your-primary-color,
    ),
  ),
);
```

#### 方法二：通过 CSS 变量覆盖

```css
/* 全局覆盖 */
:root {
  --el-color-primary: #your-color;
}

/* 局部覆盖 */
.custom-container {
  --el-color-primary: #your-color;
}
```

#### 方法三：通过 JavaScript 动态修改

```javascript
// 获取变量
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--el-color-primary');

// 设置变量
document.documentElement.style.setProperty('--el-color-primary', '#your-color');
```

### 最佳实践

1. **优先使用 CSS 变量**：在自定义样式时，优先使用 Element Plus 提供的 CSS 变量，而不是硬编码颜色值。

2. **局部覆盖**：如果只需要在特定区域修改主题，建议在类名下覆盖变量，而不是在全局 `:root` 下。

3. **保持一致性**：修改主题色时，确保所有相关的颜色梯度（light-1 到 light-9）都相应调整。

4. **测试暗黑模式**：如果支持暗黑模式，确保自定义变量在暗黑模式下也能正常工作。

---

## 更新日志

| 版本 | 日期 | 说明 |
|------|------|------|
| 1.0.0 | 2024-XX-XX | 初始版本，基于 Element Plus 2.13.6 |

---

*本文档基于 Element Plus 2.13.6 版本编写，如有更新请以官方文档为准。*