|
|
# 管理后台 UI 规范
|
|
|
|
|
|
> 适用于 **高校雷达网管理后台** 全部 Vue 列表页、表单页及与 HTML 原型对齐的交互样式。
|
|
|
> 品牌色与原型结构见《UI 原型说明》；Element Plus 主题变量见 `code/slake-school-web/src/assets/theme-slake.css`。
|
|
|
|
|
|
**首个落地参考**：课程管理 `src/views/operations/courses/index.vue`（原型 `pages/courses.html`）。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 1. 品牌色
|
|
|
|
|
|
| 用途 | 色值 |
|
|
|
|------|------|
|
|
|
| 主色（元禾红） | `#B11E23` |
|
|
|
| 主色 hover | `#8B1519` |
|
|
|
| 主文字 | `#000000` |
|
|
|
| 页面背景 | `#FFFFFF`；侧栏/顶栏辅助 `#F8F9FA` |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 2. 列表页布局
|
|
|
|
|
|
所有 **带表格的列表页** 采用统一结构：
|
|
|
|
|
|
```
|
|
|
┌─────────────────────────────────────────────┐
|
|
|
│ 页面标题（左） 主操作按钮（右） │ ← 页头行
|
|
|
├─────────────────────────────────────────────┤
|
|
|
│ el-card（shadow="never"） │
|
|
|
│ 筛选栏 │
|
|
|
│ 表格 │
|
|
|
│ 分页（右对齐） │
|
|
|
└─────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
| 项 | 规范 |
|
|
|
|----|------|
|
|
|
| 页头行 | `display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px` |
|
|
|
| 页面标题 | 18px、字重 600，文案与菜单/路由一致（如「课程管理」） |
|
|
|
| 页头主操作 | 右侧单个主按钮（如「新建课程」），品牌色 `#B11E23`，悬停 `#8B1519`，`size="small"` |
|
|
|
| 内容卡片 | `el-card shadow="never"`，卡片内 **整体基准字号 14px** |
|
|
|
|
|
|
弹窗、分步表单、地图等特殊页面不在此结构内，但 **状态色、按钮语义色** 仍遵循本文。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 3. 筛选区
|
|
|
|
|
|
### 3.1 布局
|
|
|
|
|
|
- 容器类名建议：`.list-filter-bar`
|
|
|
- `display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px`
|
|
|
- 控件与按钮字号：**14px**
|
|
|
- **禁止** 依赖 Element Plus 按钮默认 `margin-left`；相邻按钮间距 **仅由 `gap: 8px` 控制**（含「搜索」与「重置」）
|
|
|
|
|
|
```css
|
|
|
.list-filter-bar :deep(.el-button + .el-button) {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 3.2 控件类型与宽度（建议）
|
|
|
|
|
|
| 类型 | 建议宽度 |
|
|
|
|------|----------|
|
|
|
| 关键词搜索 | 200px |
|
|
|
| 下拉筛选（体系、类型、状态等） | 120px |
|
|
|
|
|
|
具体筛选项因模块而异，顺序一般为：**搜索框 → 若干下拉 → 搜索 → 重置**。
|
|
|
|
|
|
### 3.3 按钮
|
|
|
|
|
|
| 按钮 | 类型 | 行为 |
|
|
|
|------|------|------|
|
|
|
| 搜索 | `type="primary"` | 页码置 1，按当前条件请求列表 |
|
|
|
| 重置 | 默认 | 清空全部筛选、页码置 1，重新请求 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 4. 表格与字号
|
|
|
|
|
|
| 区域 | 字号 |
|
|
|
|------|------|
|
|
|
| 表头、单元格 | **14px** |
|
|
|
| 分页 | **14px** |
|
|
|
| 筛选区控件 | **14px** |
|
|
|
|
|
|
- 默认不使用 `size="small"` 缩小整张表（避免 Element Plus 把正文字号压到 12px 以下）。
|
|
|
- 操作列建议 `fixed="right"`，宽度按按钮数量控制，宜 **紧凑**（参考 280px 四按钮）。
|
|
|
|
|
|
### 4.1 日期区间展示
|
|
|
|
|
|
列表中的起止日期统一格式：
|
|
|
|
|
|
- 同年：`YYYY.MM.DD-MM.DD`（结束日期省略年份），例 `2026.05.20-06.20`
|
|
|
- 跨年：`YYYY.MM.DD-YYYY.MM.DD`
|
|
|
|
|
|
---
|
|
|
|
|
|
## 5. 状态标签
|
|
|
|
|
|
用于 **课程/活动进度**、**发布状态** 等列，不用 Element Plus 默认 `el-tag` 色板，改用自定义 badge。
|
|
|
|
|
|
| 语义 | 背景色 | 文字色 |
|
|
|
|------|--------|--------|
|
|
|
| 未开始 | `#0DCAF0` | `#FFFFFF` |
|
|
|
| 进行中 | `#198754` | `#FFFFFF` |
|
|
|
| 已结束 | `#FFC107` | `#212529` |
|
|
|
| 未发布 | `#6C757D` | `#FFFFFF` |
|
|
|
| 已发布 | `#198754` | `#FFFFFF` |
|
|
|
|
|
|
**样式**
|
|
|
|
|
|
- 字号：**12px**
|
|
|
- `padding: 2px 8px`；`border-radius: 4px`；`line-height: 1.4`
|
|
|
- 类名建议：`.status-badge` + 语义修饰类（如 `.status-progress-1`、`.status-published`）
|
|
|
|
|
|
---
|
|
|
|
|
|
## 6. 操作列按钮
|
|
|
|
|
|
表格行内操作 **不用 link 文字链**，统一为 **小描边按钮**，字号 **12px**。
|
|
|
|
|
|
容器：`.table-row-actions`（课程页当前为 `.course-row-actions`，新页统一用 `.table-row-actions`）
|
|
|
|
|
|
```css
|
|
|
.table-row-actions {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
}
|
|
|
.table-row-actions :deep(.el-button) {
|
|
|
margin: 0;
|
|
|
padding: 2px 7px;
|
|
|
min-height: 24px;
|
|
|
font-size: 12px;
|
|
|
line-height: 1.2;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 6.1 三类按钮语义
|
|
|
|
|
|
| 类型 | 用途示例 | 文字/边框 | 悬停 |
|
|
|
|------|----------|-----------|------|
|
|
|
| **品牌主操作** `.btn-action-brand` | 报名与签到、核心业务入口 | `#B11E23` | 白字 + 红底 |
|
|
|
| **信息主操作** `.btn-action-primary` | 签到码、查看二维码 | `#0D6EFD` | 白字 + 蓝底 |
|
|
|
| **次要操作** `.btn-action-secondary` | 编辑、删除、查看详情 | `#6C757D` | 白字 + 灰底 |
|
|
|
|
|
|
各模块按业务排列按钮顺序；** destructive 操作**（删除）仍用次要描边样式，删除前必须二次确认。
|
|
|
|
|
|
### 6.2 不宜出现在列表行的操作
|
|
|
|
|
|
- 上下架/发布切换：放在 **新建/编辑表单** 或详情流程中完成，列表行不提供「上架/下架」链式按钮（除非产品单独立项）。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 7. Vue 实现约定
|
|
|
|
|
|
1. 列表页根节点建议：`.xxx-page` + `.page-header` + `.xxx-card`（或共用 `.list-page`）。
|
|
|
2. 品牌色 CSS 变量：`--brand-primary: #b11e23`（页面 scoped 或抽至公共样式）。
|
|
|
3. 新模块列表页 **复制课程管理已有 class 命名与结构**，再替换列与筛选项，避免各页一套样式。
|
|
|
4. 后续可将 §6 按钮类、§5 状态类迁入 `src/assets/admin-list.css` 全局复用（当前以 `courses/index.vue` 为样例）。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 8. 修订记录
|
|
|
|
|
|
| 日期 | 变更 |
|
|
|
|------|------|
|
|
|
| 2026-05-21 | 初版：全站列表页布局、筛选区、表格字号、状态色、操作列按钮规范（由课程管理实践抽象） |
|
