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

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

教师端 · 极简 SaaS 教育风

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

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

层级	文件	责任
全局统一外观	teacher-light.scss	按钮、输入框、弹窗、分页、表格配色。跨页通用规则写这里
页面自身布局	页面 .vue 的 <style scoped>	布局、间距、卡片结构，引用令牌，不重复定义外观
旧深色残留	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。速查：

颜色

令牌	值	用途
--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 / 轴标签可读性