310 lines
8.4 KiB
Markdown
310 lines
8.4 KiB
Markdown
# 按钮样式设计规范
|
||
|
||
本文档定义了项目中按钮组件的样式规范，包括实心按钮和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年
|
||
|