a

2025-12-31 17:40:01 +08:00
parent 6d94e91b70
commit 74c06bb8a0
713 changed files with 115034 additions and 46 deletions
--- a/docs/按钮样式规范.md
+++ b/docs/按钮样式规范.md
@@ -0,0 +1,309 @@
+# 按钮样式设计规范
+
+本文档定义了项目中按钮组件的样式规范，包括实心按钮和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年
+