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