feat: change window style

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;
+  }
+}

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) =>
-            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+          onGuard={(e) =>
+            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>
-            <div className="the-bar">
-              <LayoutControl />
-            </div>
+            {!isMacos && (
+              <div className="the-bar">
+                <LayoutControl />
+              </div>
+            )}
 
             <div className="the-content">
               <Routes>