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

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

完整可复制的变量块见 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 / 轴标签可读性