feat: change window style

src-tauri/src/utils/resolve.rs

@@ -1,24 +1,10 @@
 use super::{init, server};
 use crate::{core::Profiles, states};
 use tauri::{App, AppHandle, Manager};
-use tauri_plugin_shadows::Shadows;
 
 /// handle something when start app
 pub fn resolve_setup(app: &App) {
-  // set shadow when window decorations
+  resolve_window(app);
-  let window = app.get_window("main").unwrap();
-  window.set_shadow(true);
-
-  // enable system blur
-  use tauri_plugin_vibrancy::Vibrancy;
-  #[cfg(target_os = "windows")]
-  window.apply_blur();
-  #[cfg(target_os = "macos")]
-  {
-    use tauri_plugin_vibrancy::MacOSVibrancy;
-    #[allow(deprecated)]
-    window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
-  }
 
   // setup a simple http server for singleton
   server::embed_server(&app.handle());
@@ -58,3 +44,34 @@ pub fn resolve_reset(app_handle: &AppHandle) {
 
   verge.reset_sysproxy();
 }
+
+/// customize the window theme
+fn resolve_window(app: &App) {
+  let window = app.get_window("main").unwrap();
+
+  #[cfg(target_os = "windows")]
+  {
+    use tauri_plugin_shadows::Shadows;
+    use tauri_plugin_vibrancy::Vibrancy;
+
+    window.set_decorations(false).unwrap();
+    window.set_shadow(true);
+    window.apply_blur();
+  }
+
+  #[cfg(target_os = "macos")]
+  {
+    use tauri::LogicalSize;
+    use tauri::Size::Logical;
+    window.set_decorations(true).unwrap();
+    window
+      .set_size(Logical(LogicalSize {
+        width: 800.0,
+        height: 610.0,
+      }))
+      .unwrap();
+    // use tauri_plugin_vibrancy::MacOSVibrancy;
+    // #[allow(deprecated)]
+    // window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
+  }
+}

src/assets/styles/layout.scss

@@ -20,8 +20,8 @@
       position: relative;
       flex: 0 1 180px;
       width: 100%;
-      max-width: 180px;
+      max-width: 168px;
-      max-height: 180px;
+      max-height: 168px;
       margin: 0 auto;
       padding: 0 8px;
       text-align: center;
@@ -79,3 +79,9 @@
     }
   }
 }
+
+.macos.layout {
+  .layout__right .the-content {
+    top: 0;
+  }
+}

src/components/layout/layout-traffic.tsx

@@ -54,7 +54,7 @@ const LayoutTraffic = () => {
   };
 
   return (
-    <Box data-windrag width="110px" position="relative" onClick={toggleStyle}>
+    <Box width="110px" position="relative" onClick={toggleStyle}>
       {trafficGraph && (
         <canvas
           ref={canvasRef}

src/components/setting/setting-verge.tsx

@@ -39,8 +39,8 @@ const SettingVerge = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={onSwitchFormat}
           onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
-          onGuard={(c) =>
+          onGuard={(e) =>
-            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+            patchVergeConfig({ theme_mode: e ? "dark" : "light" })
           }
         >
           <PaletteSwitch edge="end" />

src/pages/_layout.tsx

@@ -13,6 +13,8 @@ import LayoutControl from "../components/layout/layout-control";
 import LayoutTraffic from "../components/layout/layout-traffic";
 import UpdateButton from "../components/layout/update-button";
 
+const isMacos = navigator.userAgent.includes("Mac OS X");
+
 const Layout = () => {
   const { mutate } = useSWRConfig();
   const { data } = useSWR("getVergeConfig", getVergeConfig);
@@ -67,7 +69,7 @@ const Layout = () => {
         <Paper
           square
           elevation={0}
-          className="layout"
+          className={`${isMacos ? "macos " : ""}layout`}
           onPointerDown={onDragging}
           sx={[
             (theme) => ({
@@ -96,9 +98,11 @@ const Layout = () => {
           </div>
 
           <div className="layout__right" data-windrag>
+            {!isMacos && (
               <div className="the-bar">
                 <LayoutControl />
               </div>
+            )}
 
             <div className="the-content">
               <Routes>