From 3809e55d408a4703cb0ecffa2cc5f7914be74d9e Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Wed, 23 Sep 2026 01:08:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E6=95=99=E5=B8=88=E7=AB=AF?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=9E=81=E7=AE=80=20SaaS=20=E6=95=99?=
 =?UTF-8?q?=E8=82=B2=E9=A3=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .trae/skills/teacher-edu-style/SKILL.md       |  206 +++
 .../teacher-edu-style/references/snippets.md  |  218 +++
 src/assets/styles/sidebar.scss                |  110 ++
 src/assets/styles/teacher-light.scss          |  945 +++++++------
 src/layout/components/AppMain.vue             |   12 +-
 src/layout/components/Navbar.vue              |  134 +-
 src/layout/index.vue                          |    4 +-
 src/views/teacherEnd/class/index.vue          |  324 ++---
 src/views/teacherEnd/index.vue                | 1249 ++++++++---------
 9 files changed, 1813 insertions(+), 1389 deletions(-)
 create mode 100644 .trae/skills/teacher-edu-style/SKILL.md
 create mode 100644 .trae/skills/teacher-edu-style/references/snippets.md

diff --git a/.trae/skills/teacher-edu-style/SKILL.md b/.trae/skills/teacher-edu-style/SKILL.md
new file mode 100644
index 0000000..4c44335
--- /dev/null
+++ b/.trae/skills/teacher-edu-style/SKILL.md
@@ -0,0 +1,206 @@
+---
+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 / 轴标签可读性
diff --git a/.trae/skills/teacher-edu-style/references/snippets.md b/.trae/skills/teacher-edu-style/references/snippets.md
new file mode 100644
index 0000000..744a0dc
--- /dev/null
+++ b/.trae/skills/teacher-edu-style/references/snippets.md
@@ -0,0 +1,218 @@
+# 教师端教育风 · 代码片段
+
+可直接复制。按需取用，不要整页照搬。
+
+## 1. 页面根类令牌块（放 scoped 顶部）
+
+```scss
+.xxx-page {
+  /* 颜色 */
+  --edu-primary: #3b82f6;
+  --edu-primary-deep: #2563eb;
+  --edu-primary-soft: #eff6ff;
+  --text-strong: #1f2937;
+  --text-body: #6b7280;
+  --text-muted: #9ca3af;
+  --border-color: #e5e7eb;
+
+  /* 字号 */
+  --fs-page: 17px;
+  --fs-card: 14px;
+  --fs-body: 12px;
+  --fs-tag: 11px;
+  --fs-kpi: 26px;
+  --fs-num: 20px;
+
+  /* 间距（4px 基准）*/
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 20px;
+
+  /* 圆角 / 控件 */
+  --r-card: 12px;
+  --r-control: 8px;
+  --control-h: 36px;
+  --field-w: 200px;
+  --btn-pad-x: 16px;
+  --btn-icon: 14px;
+}
+```
+
+## 2. 主按钮 outline（页面 scoped 本地强制版）
+
+当全局未接管或需保证单页一定生效时使用：
+
+```scss
+.search-btn {
+  height: var(--control-h);
+  padding: 0 var(--btn-pad-x);
+  background-color: transparent !important;
+  background-image: none !important; /* 关键：清渐变层 */
+  border: 1px solid var(--edu-primary) !important;
+  color: var(--edu-primary) !important;
+  border-radius: var(--r-control) !important;
+  box-shadow: none !important;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  gap: var(--sp-2); /* 自定义 SVG 图标间距 */
+  transition: background-color 0.18s ease, color 0.18s ease;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(59, 130, 246, 0.1) !important;
+    color: var(--edu-primary-deep) !important;
+  }
+
+  &:active {
+    background-color: rgba(59, 130, 246, 0.18) !important;
+    color: var(--edu-primary-deep) !important;
+  }
+
+  .btn-svg {
+    width: var(--btn-icon);
+    height: var(--btn-icon);
+    /* SVG 内 fill / stroke 用 currentColor */
+  }
+}
+```
+
+## 3. 输入框 / 下拉 / 日期 统一覆盖（teacher-light.scss 通用）
+
+```scss
+.el-input__wrapper,
+.el-select__wrapper {
+  height: 36px !important;
+  background-color: #ffffff !important;
+  border-radius: 8px !important;
+  box-shadow: 0 0 0 1px #e5e7eb inset !important;
+  padding: 0 11px !important;
+  transition: box-shadow 0.18s ease;
+
+  &:hover {
+    box-shadow: 0 0 0 1px #d1d5db inset !important;
+  }
+
+  &.is-focus,
+  &:focus-within {
+    box-shadow: 0 0 0 1px #3b82f6 inset,
+      0 0 0 3px rgba(59, 130, 246, 0.12) !important;
+  }
+}
+
+.el-input__inner,
+.el-select__selected-item {
+  font-size: 12px;
+  color: #1f2937;
+  -webkit-text-fill-color: #1f2937;
+}
+
+.el-input__inner::placeholder {
+  color: #9ca3af;
+  -webkit-text-fill-color: #9ca3af;
+}
+```
+
+## 4. 卡片
+
+```scss
+.card {
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-card);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  padding: var(--sp-4);
+
+  &-title {
+    font-size: var(--fs-card);
+    font-weight: 700;
+    color: var(--text-strong);
+    margin: 0 0 var(--sp-3);
+  }
+}
+```
+
+## 5. 走势图 tooltip + axisPointer（ECharts option）
+
+```js
+tooltip: {
+  trigger: "axis",
+  backgroundColor: "rgba(255, 255, 255, 0.98)",
+  borderColor: "rgba(59, 130, 246, 0.2)",
+  borderWidth: 1,
+  padding: [10, 14],
+  textStyle: { color: "#1f2937", fontSize: 13 },
+  axisPointer: {
+    type: "cross",
+    lineStyle: { color: "rgba(59,130,246,0.3)", type: "dashed" },
+  },
+},
+xAxis: {
+  // ...
+  axisPointer: {
+    label: {
+      backgroundColor: "#2563eb",
+      color: "#ffffff",
+      fontSize: 11,
+      fontWeight: 600,
+      padding: [4, 8],
+      borderRadius: 4,
+    },
+  },
+},
+yAxis: {
+  // ...
+  axisPointer: {
+    label: { backgroundColor: "#2563eb", color: "#ffffff", fontSize: 11 },
+  },
+},
+```
+
+## 6. 饼图 tooltip（item 触发）
+
+```js
+tooltip: {
+  trigger: "item",
+  backgroundColor: "rgba(255, 255, 255, 0.98)",
+  borderColor: "rgba(59, 130, 246, 0.2)",
+  textStyle: { color: "#1f2937", fontSize: 13 },
+  formatter: "{b}: {c}人 ({d}%)",
+},
+```
+
+## 7. 页面骨架参考
+
+```html
+<div class="xxx-page">
+  <!-- 页面标题（app-main 已提供 padding，这里不加）-->
+  <header class="page-head">
+    <h1 class="page-title">页面标题</h1>
+    <p class="page-sub">辅助说明</p>
+  </header>
+
+  <!-- KPI 行 -->
+  <div class="kpi-row">
+    <div class="kpi-card"><!-- 图标 + 标签 + 大数字 --></div>
+  </div>
+
+  <!-- 内容区 -->
+  <div class="content-grid">
+    <section class="card">...</section>
+  </div>
+</div>
+```
+
+## 8. 浏览器快速自检脚本（DevTools / browser_evaluate）
+
+```js
+const btn = document.querySelector(".search-btn");
+const s = getComputedStyle(btn);
+({
+  backgroundColor: s.backgroundColor, // rgba(0,0,0,0)
+  backgroundImage: s.backgroundImage, // 必须 none
+  borderColor: s.borderColor,         // rgb(59,130,246)
+  color: s.color,                     // rgb(59,130,246)
+  height: s.height,                   // 36px
+});
+```
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index dc4f19a..a5d10cd 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1206,3 +1206,113 @@
     }
   }
 }
+
+/* ========================================================================
+ * 教师端（role 3）极简 SaaS 教育风：纯白画布 + 教育蓝
+ * 覆盖前文 #app .studentLayout, #app .teacherLayout 共享的浅蓝玻璃块
+ * 选择器带 .teacherLayout 锚点且置于文件末尾，确保胜出
+ * ====================================================================== */
+#app .teacherLayout {
+  background: #ffffff !important;
+
+  .main-container { background: #ffffff !important; }
+
+  .app-main,
+  .teacher-main {
+    background: #ffffff !important;
+
+    &::-webkit-scrollbar-track { background: transparent !important; }
+    &::-webkit-scrollbar-thumb { background: #d1d5db !important; }
+    &::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }
+  }
+
+  // 实训页背景一并收敛为纯白
+  .app-main:has(.student-training-shell) { background: #ffffff !important; }
+
+  .sidebar-container {
+    background: #ffffff !important;
+    border-right: 1px solid #e5e7eb !important;
+    box-shadow: none !important;
+
+    &::after { display: none !important; }
+
+    // 导航容器：去掉大圆角玻璃卡片，铺满侧栏
+    .student-course-nav {
+      width: 100%;
+      min-height: 100%;
+      margin: 0;
+      padding: 16px 10px;
+      border: 0;
+      border-radius: 0;
+      background: #ffffff !important;
+      box-shadow: none !important;
+      backdrop-filter: none;
+    }
+
+    // 分组标题：13px 深灰 700，不再大写拉字距
+    .student-course-heading {
+      margin: 0 0 8px;
+      padding: 0 8px;
+      color: #1f2937 !important;
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0;
+      text-transform: none;
+
+      &:hover { color: #1f2937 !important; }
+    }
+
+    .student-course-list { margin: 0 0 16px; }
+
+    // 菜单项：纯文字行、38px 高、8px 圆角
+    .student-course-link {
+      min-height: 38px;
+      margin: 0 0 4px;
+      padding: 0 10px;
+      border: 0 !important;
+      border-radius: 8px !important;
+      color: #4b5563 !important;
+      background: transparent !important;
+      font-size: 13px;
+      font-weight: 400;
+
+      &:hover {
+        color: #1f2937 !important;
+        background: #f3f4f6 !important;
+        box-shadow: none !important;
+        transform: none !important;
+      }
+
+      // 激活：教育蓝浅底 + 蓝字 + 左侧 3px 蓝条
+      &.active {
+        color: #3b82f6 !important;
+        background: #eff6ff !important;
+        box-shadow: inset 3px 0 0 #3b82f6;
+      }
+
+      &.disabled {
+        color: #c0c5cd !important;
+        background: transparent !important;
+      }
+    }
+
+    // 图标：透明底灰图标，hover/激活变色
+    .student-course-icon {
+      width: 24px;
+      height: 24px;
+      border: 0 !important;
+      border-radius: 6px;
+      color: #9ca3af !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    .student-course-icon--heading {
+      color: #3b82f6 !important;
+      background: #eff6ff !important;
+    }
+
+    .student-course-link:hover .student-course-icon { color: #4b5563 !important; }
+    .student-course-link.active .student-course-icon { color: #3b82f6 !important; }
+  }
+}
diff --git a/src/assets/styles/teacher-light.scss b/src/assets/styles/teacher-light.scss
index 425efd6..0f628c0 100644
--- a/src/assets/styles/teacher-light.scss
+++ b/src/assets/styles/teacher-light.scss
@@ -1,12 +1,13 @@
 /* =============================================================
- * 教师端亮色主题适配
+ * 教师端 · 极简 SaaS 教育风 统一适配
  * 作用范围：
  *   1) 页面内 scoped 暗色样式  -> 用 #app .teacherLayout 前缀提权覆盖
  *   2) teleport 到 body 的弹层 -> 用 body.teacher-light-mode 覆盖
- * 色板：科技蓝亮色系
- *   主蓝 #1e88e5 / 亮蓝 #42a5f5 / 深蓝 #1565c0
- *   标题 #1e3a5f / 正文 #2c4a6a / 次要 #6b85a3
- *   卡片 #ffffff / 描边 rgba(30,136,229,.15) / 行 hover #f0f7ff
+ * 色板：教育蓝单主色 + 中性灰
+ *   主按钮 outline：透明底 + #3b82f6 蓝描边（hover 蓝色半透明）/ 浅底 #eff6ff
+ *   主文字 #1f2937 / 次文字 #6b7280 / 辅助 #9ca3af
+ *   卡片 #ffffff / 描边 #e5e7eb / 行 hover #f9fafb
+ * 控件统一：按钮、输入框 36px 高 · 8px 圆角 · 12px 字号
  * ============================================================= */
 
 /* ---------- 1. 页面根容器与基础文字 ---------- */
@@ -20,7 +21,7 @@
   .default-task-page,
   .school-admin-workbench,
   .task-review {
-    color: #2c4a6a;
+    color: #1f2937;
   }
 
   // 通用文字层级：白色文字在亮色背景下不可见，统一改深色
@@ -29,7 +30,7 @@
   h3,
   h4,
   h5 {
-    color: #1e3a5f;
+    color: #1f2937;
     text-shadow: none !important;
   }
 
@@ -44,41 +45,41 @@
   /* ---------- 2. 页面头部卡片（两种变体统一） ---------- */
   .page-header {
     background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
-    border: 1px solid rgba(30, 136, 229, 0.18) !important;
+    border: 1px solid rgba(59, 130, 246, 0.18) !important;
     box-shadow:
       0 6px 20px rgba(30, 60, 100, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
 
     &::before {
-      background: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.45), transparent) !important;
+      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.45), transparent) !important;
     }
 
     .header-content h1,
     .header-text .page-title,
     .header-text .header-title {
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
       text-shadow: none !important;
     }
 
     .header-content p,
     .header-text .page-subtitle,
     .header-text .header-subtitle {
-      color: #5a7896 !important;
+      color: #6b7280 !important;
     }
 
     // 纯青色图标块：保留蓝色渐变，降低发光
     .header-icon {
       color: #ffffff !important;
-      box-shadow: 0 6px 18px rgba(30, 136, 229, 0.28) !important;
+      box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
     }
 
     // 玻璃质感图标框
     .header-icon-wrap {
-      background: linear-gradient(135deg, rgba(30, 136, 229, 0.14), rgba(66, 165, 245, 0.06)) !important;
-      border-color: rgba(30, 136, 229, 0.3) !important;
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
+      border-color: rgba(59, 130, 246, 0.3) !important;
 
       .header-icon-svg {
-        color: #1e88e5 !important;
+        color: #3b82f6 !important;
       }
     }
 
@@ -90,27 +91,27 @@
   // 成绩中心 hero 大卡
   .admin-hero {
     background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
-    border-color: rgba(30, 136, 229, 0.22) !important;
+    border-color: rgba(59, 130, 246, 0.22) !important;
     box-shadow: 0 8px 24px rgba(30, 60, 100, 0.08) !important;
 
     &::after {
-      background: linear-gradient(90deg, rgba(30, 136, 229, 0.1), transparent 38%), repeating-linear-gradient(90deg, rgba(30, 136, 229, 0.06) 0 1px, transparent 1px 64px) !important;
+      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent 38%), repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0 1px, transparent 1px 64px) !important;
     }
   }
 
   .admin-badge {
-    color: #1565c0 !important;
-    background: rgba(30, 136, 229, 0.1) !important;
-    border-color: rgba(30, 136, 229, 0.4) !important;
+    color: #2563eb !important;
+    background: rgba(59, 130, 246, 0.1) !important;
+    border-color: rgba(59, 130, 246, 0.4) !important;
   }
 
   .admin-title {
-    color: #1e3a5f !important;
+    color: #1f2937 !important;
     text-shadow: none !important;
   }
 
   .admin-subtitle {
-    color: #5a7896 !important;
+    color: #6b7280 !important;
   }
 
   /* ---------- 3. 搜索栏 / 工具条 ---------- */
@@ -120,7 +121,7 @@
   .filter-section,
   .df {
     background: #ffffff !important;
-    border: 1px solid rgba(30, 136, 229, 0.15) !important;
+    border: 1px solid rgba(59, 130, 246, 0.15) !important;
     box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;
   }
 
@@ -129,11 +130,11 @@
   .toolbar .query-label,
   .df span,
   .online span {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
   }
 
   .task-tip {
-    color: #5a7896 !important;
+    color: #6b7280 !important;
   }
 
   /* ---------- 4. 卡片容器 ---------- */
@@ -143,30 +144,30 @@
   .stats-card,
   .trend-card {
     background: #ffffff !important;
-    border: 1px solid rgba(30, 136, 229, 0.15) !important;
+    border: 1px solid rgba(59, 130, 246, 0.15) !important;
     box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
     backdrop-filter: none;
   }
 
   .admin-panel-title {
-    color: #1e3a5f !important;
+    color: #1f2937 !important;
   }
 
   .admin-panel-subtitle {
-    color: #5a7896 !important;
+    color: #6b7280 !important;
   }
 
   // 卡片内部标题/正文
   .card-header,
   .card-body,
   .card-footer {
-    color: #2c4a6a;
+    color: #1f2937;
 
     h2,
     h3,
     h4,
     .card-title {
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
     }
   }
 
@@ -186,25 +187,25 @@
   /* ---------- 5. 表格 ---------- */
   .el-table {
     background-color: #ffffff !important;
-    border: 1px solid rgba(30, 136, 229, 0.15) !important;
+    border: 1px solid rgba(59, 130, 246, 0.15) !important;
     box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
-    color: #2c4a6a;
+    color: #1f2937;
 
     // 表头：浅蓝渐变 + 深蓝字（!important 同时覆盖页面 :header-cell-style 内联样式）
     .el-table__header-wrapper th.el-table__cell,
     .el-table__fixed-header-wrapper th.el-table__cell {
-      background: linear-gradient(135deg, #e8f3fe 0%, #d8ebfb 100%) !important;
+      background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
       background-color: #e3effb !important;
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
       font-weight: 600 !important;
       text-shadow: none !important;
-      border-bottom: 1px solid rgba(30, 136, 229, 0.2) !important;
+      border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
     }
 
     // 单元格
     .el-table__cell,
     td.el-table__cell .cell {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     tr,
@@ -230,83 +231,105 @@
 
     // hover 行
     .el-table__body tr:hover > td.el-table__cell {
-      background-color: #f0f7ff !important;
+      background-color: #eff6ff !important;
     }
 
     // 空数据/汇总行文字
     .el-table__empty-text,
     .el-table__summary .cell {
-      color: #6b85a3 !important;
+      color: #9ca3af !important;
     }
 
     // 表尾合计
     tfoot td.el-table__cell {
-      background-color: #f3f8fd !important;
-      color: #1e3a5f !important;
+      background-color: #f9fafb !important;
+      color: #1f2937 !important;
     }
 
     // 排序/筛选图标
     .caret-wrapper {
-      color: #8aa8c4;
+      color: #9ca3af;
     }
   }
 
-  /* ---------- 6. 按钮 ----------
-   * 页面 scoped 样式把所有按钮强制成青色透明描边，需按类型重置三件套
-   * （background-color / border-color / color）及 hover/disabled 状态
+  /* ---------- 6. 按钮（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
+   * 实色主按钮（蓝）只承载主操作；默认按钮白底灰边；文字按钮蓝/红用于表格行内
    */
   .el-button {
+    height: 36px;
     border-radius: 8px;
-    font-weight: 500;
-    box-shadow: none;
-    transform: none;
+    font-size: 12px;
+    font-weight: 600;
+    box-shadow: none !important;
+    transform: none !important;
+    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 
-    // 默认按钮
+    // 默认按钮（取消等次要操作）：白底灰边深字，hover 边变深 + 微浮
     &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(.is-link) {
       background-color: #ffffff !important;
-      border-color: #c9d8e8 !important;
-      color: #2c4a6a !important;
+      border-color: #e5e7eb !important;
+      color: #1f2937 !important;
 
       &:hover,
       &:focus {
-        background-color: #f0f7ff !important;
-        border-color: #1e88e5 !important;
-        color: #1e88e5 !important;
+        background-color: #f9fafb !important;
+        border-color: #9ca3af !important;
+        color: #1f2937 !important;
+        box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      // 按下：回落 + 更暗底
+      &:active {
+        background-color: #f3f4f6 !important;
+        border-color: #9ca3af !important;
         box-shadow: none !important;
-        transform: none !important;
+        transform: translateY(0) !important;
       }
     }
 
-    // 主按钮
+    // 主按钮：透明底 + 蓝描边 + 蓝字（outline 风格）
     &.el-button--primary {
-      background-color: #1e88e5 !important;
-      border-color: #1e88e5 !important;
-      color: #ffffff !important;
+      background-color: transparent !important;
+      border-color: #3b82f6 !important;
+      color: #3b82f6 !important;
 
+      // 移入：蓝色半透明底，描边/文字保持蓝
       &:hover,
       &:focus {
-        background-color: #42a5f5 !important;
-        border-color: #42a5f5 !important;
-        color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.25) !important;
-        transform: none !important;
+        background-color: rgba(59, 130, 246, 0.1) !important;
+        border-color: #3b82f6 !important;
+        color: #2563eb !important;
+      }
+
+      // 按下：蓝色半透明再加深
+      &:active {
+        background-color: rgba(59, 130, 246, 0.18) !important;
+        border-color: #2563eb !important;
+        color: #2563eb !important;
       }
 
+      // plain 朴素态与默认 outline 风格保持一致
       &.is-plain {
-        background-color: #e8f3fe !important;
-        border-color: #9cc8ef !important;
-        color: #1565c0 !important;
+        background-color: transparent !important;
+        border-color: #3b82f6 !important;
+        color: #3b82f6 !important;
 
         &:hover,
         &:focus {
-          background-color: #1e88e5 !important;
-          border-color: #1e88e5 !important;
-          color: #ffffff !important;
+          background-color: rgba(59, 130, 246, 0.1) !important;
+          border-color: #3b82f6 !important;
+          color: #2563eb !important;
+        }
+
+        &:active {
+          background-color: rgba(59, 130, 246, 0.18) !important;
+          color: #2563eb !important;
         }
       }
     }
 
-    // 成功
+    // 成功（语义状态色）
     &.el-button--success {
       background-color: #2ba471 !important;
       border-color: #2ba471 !important;
@@ -317,8 +340,15 @@
         background-color: #3cbb85 !important;
         border-color: #3cbb85 !important;
         color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(43, 164, 113, 0.22) !important;
-        transform: none !important;
+        box-shadow: 0 4px 14px rgba(43, 164, 113, 0.3) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      &:active {
+        background-color: #1f8559 !important;
+        border-color: #1f8559 !important;
+        box-shadow: none !important;
+        transform: translateY(0) !important;
       }
 
       &.is-plain {
@@ -334,7 +364,7 @@
       }
     }
 
-    // 警告
+    // 警告（语义状态色）
     &.el-button--warning {
       background-color: #e8a33d !important;
       border-color: #e8a33d !important;
@@ -345,8 +375,15 @@
         background-color: #f2b45a !important;
         border-color: #f2b45a !important;
         color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(232, 163, 61, 0.22) !important;
-        transform: none !important;
+        box-shadow: 0 4px 14px rgba(232, 163, 61, 0.3) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      &:active {
+        background-color: #c9841f !important;
+        border-color: #c9841f !important;
+        box-shadow: none !important;
+        transform: translateY(0) !important;
       }
 
       &.is-plain {
@@ -362,54 +399,71 @@
       }
     }
 
-    // 危险
+    // 危险（语义状态色）
     &.el-button--danger {
-      background-color: #e05a5a !important;
-      border-color: #e05a5a !important;
+      background-color: #ef4444 !important;
+      border-color: #ef4444 !important;
       color: #ffffff !important;
 
       &:hover,
       &:focus {
-        background-color: #ec7272 !important;
-        border-color: #ec7272 !important;
+        background-color: #dc2626 !important;
+        border-color: #dc2626 !important;
         color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(224, 90, 90, 0.22) !important;
-        transform: none !important;
+        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      &:active {
+        background-color: #b91c1c !important;
+        border-color: #b91c1c !important;
+        box-shadow: none !important;
+        transform: translateY(0) !important;
       }
 
       &.is-plain {
-        background-color: #fdecec !important;
-        border-color: #f3b0b0 !important;
-        color: #c0392b !important;
+        background-color: #fef2f2 !important;
+        border-color: #fecaca !important;
+        color: #dc2626 !important;
 
         &:hover,
         &:focus {
-          background-color: #e05a5a !important;
+          background-color: #ef4444 !important;
+          border-color: #ef4444 !important;
           color: #ffffff !important;
         }
       }
     }
 
-    // text/link 文字按钮（表格操作列）：加深以满足白底对比度
+    // text/link 文字按钮（表格操作列）：透明底，primary 蓝、danger 红
     &.is-text,
     &.is-link {
+      height: auto;
       background: transparent !important;
       border-color: transparent !important;
 
       &.el-button--primary {
-        color: #1565c0 !important;
+        color: #3b82f6 !important;
         &:hover,
         &:focus {
-          color: #0d4f9e !important;
-          background: rgba(30, 136, 229, 0.08) !important;
+          color: #2563eb !important;
+          background: rgba(59, 130, 246, 0.08) !important;
         }
       }
       &.el-button--danger {
-        color: #d04545 !important;
+        color: #ef4444 !important;
+        &:hover,
+        &:focus {
+          color: #dc2626 !important;
+          background: rgba(239, 68, 68, 0.08) !important;
+        }
+      }
+      &.el-button--warning {
+        color: #d97706 !important;
         &:hover,
         &:focus {
-          color: #c0392b !important;
-          background: rgba(224, 90, 90, 0.08) !important;
+          color: #b45309 !important;
+          background: rgba(217, 119, 6, 0.08) !important;
         }
       }
     }
@@ -418,98 +472,134 @@
     &.is-disabled,
     &.is-disabled:hover,
     &.is-disabled:focus {
-      opacity: 0.55;
-      transform: none !important;
+      opacity: 0.5;
       box-shadow: none !important;
     }
   }
 
-  /* ---------- 7. 表单与输入组件 ---------- */
+  /* ---------- 7. 表单与输入组件（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
+   * input/select/date 的 wrapper 统一外观：白底灰边，hover 中性变深，聚焦教育蓝光晕
+   */
   .el-form-item__label {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
+    font-size: 12px;
   }
 
+  // EP 中 input 与 select 各自承载边框的 wrapper 必须同时覆盖
   .el-input__wrapper,
-  .el-select .el-input__wrapper,
-  .el-date-editor.el-input__wrapper,
-  .el-input-number .el-input__wrapper {
+  .el-select__wrapper {
+    height: 36px !important;
+    min-height: 36px !important;
     background-color: #ffffff !important;
-    box-shadow: 0 0 0 1px #c9d8e8 inset !important;
-    border-radius: 8px;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: none !important;
+    border-radius: 8px !important;
+    padding: 0 11px !important;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
     &:hover {
-      box-shadow: 0 0 0 1px #9cc0e0 inset !important;
+      border-color: #d1d5db !important;
     }
 
     &.is-focus,
     &.is-focused {
-      box-shadow: 0 0 0 1px #1e88e5 inset !important;
+      border-color: #3b82f6 !important;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
     }
   }
 
-  .el-textarea__inner {
-    background-color: #ffffff !important;
-    border-color: #c9d8e8 !important;
-    color: #2c4a6a !important;
-    border-radius: 8px;
+  .el-input__inner {
+    height: 34px !important;
+    line-height: 34px !important;
+    font-size: 12px !important;
+    color: #1f2937 !important;
 
     &::placeholder {
-      color: #a0b4c8 !important;
+      color: #9ca3af !important;
     }
+  }
 
-    &:focus {
-      border-color: #1e88e5 !important;
-    }
+  // select 显示值/占位值（EP 用 -webkit-text-fill-color，需显式覆盖）
+  .el-select__placeholder,
+  .el-select__selected-item {
+    font-size: 12px !important;
+    color: #1f2937 !important;
+    -webkit-text-fill-color: #1f2937 !important;
   }
 
-  .el-input__inner {
-    color: #2c4a6a !important;
+  .el-select__placeholder.is-transparent {
+    color: #9ca3af !important;
+    -webkit-text-fill-color: #9ca3af !important;
+  }
 
-    &::placeholder {
-      color: #a0b4c8 !important;
-    }
+  .el-select__caret {
+    color: #9ca3af !important;
   }
 
   .el-input__prefix,
   .el-input__suffix {
-    color: #8aa8c4;
+    color: #9ca3af;
+  }
+
+  // 多行文本：与单行同一描边语言
+  .el-textarea__inner {
+    background-color: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    color: #1f2937 !important;
+    font-size: 12px !important;
+    border-radius: 8px !important;
+    box-shadow: none !important;
+
+    &::placeholder {
+      color: #9ca3af !important;
+    }
+
+    &:hover { border-color: #d1d5db !important; }
+
+    &:focus {
+      border-color: #3b82f6 !important;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
+    }
   }
 
+  // 禁用态：浅灰底 + 灰边 + 浅字
   .el-select .el-input.is-disabled .el-input__wrapper,
-  .el-input.is-disabled .el-input__wrapper {
-    background-color: #f4f7fa !important;
-    box-shadow: 0 0 0 1px #e0e8f0 inset !important;
+  .el-input.is-disabled .el-input__wrapper,
+  .el-select.is-disabled .el-select__wrapper {
+    background-color: #f9fafb !important;
+    border-color: #e5e7eb !important;
 
     .el-input__inner {
-      color: #8aa8c4 !important;
-      -webkit-text-fill-color: #8aa8c4;
+      color: #9ca3af !important;
+      -webkit-text-fill-color: #9ca3af;
     }
   }
 
-  // 单选/复选/开关文字
+  // 单选/复选文字
   .el-radio,
   .el-checkbox {
-    color: #2c4a6a;
+    color: #1f2937;
+    font-size: 12px;
 
     &.is-disabled {
-      color: #a0b4c8;
+      color: #9ca3af;
     }
   }
 
   .el-radio__label,
   .el-checkbox__label {
-    color: #2c4a6a;
+    color: #1f2937;
   }
 
   // 表单校验错误
   .el-form-item__error {
-    color: #e05a5a;
+    color: #ef4444;
   }
 
   // 字数统计
   .el-input__count,
   .el-input__count-inner {
-    color: #8aa8c4 !important;
+    color: #9ca3af !important;
     background: transparent !important;
   }
 
@@ -518,54 +608,54 @@
   .pager .el-pagination {
     --el-pagination-bg-color: transparent;
     --el-pagination-button-bg-color: #ffffff;
-    --el-pagination-hover-color: #1e88e5;
-    color: #2c4a6a;
+    --el-pagination-hover-color: #3b82f6;
+    color: #1f2937;
     font-weight: 500;
 
     .el-pagination__total,
     .el-pagination__jump {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     button,
     .el-pager li {
       background-color: #ffffff !important;
-      color: #2c4a6a !important;
-      border: 1px solid #d5e1ee;
+      color: #1f2937 !important;
+      border: 1px solid #e5e7eb;
       border-radius: 6px;
       font-weight: 500;
 
       &:hover {
-        color: #1e88e5 !important;
-        border-color: #1e88e5;
-        background-color: #f0f7ff !important;
+        color: #3b82f6 !important;
+        border-color: #3b82f6;
+        background-color: #eff6ff !important;
       }
     }
 
     .el-pager li.is-active {
-      background-color: #1e88e5 !important;
+      background-color: #3b82f6 !important;
       color: #ffffff !important;
-      border-color: #1e88e5;
+      border-color: #3b82f6;
     }
 
     .btn-prev,
     .btn-next {
       background-color: #ffffff !important;
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
 
       &:disabled,
       &.is-disabled {
-        background-color: #f4f7fa !important;
+        background-color: #f9fafb !important;
         color: #b0c0d0 !important;
       }
     }
 
     .el-select .el-input__wrapper {
       background-color: #ffffff !important;
-      box-shadow: 0 0 0 1px #d5e1ee inset !important;
+      box-shadow: 0 0 0 1px #e5e7eb inset !important;
 
       .el-input__inner {
-        color: #2c4a6a !important;
+        color: #1f2937 !important;
       }
     }
   }
@@ -576,8 +666,8 @@
     &.el-tag--primary {
       &.is-plain,
       &.is-light {
-        color: #1565c0 !important;
-        background-color: #e8f3fe !important;
+        color: #2563eb !important;
+        background-color: #eff6ff !important;
         border-color: #9cc8ef !important;
       }
     }
@@ -621,15 +711,15 @@
 
   // 标签页
   .el-tabs__item {
-    color: #5a7896;
+    color: #6b7280;
 
     &.is-active {
-      color: #1565c0;
+      color: #2563eb;
     }
   }
 
   .el-tabs__active-bar {
-    background-color: #1e88e5;
+    background-color: #3b82f6;
   }
 
   .el-tabs__nav-wrap::after {
@@ -638,23 +728,23 @@
 
   // 描述列表
   .el-descriptions__label {
-    color: #5a7896 !important;
+    color: #6b7280 !important;
     background: #f6f9fc !important;
   }
 
   .el-descriptions__content {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
   }
 
   // 卡片组件
   .el-card {
-    border-color: rgba(30, 136, 229, 0.15);
+    border-color: rgba(59, 130, 246, 0.15);
     box-shadow: 0 4px 14px rgba(30, 60, 100, 0.05);
   }
 
   // 空状态
   .el-empty__description p {
-    color: #6b85a3;
+    color: #9ca3af;
   }
 
   // 加载遮罩（覆盖全局 element-ui.scss 暗色遮罩）
@@ -664,21 +754,21 @@
   }
 
   .el-loading-spinner .path {
-    stroke: #1e88e5 !important;
+    stroke: #3b82f6 !important;
   }
 
   .el-loading-text {
-    color: #1e88e5 !important;
+    color: #3b82f6 !important;
   }
 
   // 开关
   .el-switch__label {
-    color: #2c4a6a;
+    color: #1f2937;
   }
 
   // 下拉菜单（页面内）
   .el-dropdown-menu {
-    color: #2c4a6a;
+    color: #1f2937;
   }
 
   // 警告/提示条
@@ -709,15 +799,15 @@
 
     > .el-button--primary:last-child {
       background-color: #ffffff !important;
-      border-color: #c9d8e8 !important;
-      color: #2c4a6a !important;
+      border-color: #e5e7eb !important;
+      color: #1f2937 !important;
       box-shadow: none !important;
 
       &:hover,
       &:focus {
-        background-color: #f0f7ff !important;
-        border-color: #1e88e5 !important;
-        color: #1e88e5 !important;
+        background-color: #eff6ff !important;
+        border-color: #3b82f6 !important;
+        color: #3b82f6 !important;
       }
     }
   }
@@ -741,27 +831,27 @@
     // 权重设置（第二个 success）-> 白底次要
     > .el-button--success ~ .el-button--success {
       background: #ffffff !important;
-      border-color: #c9d8e8 !important;
-      color: #2c4a6a !important;
+      border-color: #e5e7eb !important;
+      color: #1f2937 !important;
       box-shadow: none !important;
 
       &:hover {
-        background: #f0f7ff !important;
-        border-color: #1e88e5 !important;
-        color: #1e88e5 !important;
+        background: #eff6ff !important;
+        border-color: #3b82f6 !important;
+        color: #3b82f6 !important;
       }
     }
 
     // 成绩更新（第三个 success）-> 蓝（主要操作）
     > .el-button--success ~ .el-button--success ~ .el-button--success {
-      background: #1e88e5 !important;
-      border-color: #1e88e5 !important;
+      background: #3b82f6 !important;
+      border-color: #3b82f6 !important;
       color: #ffffff !important;
-      box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2) !important;
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
 
       &:hover {
-        background: #42a5f5 !important;
-        border-color: #42a5f5 !important;
+        background: #3b82f6 !important;
+        border-color: #3b82f6 !important;
         color: #ffffff !important;
       }
     }
@@ -837,22 +927,22 @@
     // 教师管理页：暗黑遗留的浅色文字在白底上模糊，统一为亮色主题清晰色
     // 名下班级 chip：浅蓝底 + 深蓝字（与 plain primary tag 同系）
     .owned-class-chip {
-      color: #1565c0 !important;
+      color: #2563eb !important;
       border: 1px solid #9cc8ef !important;
-      background: #e8f3fe !important;
+      background: #eff6ff !important;
     }
 
     // 暂无班级：中性灰蓝（与表格空数据文字一致）
     .empty-summary {
-      color: #8aa8c4 !important;
+      color: #9ca3af !important;
     }
 
     // 学生数量：深色科技蓝数字
     .student-count {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
 
       small {
-        color: #6b85a3 !important;
+        color: #9ca3af !important;
       }
     }
 
@@ -871,19 +961,25 @@
         margin-right: 2px;
       }
 
-      // 把文字按钮（is-text / is-link）重置为实心
+      // 文字按钮（is-text / is-link）重铸为统一风格
       &.is-text,
       &.is-link {
+        // Primary：透明底蓝描边，hover 蓝色半透明
         &.el-button--primary {
-          background-color: #1e88e5 !important;
-          border-color: #1e88e5 !important;
-          color: #ffffff !important;
+          background-color: transparent !important;
+          border-color: #3b82f6 !important;
+          color: #3b82f6 !important;
 
           &:hover,
           &:focus {
-            background-color: #42a5f5 !important;
-            border-color: #42a5f5 !important;
-            color: #ffffff !important;
+            background-color: rgba(59, 130, 246, 0.1) !important;
+            border-color: #3b82f6 !important;
+            color: #2563eb !important;
+          }
+
+          &:active {
+            background-color: rgba(59, 130, 246, 0.18) !important;
+            color: #2563eb !important;
           }
         }
 
@@ -914,8 +1010,8 @@
         }
 
         &.el-button--danger {
-          background-color: #e05a5a !important;
-          border-color: #e05a5a !important;
+          background-color: #ef4444 !important;
+          border-color: #ef4444 !important;
           color: #ffffff !important;
 
           &:hover,
@@ -929,14 +1025,14 @@
         // 无类型的文字按钮 -> 白底描边
         &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
           background-color: #ffffff !important;
-          border-color: #c9d8e8 !important;
-          color: #2c4a6a !important;
+          border-color: #e5e7eb !important;
+          color: #1f2937 !important;
 
           &:hover,
           &:focus {
-            background-color: #f0f7ff !important;
-            border-color: #1e88e5 !important;
-            color: #1e88e5 !important;
+            background-color: #eff6ff !important;
+            border-color: #3b82f6 !important;
+            color: #3b82f6 !important;
           }
         }
       }
@@ -961,34 +1057,34 @@
   // 成绩中心只读分数：暗黑遗留亮青字统一为深色科技蓝
   .teacher-score-readonly {
     strong {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
     }
 
     small {
-      color: #6b85a3 !important;
-      border-color: #c9d8e8 !important;
+      color: #9ca3af !important;
+      border-color: #e5e7eb !important;
       background: #f4f8fd !important;
     }
   }
 
-  // 16.3 表头统一：浅蓝底 + 深蓝字（同步修复成绩页 .cell 白字）
+  // 16.3 表头统一：纯白底 + 深黑字 + 灰色分隔线（同步修复成绩页 .cell 白字）
   .el-table {
-    --el-table-header-bg-color: #e3effb;
-    --el-table-header-text-color: #1e3a5f;
+    --el-table-header-bg-color: #ffffff;
+    --el-table-header-text-color: #1f2937;
 
     .el-table__header-wrapper th.el-table__cell,
     .el-table__fixed-header-wrapper th.el-table__cell {
       height: 38px;
       padding: 5px 0 !important;
-      background: linear-gradient(180deg, #eef6fe 0%, #dcebfb 100%) !important;
-      color: #1e3a5f !important;
+      background: #ffffff !important;
+      color: #1f2937 !important;
       font-size: 13px !important;
       font-weight: 600 !important;
       text-shadow: none !important;
-      border-bottom: 1px solid rgba(30, 136, 229, 0.2) !important;
+      border-bottom: 1px solid #e5e7eb !important;
 
       .cell {
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
         font-size: 13px !important;
         font-weight: 600 !important;
         text-shadow: none !important;
@@ -998,8 +1094,8 @@
 
   // 16.5 工具栏按钮统一：32px 高度 + 色板复用全局定义
   // 覆盖容器：.df / .query-bar / .toolbar / .task-toolbar / .filter-section / .toolbar-actions
-  // 色板已在第 6 节 .el-button 统一：primary=#1e88e5 / success=#2ba471 /
-  // warning=#e8a33d / danger=#e05a5a / default=白底描边，此处只控尺寸和换行
+  // 色板已在第 6 节 .el-button 统一：primary=#3b82f6 / success=#2ba471 /
+  // warning=#e8a33d / danger=#ef4444 / default=白底描边，此处只控尺寸和换行
   .df,
   .query-bar,
   .toolbar,
@@ -1104,19 +1200,19 @@
  * （置于 body 作用域，让 teleport 弹层 + 页面内组件都命中）
  * ============================================================= */
 body.teacher-light-mode {
-  --el-color-primary: #1e88e5;
-  --el-color-primary-light-3: #42a5f5;
-  --el-color-primary-light-5: #64b5f6;
-  --el-color-primary-light-7: #90caf9;
-  --el-color-primary-light-8: #bbdefb;
-  --el-color-primary-light-9: #e3f2fd;
-  --el-color-primary-dark-2: #1565c0;
+  --el-color-primary: #3b82f6;
+  --el-color-primary-light-3: #60a5fa;
+  --el-color-primary-light-5: #93c5fd;
+  --el-color-primary-light-7: #bfdbfe;
+  --el-color-primary-light-8: #dbeafe;
+  --el-color-primary-light-9: #eff6ff;
+  --el-color-primary-dark-2: #2563eb;
 
   --el-color-success: #2ba471;
   --el-color-warning: #e8a33d;
-  --el-color-danger: #e05a5a;
-  --el-color-error: #e05a5a;
-  --el-color-info: #6b85a3;
+  --el-color-danger: #ef4444;
+  --el-color-error: #ef4444;
+  --el-color-info: #9ca3af;
 }
 
 /* =============================================================
@@ -1125,16 +1221,16 @@ body.teacher-light-mode {
 body.teacher-light-mode {
   // 全局无条件暗色规则的重置（index.scss / element-ui.scss）
   .el-input__inner {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
 
     &::placeholder {
-      color: #a0b4c8 !important;
+      color: #9ca3af !important;
     }
   }
 
   .el-input__count,
   .el-input__count-inner {
-    color: #8aa8c4 !important;
+    color: #9ca3af !important;
     background: transparent !important;
   }
 
@@ -1142,21 +1238,21 @@ body.teacher-light-mode {
   .el-select__popper.el-popper,
   .el-select-dropdown {
     background: #ffffff !important;
-    border: 1px solid #d5e1ee !important;
+    border: 1px solid #e5e7eb !important;
     box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
 
     .el-select-dropdown__item {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
 
       &.is-hovering,
       &:hover {
-        background-color: #f0f7ff !important;
-        color: #1e88e5 !important;
+        background-color: #eff6ff !important;
+        color: #3b82f6 !important;
       }
 
       &.is-selected {
-        color: #1e88e5 !important;
-        background-color: #e8f3fe !important;
+        color: #3b82f6 !important;
+        background-color: #eff6ff !important;
         font-weight: 600;
       }
 
@@ -1166,18 +1262,18 @@ body.teacher-light-mode {
     }
 
     .el-select-dropdown__empty {
-      color: #6b85a3 !important;
+      color: #9ca3af !important;
     }
 
     .el-popper__arrow::before {
       background: #ffffff !important;
-      border-color: #d5e1ee !important;
+      border-color: #e5e7eb !important;
     }
   }
 
   // 分页每页条数下拉里的输入框
   .el-pagination .el-input__inner {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
   }
 
   // 日期/时间选择器面板
@@ -1185,33 +1281,33 @@ body.teacher-light-mode {
   .el-date-picker,
   .el-time-panel {
     background: #ffffff !important;
-    border: 1px solid #d5e1ee !important;
+    border: 1px solid #e5e7eb !important;
     box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
 
     .el-picker-panel__icon-btn,
     .el-picker-panel__header-label,
     .el-date-picker__header-label,
     .el-date-table th {
-      color: #5a7896 !important;
+      color: #6b7280 !important;
     }
 
     .el-date-table td .el-date-table-cell__text {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
 
       &:hover {
-        background-color: #e8f3fe !important;
-        color: #1e88e5 !important;
+        background-color: #eff6ff !important;
+        color: #3b82f6 !important;
       }
     }
 
     .el-date-table td.today .el-date-table-cell__text {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
       font-weight: 700;
     }
 
     .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
-      background-color: #1e88e5 !important;
+      background-color: #3b82f6 !important;
       color: #ffffff !important;
     }
 
@@ -1221,15 +1317,15 @@ body.teacher-light-mode {
     }
 
     .el-time-spinner__item {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
 
       &.is-active {
-        color: #1e88e5 !important;
+        color: #3b82f6 !important;
       }
 
       &:hover:not(.is-disabled) {
-        background: #f0f7ff !important;
-        color: #1e88e5 !important;
+        background: #eff6ff !important;
+        color: #3b82f6 !important;
       }
     }
 
@@ -1243,7 +1339,7 @@ body.teacher-light-mode {
     }
 
     .el-time-panel__btn.confirm {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
     }
   }
 
@@ -1251,36 +1347,36 @@ body.teacher-light-mode {
   .teacher-dialog,
   .admin-edit-dialog {
     background: #ffffff !important;
-    border: 1px solid #d5e1ee !important;
+    border: 1px solid #e5e7eb !important;
     border-radius: 16px !important;
     box-shadow: 0 20px 56px rgba(30, 60, 100, 0.18) !important;
     overflow: hidden;
 
     .el-dialog__header {
-      background: linear-gradient(135deg, #e8f3fe 0%, #d8ebfb 100%) !important;
+      background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
       padding: 18px 24px;
       margin: 0;
-      border-bottom: 1px solid rgba(30, 136, 229, 0.15);
+      border-bottom: 1px solid rgba(59, 130, 246, 0.15);
 
       .el-dialog__title {
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
         font-weight: 700;
         font-size: 17px;
         text-shadow: none !important;
       }
 
       .el-dialog__headerbtn .el-dialog__close {
-        color: #5a7896 !important;
+        color: #6b7280 !important;
 
         &:hover {
-          color: #1e88e5 !important;
+          color: #3b82f6 !important;
         }
       }
     }
 
     .el-dialog__body {
       background: #ffffff !important;
-      color: #2c4a6a;
+      color: #1f2937;
       padding: 24px 28px;
     }
 
@@ -1292,7 +1388,7 @@ body.teacher-light-mode {
 
     .el-form-item__label,
     label {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     .el-input__wrapper,
@@ -1303,18 +1399,18 @@ body.teacher-light-mode {
 
     .el-input__inner,
     .el-textarea__inner {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     .el-radio__label,
     .el-checkbox__label {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     // 班级成员管理弹窗内的搜索工具条
     .member-toolbar {
       background: #f8fbfe !important;
-      border: 1px solid rgba(30, 136, 229, 0.12) !important;
+      border: 1px solid rgba(59, 130, 246, 0.12) !important;
     }
   }
 
@@ -1322,18 +1418,18 @@ body.teacher-light-mode {
   .el-overlay {
     .el-message-box {
       background: #ffffff !important;
-      border: 1px solid #d5e1ee !important;
+      border: 1px solid #e5e7eb !important;
       box-shadow: 0 20px 56px rgba(30, 60, 100, 0.2) !important;
       border-radius: 14px;
 
       .el-message-box__title,
       .el-message-box__content,
       .el-message-box__message p {
-        color: #2c4a6a !important;
+        color: #1f2937 !important;
       }
 
       .el-message-box__headerbtn .el-message-box__close {
-        color: #5a7896 !important;
+        color: #6b7280 !important;
       }
     }
   }
@@ -1341,27 +1437,27 @@ body.teacher-light-mode {
   // 轻提示
   .el-message {
     background: #ffffff !important;
-    border: 1px solid #d5e1ee !important;
+    border: 1px solid #e5e7eb !important;
     box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
 
     .el-message__content {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
   }
 
   // 通知
   .el-notification {
     background: #ffffff !important;
-    border: 1px solid #d5e1ee !important;
+    border: 1px solid #e5e7eb !important;
     box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
 
     .el-notification__title {
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
     }
 
     .el-notification__content {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
   }
 
@@ -1373,29 +1469,29 @@ body.teacher-light-mode {
   }
 
   .el-loading-spinner .path {
-    stroke: #1e88e5 !important;
+    stroke: #3b82f6 !important;
   }
 
   .el-loading-text {
-    color: #1e88e5 !important;
+    color: #3b82f6 !important;
   }
 
   /* ---------- 11. 表格 CSS 变量层兜底（admin-theme 通过变量注入暗色） ---------- */
   .el-table {
     --el-table-bg-color: #ffffff;
     --el-table-tr-bg-color: #ffffff;
-    --el-table-header-bg-color: #e3effb;
-    --el-table-header-text-color: #1e3a5f;
-    --el-table-text-color: #2c4a6a;
+    --el-table-header-bg-color: #ffffff;
+    --el-table-header-text-color: #1f2937;
+    --el-table-text-color: #1f2937;
     --el-table-border-color: #edf2f7;
-    --el-table-row-hover-bg-color: #f0f7ff;
+    --el-table-row-hover-bg-color: #f9fafb;
   }
 
   /* ---------- 12. 成绩中心（school-admin-workbench）补充 ---------- */
   .school-admin-workbench {
     .toolbar {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.18) !important;
+      border-color: rgba(59, 130, 246, 0.18) !important;
     }
 
     // 工具栏按钮：覆盖 admin-theme.scss 的深色渐变，统一为亮色系统色
@@ -1405,22 +1501,27 @@ body.teacher-light-mode {
         display: none !important;
       }
 
-      // Primary（查询等主要操作）— 科技蓝
+      // Primary（查询等主要操作）— 透明底蓝描边，hover 蓝色半透明
       &[type="primary"],
       &.el-button--primary {
-        background: #1e88e5 !important;
-        border-color: #1e88e5 !important;
-        color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2) !important;
+        background: transparent !important;
+        border-color: #3b82f6 !important;
+        color: #3b82f6 !important;
+        box-shadow: none !important;
         backdrop-filter: none !important;
 
         &:hover {
-          background: #42a5f5 !important;
-          border-color: #42a5f5 !important;
-          color: #ffffff !important;
-          box-shadow: 0 6px 16px rgba(30, 136, 229, 0.3) !important;
+          background: rgba(59, 130, 246, 0.1) !important;
+          border-color: #3b82f6 !important;
+          color: #2563eb !important;
+          box-shadow: none !important;
           transform: none !important;
         }
+
+        &:active {
+          background: rgba(59, 130, 246, 0.18) !important;
+          color: #2563eb !important;
+        }
       }
 
       // Success（导出/新增等）— 绿色
@@ -1443,8 +1544,8 @@ body.teacher-light-mode {
       // Danger（删除等）— 红色
       &[type="danger"],
       &.el-button--danger {
-        background: #e05a5a !important;
-        border-color: #e05a5a !important;
+        background: #ef4444 !important;
+        border-color: #ef4444 !important;
         color: #ffffff !important;
 
         &:hover {
@@ -1469,14 +1570,14 @@ body.teacher-light-mode {
       // 默认按钮（重置等）— 白底深字
       &:not([type="primary"]):not([type="success"]):not([type="danger"]):not([type="warning"]):not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(.el-button--warning) {
         background: #ffffff !important;
-        border-color: #c9d8e8 !important;
-        color: #2c4a6a !important;
+        border-color: #e5e7eb !important;
+        color: #1f2937 !important;
         backdrop-filter: none !important;
 
         &:hover {
-          background: #f0f7ff !important;
-          border-color: #1e88e5 !important;
-          color: #1e88e5 !important;
+          background: #eff6ff !important;
+          border-color: #3b82f6 !important;
+          color: #3b82f6 !important;
           transform: none !important;
         }
       }
@@ -1484,7 +1585,7 @@ body.teacher-light-mode {
 
     .admin-form {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.18) !important;
+      border-color: rgba(59, 130, 246, 0.18) !important;
     }
 
     .el-table .el-loading-mask {
@@ -1492,16 +1593,16 @@ body.teacher-light-mode {
     }
 
     .el-table .el-loading-spinner .path {
-      stroke: #1e88e5 !important;
+      stroke: #3b82f6 !important;
     }
 
     .el-table .el-loading-text {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
     }
 
     // 表格操作按钮
     .action-btn {
-      color: #1565c0 !important;
+      color: #2563eb !important;
     }
 
     .action-btn.el-button--danger {
@@ -1512,9 +1613,9 @@ body.teacher-light-mode {
   /* ---------- 13. 教师首页仪表盘补充 ---------- */
   .grade-center {
     .card-badge {
-      color: #1565c0 !important;
-      background: rgba(30, 136, 229, 0.1) !important;
-      border-color: rgba(30, 136, 229, 0.25) !important;
+      color: #2563eb !important;
+      background: rgba(59, 130, 246, 0.1) !important;
+      border-color: rgba(59, 130, 246, 0.25) !important;
     }
 
     .legend-dots,
@@ -1526,9 +1627,9 @@ body.teacher-light-mode {
 
     // 卡片右上角图标：荧光青/绿 -> 科技蓝/绿
     .trend-icon {
-      background: linear-gradient(135deg, rgba(30, 136, 229, 0.12), rgba(30, 136, 229, 0.04)) !important;
-      border-color: rgba(30, 136, 229, 0.3) !important;
-      color: #1565c0 !important;
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04)) !important;
+      border-color: rgba(59, 130, 246, 0.3) !important;
+      color: #2563eb !important;
     }
 
     .stats-icon {
@@ -1544,21 +1645,21 @@ body.teacher-light-mode {
     }
 
     .el-select__caret {
-      color: #8aa8c4 !important;
+      color: #9ca3af !important;
     }
 
     .card-footer {
-      border-top-color: rgba(30, 136, 229, 0.12) !important;
+      border-top-color: rgba(59, 130, 246, 0.12) !important;
     }
 
     .card-glow {
-      background: radial-gradient(circle at 30% 30%, rgba(30, 136, 229, 0.06), transparent 50%) !important;
+      background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.06), transparent 50%) !important;
     }
 
     // 成绩卡片：白底 + 淡彩色顶边
     .score-card {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.15) !important;
+      border-color: rgba(59, 130, 246, 0.15) !important;
 
       &:hover {
         box-shadow: 0 10px 26px rgba(30, 60, 100, 0.1) !important;
@@ -1585,14 +1686,14 @@ body.teacher-light-mode {
     }
 
     .score-number {
-      background: linear-gradient(135deg, #1565c0, #1e88e5) !important;
+      background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
       -webkit-background-clip: text !important;
       background-clip: text !important;
       -webkit-text-fill-color: transparent !important;
     }
 
     .score-unit {
-      color: #6b85a3 !important;
+      color: #9ca3af !important;
     }
   }
 
@@ -1606,41 +1707,41 @@ body.teacher-light-mode {
     .header-stats {
       .stat-item,
       .header-stat {
-        color: #2c4a6a !important;
-        background: #e8f3fe !important;
-        border-color: rgba(30, 136, 229, 0.25) !important;
+        color: #1f2937 !important;
+        background: #eff6ff !important;
+        border-color: rgba(59, 130, 246, 0.25) !important;
       }
 
       .stat-label {
-        color: #5a7896 !important;
+        color: #6b7280 !important;
       }
 
       .stat-value {
-        color: #1565c0 !important;
+        color: #2563eb !important;
         text-shadow: none !important;
       }
     }
 
     // 页面副标题加深
     .page-header .page-subtitle {
-      color: #5a7896 !important;
+      color: #6b7280 !important;
     }
 
     .class-filter .filter-label {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     // 搜索框
     .search-box {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.2) !important;
+      border-color: rgba(59, 130, 246, 0.2) !important;
       box-shadow: none !important;
 
       .el-input__inner {
-        color: #2c4a6a !important;
+        color: #1f2937 !important;
 
         &::placeholder {
-          color: #a0b4c8 !important;
+          color: #9ca3af !important;
         }
       }
     }
@@ -1649,16 +1750,35 @@ body.teacher-light-mode {
     .toolbar-btn {
       border-radius: 10px;
 
-      &.el-button--primary,
+      // Primary：透明底蓝描边，hover 蓝色半透明
+      &.el-button--primary {
+        background: transparent !important;
+        border-color: #3b82f6 !important;
+        color: #3b82f6 !important;
+        box-shadow: none !important;
+
+        &:hover {
+          background: rgba(59, 130, 246, 0.1) !important;
+          border-color: #3b82f6 !important;
+          color: #2563eb !important;
+        }
+
+        &:active {
+          background: rgba(59, 130, 246, 0.18) !important;
+          color: #2563eb !important;
+        }
+      }
+
+      // Success：绿色实色（语义色）
       &.el-button--success {
-        background: #1e88e5 !important;
-        border-color: #1e88e5 !important;
+        background: #2ba471 !important;
+        border-color: #2ba471 !important;
         color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2) !important;
+        box-shadow: 0 4px 12px rgba(43, 164, 113, 0.2) !important;
 
         &:hover {
-          background: #42a5f5 !important;
-          border-color: #42a5f5 !important;
+          background: #3cbb85 !important;
+          border-color: #3cbb85 !important;
         }
       }
 
@@ -1674,8 +1794,8 @@ body.teacher-light-mode {
 
         &:hover,
         &:focus {
-          background: #e05a5a !important;
-          border-color: #e05a5a !important;
+          background: #ef4444 !important;
+          border-color: #ef4444 !important;
           color: #ffffff !important;
           box-shadow: none !important;
           transform: none !important;
@@ -1691,14 +1811,14 @@ body.teacher-light-mode {
     // 项目筛选容器
     .project-filter {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.15) !important;
+      border-color: rgba(59, 130, 246, 0.15) !important;
       box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;
 
       .filter-label {
-        color: #2c4a6a !important;
+        color: #1f2937 !important;
 
         svg {
-          color: #1e88e5 !important;
+          color: #3b82f6 !important;
         }
       }
     }
@@ -1707,32 +1827,32 @@ body.teacher-light-mode {
     .project-tabs {
       .project-tab {
         background: #ffffff !important;
-        border-color: rgba(30, 136, 229, 0.15) !important;
-        color: #2c4a6a !important;
+        border-color: rgba(59, 130, 246, 0.15) !important;
+        color: #1f2937 !important;
 
         .tab-name {
-          color: #2c4a6a !important;
+          color: #1f2937 !important;
         }
 
         .tab-count {
-          background: rgba(30, 136, 229, 0.1) !important;
-          color: #1565c0 !important;
+          background: rgba(59, 130, 246, 0.1) !important;
+          color: #2563eb !important;
         }
 
         &:hover {
-          border-color: rgba(30, 136, 229, 0.4) !important;
+          border-color: rgba(59, 130, 246, 0.4) !important;
         }
 
         &.active {
-          background: linear-gradient(135deg, rgba(30, 136, 229, 0.14), rgba(66, 165, 245, 0.06)) !important;
-          border-color: rgba(30, 136, 229, 0.5) !important;
+          background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
+          border-color: rgba(59, 130, 246, 0.5) !important;
 
           .tab-name {
-            color: #1565c0 !important;
+            color: #2563eb !important;
           }
 
           .tab-count {
-            background: #1e88e5 !important;
+            background: #3b82f6 !important;
             color: #ffffff !important;
           }
         }
@@ -1758,12 +1878,12 @@ body.teacher-light-mode {
       padding: 14px !important;
       border-radius: 12px !important;
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.15) !important;
+      border-color: rgba(59, 130, 246, 0.15) !important;
       box-shadow: 0 6px 18px rgba(30, 60, 100, 0.06) !important;
 
       &:hover {
         transform: none !important;
-        border-color: rgba(30, 136, 229, 0.4) !important;
+        border-color: rgba(59, 130, 246, 0.4) !important;
         box-shadow: 0 10px 28px rgba(30, 60, 100, 0.1) !important;
       }
 
@@ -1779,9 +1899,9 @@ body.teacher-light-mode {
       .task-project {
         font-size: 11px !important;
         padding: 2px 8px !important;
-        color: #1565c0 !important;
-        background: rgba(30, 136, 229, 0.1) !important;
-        border-color: rgba(30, 136, 229, 0.25) !important;
+        color: #2563eb !important;
+        background: rgba(59, 130, 246, 0.1) !important;
+        border-color: rgba(59, 130, 246, 0.25) !important;
       }
 
       // 启用状态：荧光绿在白底不可见，改为深绿实色标签
@@ -1789,8 +1909,8 @@ body.teacher-light-mode {
         font-size: 10px !important;
         padding: 2px 8px !important;
         color: #b04545 !important;
-        background: rgba(224, 90, 90, 0.1) !important;
-        border-color: rgba(224, 90, 90, 0.3) !important;
+        background: rgba(239, 68, 68, 0.1) !important;
+        border-color: rgba(239, 68, 68, 0.3) !important;
 
         &.enabled {
           color: #1e7a4f !important;
@@ -1807,7 +1927,7 @@ body.teacher-light-mode {
       .task-name {
         margin: 0 0 8px !important;
         font-size: 14px !important;
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
       }
 
       .task-meta {
@@ -1817,7 +1937,7 @@ body.teacher-light-mode {
 
       .meta-item {
         font-size: 11px !important;
-        color: #5a7896 !important;
+        color: #6b7280 !important;
       }
 
       .edit-btn {
@@ -1826,12 +1946,19 @@ body.teacher-light-mode {
         padding: 0 10px !important;
         font-size: 12px !important;
         border-radius: 8px !important;
-        background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
-        color: #ffffff !important;
-        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.22) !important;
+        background: transparent !important;
+        border: 1px solid #3b82f6 !important;
+        color: #3b82f6 !important;
+        box-shadow: none !important;
 
         &:hover {
-          background: linear-gradient(135deg, #42a5f5, #1e88e5) !important;
+          background: rgba(59, 130, 246, 0.1) !important;
+          color: #2563eb !important;
+        }
+
+        &:active {
+          background: rgba(59, 130, 246, 0.18) !important;
+          color: #2563eb !important;
         }
       }
     }
@@ -1847,13 +1974,13 @@ body.teacher-light-mode {
     }
 
     .task-empty {
-      color: #6b85a3 !important;
+      color: #9ca3af !important;
     }
 
     // 表单内白色 label（scoped 中带 !important）
     .task-form .el-form-item__label,
     .drawer-shell .el-form-item__label {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     // 窄屏下列数收敛
@@ -1887,83 +2014,83 @@ body.teacher-light-mode {
   .training-task-drawer {
     .drawer-shell {
       background: #f5f8fc !important;
-      color: #2c4a6a;
+      color: #1f2937;
     }
 
     .drawer-header {
-      background: linear-gradient(90deg, rgba(30, 136, 229, 0.1), rgba(66, 165, 245, 0.04)) !important;
-      border-bottom: 1px solid rgba(30, 136, 229, 0.12) !important;
+      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.04)) !important;
+      border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
     }
 
     // 标题区文字：h3 白字 / p 浅蓝字在浅底上不可见，统一深色
     .drawer-heading {
       h3 {
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
       }
 
       p {
-        color: #6b85a3 !important;
+        color: #9ca3af !important;
       }
     }
 
     // 信息条：scoped 为 rgba(0,10,20,0.3) 深底，亮色场景发灰，改为浅蓝底
     .drawer-identity {
       background: #eef5fc !important;
-      border-bottom: 1px solid rgba(30, 136, 229, 0.12) !important;
+      border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
     }
 
     // 信息条内项目值：确保深色
     .identity-content {
       strong {
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
       }
     }
 
     // 底部操作条：scoped 为 rgba(0,10,20,0.95) 近黑，改为白底浅分隔线
     .drawer-footer {
       background: #ffffff !important;
-      border-top: 1px solid rgba(30, 136, 229, 0.12) !important;
+      border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
       box-shadow: 0 -4px 16px rgba(30, 60, 100, 0.06) !important;
     }
 
     // 取消/关闭按钮：scoped 暗色玻璃态，改为白底描边深色字
     .cancel-btn {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
       background: #ffffff !important;
-      border: 1px solid #c9d8e8 !important;
+      border: 1px solid #e5e7eb !important;
 
       &:hover {
-        color: #1e88e5 !important;
-        background: #f0f7ff !important;
-        border-color: #1e88e5 !important;
+        color: #3b82f6 !important;
+        background: #eff6ff !important;
+        border-color: #3b82f6 !important;
       }
     }
 
     .drawer-kicker {
-      color: #1565c0 !important;
-      background: rgba(30, 136, 229, 0.1) !important;
+      color: #2563eb !important;
+      background: rgba(59, 130, 246, 0.1) !important;
     }
 
     .drawer-close-button {
-      color: #5a7896 !important;
-      background: rgba(30, 136, 229, 0.08) !important;
+      color: #6b7280 !important;
+      background: rgba(59, 130, 246, 0.08) !important;
 
       &:hover {
         color: #ffffff !important;
-        background: #1e88e5 !important;
+        background: #3b82f6 !important;
       }
     }
 
     .identity-item {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.12) !important;
+      border-color: rgba(59, 130, 246, 0.12) !important;
 
       .identity-label {
-        color: #5a7896 !important;
+        color: #6b7280 !important;
       }
 
       .status-value {
-        color: #e05a5a !important;
+        color: #ef4444 !important;
 
         &.enabled {
           color: #2ba471 !important;
@@ -1973,26 +2100,26 @@ body.teacher-light-mode {
 
     .drawer-section {
       background: #ffffff !important;
-      border-color: rgba(30, 136, 229, 0.12) !important;
+      border-color: rgba(59, 130, 246, 0.12) !important;
     }
 
     .section-title {
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
 
       .section-number {
-        background: rgba(30, 136, 229, 0.12) !important;
-        color: #1e88e5 !important;
+        background: rgba(59, 130, 246, 0.12) !important;
+        color: #3b82f6 !important;
       }
     }
 
     // h4/p 在 scoped 中有显式浅色（#fff / rgba(200,230,255,.5)），继承压不住，需显式覆盖
     .section-info {
       h4 {
-        color: #1e3a5f !important;
+        color: #1f2937 !important;
       }
 
       p {
-        color: #8aa8c4 !important;
+        color: #9ca3af !important;
       }
     }
 
@@ -2000,66 +2127,66 @@ body.teacher-light-mode {
     .step-item,
     .material-row {
       background: #f8fbfe !important;
-      border-color: rgba(30, 136, 229, 0.12) !important;
-      color: #2c4a6a !important;
+      border-color: rgba(59, 130, 246, 0.12) !important;
+      color: #1f2937 !important;
 
       .objective-number,
       .step-number {
-        background: rgba(30, 136, 229, 0.1) !important;
-        border-color: rgba(30, 136, 229, 0.25) !important;
-        color: #1e88e5 !important;
+        background: rgba(59, 130, 246, 0.1) !important;
+        border-color: rgba(59, 130, 246, 0.25) !important;
+        color: #3b82f6 !important;
       }
     }
 
     .material-placeholder {
-      color: #8aa8c4 !important;
+      color: #9ca3af !important;
     }
 
     .material-link {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
     }
 
     .add-step-button,
     .add-objective-button,
     .upload-btn {
-      background: rgba(30, 136, 229, 0.08) !important;
-      border-color: rgba(30, 136, 229, 0.3) !important;
-      color: #1e88e5 !important;
+      background: rgba(59, 130, 246, 0.08) !important;
+      border-color: rgba(59, 130, 246, 0.3) !important;
+      color: #3b82f6 !important;
 
       &:hover {
-        background: #1e88e5 !important;
+        background: #3b82f6 !important;
         color: #ffffff !important;
       }
     }
 
     .remove-btn {
-      color: #e05a5a !important;
-      border-color: rgba(224, 90, 90, 0.3) !important;
+      color: #ef4444 !important;
+      border-color: rgba(239, 68, 68, 0.3) !important;
 
       &:hover {
-        background: rgba(224, 90, 90, 0.08) !important;
+        background: rgba(239, 68, 68, 0.08) !important;
       }
     }
 
     // 抽屉内表单 label/输入框
     .el-form-item__label {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
     }
 
     .el-input__wrapper,
     .el-select .el-input__wrapper,
     .el-textarea__inner {
       background-color: #ffffff !important;
-      box-shadow: 0 0 0 1px #c9d8e8 inset !important;
-      border-color: #c9d8e8 !important;
+      box-shadow: 0 0 0 1px #e5e7eb inset !important;
+      border-color: #e5e7eb !important;
     }
 
     .el-input__inner,
     .el-textarea__inner {
-      color: #2c4a6a !important;
+      color: #1f2937 !important;
 
       &::placeholder {
-        color: #a0b4c8 !important;
+        color: #9ca3af !important;
       }
     }
   }
@@ -2067,19 +2194,19 @@ body.teacher-light-mode {
   // 教师端其他 el-drawer 默认亮色兜底
   .el-drawer {
     .el-drawer__header {
-      color: #1e3a5f;
+      color: #1f2937;
       margin-bottom: 0;
       padding: 18px 24px;
       border-bottom: 1px solid #edf2f7;
     }
 
     .el-drawer__title {
-      color: #1e3a5f;
+      color: #1f2937;
       font-weight: 700;
     }
 
     .el-drawer__close-btn .el-icon {
-      color: #5a7896;
+      color: #6b7280;
     }
   }
 }
@@ -2090,31 +2217,31 @@ body.teacher-light-mode {
  * ============================================================= */
 #app .teacherLayout .task-review {
   background: #ffffff !important;
-  border: 1px solid rgba(30, 136, 229, 0.15) !important;
+  border: 1px solid rgba(59, 130, 246, 0.15) !important;
   border-radius: 14px;
   box-shadow: 0 6px 20px rgba(30, 60, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
 
   // 左侧筛选 + 学生列表栏
   .task-review__sidebar {
     background: #f8fbfe !important;
-    border-right: 1px solid rgba(30, 136, 229, 0.12) !important;
+    border-right: 1px solid rgba(59, 130, 246, 0.12) !important;
   }
 
   .task-review__filters {
     background: #ffffff !important;
-    border: 1px solid rgba(30, 136, 229, 0.15) !important;
+    border: 1px solid rgba(59, 130, 246, 0.15) !important;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(30, 60, 100, 0.04);
   }
 
   // "学生列表（6）" 标题
   .task-review__list-head {
-    color: #1e3a5f !important;
+    color: #1f2937 !important;
     font-weight: 700;
   }
 
   .task-review__readonly-tip {
-    color: #6b85a3 !important;
+    color: #9ca3af !important;
   }
 
   // 右侧学生预览区
@@ -2124,15 +2251,15 @@ body.teacher-light-mode {
 
   // 学生姓名 + 任务副标题
   .task-review__student-head {
-    border-bottom: 1px solid rgba(30, 136, 229, 0.12) !important;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
 
     h2 {
-      color: #1e3a5f !important;
+      color: #1f2937 !important;
       text-shadow: none !important;
     }
 
     p {
-      color: #5a7896 !important;
+      color: #6b7280 !important;
     }
   }
 
@@ -2141,39 +2268,39 @@ body.teacher-light-mode {
     color: #46607d !important;
 
     span {
-      background: #e8f3fe !important;
-      border: 1px solid rgba(30, 136, 229, 0.25) !important;
+      background: #eff6ff !important;
+      border: 1px solid rgba(59, 130, 246, 0.25) !important;
     }
 
     strong {
-      color: #1e88e5 !important;
+      color: #3b82f6 !important;
     }
   }
 
   // iframe 滚动容器：移除暗色 scrollbar，改用亮色系统滚动条
   .task-review__student-preview-scroll {
-    border: 1px solid rgba(30, 136, 229, 0.18) !important;
+    border: 1px solid rgba(59, 130, 246, 0.18) !important;
     border-radius: 10px;
-    scrollbar-color: #9cc8ef #f0f7ff;
+    scrollbar-color: #9cc8ef #eff6ff;
 
     &::-webkit-scrollbar-track {
-      background: #f0f7ff !important;
+      background: #eff6ff !important;
     }
 
     &::-webkit-scrollbar-thumb {
       background: #9cc8ef !important;
       border-radius: 8px;
-      border: 2px solid #f0f7ff !important;
+      border: 2px solid #eff6ff !important;
     }
   }
 
   // 批量打分弹窗内说明文字
   .task-review__batch-copy {
-    color: #2c4a6a !important;
+    color: #1f2937 !important;
   }
 
   // 选中行高亮（scoped 用了 :deep() 提权，这里用类名+ !important 覆盖）
   .task-review__student-table .task-review__selected-row > td {
-    background: #e8f3fe !important;
+    background: #eff6ff !important;
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 66dcd27..27dd712 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -332,15 +332,17 @@ router.beforeEach((to, from, next) => {
     color: rgba(189, 221, 244, 0.58);
   }
 
+  // 按钮配色已统一由 src/assets/styles/teacher-light.scss 接管，
+  // 此处不再声明 background 渐变（旧深色风残留会覆盖 background-image）
   .el-button--primary {
-    border-color: rgba(48, 185, 255, 0.85);
-    background: linear-gradient(135deg, #078dce, #1557d6);
-    box-shadow: 0 8px 18px rgba(0, 110, 220, 0.24);
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
   }
 
   .el-button--warning {
-    border-color: rgba(245, 166, 35, 0.75);
-    background: linear-gradient(135deg, #d99620, #b76418);
+    border-color: transparent;
+    background: transparent;
   }
 
   .el-button.is-text {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 4949c82..70a8778 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -564,114 +564,144 @@ onMounted(() => {
 }
 
 .teacher-navbar {
-  // 教师端亮色主题：浅色玻璃质感 + 蓝色点缀，保持科技感
-  background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 50%, #eaf2fb 100%) !important;
-  border-bottom: 1px solid rgba(30, 136, 229, 0.18);
-  box-shadow: 0 6px 24px rgba(30, 60, 100, 0.08);
-  backdrop-filter: blur(20px);
+  // 极简 SaaS 教育风：纯白 + 细底边线，与页面内容区同一画布
+  background: #ffffff !important;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: none;
+  backdrop-filter: none;
+
+  // 蓝色光点装饰与极简白底不匹配，移除
+  .nav-bg-decoration { display: none; }
+
+  // 品牌区：去渐变去模糊，logo 描边收敛为教育蓝
+  .TnavTitle {
+    background: transparent;
+    backdrop-filter: none;
 
-  // 菜单项：浅色文字 + 轻量描边
+    .logo-area {
+      .logo-icon {
+        filter: none;
+
+        path, circle { stroke: #3b82f6; }
+        path:first-child { fill: rgba(59, 130, 246, 0.1); }
+      }
+
+      span {
+        color: #1f2937;
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0;
+      }
+    }
+  }
+
+  // 顶部导航：文字式，灰字 → hover 深黑 → 激活教育蓝 + 下划线
   .el-ment {
-    color: #3a5a7a;
+    color: #6b7280;
 
     .el-ment-item {
-      color: #3a5a7a;
-      background: rgba(30, 136, 229, 0.06);
-      border: 1px solid rgba(30, 136, 229, 0.12);
+      color: #6b7280;
+      background: transparent;
+      border: 0;
+      transform: none;
 
       .menu-indicator {
-        background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+        height: 2px;
+        background: #3b82f6;
       }
 
       &:hover {
-        color: #1e88e5;
-        background: rgba(30, 136, 229, 0.12);
-        border-color: rgba(30, 136, 229, 0.28);
+        color: #1f2937;
+        background: transparent;
+        transform: none;
 
         .menu-indicator {
-          background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+          transform: translateX(-50%) scaleX(0.6);
+          background: #3b82f6;
         }
       }
     }
 
     .el-ment-item-active {
-      color: #1e88e5;
-      background: linear-gradient(135deg, rgba(30, 136, 229, 0.18), rgba(66, 165, 245, 0.08));
-      border-color: rgba(30, 136, 229, 0.4);
-      box-shadow: 0 4px 14px rgba(30, 136, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      color: #3b82f6;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
 
       .menu-indicator {
-        background: linear-gradient(90deg, transparent, #1e88e5, transparent);
+        transform: translateX(-50%) scaleX(1);
+        background: #3b82f6;
       }
 
-      &::before {
-        background: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.7), transparent);
-      }
+      &::before { display: none; }
     }
 
+    // teacher-nav 定位规则保留，胶囊样式全部清除
     &.teacher-nav {
       .el-ment-item {
-        color: #3a5a7a;
-        background: rgba(30, 136, 229, 0.05);
-        border: 1px solid rgba(30, 136, 229, 0.1);
+        color: #6b7280;
+        background: transparent;
+        border: 0;
 
         &:hover {
-          color: #1e88e5;
-          background: rgba(30, 136, 229, 0.12);
-          border-color: rgba(30, 136, 229, 0.28);
+          color: #1f2937;
+          background: transparent;
         }
       }
 
       .el-ment-item-active {
-        color: #1e88e5;
-        background: linear-gradient(135deg, rgba(30, 136, 229, 0.2), rgba(66, 165, 245, 0.1));
-        border-color: rgba(30, 136, 229, 0.45);
-        box-shadow: 0 4px 16px rgba(30, 136, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+        color: #3b82f6;
+        background: transparent;
+        border: 0;
+        box-shadow: none;
 
-        .menu-indicator {
-          background: linear-gradient(90deg, transparent, #1e88e5, transparent);
-        }
+        .menu-indicator { background: #3b82f6; }
       }
     }
   }
 
-  // 右侧区域：浅色背景渐变
+  // 右侧区域：透明，与整行无缝
   .right-menu {
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
+    background: transparent;
   }
 
+  // 搜索入口：白底灰边中性框
   .search-box {
-    background: rgba(30, 136, 229, 0.08) !important;
-    border-color: rgba(30, 136, 229, 0.18) !important;
-    color: rgba(30, 90, 140, 0.7) !important;
+    background: #ffffff !important;
+    border-color: #e5e7eb !important;
+    color: #6b7280 !important;
+    transform: none;
 
     &:hover {
-      background: rgba(30, 136, 229, 0.14) !important;
-      border-color: rgba(30, 136, 229, 0.32) !important;
-      color: #1e88e5 !important;
+      background: #f9fafb !important;
+      border-color: #d1d5db !important;
+      color: #1f2937 !important;
+      transform: none;
     }
   }
 
   .divider {
-    background: linear-gradient(180deg, transparent, rgba(30, 136, 229, 0.35), transparent);
+    background: #e5e7eb;
   }
 
+  // 头像区：白底灰边，去掉彩色渐变发光环
   .avatar-container .avatar-wrapper {
-    background: rgba(30, 136, 229, 0.08) !important;
-    border-color: rgba(30, 136, 229, 0.18) !important;
+    background: #ffffff !important;
+    border-color: #e5e7eb !important;
 
     &:hover {
-      background: rgba(30, 136, 229, 0.16) !important;
-      border-color: rgba(30, 136, 229, 0.32) !important;
+      background: #f9fafb !important;
+      border-color: #d1d5db !important;
     }
 
     .avatar-ring {
-      background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
-      box-shadow: 0 0 10px rgba(30, 136, 229, 0.35) !important;
+      background: #ffffff !important;
+      border: 1px solid #e5e7eb;
+      box-shadow: none !important;
     }
 
     .dropdown-icon {
-      color: rgba(30, 90, 140, 0.7);
+      color: #6b7280;
     }
   }
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 37b691d..69ceb26 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -32,8 +32,8 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 const useTopNavbarOnly = computed(() => role.value === 1 || role.value === 2);
 
-// 教师端改用亮色主题：顶部标题栏使用浅色背景，与平台/学校管理员端做区分；学生端墨黑
-const titleBgColor = computed(() => (role.value === 3 ? "#f5f8fc" : role.value === 4 ? "#1f2937" : "#072048"));
+// 教师端纯白极简：顶部标题栏与内容区同一画布；学生端墨黑
+const titleBgColor = computed(() => (role.value === 3 ? "#ffffff" : role.value === 4 ? "#1f2937" : "#072048"));
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
diff --git a/src/views/teacherEnd/class/index.vue b/src/views/teacherEnd/class/index.vue
index d4dc5cc..3553194 100644
--- a/src/views/teacherEnd/class/index.vue
+++ b/src/views/teacherEnd/class/index.vue
@@ -1,18 +1,5 @@
 <template>
     <div class="class-page">
-        <!-- 页面头部 -->
-        <div class="page-header">
-            <div class="header-icon">
-                <el-icon>
-                    <Grid />
-                </el-icon>
-            </div>
-            <div class="header-content">
-                <h1>班级管理</h1>
-                <p>维护学校班级信息，支持行政班和教学班两种模式</p>
-            </div>
-        </div>
-
         <el-tabs v-if="adminClassManagementEnabled" v-model="activeClassType" class="class-tabs"
             @tab-change="handleTabChange">
             <el-tab-pane label="行政班" name="ADMIN" />
@@ -265,7 +252,7 @@
 </template>
 
 <script setup>
-import { Plus, Refresh, Search, Edit, Delete, User, Grid, Upload, Download, Close, Check } from "@element-plus/icons-vue"
+import { Plus, Refresh, Search, Edit, Delete, User, Upload, Download, Close, Check } from "@element-plus/icons-vue"
 import { ElMessageBox } from "element-plus"
 import { formatDate } from "@/utils/index"
 import useUserStore from "@/store/modules/user"
@@ -319,9 +306,10 @@ const rules = computed(() => ({
 }))
 
 const tableHeaderStyle = {
-    color: "#0f3052",
-    fontSize: "14px",
-    backgroundColor: "#eaf4ff",
+    color: "#1f2937",
+    fontSize: "12px",
+    fontWeight: "600",
+    backgroundColor: "#ffffff",
 }
 
 const dialogTitle = computed(() => `${isCreate.value ? "新增" : "编辑"}${activeClassType.value === "ADMIN" ? "行政班" : "教学班"}`)
@@ -898,294 +886,150 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .class-page {
-    min-height: calc(100vh - 70px);
-
-    // 页面头部卡片
-    .page-header {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-        padding: 24px 28px;
-        background: linear-gradient(135deg, rgba(8, 24, 39, 0.9) 0%, rgba(6, 17, 29, 0.9) 100%);
-        border-radius: 16px;
-        margin-bottom: 20px;
-        border: 1px solid rgba(0, 200, 255, 0.2);
-        box-shadow:
-            0 8px 32px rgba(0, 0, 0, 0.4),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05);
-
-        .header-icon {
-            width: 60px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
-            border-radius: 14px;
-            font-size: 30px;
-            color: #0a0f1c;
-            box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
-        }
-
-        .header-content {
-            h1 {
-                margin: 0 0 6px 0;
-                font-size: 24px;
-                font-weight: 700;
-                color: #fff;
-                letter-spacing: 2px;
-                text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-            }
-
-            p {
-                margin: 0;
-                font-size: 14px;
-                color: rgba(255, 255, 255, 0.5);
-            }
-        }
-
-        .header-stats {
-            margin-left: auto;
-            display: flex;
-            gap: 24px;
-
-            .stat-item {
-                text-align: center;
-                padding: 12px 20px;
-                background: rgba(0, 212, 255, 0.08);
-                border-radius: 12px;
-                border: 1px solid rgba(0, 212, 255, 0.15);
-
-                .stat-value {
-                    font-size: 28px;
-                    font-weight: 700;
-                    color: #00d4ff;
-                    line-height: 1;
-                    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
-                }
-
-                .stat-label {
-                    font-size: 12px;
-                    color: rgba(255, 255, 255, 0.5);
-                    margin-top: 4px;
-                }
-            }
-        }
-    }
-
-    // 标签页样式
+    /* ===== 颜色令牌 ===== */
+    --edu-primary: #3b82f6;
+    --edu-primary-deep: #2563eb;
+    --edu-primary-soft: #eff6ff;
+    --text-strong: #1f2937;
+    --text-body: #6b7280;
+    --text-muted: #9ca3af;
+    --border-color: #e5e7eb;
+
+    /* ===== 字号 ===== */
+    --fs-page: 17px;
+    --fs-card: 14px;
+    --fs-body: 12px;
+    --fs-tag: 11px;
+
+    /* ===== 间距（4px 基准）===== */
+    --sp-1: 4px;
+    --sp-2: 8px;
+    --sp-3: 12px;
+    --sp-4: 16px;
+    --sp-5: 20px;
+
+    /* ===== 圆角 / 控件 ===== */
+    --r-card: 12px;
+    --r-control: 8px;
+    --field-w: 200px;
+
+    // app-main 已提供 padding 与白底，此处不再设页面级留白/背景
+
+    /* ===== 行政班 / 教学班 标签页（极简文字式）===== */
     .class-tabs {
-        margin-bottom: 16px;
-        background: rgba(6, 17, 29, 0.6);
-        border-radius: 14px;
-        padding: 6px 16px;
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        margin-bottom: var(--sp-3);
 
         :deep(.el-tabs__header) {
-            margin: 0;
+            margin: 0 0 var(--sp-3);
         }
 
         :deep(.el-tabs__nav-wrap::after) {
-            display: none;
+            background-color: var(--border-color);
+            height: 1px;
         }
 
         :deep(.el-tabs__item) {
-            font-size: 15px;
-            font-weight: 500;
-            padding: 10px 24px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            color: rgba(255, 255, 255, 0.5);
-            background: transparent;
-            border: 1px solid transparent;
+            font-size: var(--fs-body);
+            font-weight: 400;
+            color: var(--text-body);
+            height: 36px;
 
             &:hover {
-                color: #00d4ff;
-                background: rgba(0, 212, 255, 0.1);
+                color: var(--text-strong);
             }
 
             &.is-active {
-                color: #0a0f1c;
-                background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+                color: var(--edu-primary);
                 font-weight: 600;
-                border-color: #00d4ff;
-                box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
             }
         }
 
         :deep(.el-tabs__active-bar) {
-            display: none;
+            background-color: var(--edu-primary);
+            height: 2px;
         }
     }
 
-    // 搜索栏
+    /* ===== 筛选 / 操作条（白卡）===== */
     .query-bar {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        gap: 12px;
-        padding: 20px 24px;
-        background: rgba(6, 17, 29, 0.6);
-        border-radius: 14px;
-        margin-bottom: 16px;
-        border: 1px solid rgba(0, 200, 255, 0.15);
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        gap: var(--sp-3);
+        padding: var(--sp-4);
+        background: #ffffff;
+        border: 1px solid var(--border-color);
+        border-radius: var(--r-card);
+        margin-bottom: var(--sp-4);
 
         .el-select {
-            width: 150px;
+            width: var(--field-w);
         }
 
         .el-input {
-            width: 170px;
+            width: var(--field-w);
         }
 
         .query-divider {
             width: 1px;
-            height: 32px;
-            background: rgba(0, 200, 255, 0.2);
-            margin: 0 4px;
+            height: 24px;
+            background: var(--border-color);
+            margin: 0 var(--sp-1);
         }
 
         .btn-group {
             margin-left: auto;
             display: flex;
-            gap: 10px;
+            gap: var(--sp-2);
         }
     }
 
-    // 表格样式
+    /* ===== 数据表格（纯白 + 灰线）===== */
     .el-table {
-        border-radius: 14px;
+        background: #ffffff;
+        border: 1px solid var(--border-color);
+        border-radius: var(--r-card);
         overflow: hidden;
-        background: transparent;
-        border: 1px solid rgba(0, 200, 255, 0.15);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 
         :deep(.el-table__header-wrapper th) {
-            background: transparent;
-            color: #fff;
+            background: #ffffff;
+            color: var(--text-strong);
             font-weight: 600;
-            border: none !important;
-            padding: 14px 0;
-            font-size: 14px;
-            text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+            font-size: var(--fs-body);
         }
 
-        :deep(.el-table__body-wrapper tr) {
-            background: transparent;
-            transition: all 0.3s ease;
-
-            &:hover>td {
-                background: rgba(0, 212, 255, 0.08) !important;
-            }
-        }
-
-        :deep(.el-table__row td) {
-            padding: 14px 0;
-            border-bottom: 1px solid rgba(0, 200, 255, 0.1) !important;
-            background: transparent !important;
+        :deep(.el-table__body tr:hover > td) {
+            background: #f9fafb !important;
         }
 
         :deep(.el-table__cell) {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.85);
-            background: transparent !important;
-            border: none !important;
-        }
-
-        :deep(.el-table__border-left),
-        :deep(.el-table__border-right) {
-            display: none;
-        }
-    }
-
-    // 操作按钮
-    .el-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        border-radius: 8px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-        padding: 8px 14px;
-        border: 1px solid rgba(0, 200, 255, 0.3);
-        background: rgba(0, 150, 200, 0.15);
-        color: #00d4ff;
-
-        &:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-            background: rgba(0, 212, 255, 0.2);
-        }
-
-        .el-icon {
-            font-size: 15px;
+            font-size: var(--fs-body);
+            color: var(--text-strong);
+            border-color: var(--border-color);
         }
     }
 
-    // 成员工具栏
+    /* ===== 成员工具条（白卡）===== */
     .member-toolbar {
         display: flex;
-        flex-wrap: nowrap;
+        flex-wrap: wrap;
         align-items: center;
-        gap: 10px;
-        margin-bottom: 16px;
-        padding: 16px 20px;
-        background: rgba(6, 17, 29, 0.5);
-        border-radius: 12px;
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        gap: var(--sp-3);
+        margin-bottom: var(--sp-4);
+        padding: var(--sp-4);
+        background: #ffffff;
+        border: 1px solid var(--border-color);
+        border-radius: var(--r-card);
 
         .el-input {
-            width: 150px;
-        }
-    }
-
-    // 弹窗样式
-    .el-dialog {
-        border-radius: 18px;
-        overflow: hidden;
-        background: linear-gradient(135deg, #07111d 0%, #03070e 100%);
-        border: 1px solid rgba(0, 200, 255, 0.2);
-        box-shadow:
-            0 20px 60px rgba(0, 0, 0, 0.6),
-            0 0 40px rgba(0, 212, 255, 0.1);
-
-        :deep(.el-dialog__header) {
-            background: linear-gradient(135deg, #0099cc 0%, #006699 100%);
-            color: #fff;
-            padding: 22px 28px;
-            margin: 0;
-
-            .el-dialog__title {
-                color: #fff;
-                font-weight: 700;
-                font-size: 18px;
-                text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-            }
-
-            .el-dialog__headerbtn {
-                .el-dialog__close {
-                    color: rgba(255, 255, 255, 0.8);
-                    font-size: 20px;
-                }
-            }
-        }
-
-        :deep(.el-dialog__body) {
-            padding: 28px;
-            background: transparent;
-        }
-
-        :deep(.el-dialog__footer) {
-            padding: 18px 28px;
-            border-top: 1px solid rgba(0, 200, 255, 0.15);
-            background: rgba(10, 15, 30, 0.5);
+            width: var(--field-w);
         }
     }
 
+    /* ===== 弹窗内辅助布局（外观由 teacher-light.scss 全局接管）===== */
     .dialog-footers {
         display: flex;
-        gap: 12px;
+        gap: var(--sp-3);
         justify-content: flex-end;
     }
 
@@ -1195,7 +1039,7 @@ onMounted(() => {
 
     .import-create-actions {
         display: flex;
-        gap: 10px;
+        gap: var(--sp-2);
         align-items: center;
     }
 }
diff --git a/src/views/teacherEnd/index.vue b/src/views/teacherEnd/index.vue
index c019738..3b93cc6 100644
--- a/src/views/teacherEnd/index.vue
+++ b/src/views/teacherEnd/index.vue
@@ -1,150 +1,158 @@
 <template>
   <div class="grade-center">
-    <!-- 页面标题区 -->
-    <div class="page-header">
-      <div class="header-content">
-        <div class="header-icon-wrap">
-          <svg class="header-icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <!-- 页面头部：极简标题 -->
+    <header class="page-head">
+      <div class="head-left">
+        <h1 class="page-title">成绩管理中心</h1>
+        <p class="page-desc">班级成绩走势 · 等级分布 · 关键指标概览</p>
+      </div>
+      <div class="head-meta">
+        <span class="meta-dot"></span>
+        <span class="meta-text">数据实时同步</span>
+      </div>
+    </header>
+
+    <!-- KPI 统计卡：4 个关键指标 -->
+    <section class="kpi-grid">
+      <div class="kpi-card">
+        <div class="kpi-icon">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M3 7L12 3L21 7L12 11L3 7Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+            <path d="M6 9V15C6 15 7.5 17 12 17C16.5 17 18 15 18 15V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M21 7V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </div>
-        <div class="header-text">
-          <h1 class="header-title">成绩管理中心</h1>
-          <p class="header-subtitle">按班级管理 · 数据分析 · 趋势追踪</p>
+        <div class="kpi-info">
+          <span class="kpi-label">班级总数</span>
+          <div class="kpi-value-wrap">
+            <span class="kpi-value">{{ kpiData.classCount }}</span>
+            <span class="kpi-unit">个</span>
+          </div>
         </div>
       </div>
-      <div class="header-decoration">
-        <div class="decoration-dot"></div>
-        <div class="decoration-dot"></div>
-        <div class="decoration-dot"></div>
+
+      <div class="kpi-card">
+        <div class="kpi-icon icon-blue">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M3 3V21H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7 14L11 10L15 14L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="kpi-info">
+          <span class="kpi-label">平均分</span>
+          <div class="kpi-value-wrap">
+            <span class="kpi-value">{{ kpiData.avg }}</span>
+            <span class="kpi-unit">分</span>
+          </div>
+        </div>
       </div>
-    </div>
-
-    <!-- 卡片区域 -->
-    <div class="cards-wrapper">
-      <!-- 左侧：走势图 -->
-      <div class="card trend-card">
-        <div class="card-glow"></div>
-        <div class="card-inner">
-          <div class="card-header">
-            <div class="card-header-left">
-              <div class="card-icon trend-icon">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M3 3V21H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M7 14L11 10L15 14L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </div>
-              <div class="card-title-group">
-                <h2 class="card-title">班级平均成绩走势图</h2>
-                <span class="card-badge">实时数据</span>
-              </div>
-            </div>
-            <div class="card-header-right">
-              <div class="legend-dots">
-                <span class="legend-item" v-for="(name, idx) in className" :key="idx">
-                  <span class="legend-dot" :style="{ background: getLineColor(idx) }"></span>
-                  {{ name }}
-                </span>
-              </div>
-            </div>
+
+      <div class="kpi-card">
+        <div class="kpi-icon icon-mint">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M7 17L17 7M17 7H9M17 7V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="kpi-info">
+          <span class="kpi-label">最高分</span>
+          <div class="kpi-value-wrap">
+            <span class="kpi-value">{{ kpiData.max }}</span>
+            <span class="kpi-unit">分</span>
           </div>
-          <div class="card-body">
-            <div id="trend" class="chart-area"></div>
+        </div>
+      </div>
+
+      <div class="kpi-card">
+        <div class="kpi-icon icon-amber">
+          <svg viewBox="0 0 24 24" fill="none">
+            <path d="M7 7L17 17M17 17H9M17 17V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="kpi-info">
+          <span class="kpi-label">最低分</span>
+          <div class="kpi-value-wrap">
+            <span class="kpi-value">{{ kpiData.min }}</span>
+            <span class="kpi-unit">分</span>
           </div>
-          <div class="card-footer">
-            <div class="trend-insight">
-              <span class="insight-icon">📈</span>
-              <span class="insight-text">成绩走势趋势分析</span>
-            </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 图表双栏 -->
+    <section class="chart-grid">
+      <!-- 走势图 -->
+      <div class="chart-card">
+        <div class="chart-head">
+          <div class="chart-title-wrap">
+            <h2 class="chart-title">班级平均成绩走势</h2>
+            <span class="chart-sub">多班级横向对比</span>
           </div>
+          <div class="chart-legend">
+            <span class="legend-item" v-for="(name, idx) in className" :key="idx">
+              <span class="legend-dot" :style="{ background: getLineColor(idx) }"></span>
+              {{ name }}
+            </span>
+          </div>
+        </div>
+        <div class="chart-body">
+          <div id="trend" class="chart-area"></div>
         </div>
       </div>
 
-      <!-- 右侧：统计分析 -->
-      <div class="card stats-card">
-        <div class="card-glow"></div>
-        <div class="card-inner">
-          <div class="card-header">
-            <div class="card-header-left">
-              <div class="card-icon stats-icon">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                  <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-              <div class="card-title-group">
-                <h2 class="card-title">班级成绩统计分析</h2>
-                <span class="card-badge success">已更新</span>
-              </div>
-            </div>
+      <!-- 班级统计 -->
+      <div class="chart-card">
+        <div class="chart-head">
+          <div class="chart-title-wrap">
+            <h2 class="chart-title">班级成绩等级分布</h2>
+            <span class="chart-sub">按分数段统计人数</span>
           </div>
+        </div>
 
-          <!-- 搜索筛选区 -->
-          <div class="filter-section">
-            <div class="filter-row">
-              <div class="filter-item">
-                <label class="filter-label">
-                  <span class="label-icon">📅</span>
-                  日期筛选
-                </label>
-                <el-date-picker
-                  v-model="classParams.time"
-                  class="custom-date-picker"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  format="YYYY/MM/DD HH:mm"
-                  :clearable="true"
-                />
-              </div>
-              <div class="filter-item">
-                <label class="filter-label">
-                  <span class="label-icon">🏫</span>
-                  班级选择
-                </label>
-                <el-select placeholder="全部班级" v-model="classParams.classId" class="custom-select" :clearable="true">
-                  <el-option v-for="item in userStore.classList" :key="item" :label="item.class_name" :value="item.class_id" />
-                </el-select>
-              </div>
-              <div class="filter-item filter-action">
-                <el-button type="primary" class="search-btn" @click="getClassGradeStatistics">
-                  <span class="btn-icon-wrap">
-                    <svg viewBox="0 0 24 24" fill="none" class="btn-svg">
-                      <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
-                      <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    </svg>
-                  </span>
-                  查询成绩
-                </el-button>
-              </div>
-            </div>
+        <!-- 筛选 -->
+        <div class="filter-bar">
+          <div class="filter-item">
+            <label class="filter-label">日期筛选</label>
+            <el-date-picker
+              v-model="classParams.time"
+              class="custom-date-picker"
+              type="datetime"
+              placeholder="选择日期时间"
+              format="YYYY/MM/DD HH:mm"
+              :clearable="true"
+            />
           </div>
+          <div class="filter-item">
+            <label class="filter-label">班级选择</label>
+            <el-select placeholder="全部班级" v-model="classParams.classId" class="custom-select" :clearable="true">
+              <el-option v-for="item in userStore.classList" :key="item" :label="item.class_name" :value="item.class_id" />
+            </el-select>
+          </div>
+          <el-button type="primary" class="search-btn" @click="getClassGradeStatistics">
+            <svg viewBox="0 0 24 24" fill="none" class="btn-svg">
+              <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
+              <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            查询
+          </el-button>
+        </div>
 
-          <!-- 图表与数据 -->
-          <div class="stats-content">
-            <div class="chart-section">
-              <div id="statistics" class="pie-chart"></div>
-            </div>
-            <div class="score-cards">
-              <div class="score-card" v-for="item in circularData2" :key="item.name" :class="getScoreCardClass(item.name)">
-                <div class="score-card-inner">
-                  <div class="score-indicator" :class="getIndicatorClass(item.name)">
-                    <span class="indicator-arrow">{{ getIndicatorArrow(item.name) }}</span>
-                  </div>
-                  <div class="score-info">
-                    <span class="score-name">{{ item.name }}</span>
-                    <span class="score-number">{{ item.value ?? 0 }}</span>
-                    <span class="score-unit">分</span>
-                  </div>
-                </div>
-                <div class="score-decoration"></div>
+        <div class="stats-body">
+          <div class="pie-wrap">
+            <div id="statistics" class="pie-chart"></div>
+          </div>
+          <div class="score-list">
+            <div class="score-row" v-for="item in circularData2" :key="item.name" :class="getScoreCardClass(item.name)">
+              <span class="score-bar"></span>
+              <div class="score-row-info">
+                <span class="score-row-label">{{ item.name }}</span>
+                <span class="score-row-value">{{ item.value ?? 0 }}<small>分</small></span>
               </div>
+              <span class="score-row-arrow">{{ getIndicatorArrow(item.name) }}</span>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 <script setup>
@@ -176,12 +184,23 @@ const circularData2 = ref([
   { score: 0, name: "平均分", key: "averageScore" },
 ]);
 
+// KPI 概览数据（纯展示组装，不调接口）
+const kpiData = computed(() => {
+  const find = (n) => circularData2.value.find((i) => i.name === n)?.value ?? 0;
+  return {
+    classCount: classList.value.length,
+    avg: find("平均分"),
+    max: find("最高分"),
+    min: find("最低分"),
+  };
+});
+
 // 成绩卡片样式
 const getScoreCardClass = (name) => {
   const map = {
-    "最高分": "card-max",
-    "最低分": "card-min",
-    "平均分": "card-avg",
+    "最高分": "row-max",
+    "最低分": "row-min",
+    "平均分": "row-avg",
   };
   return map[name] || "";
 };
@@ -204,15 +223,15 @@ const getIndicatorArrow = (name) => {
   return map[name] || "●";
 };
 
-// 折线图配色方案（亮色背景：科技蓝系分类色）
+// 折线图配色方案（教育蓝绿系：蓝 / 薄荷 / 天青 / 靛 / 紫 / 青绿，克制收敛）
 const getLineColor = (index) => {
   const colors = [
-    { main: "#1e88e5", light: "#9cc8ef" },
-    { main: "#2ba471", light: "#9fd8bd" },
-    { main: "#ec6b8f", light: "#f5b8cb" },
-    { main: "#f0a830", light: "#f8d59a" },
-    { main: "#7e57c2", light: "#c4b0e4" },
-    { main: "#26a69a", light: "#9fd8d1" },
+    { main: "#3b82f6", light: "#bfdbfe" },
+    { main: "#52c4a4", light: "#b8e6d5" },
+    { main: "#5db8d5", light: "#b8e0eb" },
+    { main: "#6366f1", light: "#c7d2fe" },
+    { main: "#8b5cf6", light: "#ddd6fe" },
+    { main: "#14b8a6", light: "#99f6e4" },
   ];
   return colors[index % colors.length].main;
 };
@@ -225,30 +244,30 @@ const getTrendData = async () => {
     backgroundColor: "transparent",
     tooltip: {
       trigger: "axis",
-      backgroundColor: "rgba(15, 25, 45, 0.95)",
-      borderColor: "rgba(0, 212, 255, 0.4)",
+      backgroundColor: "rgba(255, 255, 255, 0.98)",
+      borderColor: "rgba(59, 130, 246, 0.2)",
       borderWidth: 1,
-      padding: [12, 16],
+      padding: [10, 14],
       textStyle: {
-        color: "#e8f7ff",
+        color: "#1f2937",
         fontSize: 13,
       },
       axisPointer: {
         type: "cross",
         lineStyle: {
-          color: "rgba(30, 136, 229, 0.35)",
+          color: "rgba(59, 130, 246, 0.3)",
           type: "dashed",
         },
         crossStyle: {
-          color: "rgba(30, 136, 229, 0.5)",
+          color: "rgba(59, 130, 246, 0.45)",
         },
       },
       formatter: function(params) {
-        let result = `<div style="font-weight:600;margin-bottom:8px;">${params[0].axisValue}</div>`;
+        let result = `<div style="font-weight:600;margin-bottom:8px;color:#1f2937;">${params[0].axisValue}</div>`;
         params.forEach(param => {
-          result += `<div style="display:flex;align-items:center;gap:8px;margin:4px 0;">
-            <span style="width:10px;height:10px;border-radius:50%;background:${param.color};"></span>
-            <span style="flex:1;">${param.seriesName}</span>
+          result += `<div style="display:flex;align-items:center;gap:8px;margin:3px 0;">
+            <span style="width:8px;height:8px;border-radius:50%;background:${param.color};"></span>
+            <span style="flex:1;color:#6b7280;">${param.seriesName}</span>
             <span style="font-weight:600;color:${param.color};">${param.value}分</span>
           </div>`;
         });
@@ -261,8 +280,8 @@ const getTrendData = async () => {
     grid: {
       left: "3%",
       right: "4%",
-      bottom: "8%",
-      top: "8%",
+      bottom: "6%",
+      top: "6%",
       containLabel: true,
     },
     xAxis: {
@@ -271,17 +290,31 @@ const getTrendData = async () => {
       data: classTime.value,
       axisLine: {
         lineStyle: {
-          color: "rgba(30, 136, 229, 0.25)",
+          color: "rgba(59, 130, 246, 0.2)",
         },
       },
       axisLabel: {
-        color: "#6b85a3",
+        color: "#9ca3af",
         fontSize: 11,
         margin: 12,
       },
       axisTick: {
         show: false,
       },
+      // 悬停时 X 轴高亮日期标签：深蓝底白字，保证清晰可读
+      axisPointer: {
+        label: {
+          backgroundColor: "#2563eb",
+          color: "#ffffff",
+          fontSize: 11,
+          fontWeight: 600,
+          padding: [4, 8],
+          borderRadius: 4,
+          margin: 10,
+          shadowColor: "transparent",
+          shadowBlur: 0,
+        },
+      },
     },
     yAxis: {
       type: "value",
@@ -289,7 +322,7 @@ const getTrendData = async () => {
       max: 100,
       splitLine: {
         lineStyle: {
-          color: "rgba(30, 136, 229, 0.12)",
+          color: "rgba(59, 130, 246, 0.08)",
           type: "dashed",
         },
       },
@@ -297,28 +330,41 @@ const getTrendData = async () => {
         show: false,
       },
       axisLabel: {
-        color: "#6b85a3",
+        color: "#9ca3af",
         fontSize: 11,
         formatter: "{value}",
       },
+      // 悬停时 Y 轴数值标签同样深蓝底白字
+      axisPointer: {
+        label: {
+          backgroundColor: "#2563eb",
+          color: "#ffffff",
+          fontSize: 11,
+          fontWeight: 600,
+          padding: [4, 8],
+          borderRadius: 4,
+          shadowColor: "transparent",
+          shadowBlur: 0,
+        },
+      },
     },
     series: classList.value.map((item, index) => {
       const colorSet = [
-        { main: "#1e88e5", light: "rgba(30, 136, 229, 0.22)" },
-        { main: "#2ba471", light: "rgba(43, 164, 113, 0.2)" },
-        { main: "#ec6b8f", light: "rgba(236, 107, 143, 0.2)" },
-        { main: "#f0a830", light: "rgba(240, 168, 48, 0.2)" },
-        { main: "#7e57c2", light: "rgba(126, 87, 194, 0.2)" },
-        { main: "#26a69a", light: "rgba(38, 166, 154, 0.2)" },
+        { main: "#3b82f6", light: "rgba(59, 130, 246, 0.18)" },
+        { main: "#52c4a4", light: "rgba(82, 196, 164, 0.18)" },
+        { main: "#5db8d5", light: "rgba(93, 184, 213, 0.18)" },
+        { main: "#6366f1", light: "rgba(99, 102, 241, 0.18)" },
+        { main: "#8b5cf6", light: "rgba(139, 92, 246, 0.18)" },
+        { main: "#14b8a6", light: "rgba(20, 184, 166, 0.18)" },
       ][index % 6];
       return {
         ...item,
         smooth: 0.4,
         lineStyle: {
-          width: 3,
+          width: 2.5,
           color: colorSet.main,
           shadowColor: colorSet.main,
-          shadowBlur: 8,
+          shadowBlur: 6,
         },
         itemStyle: {
           color: colorSet.main,
@@ -337,23 +383,23 @@ const getTrendData = async () => {
           },
         },
         symbol: "circle",
-        symbolSize: 6,
+        symbolSize: 5,
         emphasis: {
           scale: true,
-          scaleSize: 10,
+          scaleSize: 9,
         },
       };
     }),
   });
 };
 
-// 饼图配色方案（亮色背景：科技蓝系分类色）
+// 饼图配色方案（成绩等级语义色：优秀蓝 / 良好薄荷 / 一般暖黄 / 不及格珊瑚）
 const getPieColor = (index) => {
   const colors = [
-    { main: "#1e88e5", light: "rgba(30, 136, 229, 0.2)" },
-    { main: "#26a69a", light: "rgba(38, 166, 154, 0.2)" },
-    { main: "#7e57c2", light: "rgba(126, 87, 194, 0.2)" },
-    { main: "#ec6b8f", light: "rgba(236, 107, 143, 0.2)" },
+    { main: "#3b82f6", light: "rgba(59, 130, 246, 0.2)" },
+    { main: "#52c4a4", light: "rgba(82, 196, 164, 0.2)" },
+    { main: "#f5b945", light: "rgba(245, 185, 69, 0.2)" },
+    { main: "#ef8a76", light: "rgba(239, 138, 118, 0.2)" },
   ];
   return colors[index % colors.length].main;
 };
@@ -366,47 +412,45 @@ const getStatisticsData = async () => {
     backgroundColor: "transparent",
     tooltip: {
       trigger: "item",
-      backgroundColor: "rgba(15, 25, 45, 0.95)",
-      borderColor: "rgba(0, 212, 255, 0.4)",
+      backgroundColor: "rgba(255, 255, 255, 0.98)",
+      borderColor: "rgba(59, 130, 246, 0.2)",
       borderWidth: 1,
-      padding: [12, 16],
+      padding: [10, 14],
       textStyle: {
-        color: "#e8f7ff",
+        color: "#1f2937",
         fontSize: 13,
       },
       formatter: "{a} <br/>{b} : {c}人 ({d}%)",
     },
     legend: {
-      orient: "vertical",
-      right: "2%",
-      top: "center",
-      itemWidth: 12,
-      itemHeight: 12,
-      itemGap: 16,
+      orient: "horizontal",
+      bottom: 2,
+      left: "center",
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 12,
       textStyle: {
-        color: "#5a7896",
-        fontSize: 13,
+        color: "#6b7280",
+        fontSize: 12,
+        rich: {
+          name: { color: "#6b7280", fontSize: 12 },
+          num: { color: "#3b82f6", fontSize: 12, fontWeight: 600 },
+        },
       },
       formatter: (name) => {
         const item = circularData.value.find((d) => d.name === name);
         const num = item?.value || 0;
         return `{name|${name}}  {num|${num}人}`;
       },
-      textStyle: {
-        rich: {
-          name: { color: "#5a7896", fontSize: 13 },
-          num: { color: "#1e88e5", fontSize: 13, fontWeight: 600 },
-        },
-      },
     },
     series: [
       {
         type: "pie",
-        radius: ["50%", "75%"],
-        center: ["35%", "50%"],
+        radius: [56, 98],
+        center: ["50%", "44%"],
         avoidLabelOverlap: true,
         itemStyle: {
-          borderRadius: 8,
+          borderRadius: 6,
           borderColor: "#ffffff",
           borderWidth: 3,
         },
@@ -415,10 +459,10 @@ const getStatisticsData = async () => {
         },
         emphasis: {
           scale: true,
-          scaleSize: 12,
+          scaleSize: 10,
           itemStyle: {
-            shadowBlur: 16,
-            shadowColor: "rgba(30, 136, 229, 0.35)",
+            shadowBlur: 14,
+            shadowColor: "rgba(59, 130, 246, 0.22)",
           },
         },
         data: circularData.value.map((item, index) => ({
@@ -429,7 +473,7 @@ const getStatisticsData = async () => {
               x: 0, y: 0, x2: 1, y2: 1,
               colorStops: [
                 { offset: 0, color: getPieColor(index) },
-                { offset: 1, color: adjustColor(getPieColor(index), -30) },
+                { offset: 1, color: adjustColor(getPieColor(index), -28) },
               ],
             },
           },
@@ -525,635 +569,478 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss" scoped>
-// 页面主容器
+// ============================================================
+// 教师端 · 极简 SaaS 教育风 设计令牌（单一事实来源）
+// 颜色：教育蓝单主色 + 中性灰，语义色仅用于状态/等级
+// 字号：6 级紧凑字阶；间距：4px 基准刻度；圆角：2 档；按钮：36px 控件
+// ============================================================
 .grade-center {
-  min-height: calc(100vh - 96px);
+  /* —— 颜色 —— */
+  --edu-primary: #3b82f6;       // 主色：教育蓝
+  --edu-primary-deep: #2563eb;  // hover/加深
+  --edu-primary-soft: #eff6ff;  // 浅底：图标底/选中底
+  --edu-mint: #52c4a4;          // 语义：在线/良好
+  --edu-amber: #f5b945;         // 语义：一般/警示
+  --edu-coral: #ef8a76;         // 语义：不及格/最高
+  --edu-text: #1f2937;          // 主文字
+  --edu-text-2: #6b7280;        // 次文字
+  --edu-text-3: #9ca3af;        // 辅助/占位
+  --edu-border: #e5e7eb;        // 卡片/控件描边
+  --edu-border-soft: #f0f1f3;   // 分区线
+  --edu-bg: #ffffff;            // 画布/卡片底
+  /* —— 字号（6 级紧凑字阶）—— */
+  --fs-display: 17px;           // 页面标题 700
+  --fs-h2: 14px;                // 卡片标题 700
+  --fs-body: 12px;              // 正文/控件/说明
+  --fs-caption: 11px;           // 标签/副标题/徽章
+  --fs-data-lg: 26px;           // KPI 大数字
+  --fs-data: 20px;              // 行内数字
+  /* —— 字重 —— */
+  --fw-title: 700;
+  --fw-emph: 600;
+  --fw-body: 400;
+  /* —— 行高 —— */
+  --lh-title: 1.35;
+  --lh-body: 1.5;
+  --lh-data: 1;
+  /* —— 间距（4px 基准，只用这些刻度）—— */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 20px;
+  /* —— 圆角（2 档）—— */
+  --r-card: 12px;               // 卡片
+  --r-control: 8px;             // 输入框/按钮/小图标底/行
+  /* —— 控件与按钮 —— */
+  --control-h: 36px;            // 输入框、按钮统一高度
+  --btn-pad-x: 16px;            // 按钮横向内边距
+  --field-w: 200px;             // 输入框/下拉统一宽度
+  --pie-h: 300px;               // 饼图固定高度
+  --score-list-w: 168px;        // 分数列表固定宽度
+  --chart-min-h: 320px;         // 走势图最小高度
+  /* —— 图标 —— */
+  --icon-box: 40px;             // 图标底盒
+  --icon-glyph: 20px;           // 图标笔画尺寸
+  --btn-icon: 14px;             // 按钮内图标
+  /* —— 阴影 —— */
+  --edu-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
+  --edu-shadow-hover: 0 4px 14px rgba(17, 24, 39, 0.08);
+
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--sp-4);
+  line-height: var(--lh-body);
 }
 
-// 页面标题区
-.page-header {
+// ===== 页面头部：极简标题 =====
+.page-head {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
-  padding: 20px 28px;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 255, 157, 0.04));
-  border: 1px solid rgba(0, 212, 255, 0.15);
-  border-radius: 16px;
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
-  }
 
-  .header-content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    position: relative;
-    z-index: 1;
-  }
-
-  .header-icon-wrap {
-    width: 52px;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 157, 0.1));
-    border-radius: 14px;
-    border: 1px solid rgba(0, 212, 255, 0.3);
-
-    .header-icon-svg {
-      width: 28px;
-      height: 28px;
-      color: #00d4ff;
-    }
-  }
-
-  .header-text {
-    .header-title {
-      font-size: 22px;
-      font-weight: 700;
-      color: #ffffff;
+  .head-left {
+    .page-title {
+      font-size: var(--fs-display);
+      font-weight: var(--fw-title);
+      line-height: var(--lh-title);
+      color: var(--edu-text);
       margin: 0;
-      letter-spacing: 1px;
-      text-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
     }
 
-    .header-subtitle {
-      font-size: 13px;
-      color: rgba(120, 180, 220, 0.8);
-      margin: 4px 0 0;
-      letter-spacing: 0.5px;
+    .page-desc {
+      font-size: var(--fs-body);
+      color: var(--edu-text-3);
+      margin: var(--sp-1) 0 0;
     }
   }
 
-  .header-decoration {
+  .head-meta {
     display: flex;
-    gap: 8px;
-    position: relative;
-    z-index: 1;
+    align-items: center;
+    gap: var(--sp-2);
 
-    .decoration-dot {
-      width: 8px;
-      height: 8px;
+    .meta-dot {
+      width: var(--sp-2);
+      height: var(--sp-2);
       border-radius: 50%;
-      background: rgba(0, 212, 255, 0.4);
-
-      &:nth-child(2) {
-        background: rgba(0, 255, 157, 0.4);
-        animation: pulse 2s ease-in-out infinite;
-      }
+      background: var(--edu-mint);
+      box-shadow: 0 0 0 3px rgba(82, 196, 164, 0.18);
+    }
 
-      &:nth-child(3) {
-        background: rgba(167, 139, 250, 0.4);
-      }
+    .meta-text {
+      font-size: var(--fs-caption);
+      color: var(--edu-text-3);
     }
   }
 }
 
-@keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 0.4; }
-  50% { transform: scale(1.5); opacity: 0.8; }
-}
-
-// 卡片容器
-.cards-wrapper {
-  display: flex;
-  gap: 20px;
-  flex: 1;
-  min-height: 580px;
-}
-
-.card {
-  position: relative;
-  background: rgba(8, 20, 40, 0.7);
-  border: 1px solid rgba(0, 212, 255, 0.15);
-  border-radius: 20px;
-  overflow: hidden;
-  backdrop-filter: blur(20px);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    border-color: rgba(0, 212, 255, 0.35);
-    transform: translateY(-2px);
-    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.1);
-  }
-
-  .card-glow {
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.05), transparent 50%);
-    pointer-events: none;
-  }
-
-  .card-inner {
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 24px;
-  }
+// ===== KPI 统计卡：4 个关键指标 =====
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--sp-4);
 }
 
-// 卡片头部
-.card-header {
+.kpi-card {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  flex-shrink: 0;
+  gap: var(--sp-3);
+  padding: var(--sp-4);
+  background: var(--edu-bg);
+  border: 1px solid var(--edu-border);
+  border-radius: var(--r-card);
+  box-shadow: var(--edu-shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 
-  .card-header-left {
-    display: flex;
-    align-items: center;
-    gap: 14px;
+  &:hover {
+    border-color: rgba(59, 130, 246, 0.3);
+    box-shadow: var(--edu-shadow-hover);
   }
 
-  .card-icon {
-    width: 44px;
-    height: 44px;
+  .kpi-icon {
+    width: var(--icon-box);
+    height: var(--icon-box);
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 12px;
-    padding: 10px;
+    border-radius: var(--r-control);
+    background: var(--edu-primary-soft);
+    color: var(--edu-primary);
+    flex-shrink: 0;
 
     svg {
-      width: 24px;
-      height: 24px;
+      width: var(--icon-glyph);
+      height: var(--icon-glyph);
     }
 
-    &.trend-icon {
-      background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.05));
-      border: 1px solid rgba(0, 212, 255, 0.3);
-      color: #00d4ff;
-    }
-
-    &.stats-icon {
-      background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 255, 157, 0.05));
-      border: 1px solid rgba(0, 255, 157, 0.3);
-      color: #00ff9d;
+    // 统一教育蓝浅底，不再用多色变体
+    &.icon-blue,
+    &.icon-mint,
+    &.icon-amber {
+      background: var(--edu-primary-soft);
+      color: var(--edu-primary);
     }
   }
 
-  .card-title-group {
-    .card-title {
-      font-size: 17px;
-      font-weight: 600;
-      color: #ffffff;
-      margin: 0;
-      letter-spacing: 0.5px;
-    }
+  .kpi-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-1);
+    min-width: 0;
 
-    .card-badge {
-      display: inline-block;
-      margin-top: 4px;
-      padding: 2px 10px;
-      font-size: 11px;
-      color: #00d4ff;
-      background: rgba(0, 212, 255, 0.1);
-      border: 1px solid rgba(0, 212, 255, 0.2);
-      border-radius: 20px;
-
-      &.success {
-        color: #00ff9d;
-        background: rgba(0, 255, 157, 0.1);
-        border-color: rgba(0, 255, 157, 0.2);
-      }
+    .kpi-label {
+      font-size: var(--fs-caption);
+      color: var(--edu-text-3);
     }
-  }
 
-  .card-header-right {
-    .legend-dots {
+    .kpi-value-wrap {
       display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      max-width: 280px;
-
-      .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 12px;
-        color: rgba(150, 200, 230, 0.9);
-
-        .legend-dot {
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          box-shadow: 0 0 8px currentColor;
-        }
+      align-items: baseline;
+      gap: var(--sp-1);
+
+      .kpi-value {
+        font-size: var(--fs-data-lg);
+        font-weight: var(--fw-title);
+        line-height: var(--lh-data);
+        color: var(--edu-text);
+        font-feature-settings: "tnum";
+      }
+
+      .kpi-unit {
+        font-size: var(--fs-caption);
+        color: var(--edu-text-3);
       }
     }
   }
 }
 
-// 卡片主体
-.card-body {
+// ===== 图表双栏 =====
+.chart-grid {
+  display: grid;
+  grid-template-columns: 1.3fr 1fr;
+  gap: var(--sp-4);
   flex: 1;
   min-height: 0;
-  display: flex;
-  flex-direction: column;
 }
 
-.chart-area {
-  width: 100%;
-  height: 100%;
-  min-height: 380px;
+.chart-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--edu-bg);
+  border: 1px solid var(--edu-border);
+  border-radius: var(--r-card);
+  box-shadow: var(--edu-shadow);
+  overflow: hidden;
 }
 
-// 卡片底部
-.card-footer {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid rgba(0, 212, 255, 0.1);
+.chart-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--edu-border-soft);
   flex-shrink: 0;
 
-  .trend-insight {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-
-    .insight-icon {
-      font-size: 16px;
+  .chart-title-wrap {
+    .chart-title {
+      font-size: var(--fs-h2);
+      font-weight: var(--fw-title);
+      line-height: var(--lh-title);
+      color: var(--edu-text);
+      margin: 0;
     }
 
-    .insight-text {
-      font-size: 13px;
-      color: rgba(120, 180, 220, 0.8);
-      letter-spacing: 2px;
+    .chart-sub {
+      display: block;
+      margin-top: var(--sp-1);
+      font-size: var(--fs-caption);
+      color: var(--edu-text-3);
     }
   }
-}
-
-// 左侧走势图卡片
-.trend-card {
-  flex: 1.3;
-}
-
-// 右侧统计卡片
-.stats-card {
-  flex: 0.9;
-  min-width: 420px;
 
-  .stats-content {
-    flex: 1;
+  .chart-legend {
     display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .chart-section {
-    flex: 1;
-    min-height: 220px;
+    flex-wrap: wrap;
+    gap: var(--sp-2) var(--sp-3);
+    justify-content: flex-end;
+    max-width: 50%;
 
-    .pie-chart {
-      width: 100%;
-      height: 100%;
-      min-height: 220px;
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-1);
+      font-size: var(--fs-caption);
+      color: var(--edu-text-2);
+
+      .legend-dot {
+        width: var(--sp-2);
+        height: var(--sp-2);
+        border-radius: 50%;
+      }
     }
   }
 }
 
-// 筛选区域
-.filter-section {
-  margin-bottom: 20px;
-  padding: 16px 18px;
-  background: rgba(0, 212, 255, 0.03);
-  border: 1px solid rgba(0, 212, 255, 0.1);
-  border-radius: 14px;
-  flex-shrink: 0;
+.chart-body {
+  flex: 1;
+  min-height: var(--chart-min-h);
+  padding: var(--sp-2) var(--sp-3) var(--sp-3);
 
-  .filter-row {
-    display: flex;
-    align-items: flex-end;
-    gap: 16px;
-    flex-wrap: wrap;
+  .chart-area {
+    width: 100%;
+    height: 100%;
+    min-height: var(--chart-min-h);
   }
+}
+
+// ===== 筛选条：紧凑横排（控件外观统一走 teacher-light.scss 全局规范）=====
+.filter-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--edu-border-soft);
+  flex-shrink: 0;
 
   .filter-item {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-
-    &.filter-action {
-      margin-left: auto;
-    }
+    gap: var(--sp-1);
 
     .filter-label {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      color: rgba(150, 200, 230, 0.9);
-      font-weight: 500;
-
-      .label-icon {
-        font-size: 13px;
-      }
+      font-size: var(--fs-caption);
+      color: var(--edu-text-3);
     }
   }
 
-  // 输入框样式
-  :deep(.el-input__wrapper) {
-    background: rgba(0, 20, 40, 0.8) !important;
-    border: 1px solid rgba(0, 212, 255, 0.25) !important;
+  /* 查询按钮（首页本地 outline 规范，显式覆盖任何全局实色蓝）*/
+  .search-btn {
+    margin-left: auto;
+    gap: var(--sp-2);   // 图标与文字 8px 间距
+    height: var(--control-h);
+    background-color: transparent !important;
+    border: 1px solid var(--edu-primary) !important;
+    color: var(--edu-primary) !important;
+    border-radius: var(--r-control) !important;
     box-shadow: none !important;
-    border-radius: 10px !important;
-    padding: 4px 12px !important;
-    transition: all 0.3s ease;
+    padding: 0 var(--btn-pad-x) !important;
+    font-size: var(--fs-body);
+    font-weight: var(--fw-emph);
+    transition: background-color 0.18s ease, color 0.18s ease;
+
+    .btn-svg {
+      width: var(--btn-icon);
+      height: var(--btn-icon);
+    }
 
+    // hover：蓝色半透明底，文字加深
     &:hover,
     &:focus {
-      border-color: rgba(0, 212, 255, 0.5) !important;
-      box-shadow: 0 0 12px rgba(0, 212, 255, 0.15) !important;
+      background-color: rgba(59, 130, 246, 0.1) !important;
+      border-color: var(--edu-primary) !important;
+      color: var(--edu-primary-deep) !important;
     }
-  }
-
-  :deep(.el-input__inner) {
-    color: #e8f7ff !important;
-    font-size: 13px;
 
-    &::placeholder {
-      color: rgba(120, 180, 220, 0.5) !important;
+    // 按下：半透明底加深
+    &:active {
+      background-color: rgba(59, 130, 246, 0.18) !important;
+      border-color: var(--edu-primary-deep) !important;
+      color: var(--edu-primary-deep) !important;
     }
   }
 
-  :deep(.el-input__prefix) {
-    color: rgba(0, 212, 255, 0.7);
-  }
-
-  // 日期选择器样式
-  :deep(.el-date-editor) {
-    width: 180px !important;
-  }
-
-  // 下拉选择器样式
+  /* 字段统一宽度（布局尺寸；外观由全局规范控制）*/
+  :deep(.el-date-editor),
   :deep(.el-select) {
-    width: 160px;
-  }
-
-  :deep(.el-select__caret) {
-    color: rgba(0, 212, 255, 0.7) !important;
+    width: var(--field-w) !important;
   }
+}
 
-  :deep(.el-select-dropdown) {
-    background: rgba(8, 20, 40, 0.95) !important;
-    border: 1px solid rgba(0, 212, 255, 0.2) !important;
-
-    .el-select-dropdown__item {
-      color: #e8f7ff;
+// ===== 统计主体：饼图 + 分数行 =====
+.stats-body {
+  flex: 1;
+  display: flex;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4) var(--sp-4);
+  min-height: 0;
 
-      &:hover,
-      &.hover {
-        background: rgba(0, 212, 255, 0.1) !important;
-      }
+  .pie-wrap {
+    flex: 1;
+    min-width: 0;
+    align-self: center;
 
-      &.selected {
-        color: #00d4ff;
-        font-weight: 600;
-      }
+    .pie-chart {
+      width: 100%;
+      height: var(--pie-h);
+      min-height: var(--pie-h);
     }
   }
 
-  // 按钮样式
-  .search-btn {
+  .score-list {
+    flex: 0 0 var(--score-list-w);
     display: flex;
-    align-items: center;
-    gap: 8px;
-    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 157, 0.1)) !important;
-    border: 1px solid rgba(0, 212, 255, 0.4) !important;
-    color: #00d4ff !important;
-    padding: 10px 20px !important;
-    border-radius: 10px !important;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-
-    .btn-icon-wrap {
-      width: 18px;
-      height: 18px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .btn-svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    &:hover {
-      background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 255, 157, 0.2)) !important;
-      border-color: rgba(0, 212, 255, 0.6) !important;
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(0, 212, 255, 0.25);
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
+    flex-direction: column;
+    gap: var(--sp-2);
+    justify-content: center;
   }
 }
 
-// 分数卡片组
-.score-cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.score-card {
+.score-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-3);
+  background: var(--edu-bg);
+  border: 1px solid var(--edu-border);
+  border-radius: var(--r-control);
   position: relative;
-  padding: 16px;
-  background: rgba(0, 20, 40, 0.6);
-  border: 1px solid rgba(0, 212, 255, 0.15);
-  border-radius: 14px;
   overflow: hidden;
-  transition: all 0.3s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
   &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
-  }
-
-  .score-card-inner {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    position: relative;
-    z-index: 1;
+    box-shadow: var(--edu-shadow-hover);
   }
 
-  .score-decoration {
-    position: absolute;
-    bottom: -20px;
-    right: -20px;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    opacity: 0.1;
+  .score-bar {
+    width: 3px;
+    height: var(--sp-5);
+    border-radius: 3px;
+    background: var(--edu-border);
+    flex-shrink: 0;
   }
 
-  &.card-max {
-    border-color: rgba(255, 107, 157, 0.25);
-    background: linear-gradient(135deg, rgba(255, 107, 157, 0.08), rgba(0, 20, 40, 0.6));
+  .score-row-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-1);
+    flex: 1;
+    min-width: 0;
 
-    .score-decoration {
-      background: linear-gradient(135deg, #ff6b9d, #ff4777);
+    .score-row-label {
+      font-size: var(--fs-caption);
+      color: var(--edu-text-3);
     }
 
-    &:hover {
-      border-color: rgba(255, 107, 157, 0.4);
-      box-shadow: 0 12px 32px rgba(255, 107, 157, 0.15);
+    .score-row-value {
+      font-size: var(--fs-data);
+      font-weight: var(--fw-title);
+      line-height: var(--lh-data);
+      color: var(--edu-text);
+      font-feature-settings: "tnum";
+
+      small {
+        font-size: var(--fs-caption);
+        font-weight: var(--fw-body);
+        color: var(--edu-text-3);
+        margin-left: var(--sp-1);
+      }
     }
   }
 
-  &.card-min {
-    border-color: rgba(75, 207, 250, 0.25);
-    background: linear-gradient(135deg, rgba(75, 207, 250, 0.08), rgba(0, 20, 40, 0.6));
-
-    .score-decoration {
-      background: linear-gradient(135deg, #4bcffa, #2db8e8);
-    }
-
-    &:hover {
-      border-color: rgba(75, 207, 250, 0.4);
-      box-shadow: 0 12px 32px rgba(75, 207, 250, 0.15);
-    }
+  .score-row-arrow {
+    font-size: var(--fs-caption);
+    color: var(--edu-text-3);
   }
 
-  &.card-avg {
-    border-color: rgba(255, 217, 61, 0.25);
-    background: linear-gradient(135deg, rgba(255, 217, 61, 0.08), rgba(0, 20, 40, 0.6));
-
-    .score-decoration {
-      background: linear-gradient(135deg, #ffd93d, #f5c800);
-    }
-
-    &:hover {
-      border-color: rgba(255, 217, 61, 0.4);
-      box-shadow: 0 12px 32px rgba(255, 217, 61, 0.15);
-    }
+  &.row-max {
+    .score-bar { background: var(--edu-coral); }
+    .score-row-arrow { color: var(--edu-coral); }
+    &:hover { border-color: rgba(239, 138, 118, 0.35); }
   }
 
-  .score-indicator {
-    width: 44px;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 12px;
-    flex-shrink: 0;
-
-    .indicator-arrow {
-      font-size: 18px;
-      color: #fff;
-    }
-
-    &.ind-max {
-      background: linear-gradient(135deg, #ff6b9d, #ff4777);
-      box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
-    }
-
-    &.ind-min {
-      background: linear-gradient(135deg, #4bcffa, #2db8e8);
-      box-shadow: 0 4px 16px rgba(75, 207, 250, 0.4);
-    }
-
-    &.ind-avg {
-      background: linear-gradient(135deg, #ffd93d, #f5c800);
-      box-shadow: 0 4px 16px rgba(255, 217, 61, 0.4);
-    }
+  &.row-min {
+    .score-bar { background: var(--edu-primary); }
+    .score-row-arrow { color: var(--edu-primary); }
+    &:hover { border-color: rgba(59, 130, 246, 0.35); }
   }
 
-  .score-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    .score-name {
-      font-size: 12px;
-      color: rgba(150, 200, 230, 0.8);
-      font-weight: 500;
-    }
-
-    .score-number {
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 1;
-      background: linear-gradient(135deg, #fff, #e8f7ff);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-
-    .score-unit {
-      font-size: 11px;
-      color: rgba(150, 200, 230, 0.6);
-      margin-left: 2px;
-    }
+  &.row-avg {
+    .score-bar { background: var(--edu-amber); }
+    .score-row-arrow { color: var(--edu-amber); }
+    &:hover { border-color: rgba(245, 185, 69, 0.35); }
   }
 }
 
-// 响应式适配
+// ===== 响应式 =====
 @media (max-width: 1200px) {
-  .cards-wrapper {
-    flex-direction: column;
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .stats-card {
-    min-width: unset;
-  }
-
-  .score-cards {
-    grid-template-columns: repeat(3, 1fr);
+  .chart-grid {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
-  .grade-center {
+  .kpi-grid {
+    grid-template-columns: 1fr;
   }
 
-  .page-header {
-    padding: 16px 20px;
+  .page-head {
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
-
-    .header-decoration {
-      display: none;
-    }
-  }
-
-  .score-cards {
-    grid-template-columns: 1fr;
-    gap: 10px;
+    gap: var(--sp-2);
   }
 
-  .filter-section .filter-row {
+  .filter-bar {
     flex-direction: column;
     align-items: stretch;
 
-    .filter-item.filter-action {
+    .search-btn {
       margin-left: 0;
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .stats-body {
+    flex-direction: column;
+
+    .score-list {
+      flex: none;
     }
   }
 }