update: persist store fullfiil + launchOptions validation

src/components/cstb/LaunchOption.tsx

@@ -1,12 +1,10 @@
 import { Plus, SettingConfig, Switch } from "@icon-park/react";
 import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
-import { useState } from "react";
 import { ToolButton } from "../window/ToolButton";
+import useToolStore from "@/store/tool";
 
 const LaunchOption = () => {
-  const [LaunchOption, setLaunchOption] = useState<string>(
-    "-high -refresh 120 -novid -nojoy -tickrate 128 +cl_cmdrate 128 +cl_updaterate 128 +exec auto.cfg +test"
-  );
+  const { launchOptions, setLaunchOption, launchIndex, setLaunchIndex } = useToolStore()
 
   return (
     <Card>
@@ -15,9 +13,9 @@ const LaunchOption = () => {
           <SettingConfig /> 启动选项
         </CardIcon>
         <CardTool>
-          <ToolButton>1</ToolButton>
-          <ToolButton>2</ToolButton>
-          <ToolButton>3</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(0)}>1</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(1)}>2</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(2)}>3</ToolButton>
           <ToolButton>
             <Plus />
             添加
@@ -31,8 +29,8 @@ const LaunchOption = () => {
       <CardBody>
         <textarea
           placeholder="请输入启动选项"
-          value={LaunchOption}
-          onChange={(e) => setLaunchOption(e.target.value)}
+          value={launchOptions[launchIndex]}
+          onChange={(e) => setLaunchOption(e.target.value, launchIndex)}
           className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
         />
       </CardBody>

src/store/app.ts

@@ -2,40 +2,44 @@ import { create } from 'zustand'
 import { tauriStore } from '@/utils/persist'
 import { createJSONStorage, persist } from 'zustand/middleware'
 
-
 interface AppState {
   version: string
   hasUpdate: boolean
-  hasInit: boolean
+  inited: boolean
   notice: string
   useMirror: boolean
-  setVersion: (version: string) => void
-  init: () => void
 }
 
-const { /* store,  */storage } = tauriStore("app-test")
+interface AppAction {
+  setVersion: (version: string) => void
+  setHasUpdate: (hasUpdate: boolean) => void
+  setInited: (hasInit: boolean) => void
+  setNotice: (notice: string) => void
+  setUseMirror: (useMirror: boolean) => void
+}
 
-const useAppStore = create<AppState>()(
+const STORE_NAME = "app"
+const { /* store,  */ storage } = tauriStore(STORE_NAME)
+
+const useAppStore = create<AppState & AppAction>()(
   persist(
-    (set, get) => ({
+    (set/* , get */) => ({
       version: "0.0.1",
       hasUpdate: false,
-      hasInit: false,
+      inited: false,
       notice: "Man! What can I say?",
       useMirror: true,
       setVersion: (version: string) => set(() => ({ version: version })),
-      init: () => {
-        console.log('init')
-        console.log(get().version)
-        // const version = await store.get("version")
-        // set(() => ({ version: version }))
-      },
-      // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+      setHasUpdate: (hasUpdate: boolean) => set(() => ({ hasUpdate: hasUpdate })),
+      setInited: (inited: boolean) => set(() => ({ inited: inited })),
+      setNotice: (notice: string) => set(() => ({ notice: notice })),
+      setUseMirror: (useMirror: boolean) => set(() => ({ useMirror: useMirror }))
     }),
     {
-      name: 'app', // name of item in the storage (must be unique)
+      name: STORE_NAME, // name of item in the storage (must be unique)
       storage: createJSONStorage(() => storage), // (optional) by default the 'localStorage' is used
     },
-  ))
+  )
+)
 
 export default useAppStore

src/store/steam.ts

@@ -1,5 +1,7 @@
 import { SteamUser } from '@/types/steam'
+import { tauriStore } from '@/utils/persist'
 import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
 
 const mock_user: SteamUser = {
   steamID64: "76561198052315353",
@@ -15,31 +17,44 @@ interface SteamState {
   dir: string,
   csDir: string,
   users: SteamUser[],
-  currentUser: () => SteamUser,
   isDirValid: boolean,
   isCsDirValid: boolean,
-  init: () => void,
-  updateDir: (dir: string) => void,
-  updateCsDir: (dir: string) => void,
 }
 
-const useSteamStore = create<SteamState>()((set, get) => ({
-  // 路径
-  dir: "C:\\Program Files (x86)\\Steam",
-  csDir: "",
-  users: [mock_user] as SteamUser[],
-  currentUser: () => {
-    return get().users[0] || mock_user
-  },
-  // 路径是否可用
-  isDirValid: false,
-  isCsDirValid: false,
-  init: () => {
-    console.log('init')
-  },
-  updateDir: (dir: string) => set(() => ({ dir: dir })),
-  updateCsDir: (dir: string) => set(() => ({ csDir: dir })),
-  // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
-}))
+interface SteamAction {
+  setDir: (dir: string) => void,
+  setCsDir: (dir: string) => void,
+  setUsers: (users: SteamUser[]) => void,
+  setIsDirValid: (valid: boolean) => void,
+  setIsCsDirValid: (valid: boolean) => void,
+  currentUser: () => SteamUser,
+}
+
+const STORE_NAME = "steam"
+const { /* store,  */ storage } = tauriStore(STORE_NAME)
+
+const useSteamStore = create<SteamState & SteamAction>()(
+  persist(
+    (set, get) => ({
+      dir: "C:\\Program Files (x86)\\Steam",
+      csDir: "",
+      users: [mock_user] as SteamUser[],
+      isDirValid: false,
+      isCsDirValid: false,
+      setDir: (dir: string) => set(() => ({ dir: dir })),
+      setCsDir: (dir: string) => set(() => ({ csDir: dir })),
+      setUsers: (users: SteamUser[]) => set(() => ({ users: users })),
+      setIsDirValid: (valid: boolean) => set(() => ({ isDirValid: valid })),
+      setIsCsDirValid: (valid: boolean) => set(() => ({ isCsDirValid: valid })),
+      currentUser: () => {
+        return get().users[0] || mock_user
+      },
+    }),
+    {
+      name: STORE_NAME, // name of item in the storage (must be unique)
+      storage: createJSONStorage(() => storage), // (optional) by default the 'localStorage' is used
+    }
+  )
+)
 
 export default useSteamStore

src/store/tool.ts

@@ -1,20 +1,39 @@
+import { tauriStore } from '@/utils/persist'
 import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
 
-export interface ToolState {
+interface ToolState {
   launchOptions: string[]
   launchIndex: number
   powerPlan: number
-  init: () => void
 }
 
-const useToolStore = create<ToolState>()((/* set */) => ({
-  launchOptions: ["-novid -nojoy -high -freq 120 -tickrate 128", "", ""],
-  launchIndex: 0,
-  powerPlan: 0,
-  init: () => {
-    console.log('init')
-  },
-  // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
-}))
+interface ToolAction {
+  setLaunchOption: (option: string, index: number) => void
+  setLaunchOptions: (options: string[]) => void
+  setLaunchIndex: (index: number) => void
+  setPowerPlan: (index: number) => void
+}
+
+const STORE_NAME = "tool"
+const { /* store,  */ storage } = tauriStore(STORE_NAME)
+
+const useToolStore = create<ToolState & ToolAction>()(
+  persist(
+    (set/* , get */) => ({
+      launchOptions: ["-high -refresh 120 -novid -nojoy -tickrate 128 +cl_cmdrate 128 +cl_updaterate 128 +exec auto.cfg +test", "", ""],
+      launchIndex: 0,
+      powerPlan: 0,
+      setLaunchOption: (option: string, index: number) => set((state) => ({ launchOptions: [...state.launchOptions.slice(0, index), option, ...state.launchOptions.slice(index + 1)] })),
+      setLaunchOptions: (options: string[]) => set(() => ({ launchOptions: options })),
+      setLaunchIndex: (index: number) => set(() => ({ launchIndex: index })),
+      setPowerPlan: (index: number) => set(() => ({ powerPlan: index }))
+    }),
+    {
+      name: STORE_NAME, // name of item in the storage (must be unique)
+      storage: createJSONStorage(() => storage), // (optional) by default the 'localStorage' is used
+    }
+  )
+)
 
 export default useToolStore

src/utils/persist.ts

@@ -1,62 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { StateStorage } from 'zustand/middleware'
 import { Store } from "@tauri-apps/plugin-store"
-// import { appConfigDir } from "@tauri-apps/api/path"
-// import { useThrottleFn } from "@reactuses/core"
-// import { create } from 'zustand'
-// import { createJSONStorage, persist } from 'zustand/middleware'
+import { throttle } from 'throttle-debounce';
+// import { useThrottleFn } from '@reactuses/core';
+
 
 // 节流设置
-// const THROTTLE_TIME = 300
-// const THROTTLE_TIME_STORE = 5000
-// const THROTTLE_LEADING = false
-// const THROTTLE_TRAILING = true
+export const THROTTLE_TIME = 300
+export const THROTTLE_TIME_STORE = 5000
+export const THROTTLE_LEADING = true
+export const THROTTLE_TRAILING = true
+
 
 // 自定义Store覆盖get, set等方法，以适应tauri+zustand
 export function tauriStore(name: string) {
   const store = new Store(`${name || "store"}.settings.json`)
 
+  // 自动保存
+  const autoSave = throttle(
+    THROTTLE_TIME_STORE,
+    async () => {
+      await store.save()
+    },
+    {
+      noTrailing: !THROTTLE_TRAILING,
+      noLeading: !THROTTLE_LEADING
+    }
+  )
+
+  const doSet = throttle(
+    THROTTLE_TIME,
+    async (key: string, value: unknown) => {
+      await store.set(key, value)
+    },
+    {
+      noTrailing: !THROTTLE_TRAILING,
+      noLeading: !THROTTLE_LEADING
+    }
+  )
+
+  const set = (key: string, value: unknown) => {
+    doSet(key, value)
+    autoSave()
+  }
+
   const get = (key: string) => {
     return store.get(key)
   }
 
-  console.log(store.path)
-
-  const set = (key: string, value: unknown) => {
-    // autoSave.run()
-    setTimeout(async () => {
-      await store.save()
-    })
-    return store.set(key, value)
-  }
-
-  // 自动保存
-  // const autoSave = useThrottleFn(
-  //   async () => {
-  //     await store.save()
-  //     // console.log("store saved")
-  //   },
-  //   THROTTLE_TIME,
-  //   {
-  //     'trailing': THROTTLE_TRAILING,
-  //     'leading': THROTTLE_LEADING
-  //   }
-  // )
-
   // 自定义存储对象
   const storage: StateStorage = {
+    setItem: async (name: string, value: string): Promise<void> => {
+      await store.set(name, value)
+      // console.log(name, 'has been set to', value)
+    },
     getItem: async (name: string): Promise<string | null> => {
-      console.log(name)
+      // console.log(name, 'has been get')
       return (await store.get(name)) || null
     },
-    setItem: async (name: string, value: string): Promise<void> => {
-      console.log(name, 'with value', value, 'has been saved')
-      await store.set(name, value)
-    },
     removeItem: async (name: string): Promise<void> => {
-      console.log(name, 'has been deleted')
+      // console.log(name, 'has been deleted')
       await store.delete(name)
     },
   }
 
-  return { store, get, set/* , autoSave */, storage }
+  return { store, get, set, autoSave, storage }
 }