6.0 KiB

Raw Blame History Unescape Escape

管理后台 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 控制（含「搜索」与「重置」）

.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）

.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 实现约定

列表页根节点建议：.xxx-page + .page-header + .xxx-card（或共用 .list-page）。
品牌色 CSS 变量：--brand-primary: #b11e23（页面 scoped 或抽至公共样式）。
新模块列表页 复制课程管理已有 class 命名与结构，再替换列与筛选项，避免各页一套样式。
后续可将 §6 按钮类、§5 状态类迁入 src/assets/admin-list.css 全局复用（当前以 courses/index.vue 为样例）。

8. 修订记录

日期	变更
2026-05-21	初版：全站列表页布局、筛选区、表格字号、状态色、操作列按钮规范（由课程管理实践抽象）

6.0 KiB Raw Blame History Unescape Escape