RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
RISE
2026-01-12 19:37:18 +08:00
parent d0c3fe5084 4afb01aa73
commit 57fc04a8b7
150 changed files with 9774 additions and 5361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
docs/按钮样式规范.md
View File

@@ -1,191 +1,132 @@
# 按钮样式设计规范
本文档定义了项目中按钮组件的样式规范，包括实心按钮和Plain按钮的使用规则，确保整个应用的按钮样式统一、协调、美观。
本文档定义了项目中按钮组件的样式规范，确保整个应用的按钮样式统一、协调、美观。
## 一、按钮类型分类
## 一、尺寸
### 1. 实心按钮（Solid）- 用于最重要的操作
**所有按钮统一使用默认尺寸**，不需要设置 `size` 属性。
**使用场景：**
- 新增、创建操作
- 保存、提交操作
- 确认、确定操作
- 删除等危险操作（需要突出警示）
- 高度：32px（Element Plus默认）
- 适用于所有场景：页面操作区域、表格操作列、对话框底部等
**视觉特点：**
- 实心填充，高对比度
- 突出显示，吸引用户注意力
- 通常位于操作区域的主要位置
**代码示例：**
```vue
<!-- 主要操作：新增 -->
<el-button type="primary" icon="Plus" @click="handleAdd">新 增</el-button>
<!-- 危险操作：删除 -->
<el-button type="danger" icon="Delete" @click="handleDelete">删 除</el-button>
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="primary" link icon="EditPen">编辑</el-button>
```
### 2. Plain按钮（边框样式）- 用于次要操作
## 二、颜色
**使用场景：**
- 查询、搜索操作
- 导出、导入操作
- 设置、配置操作
- 辅助功能操作
| 操作类型 | type | plain | 颜色 | 使用场景 |
|---------|------|-------|------|---------|
| 主要操作 | `primary` | - | 蓝色实心 | 新增、保存、提交 |
| 查询 | `primary` | - | 蓝色实心 | 查询 |
| 重置 | `primary` | ✓ | 蓝色边框 | 重置 |
| 导出操作 | `warning` | ✓ | 橙色边框 | 导出、下载 |
| 导入操作 | `primary` | ✓ | 蓝色边框 | 导入、上传 |
| 设置操作 | `primary` | ✓ | 蓝色边框 | 设置、配置 |
| 状态锁定 | - | - | 灰色 | 状态锁定、解锁 |
| 危险操作 | `danger` | - | 红色实心 | 删除、清空 |
**视觉特点：**
- 边框+透明背景
- 不抢夺视觉焦点
- 保持页面协调统一
- 适合批量操作按钮
## 三、样式
### 1. 实心按钮（默认）
- **使用场景**：新增、保存、删除等主要操作
- **代码**：`type="primary"` 或 `type="danger"`
**代码示例：**
```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>
<el-button type="primary" icon="FolderAdd">新 增</el-button>
<el-button type="danger" icon="Delete">删 除</el-button>
```
### 3. 默认按钮 - 用于中性操作
### 2. Plain按钮（边框样式）
- **使用场景**：重置、导出、导入、设置等次要操作
- **代码**：`type="primary" plain` 或 `type="warning" plain`
**使用场景：**
- 设置、配置操作
- 状态切换操作
- 中性功能操作
**视觉特点：**
- 灰色系，低调不突出
- 适合不重要的操作
**代码示例：**
```vue
<!-- 设置操作 -->
<el-button icon="Setting" @click="handleSetting">状态锁定</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>
<el-button type="primary" plain icon="Setting">设置</el-button>
```
## 二、配色方案
### 3. 设置按钮
- **使用场景**：设置、配置等操作
- **代码**：`type="primary" plain`
> **设计原则：** 在保持项目默认样式的基础上，通过颜色区分不同操作类型，提升视觉层次和识别度。
```vue
<el-button type="primary" plain icon="Setting">设置</el-button>
```
### 主要操作按钮
- **类型：** `type="primary"` 实心
- **颜色：** 蓝色实心填充
- **用途：** 新增、保存、提交等主要操作
- **示例：** 新增按钮
### 4. 默认按钮（灰色）
- **使用场景**：状态锁定、解锁等中性操作
- **代码**：不设置 `type` 属性
### 查询操作按钮
- **类型：** `type="primary" plain`
- **颜色：** 蓝色边框 + 透明背景
- **用途：** 查询、搜索、筛选等操作
- **示例：** 一体化查询、搜索按钮
- **说明：** 与主要操作保持同一色系，体现关联性
```vue
<el-button icon="Lock">状态锁定</el-button>
```
### 导出操作按钮
- **类型：** `type="warning" plain`
- **颜色：** 橙色边框 + 透明背景
- **用途：** 数据导出、下载等操作
- **示例：** 导出WORD、自定义导出
- **说明：** 橙色表示数据输出，与导入形成对比
### 5. 表格操作列按钮（link）
- **使用场景**：表格操作列，使用 `link` 属性
- **代码**：`link` 属性，配合 `type` 使用
- **说明**：表格内的操作按钮统一使用 `link` 样式，节省空间
### 导入操作按钮
- **类型：** `type="primary" plain`
- **颜色：** 蓝色边框 + 透明背景
- **用途：** 数据导入、上传等操作
- **示例：** 导入信息
- **说明：** 保持项目默认样式，与查询操作保持一致
```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>
```
### 设置操作按钮
- **类型：** 默认样式（无type属性）
- **颜色：** 灰色系
- **用途：** 设置、配置、状态锁定等中性操作
- **示例：** 状态锁定按钮
### 危险操作按钮
- **类型：** `type="danger"` 实心 或 `type="danger" plain`
- **颜色：** 红色
- **用途：** 删除、清空等危险操作
- **示例：** 删除按钮
## 三、按钮图标规范
## 四、图标
所有按钮应配合相应的图标使用，提升用户体验和视觉识别度。
### 常用图标映射
| 操作类型 | 图标名称 | 说明 |
|---------|---------|------|
| 新增/添加 | `FolderAdd` | 文件夹加号图标（项目默认） |
| 查询/搜索 | `Search` | 搜索图标 |
| 导出/下载 | `Download` | 下载图标 |
| 导入/上传 | `Upload` | 上传图标（项目默认） |
| 编辑/修改 | `Edit` | 编辑图标 |
| 删除 | `Delete` | 删除图标 |
| 查看/详情 | `View` | 查看图标 |
| 设置/配置 | `Setting` | 设置图标 |
| 锁定/解锁 | `Lock` | 锁定图标 |
| 刷新/重置 | `Refresh` | 刷新图标 |
| 用户相关 | `User` | 用户图标 |
| 操作类型 | 图标名称 |
|---------|---------|
| 查询 | `Search` |
| 重置 | `Refresh` |
| 新增/添加 | `FolderAdd` |
| 导出/下载 | `Download` |
| 导入/上传 | `UploadFilled` |
| 编辑/修改 | `EditPen` |
| 删除 | `Delete` |
| 批量删除 | `DocumentDelete` |
| 通过 | `CircleCheck` |
| 驳回 | `CircleClose` |
| 查看图片 | `Picture` |
| 详情/其他 | `Document` |
| 设置/配置 | `Setting` |
| 锁定/解锁 | `Lock` |
| 用户相关 | `User` |
| 调动/转换 | `Switch`|
### 图标使用示例
```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>
<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>
@@ -193,21 +134,29 @@
<!-- 主要操作：新增 -->
<el-button
type="primary"
icon="FolderAdd"
icon="FolderAdd"
@click="handleAdd"
v-if="permissions.add">新 增
</el-button>
<!-- 查询操作：使用 primary plain 样式 -->
<!-- 查询操作 -->
<el-button
type="primary"
plain
type="primary"
icon="Search"
class="ml10"
@click="handleSearch">查询
</el-button>
<!-- 导出操作：使用 warning plain 样式，橙色边框 -->
<!-- 重置操作 -->
<el-button
type="primary"
plain
icon="Refresh"
class="ml10"
@click="resetQuery">重置
</el-button>
<!-- 导出操作 -->
<el-button
type="warning"
plain
@@ -216,17 +165,19 @@
@click="handleExport">导出
</el-button>
<!-- 导入操作：使用 primary plain 样式，蓝色边框，保持项目默认样式 -->
<!-- 导入操作 -->
<el-button
type="primary"
plain
icon="Upload"
icon="UploadFilled"
class="ml10"
@click="handleImport">导入
</el-button>
<!-- 设置操作：使用默认样式 -->
<!-- 设置操作 -->
<el-button
type="primary"
plain
icon="Setting"
class="ml10"
@click="handleSetting">设置
@@ -235,7 +186,7 @@
</el-row>
```
### 表格操作列示例
### 表格操作列
```vue
<el-table-column label="操作" width="200" align="center" fixed="right">
@@ -243,67 +194,30 @@
<el-button
type="primary"
link
size="small"
icon="EditPen"
@click="handleEdit(scope.row)">编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="Delete"
@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
| 要素 | 规范 |
|------|------|
| **尺寸** | 统一使用默认尺寸，不设置 `size` 属性 |
| **颜色** | 主要操作用蓝色实心，次要操作用蓝色/橙色边框，危险操作用红色 |
| **样式** | 主要操作用实心，次要操作用 `plain`，**表格操作列必须用 `link`** |
| **图标** | 所有按钮必须配合图标，使用 PascalCase 格式 |
| **间距** | 按钮之间使用 `class="ml10"` 保持10px间距 |
---
**维护者：** 前端开发团队
**最后更新：** 2024年