|
|
---
|
|
|
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 / 轴标签可读性
|