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

按钮样式设计规范

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

一、尺寸

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

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

<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"

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

2. Plain按钮（边框样式）

• 使用场景：重置、导出、导入、设置等次要操作
• 代码：type="primary" plain 或 type="warning" plain

<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

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

4. 默认按钮（灰色）

• 使用场景：状态锁定、解锁等中性操作
• 代码：不设置 type 属性

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

5. 表格操作列按钮（link）

• 使用场景：表格操作列，使用 link 属性
• 代码：link 属性，配合 type 使用
• 说明：表格内的操作按钮统一使用 link 样式，节省空间

<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

使用示例

<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的左边距，确保按钮组视觉统一。

<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>

六、完整示例

页面操作按钮组

<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>

表格操作列

<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年