feat: the frosting effect is implemented in css

src-tauri/Cargo.toml

@@ -16,7 +16,6 @@ tauri-build = { version = "1.2", features = [] }
 tauri = { version = "1.2", features = ["api-all", "macos-private-api", "system-tray"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-window-vibrancy = "0.3.2"
 
 
 [dependencies.tauri-plugin-sql]

src-tauri/src/main.rs

@@ -1,13 +1,5 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-use tauri::Manager;
-use window_vibrancy::{NSVisualEffectMaterial, NSVisualEffectState};
-
-#[cfg(target_os = "macos")]
-use window_vibrancy::apply_vibrancy;
-
-#[cfg(target_os = "windows")]
-use window_vibrancy::apply_blur;
 
 mod folder;
 mod tray;
@@ -16,23 +8,6 @@ fn main() {
     folder::create_folder();
 
     tauri::Builder::default()
-        .setup(|app| {
-            let window = app.get_window("main").unwrap();
-
-            #[cfg(target_os = "macos")]
-            apply_vibrancy(
-                &window,
-                NSVisualEffectMaterial::HudWindow,
-                Some(NSVisualEffectState::Active),
-                None,
-            )
-            .expect("当前系统不支持磨砂效果");
-
-            #[cfg(target_os = "windows")]
-            apply_blur(&window, Some((18, 18, 18, 125))).expect("当前系统不支持磨砂效果");
-
-            Ok(())
-        })
         .system_tray(tray::main_menu())
         .plugin(tauri_plugin_sql::Builder::default().build())
         .on_system_tray_event(tray::handler)

src/App.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
 import Theme from './components/Theme/index.vue'
-import { useAppStore } from '@/stores'
+import { useThemeStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 
-const { themeMode, themeStyle } = storeToRefs(useAppStore())
+const { themeClass } = storeToRefs(useThemeStore())
 </script>
 
 <template>
   <Suspense>
     <div
-      class="h-screen rounded-xl"
-      style="background: inherit"
+      class="app relative h-screen overflow-hidden rounded-2xl"
+      :class="themeClass"
       data-tauri-drag-region
-      :data-theme="themeMode"
-      :class="themeStyle"
     >
-      <button class="btn btn-active btn-ghost">Button</button>
-
       <Theme />
     </div>
   </Suspense>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.app {
+  &::before,
+  &::after {
+    @apply -z-1 absolute top-0 left-0 right-0 bottom-0 bg-inherit blur-3xl content-none;
+  }
+}
+</style>

src/components/Theme/index.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { useAppStore } from '@/stores'
-import { AppTheme } from '@/constants'
+import { useThemeStore } from '@/stores'
+import { APP_THEME } from '@/constants'
 import { storeToRefs } from 'pinia'
 
-const { themeMode } = storeToRefs(useAppStore())
+const { themeMode } = storeToRefs(useThemeStore())
 </script>
 
 <template>
-  <label class="swap swap-rotate">
+  <label class="swap swap-rotate fixed! top-4 right-4">
     <input
       type="checkbox"
-      :checked="themeMode === AppTheme.light"
+      :checked="themeMode === APP_THEME.light"
       @click="
         themeMode =
-          themeMode === AppTheme.light ? AppTheme.dark : AppTheme.light
+          themeMode === APP_THEME.light ? APP_THEME.dark : APP_THEME.light
       "
     />
 
     <svg
-      class="swap-off h-10 w-10 fill-current"
+      class="swap-off h-8 w-8 fill-current"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
     >
@@ -28,7 +28,7 @@ const { themeMode } = storeToRefs(useAppStore())
     </svg>
 
     <svg
-      class="swap-on h-10 w-10 fill-current"
+      class="swap-on h-8 w-8 fill-current"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
     >

src/constants/index.ts

@@ -1,4 +1 @@
-export enum AppTheme {
-  light = 'light',
-  dark = 'dark'
-}
+export * from './shared'

src/constants/shared.ts

@@ -0,0 +1,4 @@
+export enum APP_THEME {
+  light = 'light',
+  dark = 'dark'
+}

src/stores/index.ts

@@ -1,18 +1 @@
-import { AppTheme } from '@/constants'
-
-// @unocss-include
-export const useAppStore = defineStore(
-  'app',
-  () => {
-    const themeMode = ref(AppTheme.light)
-
-    const themeStyle = computed(() =>
-      themeMode.value === AppTheme.light ? 'bg-white/50' : 'bg-black/50'
-    )
-
-    return { themeMode, themeStyle }
-  },
-  {
-    persist: true
-  }
-)
+export * from './theme'

src/stores/theme.ts

@@ -0,0 +1,22 @@
+import { APP_THEME } from '@/constants'
+
+// @unocss-include
+export const useThemeStore = defineStore(
+  'theme',
+  () => {
+    const themeMode = ref(APP_THEME.light)
+
+    const themeClass = computed(() =>
+      themeMode.value === APP_THEME.light ? 'bg-white/65' : 'bg-black/65'
+    )
+
+    watch(themeMode, (newTheme) => {
+      document.documentElement.setAttribute('data-theme', newTheme)
+    })
+
+    return { themeMode, themeClass }
+  },
+  {
+    persist: true
+  }
+)