[fix] input init value not synced problem

src/components/cstb/Prepare.tsx

@@ -1,9 +1,10 @@
 import { addToast, Button, Spinner } from "@heroui/react"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
-import { useSteamStore } from "@/store/steam"
+import { steamStore, useSteamStore } from "@/store/steam"
 import { open } from "@tauri-apps/plugin-dialog"
 import { invoke } from "@tauri-apps/api/core"
+import path from "path"
 
 /**
  * 检查指定路径的有效性
@@ -13,27 +14,52 @@ import { invoke } from "@tauri-apps/api/core"
  */
 async function check_path(path: string, suffix?: string) {
   if (suffix && !path.toLowerCase().startsWith(suffix)) return false
-  return await invoke<boolean>("check_path", { path: path })
+  const exist = await invoke<boolean>("check_path", { path: path })
+  return exist
+}
+
+function trim_end_string(str: string, suffix: string): string {
+  if (str.endsWith(suffix)) {
+    return str.slice(0, -suffix.length)
+  }
+  return str
 }
 
 export function Prepare() {
   const steam = useSteamStore()
   const router = useRouter()
   const [loading, setLoading] = useState(true)
-  const [steamDir, setSteamDir] = useState(steam.state.dir)
-  const [cs2Dir, setCs2Dir] = useState(steam.state.csDir)
+  const [checking, setChecking] = useState(false)
+  const [, setSteamDir] = useState(steam.state.dir)
+  const [, setCs2Dir] = useState(steam.state.csDir)
   const [inited, setInited] = useState(false)
 
   useEffect(() => {
-    const checkPaths = async () => {
-      const exist: boolean =
-        (await check_path(steam.state.dir, "steam.exe")) &&
-        (await check_path(steam.state.csDir, "cs2.exe"))
+    const initValues = async () => {
+      await steamStore.start()
+      const initialSteamDir = steam.state.dir
+      const initialCs2Dir = steam.state.csDir
 
-      setInited(exist)
-      setLoading(false)
+      setSteamDir(initialSteamDir)
+      setCs2Dir(initialCs2Dir)
     }
-    checkPaths()
+    void initValues()
+  })
+
+  useEffect(() => {
+    const checkPaths = async () => {
+      setChecking(true)
+      const exist: boolean =
+        (await check_path(path.resolve(steam.state.dir, "steam.exe"))) &&
+        (await check_path(path.resolve(steam.state.csDir, "cs2.exe")))
+
+      setTimeout(() => {
+        setInited(exist)
+        setLoading(false)
+        setChecking(false)
+      }, 500)
+    }
+    void checkPaths()
   }, [steam.state.dir, steam.state.csDir, router])
 
   const handleSelectSteamDir = async () => {
@@ -65,15 +91,15 @@ export function Prepare() {
         addToast({ title: "路径不存在", color: "warning" })
         return
       }
-      setCs2Dir(selected)
-      steam.setCsDir(selected)
+      setCs2Dir(dir)
+      steam.setCsDir(dir)
     }
   }
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center gap-6">
-        <Spinner size="lg" variant="simple" />
+      <div className="flex items-center justify-center gap-4">
+        <Spinner size="md" variant="simple" />
         <p>正在检查路径...</p>
       </div>
     )
@@ -87,9 +113,10 @@ export function Prepare() {
       <div className="flex gap-2">
         <input
           className="flex-grow px-2 py-1 mb-2 rounded-lg"
-          value={steamDir}
+          value={steam.state.dir}
           onChange={(e) => {
-            setSteamDir(e.target.value), steam.setDir(e.target.value)
+            setSteamDir(e.target.value)
+            steam.setDir(e.target.value)
           }}
         />
         <Button onPress={handleSelectSteamDir} variant="solid" color="primary" size="sm">
@@ -100,9 +127,10 @@ export function Prepare() {
       <div className="flex gap-2">
         <input
           className="flex-grow px-2 py-1 mb-2 rounded-lg"
-          value={cs2Dir}
+          value={steam.state.csDir}
           onChange={(e) => {
-            setCs2Dir(e.target.value), steam.setCsDir(e.target.value)
+            setCs2Dir(e.target.value)
+            steam.setCsDir(e.target.value)
           }}
         />
         <Button onPress={handleSelectCs2Dir} variant="solid" color="primary" size="sm">
@@ -119,6 +147,7 @@ export function Prepare() {
           variant="solid"
           color="primary"
           size="sm"
+          isLoading={checking}
           isDisabled={!inited}
         >
           进入