@@ -53,4 +48,4 @@ const activeComponent = computed(() => {
opacity: 0;
transform: translateX(-20px);
}
-
\ No newline at end of file
+
diff --git a/src/main.ts b/src/main.ts
index acba810..70cb2fd 100644
--- a/src/main.ts
+++ b/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')
\ No newline at end of file
+// 应用挂载后再初始化搜索索引，不阻塞首屏渲染
+void import('./stores/searchStore').then(({ useSearchStore }) => {
+ useSearchStore().initGlobalIndex()
+})
\ No newline at end of file
diff --git a/src/modules/general/GeneralSettings.vue b/src/modules/general/GeneralSettings.vue
index 838b4f0..58a80e7 100644
--- a/src/modules/general/GeneralSettings.vue
+++ b/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)"
>
-
-
-
+
{{ theme.name }}
-
@@ -125,34 +165,32 @@ const quitApp = async () => {