temp add fonts

src/App.tsx

@@ -1,11 +1,13 @@
 import { basename } from './modules/basename';
 import { Draw } from './pages/Draw';
+import { App as Manager } from './manager/Manager';
 
 console.log('basename', basename);
 export const App = () => {
   return (
     <div className='bg-slate-200 w-full h-full'>
-      <Draw />
+      {/* <Draw /> */}
+      <Manager />
     </div>
   );
 };

src/manager/Manager.tsx

@@ -0,0 +1,28 @@
+import { useManagerStore } from './store';
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { ManagerProvider } from './Provider';
+
+export const Manager = () => {
+  const { list, init } = useManagerStore(
+    useShallow((state) => {
+      console.log('state', state);
+      return {
+        list: state.list,
+        init: state.init,
+      };
+    }),
+  );
+  useEffect(() => {
+    init('md');
+  }, []);
+  return <div>Manager</div>;
+};
+
+export const App = () => {
+  return (
+    <ManagerProvider>
+      <Manager />
+    </ManagerProvider>
+  );
+};

src/manager/Provider.tsx

@@ -0,0 +1,9 @@
+import { StoreContextProvider } from '@kevisual/store/react';
+import { createManagerStore } from './store/index';
+export const ManagerProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <StoreContextProvider id='manager' stateCreator={createManagerStore}>
+      {children}
+    </StoreContextProvider>
+  );
+};

src/manager/README.md

@@ -0,0 +1,5 @@
+# 左侧的管理界面
+
+获取列表，筛选，选中。
+
+## 右侧的是画布

src/manager/store/index.ts

@@ -0,0 +1,55 @@
+import { StoreManager } from '@kevisual/store';
+import { useContextKey } from '@kevisual/store/context';
+// import { StateCreator, StoreApi, UseBoundStore } from 'zustand';
+import { queryMark, queryClient } from '../../modules/query';
+import { QueryMark } from '@kevisual/query-mark';
+import { useStore, BoundStore } from '@kevisual/store/react';
+export const store = useContextKey('store', () => {
+  return new StoreManager();
+});
+
+type ManagerStore = {
+  /** 当前选中的Mark */
+  currrentMark: any;
+  setCurrentMark: (mark: any) => void;
+  /** 获取Mark列表 */
+  getList: () => Promise<void>;
+  /** Mark列表 */
+  list: any[];
+  setList: (list: any[]) => void;
+  /** 初始化 */
+  init: (markType: string) => Promise<void>;
+  queryMark?: QueryMark;
+  markType: string;
+};
+export const createManagerStore = (set: any, get: any, store: any): ManagerStore => {
+  return {
+    currrentMark: null,
+    setCurrentMark: (mark: any) => set(() => ({ currrentMark: mark })),
+    getList: async () => {
+      const queryMark = get().queryMark;
+      const res = await queryMark.getMarkList({ page: 1, pageSize: 10 });
+      if (res.code === 200) {
+        set(() => ({ list: res.data }));
+      }
+    },
+    list: [],
+    setList: (list: any[]) => set(() => ({ list })),
+    init: async (markType: string = 'wallnote') => {
+      // await get().getList();
+      // console.log('init', set, );
+      const queryMark = new QueryMark({
+        query: queryClient as any,
+        markType,
+      });
+      set({ queryMark, markType });
+      setTimeout(() => {
+        queryMark.getMarkList({ page: 1, pageSize: 10 });
+      }, 1000);
+    },
+    queryMark: undefined,
+    markType: 'simple',
+  };
+};
+
+export const useManagerStore = useStore as BoundStore<ManagerStore>;

src/modules/query.ts

@@ -5,5 +5,5 @@ export const queryClient = new QueryClient();
 
 export const queryMark = new QueryMark({
   query: queryClient as any,
-  markType: 'mark',
+  markType: 'simple',
 });

src/pages/Draw.tsx

@@ -5,7 +5,6 @@ import { StoreContextProvider } from '@kevisual/store/react';
 import { LineChart } from 'lucide-react';
 import { useShallow } from 'zustand/shallow';
 import { Core } from './core/Excalidraw';
-import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 export const DrawLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <StoreContextProvider id='draw'>
@@ -17,8 +16,8 @@ export const DrawLayout = ({ children }: { children: React.ReactNode }) => {
 export const Draw = () => {
   useLayoutEffect(() => {
     // @ts-ignore
-    window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
-    // window.EXCALIDRAW_ASSET_PATH = '/';
+    // window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
+    window.EXCALIDRAW_ASSET_PATH = '/';
   }, []);
   return (
     <DrawLayout>