[feat] adapt steam store + adjust dark mode styles

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

@@ -1,12 +1,18 @@
 "use client"
 import { appStore } from "@/store/app"
+import { useEffect } from "react"
 import { useSnapshot } from "valtio"
 
 export default function Page() {
+  useEffect(() => {
+    ;async () => {
+      appStore.start()
+    }
+  }, [])
   const app = useSnapshot(appStore.state)
 
   return (
-    <div className="flex flex-col gap-3 items-start pt-2 pb-1">
+    <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>

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

@@ -1,8 +1,15 @@
 "use client"
-import SteamStore from "@/store/steam"
+import { currentUser, steamStore } from "@/store/steam"
+import { useEffect } from "react"
+import { useSnapshot } from "valtio"
 
 export default function Page() {
-  const steam = SteamStore()
+  useEffect(() => {
+    ;async () => {
+      steamStore.start()
+    }
+  }, [])
+  const steam = useSnapshot(steamStore.state)
 
   return (
     <div className="flex flex-col items-start gap-3 pt-2 pb-1">
@@ -10,7 +17,7 @@ export default function Page() {
       <p>游戏路径：{steam.csDir}</p>
       <p>Steam路径有效：{steam.isDirValid ? "是" : "否"}</p>
       <p>游戏路径有效：{steam.isCsDirValid ? "是" : "否"}</p>
-      <p>Steam账号：{steam.currentUser().accountName}</p>
+      <p>Steam账号：{currentUser().accountName}</p>
     </div>
   )
 }

src/app/prepare/page.tsx

@@ -1,8 +1,15 @@
 "use client"
-import useSteamStore from "@/store/steam"
 
+import { steamStore, setDir, setCsDir, currentUser } from "@/store/steam"
+import { useEffect } from "react"
+import { useSnapshot } from "valtio"
 export default function Page() {
-  const { dir, setDir, csDir, setCsDir, currentUser } = useSteamStore()
+  useEffect(() => {
+    ;async () => {
+      steamStore.start()
+    }
+  }, [])
+  const steam = useSnapshot(steamStore.state)
   return (
     <div
       className="flex flex-col items-center justify-center w-full h-screen gap-6"
@@ -16,12 +23,12 @@ export default function Page() {
       <div className="flex flex-col w-full gap-6 p-5 border rounded-lg bg-white/40">
         <input
           className="px-2 py-1 rounded-lg"
-          value={dir}
+          value={steam.dir}
           onChange={(e) => setDir(e.target.value)}
         />
         <input
           className="px-2 py-1 rounded-lg"
-          value={csDir}
+          value={steam.csDir}
           onChange={(e) => setCsDir(e.target.value)}
         />
 

src/app/providers.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider as NextThemesProvider } from "next-themes"
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <HeroUIProvider className="h-full bg-transparent">
-      <NextThemesProvider attribute="class" defaultTheme="light">
+      <NextThemesProvider attribute="class" defaultTheme="light" >
         <ToastProvider toastOffset={10} placement="top-center" />
         {children}
       </NextThemesProvider>

src/components/cstb/CommonDir.tsx

@@ -9,7 +9,7 @@ const RoundedButton = ({ children }: RoundedButtonProps) => {
   return (
     <button
       type="button"
-      className="flex items-center justify-center px-3 py-1 transition rounded-full min-w-fit active:scale-95 hover:bg-black/10 text-zinc-700 bg-black/5"
+      className="flex items-center justify-center px-3 py-1 transition rounded-full min-w-fit active:scale-95 hover:bg-black/10 text-zinc-700 dark:text-zinc-100 bg-black/5"
     >
       {children}
     </button>

src/components/cstb/Notice.tsx

@@ -3,8 +3,14 @@ import { appStore } from "@/store/app"
 import { Refresh, VolumeNotice } from "@icon-park/react"
 import { ToolButton } from "../window/ToolButton"
 import { useSnapshot } from "valtio"
+import { useEffect } from "react"
 
 const Notice = () => {
+  useEffect(() => {
+    ;async () => {
+      appStore.start()
+    }
+  }, [])
   appStore.start()
   const app = useSnapshot(appStore.state)
 

src/components/window/Card.tsx

@@ -51,7 +51,7 @@ const CardTool = ({ children }: CardProps) => {
 
 const CardBody = ({ children }: CardProps) => {
   return (
-    <div className="w-full h-full text-sm tracking-wide text-zinc-800">
+    <div className="w-full h-full text-sm tracking-wide text-zinc-800 dark:text-white">
       {children}
     </div>
   )

src/components/window/Nav.tsx

@@ -50,7 +50,8 @@ const Nav = () => {
           resetToolStore()
           addToast({
             title: "重置成功",
-            description: "已重置所有设置，请重新启动程序",
+            color: 'success'
+            // description: "已重置所有设置",
           })
         }}
       >

src/components/window/SideBar.tsx

@@ -2,7 +2,7 @@
 import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
 import { Button, cn } from "@heroui/react"
 import { usePathname, useRouter } from "next/navigation"
-import type { ReactNode } from "react"
+import { useEffect, type ReactNode } from "react"
 
 // import { platform } from "@tauri-apps/plugin-os"
 import { appStore, setVersion } from "@/store/app"
@@ -63,7 +63,11 @@ const Avatar = () => {
 }
 
 const SideBar = () => {
-  appStore.start()
+  useEffect(() => {
+    ;async () => {
+      appStore.start()
+    }
+  }, [])
   const { version } = useSnapshot(appStore.state)
 
   return (
@@ -104,7 +108,12 @@ const SideBar = () => {
 
       <div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
         <p>版本号</p>
-        <Button variant="light" size="sm" className="mt-0.5 text-zinc-600" onPress={() => setVersion("x.y.z")}>
+        <Button
+          variant="light"
+          size="sm"
+          className="mt-0.5 text-zinc-600"
+          onPress={() => setVersion("x.y.z")}
+        >
           {version}
         </Button>
       </div>