---
name: teacher-edu-style
description: 应用教师端极简 SaaS 教育风（纯白画布 + 教育蓝 outline 按钮）
---
# 教师端 · 极简 SaaS 教育风
为教师端（ ）
## 样式落点（先读，避免乱建文件）
| 层级 | 文件 | 责任 |
|------|------|------|
| 全局统一外观 | [teacher-light.scss ](file:///d:/TZ/dianshang-qianduan/src/assets/styles/teacher-light.scss ) | 按钮、输入框、弹窗、分页、表格配色。跨页通用规则写这里 |
| 页面自身布局 | 页面 `.vue` 的 `<style scoped>` | 布局、间距、卡片结构，引用令牌，不重复定义外观 |
| 旧深色残留 | [AppMain.vue ](file:///d:/TZ/dianshang-qianduan/src/layout/components/AppMain.vue ) | 非 scoped 块里禁止再写按钮渐变（见"覆盖陷阱"）
教师端 AppMain 根节点带 `teacher-main` 类， `teacher-navbar` ，可作为锚点。
## 页面骨架基准（ ，
**后续所有教师端页面改造以 `teacherEnd/class/index.vue` 为参照实现复刻**（教师管理页已同步）。
### 根标签
| 规则 | 说明 |
|------|------|
| 只挂页面语义类 | 如 `<div class="class-page">` |
| ** 禁止 `app-container` ** | 旧白卡包裹形态已废弃——白底+圆角+阴影+padding 会把整页包成一张大卡，与画布脱节。**教师端全部 15 页已迁移完成（ ） ，
| ** 禁止页头 `page-header` ** | 不设页头大卡（图标+标题+副标题+统计）。页面标题语境由筛选条/工具条承担；计数信息由分页"共 N 条"与筛选结果数展示。student、trainingTask 已删除 |
| 根类不设 background / padding | 留白由 `teacher-main` 提供（ ）
### 画布（统一来源，页面不得自设）
`#app .teacherLayout .teacher-main` 浅蓝灰渐变（ ： #eef4fb → #f5f8fc `）。页面根类与 scoped 一律不再声明背景，白卡片直接浮在画布上。
### 页面结构（自上而下）
1. ** 扁平筛选条**（无卡片底/边框）
2. ** 操作按钮行**（实心深蓝主按钮 + ghost 次级，全部带图标）
3. ** 白卡表格**（灰线、白表头、名称列首字徽标、自定义空状态）
4. ** 右对齐分页**（教育蓝当前页）
## 设计令牌（ ：
**令牌挂在 `#app .teacherLayout` 上（ ，
例外： `.drawer-shell` ，自带令牌块）；教师端首页 `teacherEnd/index.vue` 用独立命名体系（--edu-text/--fs-display/--fw-*/--lh-*），不在标准令牌范围。
完整可复制的变量块见 [references/snippets.md ](file:///d:/TZ/dianshang-qianduan/.trae/skills/teacher-edu-style/references/snippets.md )。速查：
### 颜色
| 令牌 | 值 | 用途 |
|------|------|------|
| `--edu-primary` | `#3b82f6` | 链接、描边、激活文字、图标 |
| `--edu-primary-deep` | `#2563eb` | hover 文字、axisPointer 标签底 |
| `--edu-primary-soft` | `#eff6ff` | 激活浅底、hover 浅底 |
| `--text-strong` | `#1f2937` | 标题、强调正文 |
| `--text-body` | `#6b7280` | 普通正文 |
| `--text-muted` | `#9ca3af` | 辅助、占位符 |
| `--border-color` | `#e5e7eb` | 卡片、输入框、分割线 |
| 语义色 | `#ef4444` 红 / `#2ba471` 绿 / `#f59e0b` 橙 | ** 只**表示状态（错误/成功/警示），不做装饰 |
画布纯白 `#ffffff` 。禁止深色渐变背景、彩色表头、彩色按钮堆叠。
### 字号（
| 令牌 | 值 | 用途 |
|------|------|------|
| `--fs-page` | `17px` | 页面标题 |
| `--fs-card` | `14px` | 卡片标题 |
| `--fs-body` | `12px` | 正文、按钮、输入框 |
| `--fs-tag` | `11px` | 标签、辅助、轴标签 |
| `--fs-kpi` | `26px` | KPI 大数字 |
| `--fs-num` | `20px` | 行内强调数字 |
字重：标题 `700` 、按钮/强调 `600` 、正文 `400` 。行高 1.5（标题 1.35、数字 1）
### 圆角
卡片 `12px` （ `8px` （
## 按钮规范（重点）
**统一尺寸：高 36px、横向 padding 16px、8px 圆角、12px/600、transition 0.18s。**
### 主按钮 primary —— 方案 A 实心深蓝（默认，唯一主操作）
全页最多一个，承载"查询/提交/保存/新增"。落地配方见下方"方案 A 配方"；描边 outline 降为备选变体（透明底 + 蓝边，视觉需要减重时用）。
**outline 备选变体：**
| 状态 | background | border | color |
|------|-----------|--------|-------|
| 默认 | `transparent` | `1px solid #3b82f6` | `#3b82f6` |
| hover/focus | `rgba(59,130,246,0.1)` | `#3b82f6` | `#2563eb` |
| active 按下 | `rgba(59,130,246,0.18)` | `#2563eb` | `#2563eb` |
| disabled | 透明 | 蓝 | 蓝 + opacity .5 |
无阴影、无位移。plain 朴素态同样式。写法见 snippets。
### 方案 A 配方（主按钮默认态，已全面落地 2026-09）
已落地：首页成绩管理中心"查询"、教师管理页"新增"、班级管理页全部实心 primary。三级深蓝 + 品牌染色阴影，按钮有"浮起"厚度感：
| 状态 | background | border | color | 阴影 |
|------|-----------|--------|-------|------|
| 默认 | `#2563eb` | `#2563eb` | `#fff` | `0 1px 2px rgba(37,99,235,.35), 0 3px 10px rgba(37,99,235,.22)` |
| hover/focus | `#1d4ed8` | `#1d4ed8` | `#fff` | 第二层阴影放大加深（抬升感） |
| active | `#1e40af` | `#1e40af` | `#fff` | 阴影收敛 + `translateY(1px)` |
字重 `500` （非 600/700） `0.16s` 。配套原则：**次级按钮一律幽灵化**（白底 + `#e5e7eb` 边 + `#1f2937` 字），整排只允许主按钮一个彩色——这是高级感的第一原则。
### 其他按钮
| 类型 | 样式 |
|------|------|
| 默认（取消） | 白底 + `#e5e7eb` 边 + `#1f2937` 字； `#f9fafb` 、边 `#9ca3af` |
| success / warning / danger | 实色（绿/橙/红）白字，只用于对应语义 |
| 表格行内文字按钮 | 透明底；
| is-text / is-link 的 primary | 同样收敛为 outline |
### 按钮内图标（按钮必须配 EP 图标）
- 图标-文字间距由**全局接管**（ ： `gap: 8px` + icon margin 清零），页面无需再写
- EP `.el-icon` 默认间距仅 6px 且对裸文字节点无效；**自定义 SVG 必须显式 `gap: 8px` **，否则图标贴文字
- 图标尺寸 `14px` ，用 `currentColor` 自动跟随文字颜色（不要写死 fill）
- 工具条按钮语义： ； ：
## 输入框规范（
| 属性 | 值 |
|------|------|
| 高 | `36px` （与按钮同高） |
| 圆角 | `8px` |
| 背景/边框 | 白底 + `1px solid #e5e7eb` |
| hover 边 | `#d1d5db` ； `#3b82f6` + `0 0 0 3px rgba(59,130,246,0.12)` 光晕 |
| 文字 | 12px、`#1f2937`； `#9ca3af` |
**EP 关键坑： `.el-select__wrapper` 上，不在 `.el-input__wrapper` 。两个选择器必须同步覆盖**，否则下拉框和输入框对不齐。禁用态浅灰底 `#f3f4f6` 。
## 间距规范（重点）
4px 基准，只允许 5 档：
| 令牌 | 值 | 用途 |
|------|------|------|
| `--sp-1` | `4px` | 图标与紧贴文字 |
| `--sp-2` | `8px` | 同组元素 gap、行内间距 |
| `--sp-3` | `12px` | 分区竖向间距、卡片内分组 |
| `--sp-4` | `16px` | 大区块 gap、卡片 padding |
| `--sp-5` | `20px` | 页面级大分区间距 |
- 卡片 padding `16px` ；卡片标题与内容间距 `12px`
- 筛选条**扁平化**：无卡片背景/边框/阴影， （ `.query-bar` 、teacher 页 `.df` 均已扁平）；字段间距 `12px` ，字段统一宽 `200px` （ ）
- KPI 卡行 gap `16px` ；图表双栏 gap `16px`
### 留白责任分层（防 padding 叠加，反复踩过）
1. **app-main 自带 padding，
2. 卡片、分区内部才写内容 padding
3. 禁止在系统层（ ）
4. 不允许双层 app-main + app-container 同时留白
## 背景规范
- 全链路（
- 卡片：白底 + `1px #e5e7eb` 边 + 极淡阴影 `0 1px 3px rgba(0,0,0,0.06)` ，
- 图表：`backgroundColor: "transparent"`，
- 图表悬停轴标签（ ） ：
## 表格风格规范
整体：**纯白底、灰色细线、无彩色填充、无发光**。结构与层次如下。
### 表格容器
| 属性 | 值 |
|------|------|
| `background` | `#ffffff` |
| `border` | `1px solid #e5e7eb` |
| `border-radius` | `12px` （卡片级），`overflow: hidden` |
| 阴影 | 无（表格已在卡片内时）或极淡 `0 1px 3px rgba(0,0,0,0.06)` |
| CSS 变量 | `--el-table-bg-color` / `--el-table-tr-bg-color` 均 `#ffffff` |
### 表头（不靠填充区分）
| 属性 | 值 |
|------|------|
| `--el-table-header-bg-color` | `#ffffff` （禁止 `#e3effb` 等浅蓝）|
| 表头 th 背景 | `#ffffff !important` ，禁止 linear-gradient |
| 文字 | `#1f2937` 、13px、600、无 text-shadow |
| border-bottom | `1px solid #e5e7eb` （表头与数据行唯一分界）|
| 表头高度 | 38px；
| 页面 `tableHeaderStyle` 内联对象 | 同步白底 + `#1f2937` 字 |
### 数据行
| 属性 | 值 |
|------|------|
| 行背景 | `#ffffff` （透明），禁止斑马纹彩色 |
| 文字 | `#1f2937` 、12px（ ）
| 行分隔线 | `1px solid #e5e7eb` （ ）
| 行 hover | `#f9fafb` （中性灰，禁止浅蓝 `#eff6ff` ）
| 单元格 padding | 纵向 12px 左右，保持紧凑 |
| 选中/当前行 | 仅在确需时用极淡灰，不引入蓝底 |
### 单元格内元素
- 状态用 `el-tag` ：成功绿 / 警示橙 / 信息灰，**标签本身保留语义浅底**（小面积，不影响整表白底）
- 行内操作按钮： ， `gap: 8px`
- 空数据：居中、`#9ca3af`、12px，
### 分页
- 白底；页码按钮灰边，当前页教育蓝底白字（小面积强调）
- "共 N 条 / 每页条数" 文字 `#6b7280` 、12px
- 分页与表格间距 `16px` ，右对齐
### 名称列首字徽标（实体表标配）
实体名称列（班级/教师/学生等）用**22px** 教育蓝软底首字方块（紧凑行高）：`--edu-primary-soft` 底 + `--edu-primary` 字 + 6px 圆角 + 11px/600， （ ； `[class$="-badge"]` 紧凑覆盖兜底。参考 student 页 `.name-cell` / task 页 `.task-badge` 。
### 自定义空状态（标配）
`<template #empty>` + `FolderOpened` 图标（ ） （ ） （ `.table-empty` ，禁止 EP 默认灰色"暂无数据"。
### 防横向滚动（教师管理页教训）
1. 行内操作必须用**透明文字按钮**（实心胶囊 ~230px 会撑爆操作列导致溢出）
2. 各列用 `min-width` 弹性分配（名下班级 200、学生数量 90） ，
3. 表格容器 `overflow: hidden` + 圆角由外层卡控制
### 落地位置
跨页通用表格外观写 teacher-light.scss；
## 实施步骤
1. 读目标页面，确认所属层级与现有类名；**对照"页面骨架基准"检查根标签**（去掉 `app-container` 、根类无背景/padding）
2. 通用外观缺什么补到 teacher-light.scss（
3. 页面 scoped 里只写布局与间距，全部引用令牌，硬编码色值归零；**按钮外观改动一律写进 teacher-light.scss**（见陷阱 5）
4. 图表 tooltip / axisPointer 按本规范设置
5. 浏览器实测： `backgroundColor` 和 `backgroundImage` （见陷阱）
6. Ctrl+F5 或确认 dev server 端口是最新进程
## 覆盖陷阱（必读，均真实发生过）
1. **background 简写污染 background-image** ：旧规则 `.teacher-main .el-button--primary{background:linear-gradient(...)}` 会把渐变写进 `background-image` ，只覆盖 `background-color:transparent` 无效。必须同时 `background-image:none !important` ，或从源头删渐变。
2. ** 陈旧 dev server**：多实例时 Vite 顺延端口（ ） ，
3. **select wrapper 独立** ：见输入框坑。
4. **EP `-webkit-text-fill-color`** ：
5. ** 页面 scoped 永远赢不了按钮外观覆盖**： `#app .teacherLayout` 下， `!important` 必然压过页面 scoped 同类规则（ ， `!important` ）。改按钮/输入框外观**必须写进 teacher-light.scss**，且类链要足够长——如 `#app .teacherLayout .grade-center .filter-bar .search-btn` （ ） （ ） ：
## 完成验证清单
- [ ] 根标签只挂语义类、无 `app-container` 、无背景/padding（ ）
- [ ] 页面内无重复令牌声明（
- [ ] 无硬编码色值（
- [ ] 主按钮方案 A 实心深蓝（唯一彩色）+ 次级 ghost + 按钮全部带图标（间距 8px 全局接管）
- [ ] 输入框与按钮同高 36px，
- [ ] 筛选条扁平无卡片底
- [ ] 表格：白表头 + 灰横线 + 名称列首字徽标 + 自定义空状态 + 无横向滚动
- [ ] 间距只用 5 档令牌，无随意像素值
- [ ] 字号只用 6 级令牌
- [ ] 页面根类无重复 padding/背景
- [ ] GetDiagnostics 无报错
- [ ] 真实鼠标验证 hover / 轴标签可读性
