feat: add window shadows to windows system, close #14 (#59)

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "chat_gpt"
-version = "0.0.4"
+version = "0.0.5"
 description = "ChatGPT-Desktop"
 authors = ["orangelckc", "bilibili-ayang"]
 license = "MIT"
@@ -17,6 +17,7 @@ tauri = { version = "1.2", features = ["api-all", "macos-private-api", "system-t
 tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+window-shadows = "0.2.1"
 
 
 [dependencies.tauri-plugin-sql]

src-tauri/src/main.rs

@@ -1,7 +1,9 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use tauri::Manager;
 use tauri_plugin_autostart::MacosLauncher;
+use window_shadows::set_shadow;
 
 mod tray;
 
@@ -10,6 +12,11 @@ fn main() {
         .setup(|_app| {
             #[cfg(target_os = "macos")]
             _app.set_activation_policy(tauri::ActivationPolicy::Accessory);
+
+            #[cfg(any(windows, target_os = "macos"))]
+            let window = _app.get_window("main").unwrap();
+            set_shadow(&window, true).expect("Unsupported platform!");
+
             Ok(())
         })
         .system_tray(tray::main_menu())

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { appWindow } from '@tauri-apps/api/window'
+import { platform } from '@tauri-apps/api/os'
 import { initSQL } from '@/sqls'
 import { useSettingsStore } from '@/stores'
 import { useObserverLink } from '@/hooks'
@@ -8,6 +9,8 @@ const { isFix, windowFocused } = storeToRefs(useSettingsStore())
 
 const isLoading = ref(true)
 
+const windowClass = ref('')
+
 onMounted(async () => {
   await initSQL()
 
@@ -31,12 +34,29 @@ onMounted(async () => {
     })
   }
 })
+
+watch(
+  windowFocused,
+  async (newValue) => {
+    const platformName = await platform()
+
+    if (platformName !== 'darwin') {
+      windowClass.value = 'bordered'
+    } else {
+      let className = 'rounded-xl '
+      className += newValue ? 'bordered' : 'bordered-transparent'
+
+      windowClass.value = className
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
   <div
-    class="frosted flex h-screen flex-col overflow-hidden rounded-xl p-2"
-    :class="[windowFocused ? 'bordered' : 'bordered-transparent']"
+    class="frosted flex h-screen flex-col overflow-hidden p-2"
+    :class="[windowClass]"
   >
     <div
       class="bg-gray/60 z-999 transition-300 fixed top-2 left-1/2 h-3 w-80 -translate-x-1/2 cursor-move rounded-md opacity-0 hover:opacity-100"

src/components/Function/components/ShortcutKey.vue

@@ -64,7 +64,7 @@ const handleKeyup = (event: KeyboardEvent) => {
       @keyup="handleKeyup"
     >
       <div
-        class="text-6 flex items-center gap-2 font-bold leading-none text-[var(--color-text-4)]"
+        class="text-6 flex items-center gap-2 font-sans font-bold leading-none text-[var(--color-text-4)]"
       >
         <!-- 热键 -->
         <span