diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index b54acb4..0b79ba4 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -8,6 +8,256 @@
 @import "./dialog.scss";
 @import "./student-training.scss";
 
+/* Element Plus 暗色模式：引入官方暗色 CSS 变量文件 */
+@import "element-plus/theme-chalk/dark/css-vars.css";
+
+/* Element Plus 暗色模式全局变量覆盖，与项目深色主题保持一致 */
+html.dark,
+.dark {
+  /* 主色 */
+  --el-color-primary: #00aaff;
+  --el-color-primary-light-3: #33bbff;
+  --el-color-primary-light-5: #55ccff;
+  --el-color-primary-light-7: #77ddff;
+  --el-color-primary-light-8: #99eeff;
+  --el-color-primary-light-9: #bbffff;
+  --el-color-primary-dark-2: #0088cc;
+
+  /* 背景色 */
+  --el-bg-color: #03070e;
+  --el-bg-color-page: #03070e;
+  --el-bg-color-overlay: #061827;
+
+  /* 文字色 */
+  --el-text-color-primary: #e8f4ff;
+  --el-text-color-regular: #c0d8f0;
+  --el-text-color-secondary: #8ec8f5;
+  --el-text-color-placeholder: #5a8ab5;
+  --el-text-color-disabled: #4a6a85;
+
+  /* 边框 */
+  --el-border-color: rgba(0, 170, 255, 0.2);
+  --el-border-color-light: rgba(0, 170, 255, 0.15);
+  --el-border-color-lighter: rgba(0, 170, 255, 0.1);
+  --el-border-color-extra-light: rgba(0, 170, 255, 0.08);
+  --el-border-color-dark: rgba(0, 170, 255, 0.4);
+  --el-border-color-darker: rgba(0, 170, 255, 0.6);
+
+  /* 填充 */
+  --el-fill-color: rgba(0, 40, 80, 0.5);
+  --el-fill-color-light: rgba(0, 30, 60, 0.4);
+  --el-fill-color-lighter: rgba(0, 20, 50, 0.3);
+  --el-fill-color-extra-light: rgba(0, 15, 40, 0.2);
+  --el-fill-color-dark: rgba(0, 50, 100, 0.6);
+  --el-fill-color-darker: rgba(0, 60, 120, 0.7);
+  --el-fill-color-blank: rgba(4, 20, 33, 0.92);
+
+  /* 阴影 */
+  --el-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --el-box-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.3);
+  --el-box-shadow-lighter: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --el-box-shadow-dark: 0 12px 48px rgba(0, 0, 0, 0.5);
+
+  /* 遮罩 */
+  --el-mask-color: rgba(0, 0, 0, 0.7);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+
+  /* Date Picker */
+  --el-datepicker-off-text-color: #4a6a85;
+  --el-datepicker-header-text-color: #e8f4ff;
+  --el-datepicker-text-color: #c0d8f0;
+  --el-datepicker-inner-border-color: rgba(0, 170, 255, 0.15);
+
+  /* Popper / Dropdown */
+  --el-popover-bg-color: rgba(4, 20, 33, 0.96);
+  --el-popover-border-color: rgba(0, 170, 255, 0.3);
+  --el-popover-title-color: #e8f4ff;
+  --el-popover-font-color: #c0d8f0;
+
+  /* Input */
+  --el-input-bg-color: rgba(0, 30, 60, 0.6);
+  --el-input-border-color: rgba(0, 170, 255, 0.3);
+  --el-input-hover-border-color: rgba(0, 170, 255, 0.6);
+  --el-input-focus-border-color: #00aaff;
+  --el-input-text-color: #e0f0ff;
+  --el-input-placeholder-color: #5a8ab5;
+
+  /* Button */
+  --el-button-disabled-bg-color: rgba(0, 40, 80, 0.5);
+  --el-button-disabled-border-color: rgba(0, 170, 255, 0.2);
+  --el-button-disabled-text-color: #5a8ab5;
+
+  /* Table */
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: rgba(2, 16, 27, 0.78);
+  --el-table-header-bg-color: rgba(9, 48, 73, 0.96);
+  --el-table-row-hover-bg-color: rgba(0, 111, 177, 0.18);
+  --el-table-border-color: rgba(54, 159, 212, 0.2);
+  --el-table-text-color: #dff4ff;
+  --el-table-header-text-color: #dff6ff;
+
+  /* Dialog */
+  --el-dialog-bg-color: rgba(4, 13, 24, 0.98);
+
+  /* Message / Notification */
+  --el-message-bg-color: rgba(4, 20, 33, 0.96);
+
+  /* Select */
+  --el-select-dropdown-bg-color: rgba(4, 20, 33, 0.96);
+  --el-select-option-color: #c0d8f0;
+  --el-select-option-hover-bg-color: rgba(0, 111, 177, 0.18);
+  --el-select-option-selected-bg-color: rgba(0, 170, 255, 0.2);
+  --el-select-group-color: #8ec8f5;
+
+  /* Pagination */
+  --el-pagination-bg-color: transparent;
+  --el-pagination-button-bg-color: rgba(3, 24, 36, 0.85);
+  --el-pagination-hover-color: #00aaff;
+  --el-pagination-button-disabled-bg-color: rgba(3, 24, 36, 0.5);
+
+  /* Tooltip */
+  --el-tooltip-bg-color: rgba(0, 20, 40, 0.95);
+  --el-tooltip-border-color: rgba(0, 170, 255, 0.5);
+  --el-tooltip-font-color: #e0f0ff;
+
+  /* Tag */
+  --el-tag-bg-color: rgba(0, 60, 120, 0.4);
+  --el-tag-border-color: rgba(0, 170, 255, 0.3);
+  --el-tag-font-color: #8ec8f5;
+
+  /* Card */
+  --el-card-bg-color: rgba(10, 30, 60, 0.6);
+  --el-card-border-color: rgba(0, 170, 255, 0.2);
+}
+
+/* Element Plus 暗色模式下，DatePicker 弹层面板强制使用项目深色背景 */
+.dark,
+html.dark {
+  .el-date-picker {
+    --el-datepicker-bg-color: rgba(4, 20, 33, 0.98) !important;
+    background-color: rgba(4, 20, 33, 0.98) !important;
+    border-color: rgba(0, 170, 255, 0.4) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 170, 255, 0.15) !important;
+
+    .el-picker-panel__header {
+      .el-picker-panel__header-label,
+      button {
+        color: #e0f0ff !important;
+      }
+      button:hover {
+        color: #00aaff !important;
+      }
+    }
+
+    .el-date-table th {
+      color: #8ec8f5 !important;
+    }
+
+    .el-date-table td {
+      color: #c0d8f0 !important;
+      &.current:not(.disabled) .el-date-table-cell__text {
+        color: #ffffff !important;
+        background-color: rgba(0, 170, 255, 0.35) !important;
+      }
+      &.today .el-date-table-cell__text {
+        color: #00ffcc !important;
+        font-weight: bold !important;
+      }
+      &.available:hover .el-date-table-cell__text {
+        background-color: rgba(0, 170, 255, 0.2) !important;
+        color: #ffffff !important;
+      }
+      &.prev-month .el-date-table-cell__text,
+      &.next-month .el-date-table-cell__text {
+        color: #4a6a85 !important;
+      }
+      &.disabled .el-date-table-cell__text {
+        color: #3a5a75 !important;
+      }
+    }
+
+    .el-month-table td,
+    .el-year-table td {
+      color: #c0d8f0 !important;
+      &.current .el-month-table-cell__text,
+      &.current .el-year-table-cell__text {
+        color: #00aaff !important;
+      }
+      &.today .el-month-table-cell__text,
+      &.today .el-year-table-cell__text {
+        color: #00ffcc !important;
+      }
+      &:hover .el-month-table-cell__text,
+      &:hover .el-year-table-cell__text {
+        background-color: rgba(0, 170, 255, 0.18) !important;
+      }
+    }
+
+    .el-picker-panel__footer {
+      background-color: rgba(4, 20, 33, 0.98) !important;
+      border-top-color: rgba(0, 170, 255, 0.2) !important;
+
+      .el-button {
+        color: #cfeaff !important;
+        background: rgba(4, 24, 38, 0.92) !important;
+        border-color: rgba(88, 178, 224, 0.45) !important;
+      }
+      .el-button--text {
+        color: #80d7ff !important;
+      }
+      .el-button--primary {
+        background: linear-gradient(135deg, #0066cc, #00aaff) !important;
+        border-color: transparent !important;
+        color: #ffffff !important;
+      }
+    }
+  }
+
+  .el-time-panel {
+    background-color: rgba(4, 20, 33, 0.98) !important;
+    border-color: rgba(0, 170, 255, 0.3) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
+
+    .el-time-panel__header {
+      .el-time-panel__title {
+        color: #e0f0ff !important;
+      }
+    }
+
+    .el-time-spinner__item {
+      color: #c0d8f0 !important;
+      &:hover:not(.is-disabled) {
+        background-color: rgba(0, 170, 255, 0.15) !important;
+        color: #ffffff !important;
+      }
+      &.is-active {
+        color: #00aaff !important;
+        font-weight: 700 !important;
+      }
+      &.is-disabled {
+        color: #3a5a75 !important;
+      }
+    }
+  }
+
+  /* 日期选择器内联输入框（页面上的输入框，不影响弹层内的） */
+  .search-form .el-date-picker .el-input__wrapper {
+    background: rgba(0, 30, 60, 0.6) !important;
+    border-color: rgba(0, 170, 255, 0.3) !important;
+    box-shadow: none !important;
+  }
+  .search-form .el-date-picker .el-input__inner {
+    color: #e0f0ff !important;
+    &::placeholder {
+      color: #5a8ab5 !important;
+    }
+  }
+  .search-form .el-date-picker .el-input__prefix,
+  .search-form .el-date-picker .el-input__suffix {
+    color: #8ec8f5 !important;
+  }
+}
+
 body {
   height: 100%;
   margin: 0;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 7cf232b..4c18150 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <section :class="mainClass">
+  <section :class="mainClass" class="main-section">
     <div v-if="isDemo" class="student-demo-banner">演示模式：{{ demoClassName }}<button @click="exitDemo">退出演示</button></div>
     <router-view v-slot="{ Component, route }">
       <keep-alive :include="tagsViewStore.cachedViews">
@@ -182,17 +182,27 @@ router.beforeEach((to, from, next) => {
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
-  height: calc(100vh - 50px);
+  //height: calc(100vh - 50px);
+  height: 100%;
   width: 100%;
   position: relative;
   overflow: auto;
   background: url("@/assets/images/背景.webp") no-repeat;
   background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+
+  .main-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .student-demo-banner{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;padding:8px 18px;color:#fff;background:#b45309}.student-demo-banner button{border:0;border-radius:4px;padding:3px 10px;cursor:pointer}
 .student-task-loading{position:fixed;inset:50px 0 0;z-index:90;display:grid;place-items:start center;padding-top:96px;background:linear-gradient(135deg,rgba(2,15,26,.985),rgba(4,31,47,.985));}.student-task-loading__panel{display:grid;gap:18px;width:min(820px,calc(100vw - 72px));padding:32px;border:1px solid rgba(66,201,250,.34);border-radius:18px;background:rgba(4,27,42,.8);box-shadow:0 22px 52px rgba(0,0,0,.32)}.student-task-loading__label{color:#bdefff;font-weight:700;letter-spacing:.04em}.student-task-loading__line{display:block;height:18px;border-radius:99px;background:linear-gradient(90deg,rgba(26,107,143,.32),rgba(88,208,255,.58),rgba(26,107,143,.32));background-size:200% 100%;animation:student-task-loading-shimmer 1.2s linear infinite}.student-task-loading__line--title{width:42%;height:30px}.student-task-loading__line--short{width:68%}@keyframes student-task-loading-shimmer{to{background-position:-200% 0}}
 .app-main2 {
   min-height: calc(100vh - 50px);
+  height: 100%;
   width: 100%;
   position: relative;
   overflow: auto;
@@ -200,9 +210,18 @@ router.beforeEach((to, from, next) => {
     radial-gradient(circle at 12% 16%, rgba(0, 170, 255, 0.24), transparent 28%),
     radial-gradient(circle at 85% 4%, rgba(43, 110, 255, 0.16), transparent 28%),
     linear-gradient(135deg, #07101d 0%, #03060c 100%);
+  display: flex;
+  flex-direction: column;
+
+  .main-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .teacher-main {
   min-height: calc(100vh - 50px);
+  height: 100%;
   width: 100%;
   position: relative;
   overflow: auto;
@@ -211,6 +230,14 @@ router.beforeEach((to, from, next) => {
     radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.5), transparent 34%),
     radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.34), transparent 28%),
     linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%);
+  display: flex;
+  flex-direction: column;
+
+  .main-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .fixed-header + .app-main {
   padding-top: 50px;