frontend: support more missing dark mode style

frontend/src/components/CrontabEditor.vue

@@ -330,6 +330,12 @@ onBeforeUnmount(() => {
   border-radius: 4px;
   padding: 16px;
   background: #f5f7fa;
+  transition: all 0.3s;
+}
+
+.dark .crontab-editor {
+  border-color: #3a3a3c;
+  background: #2c2c2e;
 }
 
 .mode-tabs {
@@ -337,6 +343,11 @@ onBeforeUnmount(() => {
   gap: 8px;
   margin-bottom: 16px;
   border-bottom: 2px solid #ebeef5;
+  transition: border-color 0.3s;
+}
+
+.dark .mode-tabs {
+  border-bottom-color: #3a3a3c;
 }
 
 .mode-tab {
@@ -351,11 +362,20 @@ onBeforeUnmount(() => {
   transition: all 0.3s;
 }
 
+.dark .mode-tab {
+  color: #a0a0a3;
+}
+
 .mode-tab.active {
   color: #409eff;
   border-bottom-color: #409eff;
 }
 
+.dark .mode-tab.active {
+  color: #81c784;
+  border-bottom-color: #81c784;
+}
+
 .mode-content {
   margin: 16px 0;
 }
@@ -364,10 +384,20 @@ onBeforeUnmount(() => {
   padding: 12px;
   background: white;
   border-radius: 4px;
+  transition: background 0.3s;
+}
+
+.dark .quick-option {
+  background: #1c1c1e;
 }
 
 .option-label {
   font-weight: 600;
+  color: #1c1b1f;
+}
+
+.dark .option-label {
+  color: #e5e5e7;
 }
 
 .option-desc {
@@ -376,6 +406,10 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.dark .option-desc {
+  color: #a0a0a3;
+}
+
 .expression-input {
   margin: 12px 0;
 }
@@ -386,11 +420,19 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.dark .help-text {
+  color: #a0a0a3;
+}
+
 .help-text a {
   color: #409eff;
   text-decoration: none;
 }
 
+.dark .help-text a {
+  color: #81c784;
+}
+
 .help-text a:hover {
   text-decoration: underline;
 }
@@ -400,11 +442,21 @@ onBeforeUnmount(() => {
   padding: 12px;
   background: white;
   border-radius: 4px;
+  transition: background 0.3s;
+}
+
+.dark .preview-section {
+  background: #1c1c1e;
 }
 
 .preview-section h4 {
   margin: 0 0 8px 0;
   font-size: 14px;
+  color: #1c1b1f;
+}
+
+.dark .preview-section h4 {
+  color: #e5e5e7;
 }
 
 .execution-list {
@@ -414,6 +466,10 @@ onBeforeUnmount(() => {
   color: #606266;
 }
 
+.dark .execution-list {
+  color: #a0a0a3;
+}
+
 .validation-message {
   padding: 8px 12px;
   border-radius: 4px;
@@ -427,15 +483,33 @@ onBeforeUnmount(() => {
   border: 1px solid #c6e2ff;
 }
 
+.dark .validation-message.success {
+  background: rgba(129, 199, 132, 0.1);
+  color: #81c784;
+  border-color: rgba(129, 199, 132, 0.3);
+}
+
 .validation-message.error {
   background: #fef0f0;
   color: #f56c6c;
   border: 1px solid #fde7e7;
 }
 
+.dark .validation-message.error {
+  background: rgba(244, 67, 54, 0.1);
+  color: #ef5350;
+  border-color: rgba(244, 67, 54, 0.3);
+}
+
 .validation-message.info {
   background: #f4f4f5;
   color: #909399;
   border: 1px solid #ebeef5;
 }
+
+.dark .validation-message.info {
+  background: #2c2c2e;
+  color: #a0a0a3;
+  border-color: #3a3a3c;
+}
 </style>

frontend/src/components/FieldConfigEditor.vue

@@ -281,15 +281,5 @@ const removeOption = (index) => {
 </script>
 
 <style scoped>
-.field-config-editor {
-  background-color: #fafafa;
-  padding: 20px;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-}
-
-:deep(.ant-form-item-label) {
-  font-weight: 500;
-  color: #374151;
-}
+/* 样式已移至全局 CSS (style.css) 以保持统一性 */
 </style>

frontend/src/components/Navbar.vue

@@ -142,7 +142,7 @@
           </a-tooltip>
 
           <!-- Theme Toggle Button -->
-          <a-tooltip :title="isDark ? '切换到亮色模式' : '切换到暗黑模式'">
+          <a-tooltip :title="isDark ? '切换到亮色模式' : '切换到暗色模式'">
             <a-button
               type="text"
               class="!p-2 !flex !items-center !justify-center hover:!bg-gray-100 dark:hover:!bg-gray-700 transition-all"