dianshang-qianduan/.trae/skills/teacher-edu-style/SKILL.md

---
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`，可作为锚点。

## 设计令牌（页面根类下统一定义，全站引用）

完整可复制的变量块见 [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 —— 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。

### 其他按钮

| 类型 | 样式 |
|------|------|
| 默认（取消） | 白底 + `#e5e7eb` 边 + `#1f2937` 字；hover 底 `#f9fafb`、边 `#9ca3af` |
| success / warning / danger | 实色（绿/橙/红）白字，只用于对应语义 |
| 表格行内文字按钮 | 透明底；primary 蓝、danger 红，无填充 |
| is-text / is-link 的 primary | 同样收敛为 outline |

### 按钮内图标

- EP `.el-icon` 默认带间距；**自定义 SVG 必须显式 `gap: 8px`**，否则图标贴文字
- 图标尺寸 `14px`，用 `currentColor` 自动跟随文字颜色（不要写死 fill）

## 输入框规范（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`
- 筛选条字段间距 `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`，右对齐

### 落地位置

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

## 实施步骤

1. 读目标页面，确认所属层级与现有类名
2. 通用外观缺什么补到 teacher-light.scss（按钮/输入框已覆盖时不要重复写）
3. 页面 scoped 里只写布局与间距，全部引用令牌，硬编码色值归零
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 选中值可能透明，必要时显式设置。

## 完成验证清单

- [ ] 无硬编码色值（除语义状态、3px 装饰条、图表内模板）
- [ ] 按钮：透明蓝边默认态 + 半蓝 hover + 无渐变（background-image: none）
- [ ] 输入框与按钮同高 36px，input/select/date 外观一致
- [ ] 间距只用 5 档令牌，无随意像素值
- [ ] 字号只用 6 级令牌
- [ ] 页面根类无重复 padding/背景
- [ ] GetDiagnostics 无报错
- [ ] 真实鼠标验证 hover / 轴标签可读性