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

完成基础信息页面开发

Browse Source
This commit is contained in:
RISE
2026-03-19 15:55:37 +08:00
parent 8d8a7db748
commit 71357f9621
1768 changed files with 217566 additions and 693615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
**所有按钮统一使用默认尺寸**，不需要设置 `size` 属性。
- 高度：32px（Element Plus 默认）
- 高度：32px（Element Plus默认）
- 适用于所有场景：页面操作区域、表格操作列、对话框底部等
```vue
@@ -16,22 +16,21 @@
## 二、颜色
| 操作类型 | type | plain | 颜色 | 使用场景 |
| -------- | --------- | ----- | -------- | ---------------- |
| 主要操作 | `primary` | - | 蓝色实心 | 新增、保存、提交 |
| 查询 | `primary` | - | 蓝色实心 | 查询 |
| 重置 | - | - | 灰色 | 重置 |
| 导出操作 | `warning` | ✓ | 橙色边框 | 导出、下载 |
| 导入操作 | `primary` | ✓ | 蓝色边框 | 导入、上传 |
| 设置操作 | `primary` | ✓ | 蓝色边框 | 设置、配置 |
| 同步操作 | `primary` | ✓ | 蓝色边框 | 同步、连接 |
| 状态锁定 | - | - | 灰色 | 状态锁定、解锁 |
| 危险操作 | `danger` | - | 红色实心 | 删除、清空 |
| 操作类型 | type | plain | 颜色 | 使用场景 |
|---------|------|-------|------|---------|
| 主要操作 | `primary` | - | 蓝色实心 | 新增、保存、提交 |
| 查询 | `primary` | - | 蓝色实心 | 查询 |
| 重置 | - | - | 灰色 | 重置 |
| 导出操作 | `warning` | ✓ | 橙色边框 | 导出、下载 |
| 导入操作 | `primary` | ✓ | 蓝色边框 | 导入、上传 |
| 设置操作 | `primary` | ✓ | 蓝色边框 | 设置、配置 |
| 同步操作 | `primary` | ✓ | 蓝色边框 | 同步、连接 |
| 状态锁定 | - | - | 灰色 | 状态锁定、解锁 |
| 危险操作 | `danger` | - | 红色实心 | 删除、清空 |
## 三、样式
### 1. 实心按钮（默认）
- **使用场景**：新增、保存、删除等主要操作
- **代码**：`type="primary"` 或 `type="danger"`
@@ -40,8 +39,7 @@
<el-button type="danger" icon="Delete">删 除</el-button>
```
### 2. Plain 按钮（边框样式）
### 2. Plain按钮（边框样式）
- **使用场景**：重置、导出、导入、设置、同步等次要操作
- **代码**：`type="primary" plain` 或 `type="warning" plain`
@@ -54,7 +52,6 @@
```
### 3. 设置按钮
- **使用场景**：设置、配置等操作
- **代码**：`type="primary" plain`
@@ -63,7 +60,6 @@
```
### 4. 同步按钮
- **使用场景**：同步、连接等操作
- **代码**：`type="primary" plain`
@@ -72,7 +68,6 @@
```
### 5. 默认按钮（灰色）
- **使用场景**：状态锁定、解锁等中性操作
- **代码**：不设置 `type` 属性
@@ -81,7 +76,6 @@
```
### 6. 表格操作列按钮（link）
- **使用场景**：表格操作列，使用 `link` 属性
- **代码**：`link` 属性，配合 `type` 使用
- **说明**：表格内的操作按钮统一使用 `link` 样式，节省空间
@@ -99,25 +93,25 @@
### 常用图标映射
| 操作类型 | 图标名称 |
| --------- | ---------------- |
| 查询 | `Search` |
| 重置 | `Refresh` |
| 新增/添加 | `FolderAdd` |
| 导出/下载 | `Download` |
| 导入/上传 | `UploadFilled` |
| 编辑/修改 | `EditPen` |
| 删除 | `Delete` |
| 批量删除 | `DocumentDelete` |
| 通过 | `CircleCheck` |
| 驳回 | `CircleClose` |
| 查看图片 | `Picture` |
| 详情/其他 | `Document` |
| 设置/配置 | `Setting` |
| 锁定/解锁 | `Lock` |
| 用户相关 | `User` |
| 调动/转换 | `Switch` |
| 同步/连接 | `Connection` |
| 操作类型 | 图标名称 |
|---------|---------|
| 查询 | `Search` |
| 重置 | `Refresh` |
| 新增/添加 | `FolderAdd` |
| 导出/下载 | `Download` |
| 导入/上传 | `UploadFilled` |
| 编辑/修改 | `EditPen` |
| 删除 | `Delete` |
| 批量删除 | `DocumentDelete` |
| 通过 | `CircleCheck` |
| 驳回 | `CircleClose` |
| 查看图片 | `Picture` |
| 详情/其他 | `Document` |
| 设置/配置 | `Setting` |
| 锁定/解锁 | `Lock` |
| 用户相关 | `User` |
| 调动/转换 | `Switch` |
| 同步/连接 | `Connection` |
### 使用示例
@@ -132,7 +126,7 @@
## 五、间距
按钮之间使用 `class="ml10"` 保持 10px 的左边距，确保按钮组视觉统一。
按钮之间使用 `class="ml10"` 保持10px的左边距，确保按钮组视觉统一。
```vue
<el-button type="primary" icon="FolderAdd">新 增</el-button>
@@ -235,15 +229,15 @@
## 七、快速参考
| 要素 | 规范 |
| -------- | --------------------------------------------------------------- |
| **尺寸** | 统一使用默认尺寸，不设置 `size` 属性 |
| **颜色** | 主要操作用蓝色实心，次要操作用蓝色/橙色边框，危险操作用红色 |
| 要素 | 规范 |
|------|------|
| **尺寸** | 统一使用默认尺寸，不设置 `size` 属性 |
| **颜色** | 主要操作用蓝色实心，次要操作用蓝色/橙色边框，危险操作用红色 |
| **样式** | 主要操作用实心，次要操作用 `plain`，**表格操作列必须用 `link`** |
| **图标** | 所有按钮必须配合图标，使用 PascalCase 格式 |
| **间距** | 按钮之间使用 `class="ml10"` 保持 10px 间距 |
| **图标** | 所有按钮必须配合图标，使用 PascalCase 格式 |
| **间距** | 按钮之间使用 `class="ml10"` 保持10px间距 |
---
**维护者：** 前端开发团队
**最后更新：** 2024 年
**最后更新：** 2024年