theme

src/stores/appStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { getCurrentWindow, Effect } from '@tauri-apps/api/window'
+import { getCurrentWindow, Effect, EffectState } from '@tauri-apps/api/window'
 
 export type Theme = 'light' | 'dark' | 'system'
 export type EffectType = 'normal' | 'mica' | 'acrylic'
@@ -41,6 +41,11 @@ export const useAppStore = defineStore('app', () => {
 
   const setTheme = async (newTheme: Theme) => {
     theme.value = newTheme
+    // （仅系统级主题广播或更换效果时才刷新）。因此亚克力限制为仅"跟随系统"可用。
+    // 切到非系统主题时若当前为亚克力，自动回退到云母，避免深浅色不同步。
+    if (newTheme !== 'system' && effect.value === 'acrylic') {
+      effect.value = 'mica'
+    }
     await applyTheme()
     saveSettings()
   }
@@ -88,23 +93,31 @@ export const useAppStore = defineStore('app', () => {
 
     try {
       const tauriWindow = getCurrentWindow()
-      
       const isDark = root.classList.contains('dark')
 
+      // 先清除旧效果
       await tauriWindow.clearEffects()
 
       if (effect.value === 'normal') {
+        // 普通模式：不使用原生效果，用不透明背景色
         await tauriWindow.setBackgroundColor(isDark ? '#0f172a' : '#ffffff')
       } else if (effect.value === 'mica') {
+        // 浅色用 micaLight，深色用 micaDark。
+        // 注意：micaDark 仅在系统处于深色模式时才会渲染为深色（Windows 限制）。
+        const micaEffect = (isDark ? 'micaDark' : 'micaLight') as unknown as Effect
         await tauriWindow.setEffects({
-          effects: [Effect.Mica],
-          color: isDark ? '#1e293b' : '#f1f5f9'
+          effects: [micaEffect],
+          state: EffectState.FollowsWindowActiveState,
+          color: isDark ? [30, 41, 59, 0] : [248, 250, 252, 0]
         })
+        // 窗口背景必须透明，原生效果才能显示
         await tauriWindow.setBackgroundColor('#00000000')
       } else if (effect.value === 'acrylic') {
+        // Acrylic：亚克力效果，color 使用半透明 RGBA
         await tauriWindow.setEffects({
           effects: [Effect.Acrylic],
-          color: isDark ? '#1e293b' : '#f1f5f9'
+          state: EffectState.FollowsWindowActiveState,
+          color: isDark ? [30, 41, 59, 0] : [248, 250, 252, 0]
         })
         await tauriWindow.setBackgroundColor('#00000000')
       }
@@ -134,14 +147,22 @@ export const useAppStore = defineStore('app', () => {
   }
 
   const init = async () => {
-    loadSettings()
-    await applyTheme()
-    await applyEffect()
-    
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    mediaQuery.addEventListener('change', handleSystemThemeChange)
-    
-    isInitialized.value = true
+    try {
+      loadSettings()
+      // applyTheme 内部已调用 applyEffect，无需重复调用
+      await applyTheme()
+
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaQuery.addEventListener('change', handleSystemThemeChange)
+
+      isInitialized.value = true
+    } finally {
+      try {
+        await getCurrentWindow().show()
+      } catch (e) {
+        console.error('Failed to show window:', e)
+      }
+    }
   }
 
   return {