update: store persist

src/components/cstb/Notice.tsx

@@ -7,8 +7,10 @@ import {
   Card,
 } from "@/components/window/Card";
 import { ToolButton } from "../window/ToolButton";
+import useAppStore from "@/store/app";
 
 const Notice = () => {
+  const app = useAppStore();
   return (
     <Card>
       <CardHeader>
@@ -22,9 +24,9 @@ const Notice = () => {
           </ToolButton>
         </CardTool>
       </CardHeader>
-      <CardBody>不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl</CardBody>
+      <CardBody>{app.notice || "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}</CardBody>
     </Card>
-  );
+  )
 };
 
 export default Notice;

src/components/window/SideBar.tsx

@@ -1,47 +1,43 @@
 "use client"
-import { ReactNode } from "react";
-import clsx from "clsx";
-import {
-  Home,
-  MonitorOne,
-  Movie,
-  Setting,
-  Terminal,
-  Toolkit,
-} from "@icon-park/react";
-import { useRouter } from "next/navigation";
+import { ReactNode } from "react"
+import clsx from "clsx"
+import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
+import { useRouter } from "next/navigation"
+import useAppStore from "@/store/app"
 
 interface SideButtonProps {
-  className?: string;
-  children?: ReactNode;
+  className?: string
+  children?: ReactNode
 }
 
-const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+const SideButton = ({
+  className,
+  children,
+  ...rest
+}: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
-    <button
-      className={clsx(
-        className,
-        "p-2.5 hover:bg-black/5 rounded-lg transition"
-      )}
-      {...rest}
-    >
+    <button className={clsx(className, "p-2.5 hover:bg-black/5 rounded-lg transition")} {...rest}>
       {children}
     </button>
-  );
-};
+  )
+}
 
 const Avatar = () => {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
-    <div onClick={() => router.push('/users')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
+    <div
+      onClick={() => router.push("/users")}
+      className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer"
+    >
       <img src="favicon.ico" alt="avatar" draggable={false} />
     </div>
-  );
-};
+  )
+}
 
 const SideBar = () => {
-  const router = useRouter();
+  const router = useRouter()
+  const { version, setVersion } = useAppStore()
 
   return (
     <div
@@ -76,15 +72,12 @@ const SideBar = () => {
         </SideButton>
       </section>
 
-      <div
-        className="mx-auto text-sm text-center text-zinc-500"
-        data-tauri-drag-region
-      >
+      <div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
         <p>版本号</p>
-        <p>0.0.1</p>
+        <p onClick={()=> setVersion("x.y.z")}>{version}</p>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default SideBar;
+export default SideBar

src/store/app.ts

@@ -1,24 +1,41 @@
 import { create } from 'zustand'
+import { tauriStore } from '@/utils/persist'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
 
 interface AppState {
-  version: number
+  version: string
   hasUpdate: boolean
   hasInit: boolean
   notice: string
   useMirror: boolean
+  setVersion: (version: string) => void
   init: () => void
 }
 
-const useAppStore = create<AppState>()((/* set */) => ({
-  version: 0,
-  hasUpdate: false,
-  hasInit: false,
-  notice: "",
-  useMirror: true,
-  init: () => {
-    console.log('init')
-  },
-  // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
-}))
+const { /* store,  */storage } = tauriStore("app-test")
+
+const useAppStore = create<AppState>()(
+  persist(
+    (set, get) => ({
+      version: "0.0.1",
+      hasUpdate: false,
+      hasInit: 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 })),
+    }),
+    {
+      name: 'app', // name of item in the storage (must be unique)
+      storage: createJSONStorage(() => storage), // (optional) by default the 'localStorage' is used
+    },
+  ))
 
 export default useAppStore

src/utils/persist.ts

@@ -0,0 +1,62 @@
+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'
+
+// 节流设置
+// const THROTTLE_TIME = 300
+// const THROTTLE_TIME_STORE = 5000
+// const THROTTLE_LEADING = false
+// const THROTTLE_TRAILING = true
+
+// 自定义Store覆盖get, set等方法，以适应tauri+zustand
+export function tauriStore(name: string) {
+  const store = new Store(`${name || "store"}.settings.json`)
+
+  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 = {
+    getItem: async (name: string): Promise<string | null> => {
+      console.log(name)
+      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')
+      await store.delete(name)
+    },
+  }
+
+  return { store, get, set/* , autoSave */, storage }
+}