From abdcfd72ff8d0d7746358cd7bee2da458246059d Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Tue, 22 Sep 2026 09:29:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=AD=A6=E7=94=9F=E7=AB=AF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E9=80=82=E9=85=8D=E8=A7=92=E8=89=B2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增学生端亮色模式类名student-light-mode，新增对应样式覆盖所有element-plus组件及自定义弹窗
2. 在布局组件中根据用户角色动态添加/移除对应亮色模式类名，清理卸载时的类名
---
 src/assets/styles/student-training.scss | 255 ++++++++++++++++++++++++
 src/layout/index.vue                    |   7 +
 2 files changed, 262 insertions(+)

diff --git a/src/assets/styles/student-training.scss b/src/assets/styles/student-training.scss
index 0bebb68..822233b 100644
--- a/src/assets/styles/student-training.scss
+++ b/src/assets/styles/student-training.scss
@@ -985,3 +985,258 @@
     margin-left: 0 !important;
   }
 }
+
+/* ============================================================
+ * 学生端弹窗/抽屉/消息/下拉 墨黑极简主题
+ * 通过 body.student-light-mode 锚点命中 teleport 到 body 的弹层
+ * ============================================================ */
+body.student-light-mode {
+  /* ---------- el-dialog ---------- */
+  --el-dialog-bg-color: #ffffff;
+  --el-dialog-border-radius: 12px;
+  --el-dialog-padding-primary: 0;
+  --el-dialog-width: 50%;
+
+  .el-overlay {
+    background-color: rgba(17, 24, 39, 0.55) !important;
+  }
+
+  .el-dialog {
+    border-radius: 12px !important;
+    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
+    border: 1px solid #e5e7eb !important;
+    overflow: hidden;
+
+    .el-dialog__header {
+      margin: 0 !important;
+      padding: 16px 20px !important;
+      background: #ffffff !important;
+      border-bottom: 1px solid #e5e7eb !important;
+      border-radius: 12px 12px 0 0 !important;
+      margin-right: 0 !important;
+
+      .el-dialog__title {
+        color: #1f2937 !important;
+        font-size: 16px !important;
+        font-weight: 700 !important;
+        font-family: var(--student-font-base) !important;
+      }
+
+      .el-dialog__headerbtn {
+        top: 16px !important;
+        right: 16px !important;
+
+        .el-dialog__close {
+          color: #6b7280 !important;
+          &:hover { color: #1f2937 !important; }
+        }
+      }
+    }
+
+    .el-dialog__body {
+      padding: 20px !important;
+      background: #ffffff !important;
+      color: #1f2937 !important;
+      font-size: 14px !important;
+      line-height: 1.6 !important;
+    }
+
+    .el-dialog__footer {
+      padding: 12px 20px 16px !important;
+      background: #ffffff !important;
+      border-top: 1px solid #f3f4f6 !important;
+      display: flex !important;
+      justify-content: flex-end !important;
+      gap: 10px !important;
+    }
+  }
+
+  /* ---------- el-message-box ---------- */
+  .el-message-box {
+    border-radius: 12px !important;
+    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
+    border: 1px solid #e5e7eb !important;
+
+    .el-message-box__header {
+      padding: 16px 20px 0 !important;
+      .el-message-box__title {
+        color: #1f2937 !important;
+        font-size: 16px !important;
+        font-weight: 700 !important;
+      }
+      .el-message-box__headerbtn .el-message-box__close { color: #6b7280 !important; }
+    }
+    .el-message-box__content {
+      color: #374151 !important;
+      font-size: 14px !important;
+      padding: 14px 20px !important;
+    }
+    .el-message-box__btns {
+      padding: 8px 20px 16px !important;
+      display: flex !important;
+      justify-content: flex-end !important;
+      gap: 10px !important;
+    }
+  }
+
+  /* ---------- el-drawer ---------- */
+  .el-drawer {
+    border: 1px solid #e5e7eb !important;
+
+    .el-drawer__header {
+      padding: 16px 20px !important;
+      margin-bottom: 0 !important;
+      border-bottom: 1px solid #e5e7eb !important;
+      .el-drawer__title {
+        color: #1f2937 !important;
+        font-size: 16px !important;
+        font-weight: 700 !important;
+      }
+      .el-drawer__close-btn {
+        color: #6b7280 !important;
+        &:hover { color: #1f2937 !important; }
+      }
+    }
+    .el-drawer__body {
+      padding: 20px !important;
+      background: #ffffff !important;
+      color: #1f2937 !important;
+    }
+    .el-drawer__footer {
+      padding: 12px 20px 16px !important;
+      border-top: 1px solid #e5e7eb !important;
+      display: flex !important;
+      justify-content: flex-end !important;
+      gap: 10px !important;
+    }
+  }
+
+  /* ---------- el-message / el-notification ---------- */
+  --el-message-bg-color: #ffffff;
+  --el-message-border-color: #e5e7eb;
+  --el-message-text-color: #1f2937;
+  --el-message-padding-lr: 16px;
+
+  .el-message {
+    border-radius: 8px !important;
+    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
+    border: 1px solid #e5e7eb !important;
+  }
+
+  .el-notification {
+    border-radius: 10px !important;
+    box-shadow: 0 12px 36px rgba(17, 24, 39, 0.2) !important;
+    border: 1px solid #e5e7eb !important;
+  }
+
+  /* ---------- el-select-dropdown / el-popper ---------- */
+  .el-select-dropdown,
+  .el-popper.is-light,
+  .el-date-editor .el-picker-panel {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
+    color: #1f2937 !important;
+
+    .el-select-dropdown__item,
+    .el-popper .el-select-dropdown__item {
+      color: #374151 !important;
+      &.is-hovering { background: #f3f4f6 !important; color: #1f2937 !important; }
+      &.is-selected { color: #1f2937 !important; font-weight: 700 !important; }
+    }
+  }
+
+  /* ---------- el-popover ---------- */
+  .el-popover {
+    border-radius: 8px !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
+    background: #ffffff !important;
+    color: #1f2937 !important;
+  }
+
+  /* ---------- gdialog 旧自定义弹窗（popModal.vue 用） ---------- */
+  .gdialog {
+    background: #ffffff !important;
+    color: #1f2937 !important;
+    border-radius: 12px !important;
+    border: 1px solid #e5e7eb !important;
+
+    p, span, div, li { color: #1f2937 !important; }
+    strong, b { color: #111827 !important; }
+
+    .el-dialog__header {
+      background: #ffffff !important;
+      border-bottom: 1px solid #e5e7eb !important;
+      padding: 16px 20px !important;
+      border-radius: 12px 12px 0 0 !important;
+      margin-right: 0 !important;
+
+      .el-dialog__title {
+        color: #1f2937 !important;
+        font-size: 16px !important;
+        font-weight: 700 !important;
+        font-family: var(--student-font-base) !important;
+      }
+    }
+    .el-dialog__body {
+      background: #ffffff !important;
+      color: #1f2937 !important;
+    }
+    .el-dialog__footer {
+      .el-button {
+        background: #ffffff !important;
+        border: 1px solid #e5e7eb !important;
+        color: #374151 !important;
+        border-radius: 8px !important;
+      }
+    }
+  }
+
+  /* ---------- dialogClass 旧自定义弹窗 ---------- */
+  .dialogClass {
+    background: #ffffff !important;
+    .el-dialog__header {
+      padding: 16px 20px !important;
+      margin-right: 0 !important;
+      border-bottom: 1px solid #e5e7eb !important;
+    }
+  }
+
+  /* ---------- el-button in dialog/drawer ---------- */
+  .el-dialog, .el-drawer, .el-message-box {
+    .el-button {
+      border-radius: 8px !important;
+      font-weight: 600 !important;
+      font-family: var(--student-font-base) !important;
+
+      &.el-button--primary {
+        background: #1f2937 !important;
+        border-color: #1f2937 !important;
+        color: #ffffff !important;
+        &:hover { background: #111827 !important; border-color: #111827 !important; }
+      }
+      &:not(.el-button--primary):not(.el-button--text) {
+        background: #ffffff !important;
+        border-color: #e5e7eb !important;
+        color: #374151 !important;
+        &:hover { border-color: #1f2937 !important; color: #1f2937 !important; }
+      }
+    }
+  }
+
+  /* ---------- el-form in dialog ---------- */
+  .el-dialog .el-form-item__label {
+    color: #374151 !important;
+    font-weight: 500 !important;
+  }
+  .el-dialog .el-input__wrapper,
+  .el-dialog .el-textarea__inner {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: none !important;
+    color: #1f2937 !important;
+    &:hover, &.is-focus { border-color: #1f2937 !important; box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1) !important; }
+  }
+}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ff1e9b9..37b691d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -70,15 +70,22 @@ function setLayout() {
 
 // 教师端亮色模式标识：挂在 body 上，使 teleport 到 body 的弹层（下拉、日期选择器、弹窗等）也能命中亮色样式
 const TEACHER_LIGHT_CLASS = "teacher-light-mode";
+const STUDENT_LIGHT_CLASS = "student-light-mode";
 watchEffect(() => {
   if (role.value === 3) {
     document.body.classList.add(TEACHER_LIGHT_CLASS);
+    document.body.classList.remove(STUDENT_LIGHT_CLASS);
+  } else if (role.value === 4) {
+    document.body.classList.add(STUDENT_LIGHT_CLASS);
+    document.body.classList.remove(TEACHER_LIGHT_CLASS);
   } else {
     document.body.classList.remove(TEACHER_LIGHT_CLASS);
+    document.body.classList.remove(STUDENT_LIGHT_CLASS);
   }
 });
 onBeforeUnmount(() => {
   document.body.classList.remove(TEACHER_LIGHT_CLASS);
+  document.body.classList.remove(STUDENT_LIGHT_CLASS);
 });
 </script>