---
name: teacher-edu-style
description: 应用教师端极简 SaaS 教育风（纯白画布 + 教育蓝 outline 按钮）到新页面或改造旧页面。Use when 用户要求教师端页面美化、统一按钮/输入框/间距、教育风格，或改 teacherEnd 下任意页面样式。Do not use for 学生端墨黑风或管理端深色风。
---

# 教师端 · 极简 SaaS 教育风

为教师端（roleId === 3）页面套用统一视觉。**只改视觉，不动业务逻辑。**

## 样式落点（先读，避免乱建文件）

| 层级 | 文件 | 责任 |
|------|------|------|
| 全局统一外观 | [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` 类，Navbar 带 `teacher-navbar`，可作为锚点。

## 页面骨架基准（以班级管理页为模板复刻，2026-09 定稿）

**后续所有教师端页面改造以 `teacherEnd/class/index.vue` 为参照实现复刻**（教师管理页已同步）。

### 根标签

| 规则 | 说明 |
|------|------|
| 只挂页面语义类 | 如 `<div class="class-page">` |
| **禁止 `app-container`** | 旧白卡包裹形态已废弃——白底+圆角+阴影+padding 会把整页包成一张大卡，与画布脱节。**教师端全部 15 页已迁移完成（2026-09-23），新增页面同样禁止** |
| **禁止页头 `page-header`** | 不设页头大卡（图标+标题+副标题+统计）。页面标题语境由筛选条/工具条承担；计数信息由分页"共 N 条"与筛选结果数展示。student、trainingTask 已删除 |
| 根类不设 background / padding | 留白由 `teacher-main` 提供（22px 24px 28px） |

### 画布（统一来源，页面不得自设）

`#app .teacherLayout .teacher-main` 浅蓝灰渐变（sidebar.scss L813-818：`#f7fafd → #eef4fb → #f5f8fc`）。页面根类与 scoped 一律不再声明背景，白卡片直接浮在画布上。

### 页面结构（自上而下）

1. **扁平筛选条**（无卡片底/边框）
2. **操作按钮行**（实心深蓝主按钮 + ghost 次级，全部带图标）
3. **白卡表格**（灰线、白表头、名称列首字徽标、自定义空状态）
4. **右对齐分页**（教育蓝当前页）

## 设计令牌（唯一定义点：teacher-light.scss 第 0 节）

**令牌挂在 `#app .teacherLayout` 上（teacher-light.scss 第 0 节，18 个变量）全端自动继承，页面 .vue 内禁止重复声明。**
例外：teleport 到 body 的弹层继承不到（如 trainingTask 抽屉 `.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`。禁止深色渐变背景、彩色表头、彩色按钮堆叠。

### 字号（6 级，紧凑体系）

| 令牌 | 值 | 用途 |
|------|------|------|
| `--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`（`--r-card`）；控件/按钮/行 `8px`（`--r-control`）。

## 按钮规范（重点）

**统一尺寸：高 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` 字；hover 底 `#f9fafb`、边 `#9ca3af` |
| success / warning / danger | 实色（绿/橙/红）白字，只用于对应语义 |
| 表格行内文字按钮 | 透明底；primary 蓝、danger 红，无填充 |
| is-text / is-link 的 primary | 同样收敛为 outline |

### 按钮内图标（按钮必须配 EP 图标）

- 图标-文字间距由**全局接管**（teacher-light.scss：按钮层 + EP 内层 span 层双层 `gap: 8px` + icon margin 清零），页面无需再写
- EP `.el-icon` 默认间距仅 6px 且对裸文字节点无效；**自定义 SVG 必须显式 `gap: 8px`**，否则图标贴文字
- 图标尺寸 `14px`，用 `currentColor` 自动跟随文字颜色（不要写死 fill）
- 工具条按钮语义：搜索→Search、新增→Plus、导入→Upload、导出→Download、模板下载→Document、刷新→Refresh；行内：编辑→Edit、删除→Delete、密码初始化→Key

## 输入框规范（input / select / date 完全一致）

| 属性 | 值 |
|------|------|
| 高 | `36px`（与按钮同高） |
| 圆角 | `8px` |
| 背景/边框 | 白底 + `1px solid #e5e7eb` |
| hover 边 | `#d1d5db`；focus 边 `#3b82f6` + `0 0 0 3px rgba(59,130,246,0.12)` 光晕 |
| 文字 | 12px、`#1f2937`；placeholder `#9ca3af` |

**EP 关键坑：select 的边框在 `.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`
- 筛选条**扁平化**：无卡片背景/边框/阴影，直接落在画布上（class 页 `.query-bar`、teacher 页 `.df` 均已扁平）；字段间距 `12px`，字段统一宽 `200px`（`--field-w`）
- KPI 卡行 gap `16px`；图表双栏 gap `16px`

### 留白责任分层（防 padding 叠加，反复踩过）

1. **app-main 自带 padding，页面根类不许再写页面级 padding/背景**
2. 卡片、分区内部才写内容 padding
3. 禁止在系统层（teacherLayout/main-container/app-main/app-container）为单个页面加 padding 覆盖
4. 不允许双层 app-main + app-container 同时留白

## 背景规范

- 全链路（teacherLayout → main-container → app-main → app-container → 页面）在教育风页面统一纯白
- 卡片：白底 + `1px #e5e7eb` 边 + 极淡阴影 `0 1px 3px rgba(0,0,0,0.06)`，hover 不上色（需要时轻微上浮可选）
- 图表：`backgroundColor: "transparent"`，tooltip 白底深字
- 图表悬停轴标签（axisPointer.label）：`#2563eb` 底 + 白字，默认浅蓝底白字看不清，必须显式设置

## 表格风格规范

整体：**纯白底、灰色细线、无彩色填充、无发光**。结构与层次如下。

### 表格容器

| 属性 | 值 |
|------|------|
| `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；`.cell` 文字同步样式 |
| 页面 `tableHeaderStyle` 内联对象 | 同步白底 + `#1f2937` 字 |

### 数据行

| 属性 | 值 |
|------|------|
| 行背景 | `#ffffff`（透明），禁止斑马纹彩色 |
| 文字 | `#1f2937`、12px（`--fs-body`）|
| 行分隔线 | `1px solid #e5e7eb`（`--el-table-border-color`）|
| 行 hover | `#f9fafb`（中性灰，禁止浅蓝 `#eff6ff`）|
| 单元格 padding | 纵向 12px 左右，保持紧凑 |
| 选中/当前行 | 仅在确需时用极淡灰，不引入蓝底 |

### 单元格内元素

- 状态用 `el-tag`：成功绿 / 警示橙 / 信息灰，**标签本身保留语义浅底**（小面积，不影响整表白底）
- 行内操作按钮：文字按钮透明底，primary 蓝、danger 红，按钮间 `gap: 8px`
- 空数据：居中、`#9ca3af`、12px，不额外加色块

### 分页

- 白底；页码按钮灰边，当前页教育蓝底白字（小面积强调）
- "共 N 条 / 每页条数" 文字 `#6b7280`、12px
- 分页与表格间距 `16px`，右对齐

### 名称列首字徽标（实体表标配）

实体名称列（班级/教师/学生等）用**22px** 教育蓝软底首字方块（紧凑行高）：`--edu-primary-soft` 底 + `--edu-primary` 字 + 6px 圆角 + 11px/600，名称 600 加粗。**列必须左对齐**（`align="left"`，徽标起点垂直成线，禁止居中导致徽标随名称长度浮动）。页面 scoped 写 22px；teacher-light.scss 表格区已有全局 `[class$="-badge"]` 紧凑覆盖兜底。参考 student 页 `.name-cell` / task 页 `.task-badge`。

### 自定义空状态（标配）

`<template #empty>` + `FolderOpened` 图标（28px、`--text-muted`）+ "暂无XX"（600）+ 引导语"可通过XX'新增'按钮创建"（`--fs-tag`）。参考 `.table-empty`，禁止 EP 默认灰色"暂无数据"。

### 防横向滚动（教师管理页教训）

1. 行内操作必须用**透明文字按钮**（实心胶囊 ~230px 会撑爆操作列导致溢出）
2. 各列用 `min-width` 弹性分配（名下班级 200、学生数量 90），禁固定宽叠加超出容器
3. 表格容器 `overflow: hidden` + 圆角由外层卡控制

### 落地位置

跨页通用表格外观写 teacher-light.scss；页面 scoped 只做布局与列宽。注意 EP 表格变量（`--el-table-header-bg-color` 等）是注入暗色的常见入口，必须显式覆盖。

## 实施步骤

1. 读目标页面，确认所属层级与现有类名；**对照"页面骨架基准"检查根标签**（去掉 `app-container`、根类无背景/padding）
2. 通用外观缺什么补到 teacher-light.scss（按钮/输入框/表格/图标间距均已覆盖，不要重复写）；**禁止在页面重复声明 18 个全局令牌**
3. 页面 scoped 里只写布局与间距，全部引用令牌，硬编码色值归零；**按钮外观改动一律写进 teacher-light.scss**（见陷阱 5）
4. 图表 tooltip / axisPointer 按本规范设置
5. 浏览器实测：getComputedStyle 同时检查 `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 顺延端口（147→148），旧端口不热更新全局 scss。改了没反应先核对浏览器端口对应最新进程并重启。
3. **select wrapper 独立**：见输入框坑。
4. **EP `-webkit-text-fill-color`**：select 选中值可能透明，必要时显式设置。
5. **页面 scoped 永远赢不了按钮外观覆盖**：teacher-light.scss 全部规则挂在 `#app .teacherLayout` 下，id 特异性 + `!important` 必然压过页面 scoped 同类规则（scoped 无 id，即使都带 `!important`）。改按钮/输入框外观**必须写进 teacher-light.scss**，且类链要足够长——如 `#app .teacherLayout .grade-center .filter-bar .search-btn`（1id+4class）才能压过 primary 重铸规则（1id+3class）。真实案例：首页查询按钮在 scoped 写实心深蓝完全不生效，提升到全局后立即生效。页面 scoped 只写布局（间距/尺寸/图标），注释注明外观归全局。

## 完成验证清单

- [ ] 根标签只挂语义类、无 `app-container`、无背景/padding（骨架基准）
- [ ] 页面内无重复令牌声明（18 个全局令牌来自 teacher-light.scss 第 0 节）
- [ ] 无硬编码色值（除语义状态、3px 装饰条、图表内模板）
- [ ] 主按钮方案 A 实心深蓝（唯一彩色）+ 次级 ghost + 按钮全部带图标（间距 8px 全局接管）
- [ ] 输入框与按钮同高 36px，input/select/date 外观一致
- [ ] 筛选条扁平无卡片底
- [ ] 表格：白表头 + 灰横线 + 名称列首字徽标 + 自定义空状态 + 无横向滚动
- [ ] 间距只用 5 档令牌，无随意像素值
- [ ] 字号只用 6 级令牌
- [ ] 页面根类无重复 padding/背景
- [ ] GetDiagnostics 无报错
- [ ] 真实鼠标验证 hover / 轴标签可读性