temp

package.json

@@ -27,6 +27,7 @@
     "@kevisual/query": "0.0.15",
     "@kevisual/router": "0.0.9",
     "@kevisual/store": "workspace:*",
+    "@kevisual/query-mark": "workspace:*",
     "@mui/material": "^6.4.8",
     "antd": "^5.24.5",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@kevisual/query':
         specifier: 0.0.15
         version: 0.0.15(ws@8.18.0)
+      '@kevisual/query-mark':
+        specifier: workspace:*
+        version: link:submodules/query-mark
       '@kevisual/router':
         specifier: 0.0.9
         version: 0.0.9

src/modules/query.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from '@kevisual/query';
+import { QueryMark } from '@kevisual/query-mark';
+
+export const queryClient = new QueryClient();
+
+export const queryMark = new QueryMark({
+  query: queryClient as any,
+  markType: 'mark',
+});

src/pages/Draw.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createMarkStore, store } from '../store';
+import { createMarkStore, store, useMarkStore } from '../store';
 console.log('store', store);
-import { StoreContextProvider, useStore } from '@kevisual/store/react';
+import { StoreContextProvider } from '@kevisual/store/react';
 import { LineChart } from 'lucide-react';
 import { useShallow } from 'zustand/shallow';
 import { Core } from './core/Excalidraw';
@@ -27,26 +27,20 @@ export const Draw = () => {
   );
 };
 export const DrawHeader = () => {
-  const store = useStore(
-    useShallow((value: any) => {
+  const store = useMarkStore(
+    useShallow((value) => {
       return {
         mark: value.mark,
         setMark: value.setMark,
         setInfo: value.setInfo,
+        getList: value.getList,
       };
     }),
   );
   console.log('store show', store);
-  const init = useRef(false);
   useEffect(() => {
-    if (!init.current && store.mark) {
-      init.current = true;
-      store.setMark('1234');
-      setTimeout(() => {
-        store.setMark('info4');
-      }, 1000);
-    }
-  }, [store.mark]);
+    store.getList();
+  }, []);
   return (
     <div className='fixed left-0 top-0 z-10 h-10 w-10 bg-red-500'>
       <button>

src/store/index.ts

@@ -1,6 +1,8 @@
 import { StoreManager } from '@kevisual/store';
 import { useContextKey } from '@kevisual/store/context';
-import { StateCreator, StoreApi } from 'zustand';
+import { StateCreator, StoreApi, UseBoundStore } from 'zustand';
+import { queryMark } from '../modules/query';
+import { useStore, BoundStore } from '@kevisual/store/react';
 export const store = useContextKey('store', () => {
   return new StoreManager();
 });
@@ -10,6 +12,9 @@ type MarkStore = {
   setMark: (mark: string) => void;
   info: string;
   setInfo: (info: string) => void;
+  getList: () => Promise<void>;
+  list: any[];
+  setList: (list: any[]) => void;
 };
 export const createMarkStore = (get: any, set: any, store: any): MarkStore => {
   return {
@@ -17,5 +22,12 @@ export const createMarkStore = (get: any, set: any, store: any): MarkStore => {
     setMark: (mark: string) => set(() => ({ mark })),
     info: 'test info',
     setInfo: (info: string) => set(() => ({ info })),
+    getList: async () => {
+      const res = await queryMark.getMarkList({ page: 1, pageSize: 10 });
+      console.log(res);
+    },
+    list: [],
+    setList: (list: any[]) => set(() => ({ list })),
   };
 };
+export const useMarkStore = useStore as BoundStore<MarkStore>;