update: macos blurred window and radius setup

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "2.0.0-rc", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "2.0.0-rc", features = [
+tauri = { version = "2.0.0-rc", features = [ "macos-private-api",
   "tray-icon"
 ] }
 window-vibrancy = "0.5.2"

src-tauri/tauri.conf.json

@@ -46,6 +46,7 @@
   "identifier": "upup.cool",
   "plugins": {},
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "fullscreen": false,
@@ -61,7 +62,7 @@
         "transparent": true,
         "theme": "Light",
         "hiddenTitle": true,
-        "titleBarStyle": "Overlay"
+        "titleBarStyle": "Transparent"
       }
     ],
     "security": {

src/app/(main)/layout.tsx

@@ -1,6 +1,9 @@
+"use client"
 import Header from "@/components/window/Header";
 import Nav from "@/components/window/Nav";
 import SideBar from "@/components/window/SideBar";
+import clsx from "clsx";
+// import { platform } from "@tauri-apps/plugin-os"
 
 export default function BaseLayout({
   children,
@@ -8,18 +11,24 @@ export default function BaseLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="bg-[#f1f0f2] h-full w-full">
+    <div className="w-full h-full bg-transparent">
+      {/* bg-[#f1f0f2]  */}
       <Nav />
 
       <div className="flex flex-col w-full h-full">
         <SideBar />
 
-        <main className="flex flex-col h-full pb-5 pr-5 ml-20 overflow-hidden ">
+        <main
+          className={clsx(
+            "flex flex-col h-full pb-5 pr-5 ml-20 overflow-hidden"
+            // platform() === "windows" ? "ml-20" : "ml-[4.25rem]"
+          )}
+        >
           <Header />
 
           {children}
         </main>
       </div>
     </div>
-  );
+  )
 }

src/app/globals.css

@@ -10,7 +10,9 @@ body {
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
     Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  background: transparent;
+  /* background: transparent; */
+  background: rgba(242, 241, 243, 0.3);
+  border-radius: 10px;
 }
 
 a {

src/app/page.tsx

@@ -6,7 +6,7 @@ const Home = () => {
   const router = useRouter();
   return (
     <main
-      className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 items-center justify-center"
+      className="flex flex-col items-center justify-center w-full h-screen gap-6"
       data-tauri-drag-region
     >
       <h1 className="text-4xl font-bold tracking-wide text-zinc-800">CS 工具箱</h1>

src/app/prepare/layout.tsx

@@ -2,12 +2,12 @@ import Nav from "@/components/window/Nav"
 
 export default function BaseLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="bg-[#f1f0f2] h-full w-full">
+    <div className="w-full h-full">
       <Nav />
 
       <div className="flex flex-col w-full h-full">
         <main
-          className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 p-6 items-center justify-center"
+          className="flex flex-col items-center justify-center w-full h-screen gap-6 p-6"
           data-tauri-drag-region
         >
           {children}

src/app/prepare/page.tsx

@@ -5,7 +5,7 @@ export default function Page() {
   const { dir, updateDir, csDir, updateCsDir, currentUser } = useSteamStore()
   return (
     <div
-      className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 items-center justify-center"
+      className="flex flex-col items-center justify-center w-full h-screen gap-6"
       data-tauri-drag-region
     >
       <h1 className="text-4xl font-bold tracking-wide text-zinc-800">CS工具箱</h1>

src/components/cstb/CommonDir.tsx

@@ -22,7 +22,7 @@ const CommonDir = () => {
         </CardIcon>
       </CardHeader>
       <CardBody>
-        <div className="flex gap-2.5">
+        <div className="flex gap-1.5">
           <RoundedButton>Steam安装位置</RoundedButton>
           <RoundedButton>CS2游戏目录</RoundedButton>
           <RoundedButton>地图文件</RoundedButton>

src/components/window/Card.tsx

@@ -8,7 +8,7 @@ interface CardProps {
 const Card = ({ children }: CardProps) => {
   return (
     <div
-      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
+      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/80 to-white/70 border-black/[6%]"
       data-tauri-drag-region
     >
       {children}

src/components/window/Nav.tsx

@@ -2,7 +2,7 @@
 import { RocketOne, Minus, Close, Square } from "@icon-park/react"
 import { /* relaunch,  */ exit } from "@tauri-apps/plugin-process"
 import { getCurrentWindow } from "@tauri-apps/api/window"
-// import { invoke } from "@tauri-apps/api/core";
+import { platform } from "@tauri-apps/plugin-os"
 import { useRouter } from "next/navigation"
 
 const Nav = () => {
@@ -41,6 +41,9 @@ const Nav = () => {
       >
         <RocketOne size={16} />
       </button>
+
+      {/* { platform() === "windows" && ( */}
+        <>
           <button
             className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
             onClick={minimize}
@@ -59,6 +62,8 @@ const Nav = () => {
           >
             <Close size={16} />
           </button>
+        </>
+      {/* )} */}
     </nav>
   )
 }

src/components/window/SideBar.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from "react"
 import clsx from "clsx"
 import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
 import { useRouter } from "next/navigation"
+// import { platform } from "@tauri-apps/plugin-os"
 import useAppStore from "@/store/app"
 
 interface SideButtonProps {
@@ -41,7 +42,10 @@ const SideBar = () => {
 
   return (
     <div
-      className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
+      className={clsx(
+        "absolute left-0 flex flex-col h-full select-none w-20 py-7",
+        // platform() === "windows" ? "w-20" : "w-[4.25rem]"
+      )}
       data-tauri-drag-region
     >
       <section className="mx-auto">
@@ -74,7 +78,7 @@ const SideBar = () => {
 
       <div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
         <p>版本号</p>
-        <p onClick={()=> setVersion("x.y.z")}>{version}</p>
+        <p onClick={() => setVersion("x.y.z")}>{version}</p>
       </div>
     </div>
   )