测试

src/modules/general/GeneralSettings.vue

@@ -9,22 +9,18 @@ import { useSearchStore } from '@/stores/searchStore'
 import { useProcessStore } from '@/stores/processStore'
 import { getModuleIcon } from '@/modules/icons'
 import { invoke } from '@tauri-apps/api/core'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 const appStore = useAppStore()
 const searchStore = useSearchStore()
 const processStore = useProcessStore()
 
-// 始终反映系统真实的深浅色偏好，用于"跟随系统"卡片色块
-const systemDark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
-const systemMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-const handleSystemMediaChange = (e: MediaQueryListEvent) => {
-  systemDark.value = e.matches
-}
+// 系统真实深浅色偏好，来自 appStore（应用启动时初始化，仅通过 onThemeChanged 更新，
+// 不受 setTheme 污染），用于"跟随系统"卡片色块。
+const systemDark = computed(() => appStore.systemDark)
 
 onMounted(() => {
-  systemMediaQuery.addEventListener('change', handleSystemMediaChange)
   searchStore.registerAction('settings', 0, () => appStore.setTheme('light'))
   searchStore.registerAction('settings', 1, () => appStore.setTheme('dark'))
   searchStore.registerAction('settings', 2, () => appStore.setTheme('system'))
@@ -34,10 +30,6 @@ onMounted(() => {
   searchStore.registerAction('settings', 6, () => appStore.toggleAutoStart())
 })
 
-onUnmounted(() => {
-  systemMediaQuery.removeEventListener('change', handleSystemMediaChange)
-})
-
 const themes: Array<{ id: Theme; name: string; color: string; icon: typeof Sun }> = [
   { id: 'light', name: '浅色模式', color: '#f8fafc', icon: Sun },
   { id: 'dark', name: '深色模式', color: '#1e293b', icon: Moon },