fix: refine dark mode and table scrolling

frontend/src/views/SettingsView.vue

@@ -1487,6 +1487,16 @@ onMounted(loadSettings);
         </el-tab-pane>
       </el-tabs>
     </div>
+
+    <div class="settings-savebar">
+      <div class="settings-savebar__content">
+        <div class="settings-savebar__copy">
+          <div class="settings-savebar__title">当前修改不会自动保存</div>
+          <div class="settings-savebar__subtitle">滚动到页面任何位置都可以直接保存当前设置。</div>
+        </div>
+        <el-button type="primary" :loading="saving" @click="saveSettings">淇濆瓨璁剧疆</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1494,12 +1504,17 @@ onMounted(loadSettings);
 .page-stack {
   display: grid;
   gap: 24px;
+  padding-bottom: 28px;
 }
 
 .page-error-alert {
   border-radius: 14px;
 }
 
+.page-toolbar :deep(.el-button--primary) {
+  display: none;
+}
+
 .settings-import-input {
   display: none;
 }
@@ -1515,6 +1530,56 @@ onMounted(loadSettings);
   grid-column: auto;
 }
 
+.settings-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border: 1px solid var(--border-subtle);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(180deg, var(--surface-raised), var(--surface-muted));
+  box-shadow: var(--shadow-soft);
+}
+
+.settings-tabs :deep(.el-tabs__nav-wrap) {
+  padding-inline: 16px;
+}
+
+.settings-tabs :deep(.el-tabs__nav-wrap::after) {
+  background: var(--border-subtle);
+}
+
+.settings-tabs :deep(.el-tabs__nav) {
+  border: 0 !important;
+  background: transparent;
+}
+
+.settings-tabs :deep(.el-tabs__item) {
+  height: 48px;
+  color: var(--text-secondary);
+  border: 0 !important;
+  transition:
+    color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.settings-tabs :deep(.el-tabs__item:hover) {
+  color: var(--text-primary);
+}
+
+.settings-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--text-primary);
+  background: var(--surface);
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+
+.settings-tabs :deep(.el-tabs__content) {
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-top: 0;
+  border-radius: 0 0 12px 12px;
+  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
+  box-shadow: var(--shadow-soft);
+}
+
 .settings-card :deep(.el-card__body) {
   padding-top: 20px;
 }
@@ -1756,6 +1821,56 @@ onMounted(loadSettings);
   border-color: rgba(245, 158, 11, 0.18);
 }
 
+:global(html[data-theme="dark"]) .test-result--success {
+  background: rgba(14, 43, 28, 0.88);
+  border-color: rgba(34, 197, 94, 0.28);
+}
+
+:global(html[data-theme="dark"]) .test-result--warning {
+  background: rgba(58, 34, 10, 0.88);
+  border-color: rgba(245, 158, 11, 0.28);
+}
+
+.settings-savebar {
+  position: sticky;
+  bottom: 18px;
+  z-index: 24;
+  pointer-events: none;
+}
+
+.settings-savebar__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--border-base);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
+    var(--surface-raised);
+  box-shadow: var(--shadow-float);
+  backdrop-filter: blur(18px);
+  pointer-events: auto;
+}
+
+.settings-savebar__copy {
+  min-width: 0;
+}
+
+.settings-savebar__title {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.settings-savebar__subtitle {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
 .test-result__title {
   font-size: 14px;
   font-weight: 700;
@@ -1797,9 +1912,30 @@ onMounted(loadSettings);
   .action-strip :deep(.el-button) {
     width: 100%;
   }
+
+  .settings-savebar__content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .settings-savebar__content :deep(.el-button) {
+    width: 100%;
+  }
 }
 
 @media (max-width: 768px) {
+  .page-stack {
+    padding-bottom: 20px;
+  }
+
+  .settings-tabs :deep(.el-tabs__nav-wrap) {
+    padding-inline: 10px;
+  }
+
+  .settings-tabs :deep(.el-tabs__content) {
+    padding: 14px;
+  }
+
   .settings-card :deep(.el-col) {
     flex: 0 0 100%;
     max-width: 100%;
@@ -1821,5 +1957,14 @@ onMounted(loadSettings);
   .template-section {
     padding: 16px 16px 2px;
   }
+
+  .settings-savebar {
+    bottom: 12px;
+  }
+
+  .settings-savebar__content {
+    padding: 12px 14px;
+    border-radius: 12px;
+  }
 }
 </style>