深色模式样式修正

frontend/src/components/layout/AppHeader.vue

 <template>
-  <header class="app-header sticky top-0 z-30 border-b border-gray-200/40 dark:border-white/[0.05]">
+  <header class="app-header sticky top-0 z-30 border-b border-gray-200/60 dark:border-white/[0.08]">
     <div class="flex h-16 items-center justify-between px-4 md:px-6">
       <!-- Left: Mobile Menu Toggle + Page Title -->
       <div class="flex items-center gap-4">
@@ -47,7 +47,7 @@
         <!-- Balance Display -->
         <div
           v-if="user"
-          class="hidden items-center gap-2 rounded-xl bg-primary-50 px-3 py-1.5 dark:bg-primary-900/20 sm:flex"
+          class="balance-pill hidden items-center gap-2 rounded-xl bg-primary-50 px-3 py-1.5 dark:bg-primary-900/20 sm:flex"
         >
           <svg
             class="h-4 w-4 text-primary-600 dark:text-primary-400"
@@ -71,7 +71,7 @@
         <div v-if="user" class="relative" ref="dropdownRef">
           <button
             @click="toggleDropdown"
-            class="flex items-center gap-2 rounded-xl p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-800"
+            class="user-btn flex items-center gap-2 rounded-xl p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-800"
             aria-label="User Menu"
           >
             <div
@@ -80,14 +80,14 @@
               {{ userInitials }}
             </div>
             <div class="hidden text-left md:block">
-              <div class="text-sm font-medium text-gray-900 dark:text-white">
+              <div class="user-name text-sm font-medium text-gray-900 dark:text-white">
                 {{ displayName }}
               </div>
-              <div class="text-xs capitalize text-gray-500 dark:text-dark-400">
+              <div class="user-role text-xs capitalize text-gray-500 dark:text-dark-400">
                 {{ user.role }}
               </div>
             </div>
-            <Icon name="chevronDown" size="sm" class="hidden text-gray-400 md:block" />
+            <Icon name="chevronDown" size="sm" class="chevron-icon hidden text-gray-400 md:block" />
           </button>
 
           <!-- Dropdown Menu -->
@@ -337,11 +337,7 @@ onBeforeUnmount(() => {
 }
 
 .app-header {
-  background: rgba(241, 245, 251, 0.85);
-  backdrop-filter: blur(20px);
-}
-:global(.dark) .app-header {
-  background: rgba(8, 14, 28, 0.85);
+  background: rgba(241, 245, 251, 0.92);
   backdrop-filter: blur(20px);
 }
 </style>

frontend/src/style.css

@@ -222,28 +222,42 @@
 
   /* ============ 卡片样式 ============ */
   .card {
-    @apply bg-white dark:bg-dark-800/50;
-    @apply rounded-2xl;
-    @apply border border-gray-100 dark:border-dark-700/50;
-    @apply shadow-card;
-    @apply transition-all duration-300;
+    @apply bg-white rounded-2xl shadow-card transition-all duration-300;
+    border: 1px solid #f0f4f8;
+  }
+
+  .dark .card {
+    background: #141e2d;
+    border: 1px solid #1e2d42;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
   }
 
   .card-hover {
     @apply hover:-translate-y-0.5 hover:shadow-card-hover;
-    @apply hover:border-gray-200 dark:hover:border-dark-600;
+  }
+
+  .dark .card-hover:hover {
+    border-color: #243550;
   }
 
   .card-glass {
-    @apply bg-white/70 dark:bg-dark-800/70;
-    @apply backdrop-blur-xl;
-    @apply border border-white/20 dark:border-dark-700/50;
+    @apply bg-white/70 backdrop-blur-xl;
+    border: 1px solid rgba(255,255,255,0.2);
     @apply shadow-glass;
   }
 
+  .dark .card-glass {
+    background: rgba(20, 30, 45, 0.8);
+    border: 1px solid rgba(255,255,255,0.07);
+  }
+
   .card-header {
-    @apply border-b border-gray-100 dark:border-dark-700;
     @apply px-6 py-4;
+    border-bottom: 1px solid #f0f4f8;
+  }
+
+  .dark .card-header {
+    border-bottom-color: #1e2d42;
   }
 
   .card-body {
@@ -251,8 +265,12 @@
   }
 
   .card-footer {
-    @apply border-t border-gray-100 dark:border-dark-700;
     @apply px-6 py-4;
+    border-top: 1px solid #f0f4f8;
+  }
+
+  .dark .card-footer {
+    border-top-color: #1e2d42;
   }
 
   /* ============ 统计卡片 ============ */
@@ -747,6 +765,41 @@
   }
 }
 
+/* ============ Header 深色模式覆盖 ============ */
+.dark .app-header {
+  background: #162035 !important;
+  border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
+}
+.dark .app-header h1 {
+  color: #e2e8f0 !important;
+}
+.dark .app-header p {
+  color: #7a90b0 !important;
+}
+.dark .app-header .balance-pill {
+  background: rgba(139, 92, 246, 0.12) !important;
+  border: 1px solid rgba(139, 92, 246, 0.22) !important;
+}
+.dark .app-header .balance-pill svg {
+  color: #a78bfa !important;
+}
+.dark .app-header .balance-pill span {
+  color: #c4b5fd !important;
+}
+.dark .app-header .user-name {
+  color: #e2e8f0 !important;
+}
+.dark .app-header .user-role {
+  color: #7a90b0 !important;
+}
+.dark .app-header .chevron-icon {
+  color: #7a90b0 !important;
+}
+.dark .app-header .user-btn:hover {
+  background: rgba(255, 255, 255, 0.07) !important;
+}
+
 @layer utilities {
   /* 文字渐变 */
   .text-gradient {