[feat] better store operation

2025-03-17 11:48:30 +08:00
parent 47dc77732f
commit db3cf9aef2
15 changed files with 169 additions and 127 deletions
--- a/src/components/cstb/FastLaunch.tsx
+++ b/src/components/cstb/FastLaunch.tsx
@@ -1,16 +1,13 @@
-import { steamStore } from "@/store/steam"
-import { toolStore } from "@/store/tool"
+import { useSteamStore } from "@/store/steam"
+import { useToolStore } from "@/store/tool"
 import { TakeOff } from "@icon-park/react"
 import { invoke } from "@tauri-apps/api/core"
-import { useSnapshot } from "valtio"
 import { Card, CardBody, CardHeader, CardIcon } from "../window/Card"
 // import { addToast } from "@heroui/react"

 const FastLaunch = () => {
-  void toolStore.start()
-  void steamStore.start()
-  const { launchOptions, launchIndex } = useSnapshot(toolStore.state)
-  const { dir } = useSnapshot(steamStore.state)
+  const steam = useSteamStore()
+  const tool = useToolStore()

  return (
    <Card>
@@ -25,8 +22,8 @@ const FastLaunch = () => {
            type="button"
            onClick={() =>
              invoke("launch_game", {
-                steamPath: `${dir}/steam.exe`,
-                launchOption: launchOptions[launchIndex] || "",
+                steamPath: `${steam.state.dir}/steam.exe`,
+                launchOption: tool.state.launchOptions[tool.state.launchIndex] || "",
                server: "perfectworld",
              })
            }
@@ -38,8 +35,8 @@ const FastLaunch = () => {
            type="button"
            onClick={() =>
              invoke("launch_game", {
-                steamPath: `${dir}/steam.exe`,
-                launchOption: launchOptions[launchIndex] || "",
+                steamPath: `${steam.state.dir}/steam.exe`,
+                launchOption: tool.state.launchOptions[tool.state.launchIndex] || "",
                server: "worldwide",
              })
            }
--- a/src/components/cstb/LaunchOption.tsx
+++ b/src/components/cstb/LaunchOption.tsx
@@ -1,23 +1,16 @@
-import {
-  addLaunchOption,
-  setLaunchIndex,
-  setLaunchOption,
-  toolStore,
-} from "@/store/tool"
+import { useToolStore } from "@/store/tool"
 import { Plus, SettingConfig, Switch } from "@icon-park/react"
 import { useEffect, useState } from "react"
-import { useSnapshot } from "valtio"
 import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
 import { ToolButton } from "../window/ToolButton"

 const LaunchOption = () => {
-  void toolStore.start()
-  const { launchOptions, launchIndex } = useSnapshot(toolStore.state)
-  const [launchOpt, setLaunchOpt] = useState(launchOptions[launchIndex] || "")
+  const tool = useToolStore()
+  const [launchOpt, setLaunchOpt] = useState(tool.state.launchOptions[tool.state.launchIndex] || "")

  useEffect(() => {
-    setLaunchOpt(launchOptions[launchIndex] || "")
-  }, [launchIndex, launchOptions])
+    setLaunchOpt(tool.state.launchOptions[tool.state.launchIndex] || "")
+  }, [tool.state.launchIndex, tool.state.launchOptions])

  return (
    <Card>
@@ -26,12 +19,12 @@ const LaunchOption = () => {
          <SettingConfig /> 启动选项
        </CardIcon>
        <CardTool>
-          {launchOptions.map((option, index) => (
-            <ToolButton key={option} onClick={() => setLaunchIndex(index)}>
+          {tool.state.launchOptions.map((option, index) => (
+            <ToolButton key={option} onClick={() => tool.setLaunchIndex(index)}>
              {index + 1}
            </ToolButton>
          ))}
-          <ToolButton onClick={() => addLaunchOption("")}>
+          <ToolButton onClick={() => tool.addLaunchOption("")}>
            <Plus />
            添加
          </ToolButton>
@@ -46,9 +39,9 @@ const LaunchOption = () => {
          placeholder="请输入启动选项"
          value={launchOpt}
          onChange={(e) => {
-            if (launchIndex < 0 || launchIndex > 10) return
+            if (tool.state.launchIndex < 0 || tool.state.launchIndex > 10) return
            setLaunchOpt(e.target.value)
-            setLaunchOption(e.target.value, launchIndex)
+            tool.setLaunchOption(e.target.value, tool.state.launchIndex)
          }}
          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
        />
--- a/src/components/cstb/Notice.tsx
+++ b/src/components/cstb/Notice.tsx
@@ -6,12 +6,11 @@ import {
  CardIcon,
  CardTool,
 } from "@/components/window/Card"
-import { appStore } from "@/store/app"
+import { useAppStore } from "@/store/app"
 import { createClient } from "@/utils/supabase/client"
 import { Skeleton } from "@heroui/react"
 import { Refresh, VolumeNotice } from "@icon-park/react"
 import useSWR, { useSWRConfig } from "swr"
-import { useSnapshot } from "valtio"
 import { ToolButton } from "../window/ToolButton"

 const Notice = () => {
@@ -38,8 +37,7 @@ const Notice = () => {
 }

 const NoticeBody = () => {
-  void appStore.start()
-  const app = useSnapshot(appStore.state)
+  const app = useAppStore()

  const noticeFetcher = async () => {
    const supabase = createClient()
@@ -68,7 +66,7 @@ const NoticeBody = () => {
  return (
    <>
      {notice?.content ||
-        app.notice ||
+        app.state.notice ||
        "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
    </>
  )
--- a/src/components/cstb/Prepare.tsx
+++ b/src/components/cstb/Prepare.tsx
@@ -1,27 +1,26 @@
 import { Button, Spinner } from "@heroui/react"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
-import { useSnapshot } from "valtio"
-import { setCsDir, setDir, steamStore } from "@/store/steam"
+import { useSteamStore } from "@/store/steam"
 import { open } from "@tauri-apps/plugin-dialog"

 export function Prepare() {
+  const steam = useSteamStore()
  const router = useRouter()
-  const steam = useSnapshot(steamStore.state)
  const [loading, setLoading] = useState(true)
-  const [steamDir, setSteamDir] = useState(steam.dir)
-  const [cs2Dir, setCs2Dir] = useState(steam.csDir)
+  const [steamDir, setSteamDir] = useState(steam.state.dir)
+  const [cs2Dir, setCs2Dir] = useState(steam.state.csDir)

  useEffect(() => {
    const checkPaths = () => {
-      if (steam.dir && steam.csDir) {
-        router.push("/home")
-      } else {
-        setLoading(false)
+      if (steam.state.dir && steam.state.csDir) {
+        // router.push("/home")
      }
+      
+      setLoading(false)
    }
    checkPaths()
-  }, [steam.dir, steam.csDir, router])
+  }, [steam.state.dir, steam.state.csDir, router])

  const handleSelectSteamDir = async () => {
    const selected = await open({
@@ -31,7 +30,7 @@ export function Prepare() {
    if (selected) {
      const dir = selected.replace(/\\[^\\]+$/, "")
      setSteamDir(dir)
-      setDir(dir)
+      steam.setDir(dir)
    }
  }

@@ -42,14 +41,14 @@ export function Prepare() {
    })
    if (selected) {
      setCs2Dir(selected)
-      setCsDir(selected)
+      steam.setCsDir(selected)
    }
  }

  if (loading) {
    return (
-      <div className="flex flex-col items-center justify-center w-full h-screen gap-6">
-        <Spinner size="lg" />
+      <div className="flex flex-col items-center justify-center gap-6">
+        <Spinner size="lg" variant="simple" />
        <p>正在检查路径...</p>
      </div>
    )
@@ -64,7 +63,9 @@ export function Prepare() {
        <input
          className="flex-grow px-2 py-1 mb-2 rounded-lg"
          value={steamDir}
-          onChange={(e) => setSteamDir(e.target.value)}
+          onChange={(e) => {
+            setSteamDir(e.target.value), steam.setDir(e.target.value)
+          }}
        />
        <Button onPress={handleSelectSteamDir} variant="solid" color="primary" size="sm">
          选择
@@ -75,21 +76,34 @@ export function Prepare() {
        <input
          className="flex-grow px-2 py-1 mb-2 rounded-lg"
          value={cs2Dir}
-          onChange={(e) => setCs2Dir(e.target.value)}
+          onChange={(e) => {
+            setCs2Dir(e.target.value), steam.setCsDir(e.target.value)
+          }}
        />
        <Button onPress={handleSelectCs2Dir} variant="solid" color="primary" size="sm">
          选择
        </Button>
      </div>
-      <Button
-        onPress={() => router.push("/home")}
-        variant="solid"
-        color="primary"
-        size="sm"
-        isDisabled={!steamDir || !cs2Dir}
-      >
-        进入
-      </Button>
+
+      <section className="flex justify-center w-full gap-3 mt-6">
+        <Button
+          onPress={() => alert("获取")}
+          variant="ghost"
+          color="default"
+          size="sm"
+        >
+          自动获取
+        </Button>
+        <Button
+          onPress={() => router.push("/home")}
+          variant="solid"
+          color="primary"
+          size="sm"
+          isDisabled={!steamDir || !cs2Dir}
+        >
+          进入
+        </Button>
+      </section>
    </div>
  )
 }
--- a/src/components/window/Nav.tsx
+++ b/src/components/window/Nav.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { setTheme as setTauriTheme } from "@/hooks/tauri/theme"
-import { resetAppStore } from "@/store/app"
-import { resetToolStore } from "@/store/tool"
+import { useAppStore } from "@/store/app"
+import { useToolStore } from "@/store/tool"
 import { addToast } from "@heroui/react"
 import { Close, Minus, Moon, Refresh, RocketOne, Square, SunOne } from "@icon-park/react"
 import { type Theme, getCurrentWindow } from "@tauri-apps/api/window"
@@ -11,6 +11,8 @@ import { usePathname, useRouter } from "next/navigation"
 import { saveAllNow } from "tauri-plugin-valtio"

 const Nav = () => {
+  const app = useAppStore()
+  const tool = useToolStore()
  const { theme, setTheme } = useTheme()
  const setAppTheme = async (theme: Theme) => {
    setTheme(theme)
@@ -46,8 +48,8 @@ const Nav = () => {
        type="button"
        className="px-2 py-0 transition duration-150 rounded hover:bg-zinc-200/80 dark:hover:bg-zinc-100/10 active:scale-95"
        onClick={() => {
-          resetAppStore()
-          resetToolStore()
+          app.resetAppStore()
+          tool.resetToolStore()
          addToast({
            title: "重置成功",
            color: "success",
--- a/src/components/window/SideBar.tsx
+++ b/src/components/window/SideBar.tsx
@@ -12,8 +12,7 @@ import { usePathname, useRouter } from "next/navigation"
 import type { ReactNode } from "react"

 // import { platform } from "@tauri-apps/plugin-os"
-import { appStore, setVersion } from "@/store/app"
-import { useSnapshot } from "valtio"
+import { useAppStore } from "@/store/app"

 interface SideButtonProps {
  route: string
@@ -71,8 +70,7 @@ const Avatar = () => {
 }

 const SideBar = () => {
-  void appStore.start()
-  const { version } = useSnapshot(appStore.state)
+  const app = useAppStore()

  return (
    <div
@@ -119,9 +117,9 @@ const SideBar = () => {
          variant="light"
          size="sm"
          className="mt-0.5 text-zinc-600"
-          onPress={() => setVersion("x.y.z")}
+          onPress={() => app.setVersion("x.y.z")}
        >
-          {version}
+          {app.state.version}
        </Button>
      </div>
    </div>