# 按钮样式设计规范

本文档定义了项目中按钮组件的样式规范，包括实心按钮和Plain按钮的使用规则，确保整个应用的按钮样式统一、协调、美观。

## 一、按钮类型分类

### 1. 实心按钮（Solid）- 用于最重要的操作

**使用场景：**
- 新增、创建操作
- 保存、提交操作
- 确认、确定操作
- 删除等危险操作（需要突出警示）

**视觉特点：**
- 实心填充，高对比度
- 突出显示，吸引用户注意力
- 通常位于操作区域的主要位置

**代码示例：**
```vue
<!-- 主要操作：新增 -->
<el-button type="primary" icon="Plus" @click="handleAdd">新 增</el-button>

<!-- 危险操作：删除 -->
<el-button type="danger" icon="Delete" @click="handleDelete">删 除</el-button>
```

### 2. Plain按钮（边框样式）- 用于次要操作

**使用场景：**
- 查询、搜索操作
- 导出、导入操作
- 设置、配置操作
- 辅助功能操作

**视觉特点：**
- 边框+透明背景
- 不抢夺视觉焦点
- 保持页面协调统一
- 适合批量操作按钮

**代码示例：**
```vue
<!-- 查询操作 -->
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>

<!-- 导出操作 -->
<el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>

<!-- 导入操作 -->
<el-button type="primary" plain icon="Upload" @click="handleImport">导入</el-button>
```

### 3. 默认按钮 - 用于中性操作

**使用场景：**
- 设置、配置操作
- 状态切换操作
- 中性功能操作

**视觉特点：**
- 灰色系，低调不突出
- 适合不重要的操作

**代码示例：**
```vue
<!-- 设置操作 -->
<el-button icon="Setting" @click="handleSetting">状态锁定</el-button>
```

## 二、配色方案

> **设计原则：** 在保持项目默认样式的基础上，通过颜色区分不同操作类型，提升视觉层次和识别度。

### 主要操作按钮
- **类型：** `type="primary"` 实心
- **颜色：** 蓝色实心填充
- **用途：** 新增、保存、提交等主要操作
- **示例：** 新增按钮

### 查询操作按钮
- **类型：** `type="primary" plain`
- **颜色：** 蓝色边框 + 透明背景
- **用途：** 查询、搜索、筛选等操作
- **示例：** 一体化查询、搜索按钮
- **说明：** 与主要操作保持同一色系，体现关联性

### 导出操作按钮
- **类型：** `type="warning" plain`
- **颜色：** 橙色边框 + 透明背景
- **用途：** 数据导出、下载等操作
- **示例：** 导出WORD、自定义导出
- **说明：** 橙色表示数据输出，与导入形成对比

### 导入操作按钮
- **类型：** `type="primary" plain`
- **颜色：** 蓝色边框 + 透明背景
- **用途：** 数据导入、上传等操作
- **示例：** 导入信息
- **说明：** 保持项目默认样式，与查询操作保持一致

### 设置操作按钮
- **类型：** 默认样式（无type属性）
- **颜色：** 灰色系
- **用途：** 设置、配置、状态锁定等中性操作
- **示例：** 状态锁定按钮

### 危险操作按钮
- **类型：** `type="danger"` 实心 或 `type="danger" plain`
- **颜色：** 红色
- **用途：** 删除、清空等危险操作
- **示例：** 删除按钮

## 三、按钮图标规范

所有按钮应配合相应的图标使用，提升用户体验和视觉识别度。

### 常用图标映射

| 操作类型 | 图标名称 | 说明 |
|---------|---------|------|
| 新增/添加 | `FolderAdd` | 文件夹加号图标（项目默认） |
| 查询/搜索 | `Search` | 搜索图标 |
| 导出/下载 | `Download` | 下载图标 |
| 导入/上传 | `Upload` | 上传图标（项目默认） |
| 编辑/修改 | `Edit` | 编辑图标 |
| 删除 | `Delete` | 删除图标 |
| 查看/详情 | `View` | 查看图标 |
| 设置/配置 | `Setting` | 设置图标 |
| 锁定/解锁 | `Lock` | 锁定图标 |
| 刷新/重置 | `Refresh` | 刷新图标 |
| 用户相关 | `User` | 用户图标 |

### 图标使用示例

```vue
<el-button type="primary" icon="FolderAdd" @click="handleAdd">新 增</el-button>
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
<el-button type="primary" plain icon="Upload" @click="handleImport">导入</el-button>
```

## 四、按钮尺寸规范

### 默认尺寸（default）
- 用于页面主要操作区域的按钮
- 高度：32px（Element Plus默认）

### 小尺寸（small）
- 用于表格操作列、对话框底部等空间受限的场景
- 高度：24px
- 使用 `size="small"` 属性

```vue
<!-- 表格操作列 -->
<el-button type="primary" link size="small" @click="handleEdit">编辑</el-button>
```

### 链接按钮（link）
- 用于表格操作列，节省空间
- 使用 `link` 属性

```vue
<el-button type="primary" link size="small" @click="handleView">查看</el-button>
```

## 五、按钮布局规范

### 按钮间距
- 按钮之间使用 `class="ml10"` 保持10px的左边距
- 确保按钮组视觉统一

```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="primary" plain icon="Search" class="ml10">查询</el-button>
<el-button type="warning" plain icon="Download" class="ml10">导出</el-button>
<el-button type="primary" plain icon="Upload" class="ml10">导入</el-button>
```

### 按钮分组
- 相关功能的按钮应放在一起
- 主要操作按钮放在最前面
- 次要操作按钮放在后面

## 六、完整示例

### 页面操作按钮组示例

```vue
<el-row>
  <div class="mb15" style="width: 100%;">
    <!-- 主要操作：新增 -->
    <el-button 
      type="primary"
      icon="FolderAdd"      
      @click="handleAdd"
      v-if="permissions.add">新 增
    </el-button>

    <!-- 查询操作：使用 primary plain 样式 -->
    <el-button 
      type="primary" 
      plain
      icon="Search"
      class="ml10"
      @click="handleSearch">查询
    </el-button>
    
    <!-- 导出操作：使用 warning plain 样式，橙色边框 -->
    <el-button 
      type="warning" 
      plain
      icon="Download"
      class="ml10"
      @click="handleExport">导出
    </el-button>
    
    <!-- 导入操作：使用 primary plain 样式，蓝色边框，保持项目默认样式 -->
    <el-button 
      type="primary" 
      plain
      icon="Upload"
      class="ml10"
      @click="handleImport">导入
    </el-button>
    
    <!-- 设置操作：使用默认样式 -->
    <el-button 
      icon="Setting"
      class="ml10"
      @click="handleSetting">设置
    </el-button>
  </div>
</el-row>
```

### 表格操作列示例

```vue
<el-table-column label="操作" width="200" align="center" fixed="right">
  <template #default="scope">
    <el-button
      type="primary"
      link
      size="small"
      @click="handleEdit(scope.row)">编辑
    </el-button>
    <el-button
      type="danger"
      link
      size="small"
      @click="handleDelete(scope.row)">删除
    </el-button>
  </template>
</el-table-column>
```

## 七、最佳实践

1. **一致性原则**
   - 相同功能的按钮在整个应用中应使用相同的样式
   - 保持图标和颜色的统一性

2. **层次分明**
   - 主要操作使用实心按钮，突出显示
   - 次要操作使用Plain按钮，保持协调

3. **语义化**
   - 按钮的颜色和样式应与其功能语义相匹配
   - 危险操作使用红色，数据操作使用绿色等

4. **用户体验**
   - 重要操作按钮应放在显眼位置
   - 按钮文字应简洁明了
   - 配合图标提升识别度

5. **响应式考虑**
   - 在移动端或小屏幕设备上，考虑使用更紧凑的布局
   - 使用 `size="small"` 适应空间限制

## 八、注意事项

1. **避免过度使用实心按钮**
   - 一个页面中实心按钮不应过多，通常1-2个主要操作即可
   - 过多的实心按钮会分散用户注意力

2. **Plain按钮的优势**
   - Plain按钮视觉更柔和，适合批量操作
   - 不会抢夺主要操作的视觉焦点

3. **图标选择**
   - 图标应与操作功能语义匹配
   - 使用Element Plus内置图标，保持一致性

4. **权限控制**
   - 按钮应根据用户权限显示/隐藏
   - 使用 `v-if` 控制按钮的显示

## 九、更新记录

- **2024-XX-XX**: 创建按钮样式规范文档
- 规范版本：v1.0

---

**维护者：** 前端开发团队  
**最后更新：** 2024年