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

按钮样式设计规范

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

一、按钮类型分类

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

使用场景：

• 新增、创建操作
• 保存、提交操作
• 确认、确定操作
• 删除等危险操作（需要突出警示）

视觉特点：

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

代码示例：

<!-- 主要操作：新增 -->
<el-button type="primary" icon="Plus" @click="handleAdd">新 增</el-button>

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

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

使用场景：

• 查询、搜索操作
• 导出、导入操作
• 设置、配置操作
• 辅助功能操作

视觉特点：

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

代码示例：

<!-- 查询操作 -->
<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. 默认按钮 - 用于中性操作

使用场景：

• 设置、配置操作
• 状态切换操作
• 中性功能操作

视觉特点：

• 灰色系，低调不突出
• 适合不重要的操作

代码示例：

<!-- 设置操作 -->
<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	用户图标

图标使用示例

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

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

链接按钮（link）

• 用于表格操作列，节省空间
• 使用 link 属性

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

五、按钮布局规范

按钮间距

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

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

按钮分组

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

六、完整示例

页面操作按钮组示例

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

表格操作列示例

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