fix：修复若干bug

src/components/DailyTaskStatus.vue

@@ -973,7 +973,7 @@ onBeforeUnmount(() => {
 
 <style scoped lang="scss">
 .daily-task-container {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -1137,7 +1137,7 @@ onBeforeUnmount(() => {
   padding: var(--spacing-xs) var(--spacing-sm);
   border: 1px solid var(--border-light);
   border-radius: var(--border-radius-medium);
-  background: white;
+  background: var(--bg-primary);
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   cursor: pointer;

src/components/GameStatus.vue

@@ -596,7 +596,7 @@ onUnmounted(() => {
 }
 
 .status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -684,16 +684,16 @@ onUnmounted(() => {
   .time-display {
     font-size: 1.5rem; /* text-2xl */
     font-weight: 700; /* font-bold */
-    color: #111827; /* text-gray-900 */
+    color: var(--text-primary);
     text-align: center;
     margin-bottom: var(--spacing-md);
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
     letter-spacing: 0.1em;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    background: var(--bg-tertiary);
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--border-light);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     transition: all 0.2s ease-in-out;
     

src/components/TeamStatus.vue

@@ -315,7 +315,7 @@ watch(() => presetTeamRaw.value, () => { updateAvailableTeams(); updateCurrentTe
 
 <style scoped lang="scss">
 .team-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -445,8 +445,8 @@ watch(() => presetTeamRaw.value, () => { updateAvailableTeams(); updateCurrentTe
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 2px solid var(--border-color, #e5e5e5);
+  border: 2px solid var(--border-light);
-  background: white;
+  background: var(--bg-primary);
 }
 
 .hero-avatar {

src/components/TowerStatus.vue

@@ -295,7 +295,7 @@ onMounted(() => {
 <style scoped lang="scss">
 
 .tower-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

src/main.js

@@ -13,5 +13,32 @@ app.use(createPinia())
 app.use(router)
 app.use(naive)
 
+// 全局主题应用：从 localStorage 读取并设置 data-theme 属性
+const applyTheme = () => {
+  const saved = localStorage.getItem('theme') || 'auto'
+  if (saved === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  } else if (saved === 'light') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (prefersDark) document.documentElement.setAttribute('data-theme', 'dark')
+    else document.documentElement.removeAttribute('data-theme')
+
+    // 跟随系统变更
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        const t = localStorage.getItem('theme') || 'auto'
+        if (t === 'auto') {
+          if (e.matches) document.documentElement.setAttribute('data-theme', 'dark')
+          else document.documentElement.removeAttribute('data-theme')
+        }
+      })
+    }
+  }
+}
+
+applyTheme()
+
 // 挂载应用
 app.mount('#app')

src/views/DailyTasks.vue

@@ -678,12 +678,22 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .daily-tasks-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .page-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: var(--spacing-xl) 0;
   color: white;
 }
 
+/* 深色主题下头部渐变 */
+[data-theme="dark"] .page-header {
+  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+}
+
 .header-content {
   display: flex;
   justify-content: space-between;
@@ -713,7 +723,7 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
 }
 
 .role-selector-section {
-  background: white;
+  background: var(--bg-primary);
   padding: var(--spacing-lg) 0;
   border-bottom: 1px solid var(--border-light);
 }
@@ -754,7 +764,7 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
 }
 
 .filter-section {
-  background: white;
+  background: var(--bg-primary);
   padding: var(--spacing-md) 0;
   border-bottom: 1px solid var(--border-light);
 }

src/views/Dashboard.vue

@@ -479,7 +479,7 @@ onMounted(async () => {
 
 // 导航栏
 .dashboard-nav {
-  background: white;
+  background: var(--bg-primary);
   border-bottom: 1px solid var(--border-light);
   padding: 0 var(--spacing-lg);
   position: sticky;
@@ -621,7 +621,7 @@ onMounted(async () => {
 }
 
 .stat-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-light);
@@ -689,7 +689,7 @@ onMounted(async () => {
 }
 
 .action-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-light);
@@ -731,7 +731,7 @@ onMounted(async () => {
 
 // 最近活动区域
 .recent-activity-section {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-light);

src/views/GameFeatures.vue

@@ -279,9 +279,14 @@ onUnmounted(() => {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .game-features-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 // 页面头部
 .page-header {
-  background: white;
+  background: var(--bg-primary);
   border-bottom: 1px solid var(--border-light);
   padding: var(--spacing-lg) 0;
 }
@@ -348,7 +353,7 @@ onUnmounted(() => {
 }
 
 .feature-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -482,7 +487,7 @@ onUnmounted(() => {
 }
 
 .ws-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

src/views/GameRoles.vue

@@ -435,7 +435,7 @@ onMounted(async () => {
 }
 
 .role-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   box-shadow: var(--shadow-light);
   overflow: hidden;

src/views/Home.vue

@@ -362,7 +362,7 @@ onMounted(() => {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--spacing-md);
-  background: linear-gradient(45deg, #fff, #e6f7ff);
+  background: linear-gradient(45deg, var(--bg-primary), var(--primary-color-light));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -434,7 +434,7 @@ onMounted(() => {
 // 功能特性区域
 .features-section {
   padding: var(--spacing-2xl) 0;
-  background: white;
+  background: var(--bg-primary);
 }
 
 .section-header {
@@ -504,6 +504,10 @@ onMounted(() => {
   padding: var(--spacing-2xl) 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
+/* 深色主题下统计区背景 */
+[data-theme="dark"] .stats-section {
+  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+}
 
 .stats-grid {
   display: grid;

src/views/Login.vue

@@ -283,6 +283,11 @@ onMounted(() => {
   overflow: hidden;
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .login-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .login-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -301,6 +306,12 @@ onMounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+/* 深色主题下登录卡片 */
+[data-theme="dark"] .login-card {
+  background: rgba(17, 24, 39, 0.85);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .card-header {
   text-align: center;
   margin-bottom: var(--spacing-xl);

src/views/NotFound.vue

@@ -55,6 +55,11 @@ const router = useRouter()
   padding: var(--spacing-lg);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .not-found-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .error-content {
   text-align: center;
   color: white;

src/views/Profile.vue

@@ -341,7 +341,16 @@ const savePreferences = () => {
 
 const updateTheme = (theme) => {
   preferences.theme = theme
-  // 这里可以实际应用主题变更
+  localStorage.setItem('theme', theme)
+  if (theme === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  } else if (theme === 'light') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (prefersDark) document.documentElement.setAttribute('data-theme', 'dark')
+    else document.documentElement.removeAttribute('data-theme')
+  }
 }
 
 const changeAvatar = () => {
@@ -434,7 +443,7 @@ onMounted(() => {
 }
 
 .info-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-light);

src/views/Register.vue

@@ -243,6 +243,11 @@ const handleRegister = async () => {
   padding: var(--spacing-lg);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .register-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .register-container {
   max-width: 500px;
   width: 100%;
@@ -257,6 +262,12 @@ const handleRegister = async () => {
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+/* 深色主题下注册卡片 */
+[data-theme="dark"] .register-card {
+  background: rgba(17, 24, 39, 0.85);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .card-header {
   text-align: center;
   margin-bottom: var(--spacing-xl);

src/views/TokenImport.vue

@@ -488,23 +488,18 @@ const editingToken = ref(null)
 const importMethod = ref('manual')
 const refreshingTokens = ref(new Set())
 
-// 主题控制
+// 主题控制（使用 data-theme 与全局变量匹配）
-const isDarkTheme = computed(() => {
+const isDarkTheme = computed(() => document.documentElement.getAttribute('data-theme') === 'dark')
-  return document.documentElement.classList.contains('dark')
-})
 
 const toggleTheme = () => {
-  const isDark = document.documentElement.classList.contains('dark')
+  const current = document.documentElement.getAttribute('data-theme') === 'dark'
-  if (isDark) {
+  if (current) {
-    document.documentElement.classList.remove('dark')
+    document.documentElement.removeAttribute('data-theme')
     localStorage.setItem('theme', 'light')
   } else {
-    document.documentElement.classList.add('dark')
+    document.documentElement.setAttribute('data-theme', 'dark')
     localStorage.setItem('theme', 'dark')
   }
-  
-  // 触发全局主题更新
-  window.location.reload()
 }
 
 // 导入表单
@@ -1056,6 +1051,11 @@ onMounted(() => {
   padding: var(--spacing-xl) 0;
 }
 
+/* 深色主题下的页面背景 */
+[data-theme="dark"] .token-import-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -1120,7 +1120,7 @@ onMounted(() => {
 }
 
 .import-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-2xl);
   box-shadow: var(--shadow-large);
@@ -1183,58 +1183,58 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 深色主题强制覆盖 */
+/* 深色主题强制覆盖（与全局 data-theme 保持一致） */
-.dark .n-form-item-label,
+[data-theme="dark"] .n-form-item-label,
-.dark .n-form-item-label__text {
+[data-theme="dark"] .n-form-item-label__text {
   color: #ffffff !important;
 }
 
-.dark .n-input__input,
+[data-theme="dark"] .n-input__input,
-.dark .n-input__textarea {
+[data-theme="dark"] .n-input__textarea {
   color: #ffffff !important;
   background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
-.dark .n-input__placeholder {
+[data-theme="dark"] .n-input__placeholder {
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
-.dark .n-card {
+[data-theme="dark"] .n-card {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: #ffffff !important;
 }
 
-.dark .import-card {
+[data-theme="dark"] .import-card {
   background: rgba(45, 55, 72, 0.9) !important;
   color: #ffffff !important;
 }
 
-.dark .import-card h2 {
+[data-theme="dark"] .import-card h2 {
   color: #ffffff !important;
 }
 
-.dark .import-card .subtitle {
+[data-theme="dark"] .import-card .subtitle {
   color: rgba(255, 255, 255, 0.7) !important;
 }
 
-.dark .n-collapse-item__header {
+[data-theme="dark"] .n-collapse-item__header {
   color: #ffffff !important;
 }
 
-.dark .n-collapse-item__content-wrapper {
+[data-theme="dark"] .n-collapse-item__content-wrapper {
   background-color: transparent !important;
 }
 
-.dark .n-radio-button {
+[data-theme="dark"] .n-radio-button {
   color: #ffffff !important;
 }
 
-.dark .n-radio-button--checked {
+[data-theme="dark"] .n-radio-button--checked {
   background-color: rgba(16, 185, 129, 0.8) !important;
   color: #ffffff !important;
 }
 
-.dark .form-tip {
+[data-theme="dark"] .form-tip {
   color: rgba(255, 255, 255, 0.6) !important;
 }
 
@@ -1252,12 +1252,18 @@ onMounted(() => {
 }
 
 .tokens-section {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-medium);
 }
 
+/* 深色主题下的列表区域背景 */
+[data-theme="dark"] .tokens-section {
+  background: rgba(45, 55, 72, 0.9);
+  color: #ffffff;
+}
+
 .section-header {
   display: flex;
   justify-content: space-between;
@@ -1432,7 +1438,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   min-height: 400px;
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   box-shadow: var(--shadow-medium);
 }