From 97ec5eabf7c559b4d77b15427cef098d200d736e Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 20 Feb 2022 23:46:13 +0800
Subject: [PATCH] feat: change window style

---
 src-tauri/src/utils/resolve.rs           | 47 ++++++++++++++++--------
 src/assets/styles/layout.scss            | 10 ++++-
 src/components/layout/layout-traffic.tsx |  2 +-
 src/components/setting/setting-verge.tsx |  4 +-
 src/pages/_layout.tsx                    | 12 ++++--
 5 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src-tauri/src/utils/resolve.rs b/src-tauri/src/utils/resolve.rs
index 10aa7c9..d6b959d 100644
--- a/src-tauri/src/utils/resolve.rs
+++ b/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
-  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);
-  }
+  resolve_window(app);
 
   // 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);
+  }
+}
diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index 6b20b9f..e75887f 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -20,8 +20,8 @@
       position: relative;
       flex: 0 1 180px;
       width: 100%;
-      max-width: 180px;
-      max-height: 180px;
+      max-width: 168px;
+      max-height: 168px;
       margin: 0 auto;
       padding: 0 8px;
       text-align: center;
@@ -79,3 +79,9 @@
     }
   }
 }
+
+.macos.layout {
+  .layout__right .the-content {
+    top: 0;
+  }
+}
diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index e7a7efb..c1d1c49 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/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}
diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx
index d71d55b..8a5470f 100644
--- a/src/components/setting/setting-verge.tsx
+++ b/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) =>
-            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+          onGuard={(e) =>
+            patchVergeConfig({ theme_mode: e ? "dark" : "light" })
           }
         >
           <PaletteSwitch edge="end" />
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 777ab54..e54b4f4 100644
--- a/src/pages/_layout.tsx
+++ b/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>
-            <div className="the-bar">
-              <LayoutControl />
-            </div>
+            {!isMacos && (
+              <div className="the-bar">
+                <LayoutControl />
+              </div>
+            )}
 
             <div className="the-content">
               <Routes>