school-developer/docs/按钮样式规范.md

# 按钮样式设计规范

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

## 一、尺寸

**所有按钮统一使用默认尺寸**，不需要设置 `size` 属性。

- 高度：32px（Element Plus默认）
- 适用于所有场景：页面操作区域、表格操作列、对话框底部等

```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="primary" link icon="EditPen">编辑</el-button>
```

## 二、颜色

| 操作类型 | type | plain | 颜色 | 使用场景 |
|---------|------|-------|------|---------|
| 主要操作 | `primary` | - | 蓝色实心 | 新增、保存、提交 |
| 查询 | `primary` | - | 蓝色实心 | 查询 |
| 重置 | `primary` | ✓ | 蓝色边框 | 重置 |
| 导出操作 | `warning` | ✓ | 橙色边框 | 导出、下载 |
| 导入操作 | `primary` | ✓ | 蓝色边框 | 导入、上传 |
| 设置操作 | `primary` | ✓ | 蓝色边框 | 设置、配置 |
| 状态锁定 | - | - | 灰色 | 状态锁定、解锁 |
| 危险操作 | `danger` | - | 红色实心 | 删除、清空 |

## 三、样式

### 1. 实心按钮（默认）
- **使用场景**：新增、保存、删除等主要操作
- **代码**：`type="primary"` 或 `type="danger"`

```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="danger" icon="Delete">删 除</el-button>
```

### 2. Plain按钮（边框样式）
- **使用场景**：重置、导出、导入、设置等次要操作
- **代码**：`type="primary" plain` 或 `type="warning" plain`

```vue
<el-button type="primary" plain icon="Refresh">重置</el-button>
<el-button type="warning" plain icon="Download">导出</el-button>
<el-button type="primary" plain icon="UploadFilled">导入</el-button>
<el-button type="primary" plain icon="Setting">设置</el-button>
```

### 3. 设置按钮
- **使用场景**：设置、配置等操作
- **代码**：`type="primary" plain`

```vue
<el-button type="primary" plain icon="Setting">设置</el-button>
```

### 4. 默认按钮（灰色）
- **使用场景**：状态锁定、解锁等中性操作
- **代码**：不设置 `type` 属性

```vue
<el-button icon="Lock">状态锁定</el-button>
```

### 5. 表格操作列按钮（link）
- **使用场景**：表格操作列，使用 `link` 属性
- **代码**：`link` 属性，配合 `type` 使用
- **说明**：表格内的操作按钮统一使用 `link` 样式，节省空间

```vue
<el-button type="primary" link icon="EditPen">编辑</el-button>
<el-button type="danger" link icon="Delete">删除</el-button>
<el-button type="success" link icon="CircleCheck">通过</el-button>
<el-button type="danger" link icon="DocumentDelete">批量删除</el-button>
```

## 四、图标

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

### 常用图标映射

| 操作类型 | 图标名称 |
|---------|---------|
| 查询 | `Search` |
| 重置 | `Refresh` |
| 新增/添加 | `FolderAdd` |
| 导出/下载 | `Download` |
| 导入/上传 | `UploadFilled` |
| 编辑/修改 | `EditPen` |
| 删除 | `Delete` |
| 批量删除 | `DocumentDelete` |
| 通过 | `CircleCheck` |
| 驳回 | `CircleClose` |
| 查看图片 | `Picture` |
| 详情/其他 | `Document` |
| 设置/配置 | `Setting` |
| 锁定/解锁 | `Lock` |
| 用户相关 | `User` |

### 使用示例

```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="primary" icon="Search">查询</el-button>
<el-button type="primary" plain icon="Refresh">重置</el-button>
<el-button type="warning" plain icon="Download">导出</el-button>
<el-button type="primary" plain icon="UploadFilled">导入</el-button>
```

## 五、间距

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

```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="primary" icon="Search" class="ml10">查询</el-button>
<el-button type="primary" plain icon="Refresh" class="ml10">重置</el-button>
<el-button type="warning" plain icon="Download" class="ml10">导出</el-button>
<el-button type="primary" plain icon="UploadFilled" 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>

    <!-- 查询操作 -->
    <el-button 
      type="primary"
      icon="Search"
      class="ml10"
      @click="handleSearch">查询
    </el-button>
    
    <!-- 重置操作 -->
    <el-button 
      type="primary"
      plain
      icon="Refresh"
      class="ml10"
      @click="resetQuery">重置
    </el-button>
    
    <!-- 导出操作 -->
    <el-button 
      type="warning" 
      plain
      icon="Download"
      class="ml10"
      @click="handleExport">导出
    </el-button>
    
    <!-- 导入操作 -->
    <el-button 
      type="primary" 
      plain
      icon="UploadFilled"
      class="ml10"
      @click="handleImport">导入
    </el-button>
    
    <!-- 设置操作 -->
    <el-button 
      type="primary"
      plain
      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
      icon="EditPen"
      @click="handleEdit(scope.row)">编辑
    </el-button>
    <el-button
      type="danger"
      link
      icon="Delete"
      @click="handleDelete(scope.row)">删除
    </el-button>
  </template>
</el-table-column>
```

## 七、快速参考

| 要素 | 规范 |
|------|------|
| **尺寸** | 统一使用默认尺寸，不设置 `size` 属性 |
| **颜色** | 主要操作用蓝色实心，次要操作用蓝色/橙色边框，危险操作用红色 |
| **样式** | 主要操作用实心，次要操作用 `plain`，**表格操作列必须用 `link`** |
| **图标** | 所有按钮必须配合图标，使用 PascalCase 格式 |
| **间距** | 按钮之间使用 `class="ml10"` 保持10px间距 |

---

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