update: persist store fullfiil + launchOptions validation

package.json

@@ -29,10 +29,12 @@
     "@tauri-apps/plugin-process": "2.0.0-rc.1",
     "@tauri-apps/plugin-shell": "2.0.0-rc.1",
     "@tauri-apps/plugin-store": "^2.0.0-rc",
+    "@types/throttle-debounce": "^5.0.2",
     "jotai": "^2.10.0",
     "next": "^14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "throttle-debounce": "^5.0.2",
     "zustand": "5.0.0-rc.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2.0.0-rc
         version: 2.0.0-rc.1
+      '@types/throttle-debounce':
+        specifier: ^5.0.2
+        version: 5.0.2
       jotai:
         specifier: ^2.10.0
         version: 2.10.0(@types/react@18.3.8)(react@18.3.1)
@@ -59,6 +62,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      throttle-debounce:
+        specifier: ^5.0.2
+        version: 5.0.2
       zustand:
         specifier: 5.0.0-rc.2
         version: 5.0.0-rc.2(@types/react@18.3.8)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1))
@@ -584,6 +590,9 @@ packages:
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/throttle-debounce@5.0.2':
+    resolution: {integrity: sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==}
+
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
@@ -2421,6 +2430,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2937,6 +2950,8 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/throttle-debounce@5.0.2': {}
+
   '@types/yargs-parser@21.0.3': {}
 
   '@types/yargs@17.0.33':
@@ -5041,6 +5056,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  throttle-debounce@5.0.2: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0

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>(
+  const { launchOptions, setLaunchOption, launchIndex, setLaunchIndex } = useToolStore()
-    "-high -refresh 120 -novid -nojoy -tickrate 128 +cl_cmdrate 128 +cl_updaterate 128 +exec auto.cfg +test"
-  );
 
   return (
     <Card>
@@ -15,9 +13,9 @@ const LaunchOption = () => {
           <SettingConfig /> 启动选项
         </CardIcon>
         <CardTool>
-          <ToolButton>1</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(0)}>1</ToolButton>
-          <ToolButton>2</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(1)}>2</ToolButton>
-          <ToolButton>3</ToolButton>
+          <ToolButton onClick={() => setLaunchIndex(2)}>3</ToolButton>
           <ToolButton>
             <Plus />
             添加
@@ -31,8 +29,8 @@ const LaunchOption = () => {
       <CardBody>
         <textarea
           placeholder="请输入启动选项"
-          value={LaunchOption}
+          value={launchOptions[launchIndex]}
-          onChange={(e) => setLaunchOption(e.target.value)}
+          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: () => {
+      setHasUpdate: (hasUpdate: boolean) => set(() => ({ hasUpdate: hasUpdate })),
-        console.log('init')
+      setInited: (inited: boolean) => set(() => ({ inited: inited })),
-        console.log(get().version)
+      setNotice: (notice: string) => set(() => ({ notice: notice })),
-        // const version = await store.get("version")
+      setUseMirror: (useMirror: boolean) => set(() => ({ useMirror: useMirror }))
-        // set(() => ({ version: version }))
-      },
-      // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
     }),
     {
-      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) => ({
+interface SteamAction {
-  // 路径
+  setDir: (dir: string) => void,
-  dir: "C:\\Program Files (x86)\\Steam",
+  setCsDir: (dir: string) => void,
-  csDir: "",
+  setUsers: (users: SteamUser[]) => void,
-  users: [mock_user] as SteamUser[],
+  setIsDirValid: (valid: boolean) => void,
-  currentUser: () => {
+  setIsCsDirValid: (valid: boolean) => void,
-    return get().users[0] || mock_user
+  currentUser: () => SteamUser,
-  },
+}
-  // 路径是否可用
+
-  isDirValid: false,
+const STORE_NAME = "steam"
-  isCsDirValid: false,
+const { /* store,  */ storage } = tauriStore(STORE_NAME)
-  init: () => {
+
-    console.log('init')
+const useSteamStore = create<SteamState & SteamAction>()(
-  },
+  persist(
-  updateDir: (dir: string) => set(() => ({ dir: dir })),
+    (set, get) => ({
-  updateCsDir: (dir: string) => set(() => ({ csDir: dir })),
+      dir: "C:\\Program Files (x86)\\Steam",
-  // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+      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 */) => ({
+interface ToolAction {
-  launchOptions: ["-novid -nojoy -high -freq 120 -tickrate 128", "", ""],
+  setLaunchOption: (option: string, index: number) => void
-  launchIndex: 0,
+  setLaunchOptions: (options: string[]) => void
-  powerPlan: 0,
+  setLaunchIndex: (index: number) => void
-  init: () => {
+  setPowerPlan: (index: number) => void
-    console.log('init')
+}
-  },
+
-  // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+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 { throttle } from 'throttle-debounce';
-// import { useThrottleFn } from "@reactuses/core"
+// import { useThrottleFn } from '@reactuses/core';
-// import { create } from 'zustand'
+
-// import { createJSONStorage, persist } from 'zustand/middleware'
 
 // 节流设置
-// const THROTTLE_TIME = 300
+export const THROTTLE_TIME = 300
-// const THROTTLE_TIME_STORE = 5000
+export const THROTTLE_TIME_STORE = 5000
-// const THROTTLE_LEADING = false
+export const THROTTLE_LEADING = true
-// const THROTTLE_TRAILING = 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 }
 }