update dep + preference styles setup

src/app/(main)/preference/general/page.tsx

@@ -1,12 +1,16 @@
 "use client"
 import useAppStore from "@/store/app"
 
-export default function Page () {
-  const { version } = useAppStore()
+export default function Page() {
+  const app = useAppStore()
 
   return (
-    <div className="flex flex-col items-start gap-3">
-      <button>版本号：{version}</button>
+    <div className="flex flex-col items-start gap-3 pt-2 pb-1">
+      <p>版本号：{app.version}</p>
+      <p>是否有更新：{app.hasUpdate ? "有" : "无"}</p>
+      <p>初始化：{app.inited ? "是" : "否"}</p>
+      <p>公告：{app.notice}</p>
+      <p>是否使用镜像源：{app.useMirror ? "是" : "否"}</p>
     </div>
   )
-}
+}

src/app/(main)/preference/layout.tsx

@@ -1,23 +1,38 @@
 "use client"
 import { Card, CardHeader, CardIcon, CardTool, CardBody } from "@/components/window/Card"
 import { ToolButton } from "@/components/window/ToolButton"
-import { SettingConfig, UploadOne, HardDisk } from "@icon-park/react"
-import { useRouter } from "next/navigation"
+import { SettingConfig, UploadOne, HardDisk, AssemblyLine, Videocamera } from "@icon-park/react"
+import clsx from "clsx"
+import { usePathname, useRouter } from "next/navigation"
 // import { platform } from "@tauri-apps/plugin-os"
 
 export default function PreferenceLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter()
+  const pathname = usePathname()
+
   return (
     <Card className="max-w-full overflow-y-scroll">
       <CardHeader>
-        <CardIcon onClick={() => router.push("/preference/general")}>
+        <CardIcon
+          type="menu"
+          onClick={() => router.push("/preference/general")}
+          className={clsx(pathname === "/preference/general" && "bg-white/60")}
+        >
           <SettingConfig /> 通用
         </CardIcon>
-        <CardIcon onClick={() => router.push("/preference/path")}>
-          <SettingConfig /> 路径
+        <CardIcon
+          type="menu"
+          onClick={() => router.push("/preference/path")}
+          className={clsx(pathname === "/preference/path" && "bg-white/60")}
+        >
+          <AssemblyLine /> 路径
         </CardIcon>
-        <CardIcon onClick={() => router.push("/preference/replay")}>
-          <SettingConfig /> 录像
+        <CardIcon
+          type="menu"
+          onClick={() => router.push("/preference/replay")}
+          className={clsx(pathname === "/preference/replay" && "bg-white/60")}
+        >
+          <Videocamera /> 录像
         </CardIcon>
 
         <CardTool>

src/app/(main)/preference/path/page.tsx

@@ -1,4 +1,16 @@
 "use client"
+import SteamStore from "@/store/steam"
+
 export default function Page() {
-  return <>Path</>
+  const steam = SteamStore()
+
+  return (
+    <div className="flex flex-col items-start gap-3 pt-2 pb-1">
+      <p>Steam路径：{steam.dir}</p>
+      <p>游戏路径：{steam.csDir}</p>
+      <p>Steam路径有效：{steam.isDirValid ? "是" : "否"}</p>
+      <p>游戏路径有效：{steam.isCsDirValid ? "是" : "否"}</p>
+      <p>Steam账号：{steam.currentUser().accountName}</p>
+    </div>
+  )
 }

src/app/globals.css

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

src/components/window/Card.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from "react"
+import clsx from "clsx"
 
 interface CardProps {
   children?: ReactNode
   className?: string
+  type?: string
   onClick?: () => void
 }
 
@@ -18,12 +20,12 @@ const Card = ({ children }: CardProps) => {
 }
 
 const CardHeader = ({ children }: CardProps) => {
-  return <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+  return <div className="flex items-center gap-1.5 tracking-wide">{children}</div>
 }
 
-const CardIcon = ({ children, ...rest }: CardProps) => {
+const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
   return (
-    <div className="flex gap-1.5 items-center font-semibold" {...rest}>
+    <div className={clsx("flex gap-1.5 items-center font-semibold", type === "menu" && "transition cursor-pointer hover:bg-white/60 px-2 py-1 rounded-md active:scale-95", className)} {...rest}>
       {children}
     </div>
   )

src/components/window/Nav.tsx

@@ -3,7 +3,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 { platform } from "@tauri-apps/plugin-os"
-import { useRouter } from "next/navigation"
+import { useRouter, usePathname  } from "next/navigation"
 
 const Nav = () => {
   const close = async () => {
@@ -32,12 +32,13 @@ const Nav = () => {
   //   await relaunch()
   // }
   const router = useRouter()
+  const pathname = usePathname()
 
   return (
     <nav className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4" data-tauri-drag-region>
       <button
         className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
-        onClick={() => router.push("/prepare")}
+        onClick={() => pathname !== "/prepare" ? router.push("/prepare") : router.back()}
       >
         <RocketOne size={16} />
       </button>