[feat] push /home when all preparation is done at launch

src/components/cstb/Prepare.tsx

@@ -1,10 +1,11 @@
-import { addToast, Button, Chip, Spinner } from "@heroui/react"
+import { addToast, Button, Chip, Input, Spinner } from "@heroui/react"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useSteamStore } from "@/store/steam"
 import { open } from "@tauri-apps/plugin-dialog"
 import { invoke } from "@tauri-apps/api/core"
 import { onOpenUrl } from "@tauri-apps/plugin-deep-link"
+import { useDebounce } from "ahooks"
 
 /**
  * 检查指定路径的有效性
@@ -29,33 +30,43 @@ export function Prepare() {
   const steam = useSteamStore()
   const router = useRouter()
   const [loading, setLoading] = useState(true)
-  const [inited, setInited] = useState(false)
   const [, setSteamDir] = useState(steam.state.steamDir)
   const [, setCs2Dir] = useState(steam.state.cs2Dir)
 
+  // Init
   useEffect(() => {
-    const initValues = () => {
-      const initialSteamDir = steam.state.steamDir
-      const initialCs2Dir = steam.state.cs2Dir
+    void steam.store.start()
+  }, [])
 
-      setSteamDir(initialSteamDir)
-      setCs2Dir(initialCs2Dir)
+  // valid变动后调整State
+  const debounceValid = useDebounce(steam.state.steamDirValid && steam.state.cs2DirValid, {
+    wait: 500,
+    leading: true,
+    trailing: true,
+    maxWait: 2500,
+  })
+  const [checkCount, setCheckCount] = useState(0)
+  useEffect(() => {
+    setCheckCount((prev) => (prev >= 10 ? 10 : prev + 1))
+    console.log(checkCount, "触发", debounceValid, steam.state.steamDir, steam.state.cs2Dir)
 
-      const allCheckPassed = steam.state.steamDirValid && steam.state.cs2DirValid
-      setInited(steam.state.steamDirValid && steam.state.cs2DirValid)
-      // 逻辑有点问题，第一次启动时检查成功直接跳转，第一次检查失败不跳转，用户手动点击
-      if (allCheckPassed) {
+    if (checkCount < 1) {
+      if (debounceValid) {
+        console.log("跳转")
         setTimeout(() => {
           router.push("/home")
         }, 500)
       } else {
         setTimeout(() => {
           setLoading(false)
-        }, 800)
+        }, 1200)
       }
+    } else {
+      setTimeout(() => {
+        setLoading(false)
+      }, 800)
     }
-    initValues()
-  })
+  }, [debounceValid])
 
   const handleSelectSteamDir = async () => {
     const selected = await open({
@@ -102,7 +113,7 @@ export function Prepare() {
         addToast({ title: "路径不存在", color: "warning" })
         return
       }
-      setCs2Dir(dir)
+      // setCs2Dir(dir)
       steam.setCsDir(dir)
     }
   }
@@ -120,42 +131,45 @@ export function Prepare() {
     <div className="flex flex-col w-full max-w-3xl gap-2 p-5">
       <p className="text-center">当前路径等设置有待确认</p>
       <br />
-      <p>Steam所在文件夹</p>
+      <h3 className="font-semibold">Steam所在文件夹</h3>
       <div className="flex gap-2">
-        <input
-          className="flex-grow px-2 py-1 mb-2 rounded-lg"
+        <Input
+          variant="bordered"
+          size="sm"
           value={steam.state.steamDir}
-          onChange={(e) => {
-            setSteamDir(e.target.value)
-            steam.setDir(e.target.value)
+          onValueChange={(value) => {
+            setSteamDir(value)
+            steam.setDir(value)
           }}
+          description="steam.exe所在文件夹"
+          errorMessage={"路径无效"}
+          isInvalid={!steam.state.steamDirValid}
         />
-        <Button onPress={handleSelectSteamDir} variant="solid" color="primary" size="sm">
+        <Button onPress={handleSelectSteamDir} variant="solid" color="primary" size="sm" isLoading={steam.state.steamDirChecking}>
           选择
         </Button>
       </div>
-      <p>CS2所在文件夹</p>
+      <h3 className="font-semibold">CS2所在文件夹</h3>
       <div className="flex gap-2">
-        <input
-          className="flex-grow px-2 py-1 mb-2 rounded-lg"
+        <Input
+          variant="bordered"
+          size="sm"
           value={steam.state.cs2Dir}
-          onChange={(e) => {
-            setCs2Dir(e.target.value)
-            steam.setCsDir(e.target.value)
+          onValueChange={(value) => {
+            setCs2Dir(value)
+            steam.setCsDir(value)
           }}
+          description="cs2.exe所在文件夹"
+          errorMessage={"路径无效"}
+          isInvalid={!steam.state.cs2DirValid}
         />
-        <Button onPress={handleSelectCs2Dir} variant="solid" color="primary" size="sm">
+        <Button onPress={handleSelectCs2Dir} variant="solid" color="primary" size="sm" isLoading={steam.state.cs2DirChecking}>
           选择
         </Button>
       </div>
 
       <TestDeepLink />
 
-      <section className="flex justify-center gap-3">
-        <Chip>{steam.state.steamDirValid ? "Steam √" : "Steam ×"}</Chip>
-        <Chip>{steam.state.cs2DirValid ? "CS2 √" : "CS2 ×"}</Chip>
-      </section>
-
       <section className="flex justify-center w-full gap-3 mt-6">
         <Button
           onPress={() => void autoGetPaths()}
@@ -173,7 +187,7 @@ export function Prepare() {
           size="sm"
           className="w-24"
           isLoading={steam.state.steamDirChecking || steam.state.cs2DirChecking}
-          isDisabled={!inited}
+          isDisabled={!steam.state.steamDirValid || !steam.state.cs2DirValid}
         >
           进入
         </Button>