theme

public/tauri.svg

@@ -1,6 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
-<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
-</svg>

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src-tauri/tauri.conf.json

@@ -16,7 +16,11 @@
         "width": 1000,
         "height": 700,
         "decorations": false,
-        "transparent": true
+        "transparent": true,
+        "visible": false,
+        "windowEffects": {
+          "effects": ["acrylic", "mica"]
+        }
       }
     ],
     "security": {

src/App.vue

@@ -1,41 +1,76 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, shallowRef, markRaw, type Component } from 'vue'
 import TitleBar from '@/components/layout/TitleBar.vue'
 import Sidebar from '@/components/layout/Sidebar.vue'
 import ModuleContainer from '@/components/layout/ModuleContainer.vue'
-import ProxyModule from '@/modules/proxy/ProxyModule.vue'
-import ClipboardModule from '@/modules/clipboard/ClipboardModule.vue'
-import ScreenshotModule from '@/modules/screenshot/ScreenshotModule.vue'
-import MonitorModule from '@/modules/monitor/MonitorModule.vue'
-import DownloaderModule from '@/modules/downloader/DownloaderModule.vue'
-import FinderModule from '@/modules/finder/FinderModule.vue'
 import GeneralSettings from '@/modules/general/GeneralSettings.vue'
 import { useAppStore } from '@/stores/appStore'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
 const appStore = useAppStore()
 
-const modules = [
-  { id: 'proxy', name: '代理管理', icon: 'proxy', component: ProxyModule },
-  { id: 'clipboard', name: '剪贴板', icon: 'clipboard', component: ClipboardModule },
-  { id: 'screenshot', name: '截图', icon: 'screenshot', component: ScreenshotModule },
-  { id: 'monitor', name: '硬件监控', icon: 'monitor', component: MonitorModule },
-  { id: 'downloader', name: '下载器', icon: 'downloader', component: DownloaderModule },
-  { id: 'finder', name: '文件搜索', icon: 'finder', component: FinderModule },
-  { id: 'settings', name: '常规设置', icon: 'settings', component: GeneralSettings }
+interface ModuleMeta {
+  id: string
+  name: string
+  icon: string
+  // 同步加载的模块直接传 Component；懒加载的传 import 工厂
+  loader?: () => Promise<{ default: Component }>
+  component?: Component
+}
+
+// 常规设置是默认可见且轻量的，直接同步引入
+// 其他业务模块较大且首屏不一定需要，懒加载
+const modules: ModuleMeta[] = [
+  { id: 'proxy', name: '代理管理', icon: 'proxy', loader: () => import('@/modules/proxy/ProxyModule.vue') },
+  { id: 'clipboard', name: '剪贴板', icon: 'clipboard', loader: () => import('@/modules/clipboard/ClipboardModule.vue') },
+  { id: 'screenshot', name: '截图', icon: 'screenshot', loader: () => import('@/modules/screenshot/ScreenshotModule.vue') },
+  { id: 'monitor', name: '硬件监控', icon: 'monitor', loader: () => import('@/modules/monitor/MonitorModule.vue') },
+  { id: 'downloader', name: '下载器', icon: 'downloader', loader: () => import('@/modules/downloader/DownloaderModule.vue') },
+  { id: 'finder', name: '文件搜索', icon: 'finder', loader: () => import('@/modules/finder/FinderModule.vue') },
+  { id: 'settings', name: '常规设置', icon: 'settings', component: markRaw(GeneralSettings) }
 ]
 
 const activeModule = ref('proxy')
 
+// 当前激活的组件实例（shallowRef 适合大组件）
+const activeComponent = shallowRef<Component | null>(null)
+
+// 加载模块组件
+const loadModule = async (moduleId: string) => {
+  const m = modules.find(mod => mod.id === moduleId)
+  if (!m) {
+    activeComponent.value = null
+    return
+  }
+  if (m.component) {
+    activeComponent.value = m.component
+    return
+  }
+  if (m.loader) {
+    try {
+      const mod = await m.loader()
+      // 缓存到 component，避免重复加载
+      m.component = markRaw(mod.default)
+      activeComponent.value = m.component
+    } catch (e) {
+      console.error(`Failed to load module ${moduleId}:`, e)
+    }
+  }
+}
+
 const handleModuleChange = (moduleId: string) => {
   activeModule.value = moduleId
+  loadModule(moduleId)
 }
 
 const handleSearch = (moduleId: string) => {
   activeModule.value = moduleId
+  loadModule(moduleId)
 }
 
 onMounted(() => {
+  // 首次加载默认模块
+  loadModule(activeModule.value)
   appStore.init().catch(e => console.error('App init error:', e))
 })
 </script>
@@ -50,7 +85,7 @@ onMounted(() => {
           :active-module="activeModule" 
           @change="handleModuleChange"
         />
-        <ModuleContainer :modules="modules" :active-module="activeModule" />
+        <ModuleContainer :active-component="activeComponent" :active-module="activeModule" />
       </div>
     </div>
   </TooltipProvider>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/layout/ModuleContainer.vue

@@ -1,33 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { Component } from 'vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
 
-const props = defineProps<{
-  modules: Array<{ id: string; name: string; icon: string; component: unknown }>
+defineProps<{
+  activeComponent: Component | null
   activeModule: string
 }>()
-
-const activeComponent = computed(() => {
-  const module = props.modules.find(m => m.id === props.activeModule)
-  return module?.component || null
-})
 </script>
 
 <template>
-  <main 
+  <main
     class="flex-1"
     :style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
   >
     <ScrollArea class="h-full w-full">
       <Transition name="fade-slide" mode="out-in">
-        <div 
-          v-if="activeComponent" 
+        <div
+          v-if="activeComponent"
           :key="activeModule"
           class="min-h-full w-full"
         >
           <component :is="activeComponent" />
         </div>
-        <div 
+        <div
           v-else
           class="h-full w-full flex items-center justify-center text-muted-foreground"
         >
@@ -53,4 +48,4 @@ const activeComponent = computed(() => {
   opacity: 0;
   transform: translateX(-20px);
 }
-</style>
+</style>

src/main.ts

@@ -2,14 +2,15 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import './style.css'
-import { useSearchStore } from './stores/searchStore'
 
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
 
-const searchStore = useSearchStore()
-searchStore.initGlobalIndex()
+app.mount('#app')
 
-app.mount('#app')
+// 应用挂载后再初始化搜索索引，不阻塞首屏渲染
+void import('./stores/searchStore').then(({ useSearchStore }) => {
+  useSearchStore().initGlobalIndex()
+})

src/modules/general/GeneralSettings.vue

@@ -7,12 +7,20 @@ import { Button } from '@/components/ui/button'
 import { useAppStore, type Theme, type EffectType } from '@/stores/appStore'
 import { useSearchStore } from '@/stores/searchStore'
 import { invoke } from '@tauri-apps/api/core'
-import { onMounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const appStore = useAppStore()
 const searchStore = useSearchStore()
 
+// 始终反映系统真实的深浅色偏好，用于“跟随系统”卡片色块
+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
+}
+
 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'))
@@ -22,21 +30,50 @@ 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 },
   { id: 'system', name: '跟随系统', color: '#64748b', icon: Monitor }
 ]
 
-const effects: Array<{ id: EffectType; name: string; color: string; description: string }> = [
-  { id: 'normal', name: '普通模式', color: '#ffffff', description: '标准背景效果' },
-  { id: 'mica', name: 'Win 云母', color: '#e2e8f0', description: 'Windows 11 云母效果' },
-  { id: 'acrylic', name: 'Win 亚克力', color: '#cbd5e1', description: 'Windows 11 亚克力效果' }
+const effects: Array<{ id: EffectType; name: string; color: string; darkColor: string; description: string }> = [
+  { id: 'normal', name: '普通模式', color: '#ffffff', darkColor: '#0f172a', description: '标准背景效果' },
+  { id: 'mica', name: 'Win 云母', color: '#f1f5f9', darkColor: '#1e293b', description: 'Windows 11 云母效果' },
+  { id: 'acrylic', name: 'Win 亚克力', color: '#cbd5e1', darkColor: '#18181b', description: '仅跟随系统主题可用' }
 ]
 
+// 亚克力仅在"跟随系统"主题下能正确同步深浅色（无深浅枚举，依赖系统级主题广播刷新）
+const isAcrylicDisabled = () => appStore.theme !== 'system'
+
+// 应用当前是否为深色模式（响应式，随主题与系统偏好变化）
+const isAppDark = computed(() => {
+  if (appStore.theme === 'dark') return true
+  if (appStore.theme === 'light') return false
+  return systemDark.value
+})
+
+// 色块阴影：浅色主题用黑色阴影；深色主题黑色阴影不可见，改用微弱亮色高光模拟凸起感
+const blockShadow = computed(() =>
+  isAppDark.value
+    ? '0 4px 10px rgba(255, 255, 255, 0.08)'
+    : '0 4px 10px rgba(0, 0, 0, 0.2)'
+)
+
+// 效果卡片色块预览色：根据当前深浅模式返回对应颜色，尽量接近实际材质效果
+const getEffectColor = (effectId: EffectType) => {
+  const eff = effects.find(e => e.id === effectId)
+  if (!eff) return '#ffffff'
+  return isAppDark.value ? eff.darkColor : eff.color
+}
+
 const getThemeColor = (themeId: Theme) => {
   if (themeId === 'system') {
-    return appStore.theme === 'dark' ? '#1e293b' : '#f8fafc'
+    // 始终使用系统真实的深浅色，而非应用当前主题
+    return systemDark.value ? '#1e293b' : '#f8fafc'
   }
   const theme = themes.find(t => t.id === themeId)
   return theme?.color || '#f8fafc'
@@ -87,24 +124,27 @@ const quitApp = async () => {
               :class="appStore.theme === theme.id ? 'border-primary shadow-md' : 'border-border hover:border-primary/50'"
               @click="appStore.setTheme(theme.id)"
             >
-              <div 
+              <div
                 class="h-16 w-full flex items-center justify-center transition-all duration-300"
-                :style="{ backgroundColor: getThemeColor(theme.id) }"
+                :style="{
+                  backgroundColor: getThemeColor(theme.id),
+                  boxShadow: blockShadow
+                }"
               >
-                <component 
-                  :is="theme.icon" 
+                <component
+                  :is="theme.icon"
                   class="h-8 w-8 transition-colors duration-300"
-                  :class="theme.id === 'dark' || (theme.id === 'system' && appStore.theme === 'dark') ? 'text-white' : 'text-gray-800'"
+                  :class="theme.id === 'dark' || (theme.id === 'system' && systemDark) ? 'text-white' : 'text-gray-800'"
                 />
               </div>
-              <div class="h-10 flex items-center justify-center bg-card">
+              <div class="h-10 flex items-center justify-center">
                 <span class="text-sm font-medium">{{ theme.name }}</span>
               </div>
               <div 
                 v-if="appStore.theme === theme.id"
-                class="absolute top-2 right-2 w-5 h-5 bg-primary rounded-full flex items-center justify-center"
+                class="absolute top-2 right-2 w-5 h-5 bg-primary dark:bg-white rounded-full flex items-center justify-center"
               >
-                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-3 h-3 text-white dark:text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                 </svg>
               </div>
@@ -125,34 +165,32 @@ const quitApp = async () => {
             <button
               v-for="effect in effects"
               :key="effect.id"
-              class="group relative rounded-lg overflow-hidden border-2 transition-all duration-300 hover:shadow-lg"
-              :class="appStore.effect === effect.id ? 'border-primary shadow-md' : 'border-border hover:border-primary/50'"
+              :disabled="effect.id === 'acrylic' && isAcrylicDisabled()"
+              class="group relative rounded-lg overflow-hidden border-2 transition-all duration-300"
+              :class="[
+                appStore.effect === effect.id ? 'border-primary shadow-md' : 'border-border',
+                effect.id === 'acrylic' && isAcrylicDisabled()
+                  ? 'opacity-50 cursor-not-allowed'
+                  : 'hover:shadow-lg hover:border-primary/50'
+              ]"
               @click="appStore.setEffect(effect.id)"
             >
-              <div 
-                class="h-16 w-full flex items-center justify-center transition-all duration-300"
-                :style="{ 
-                  backgroundColor: effect.id === 'normal' ? '#ffffff' : effect.id === 'mica' ? '#e2e8f040' : '#cbd5e120',
-                  backdropFilter: effect.id === 'mica' ? 'blur(12px)' : effect.id === 'acrylic' ? 'blur(20px)' : 'none'
+              <div
+                class="h-16 w-full transition-all duration-300"
+                :style="{
+                  backgroundColor: getEffectColor(effect.id),
+                  boxShadow: blockShadow
                 }"
-              >
-                <div 
-                  class="w-12 h-12 rounded-lg border border-border/50"
-                  :style="{ 
-                    backgroundColor: effect.color,
-                    backdropFilter: effect.id === 'mica' ? 'blur(8px)' : effect.id === 'acrylic' ? 'blur(16px)' : 'none'
-                  }"
-                ></div>
-              </div>
-              <div class="h-14 flex flex-col items-center justify-center bg-card p-2">
+              ></div>
+              <div class="h-14 flex flex-col items-center justify-center p-2">
                 <span class="text-sm font-medium">{{ effect.name }}</span>
                 <span class="text-xs text-muted-foreground">{{ effect.description }}</span>
               </div>
               <div 
                 v-if="appStore.effect === effect.id"
-                class="absolute top-2 right-2 w-5 h-5 bg-primary rounded-full flex items-center justify-center"
+                class="absolute top-2 right-2 w-5 h-5 bg-primary dark:bg-white rounded-full flex items-center justify-center"
               >
-                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-3 h-3 text-white dark:text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                 </svg>
               </div>

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 {

src/style.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
 @import "tailwindcss";
 @import "tw-animate-css";
 
@@ -116,30 +114,32 @@
 }
 
 .effect-mica {
-  --effect-bg: rgba(248, 250, 252, 0.75);
-  --effect-blur: blur(16px);
+  --effect-bg: transparent;
+  --effect-blur: none;
 }
 
 .dark.effect-mica {
-  --effect-bg: rgba(15, 23, 42, 0.8);
+  --effect-bg: transparent;
+  --effect-blur: none;
 }
 
 .effect-acrylic {
-  --effect-bg: rgba(248, 250, 252, 0.55);
-  --effect-blur: blur(24px);
+  --effect-bg: transparent;
+  --effect-blur: none;
 }
 
 .dark.effect-acrylic {
-  --effect-bg: rgba(15, 23, 42, 0.65);
+  --effect-bg: transparent;
+  --effect-blur: none;
 }
 
 .effect-normal {
-  --effect-bg: rgba(255, 255, 255, 0.98);
-  --effect-blur: blur(0px);
+  --effect-bg: rgba(255, 255, 255, 0.99);
+  --effect-blur: none;
 }
 
 .dark.effect-normal {
-  --effect-bg: rgba(15, 23, 42, 0.98);
+  --effect-bg: rgba(11, 17, 31, 0.99);
 }
 
 @layer base {
@@ -147,12 +147,15 @@
     @apply border-border outline-ring/50;
   }
   html, body {
-    background: transparent;
+    background: transparent !important;
     @apply text-foreground antialiased;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: 'tnum', 'lnum';
   }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 #app {
@@ -161,13 +164,4 @@
   overflow: hidden;
   background: transparent;
   @apply antialiased;
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
 }