update: persist store fullfiil + launchOptions validation

2024-09-27 10:38:40 +08:00
parent 759cdbab98
commit 46c6dbfa61
7 changed files with 158 additions and 97 deletions
--- a/package.json
+++ b/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": {
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/components/cstb/LaunchOption.tsx
+++ b/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>
--- a/src/store/app.ts
+++ b/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
--- a/src/store/steam.ts
+++ b/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
--- a/src/store/tool.ts
+++ b/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
--- a/src/utils/persist.ts
+++ b/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 }
 }