add react demo

src/main.tsx

@@ -1,4 +1,10 @@
 import { createRoot } from 'react-dom/client';
-import { App } from './pages/App.tsx';
+import { App, AppRoute } from './pages/App.tsx';
+import { CustomThemeProvider } from '@kevisual/components/theme/index.tsx';
 
-createRoot(document.getElementById('root')!).render(<App />);
+console.log('cu',)
+createRoot(document.getElementById('root')!).render(
+  <CustomThemeProvider>
+    <AppRoute />
+  </CustomThemeProvider>,
+);

src/pages/App.tsx

@@ -1,5 +1,18 @@
 import { basename } from '../modules/basename';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 console.log('basename', basename);
+import { App as AppDemo } from './app-demo';
 export const App = () => {
   return <div className='bg-slate-200 w-full h-full border'>123</div>;
 };
+
+export const AppRoute = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path='/' element={<Navigate to='/app-demo/list' />} />
+        <Route path='/app-demo/*' element={<AppDemo />} />
+      </Routes>
+    </Router>
+  );
+};

src/pages/app-demo/index.tsx

@@ -0,0 +1,11 @@
+import { Routes, Route } from 'react-router';
+import { List } from './pages/List';
+
+export const App = () => {
+  return (
+    <Routes>
+      <Route index element={<List />} />
+      <Route path='/list' element={<List />} />
+    </Routes>
+  );
+};

src/pages/app-demo/pages/List.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { useDemoStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { Dialog, DialogTitle, DialogContent, TextField, Button } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+export const EditDialog = () => {
+  const { control, handleSubmit, reset } = useForm();
+  const store = useDemoStore(
+    useShallow((state) => ({
+      formData: state.formData,
+      setFormData: state.setFormData,
+      showEdit: state.showEdit,
+      setShowEdit: state.setShowEdit,
+    })),
+  );
+  useEffect(() => {
+    if (store.showEdit) {
+      reset(store.formData || {});
+    }
+  }, [store.formData]);
+  const onSubmit = (data: any) => {
+    console.log(data);
+  };
+  const hasId = !!store.formData?.id;
+  return (
+    <Dialog open={store.showEdit} onClose={() => store.setShowEdit(false)}>
+      <DialogTitle>{hasId ? 'Edit' : 'Add'}</DialogTitle>
+      <DialogContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Controller control={control} name='title' render={({ field }) => <TextField {...field} label='Title' />} />
+          <Button type='submit'>提交</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const List = () => {
+  const store = useDemoStore(
+    useShallow((state) => ({
+      list: state.list,
+      init: state.init,
+      setShowEdit: state.setShowEdit,
+    })),
+  );
+  useEffect(() => {
+    store.init();
+  }, []);
+  return (
+    <div className='w-full h-full flex flex-col gap-2 bg-gray-100'>
+      <div className='flex justify-end'>
+        <Button onClick={() => store.setShowEdit(true)}>添加</Button>
+      </div>
+      <div>
+        {store.list.map((item) => (
+          <div key={item.id}>{item.title}</div>
+        ))}
+      </div>
+      <EditDialog />
+    </div>
+  );
+};

src/pages/app-demo/query.ts

@@ -0,0 +1,46 @@
+import { BaseQuery } from '@kevisual/query';
+export class QueryApi extends BaseQuery {
+  constructor(options: { query: any }) {
+    super(options);
+  }
+  async getList(params?: any, dataOpts?: any) {
+    return this.query.post(
+      {
+        path: 'demo',
+        key: 'list',
+        ...params,
+      },
+      dataOpts,
+    );
+  }
+  async getDetail(id?: string, dataOpts?: any) {
+    return this.query.post(
+      {
+        path: 'demo',
+        key: 'get',
+        data: { id },
+      },
+      dataOpts,
+    );
+  }
+  async update(data?: any, dataOpts?: any) {
+    return this.query.post(
+      {
+        path: 'demo',
+        key: 'update',
+        data,
+      },
+      dataOpts,
+    );
+  }
+  async delete(id?: string, dataOpts?: any) {
+    return this.query.post(
+      {
+        path: 'demo',
+        key: 'delete',
+        data: { id },
+      },
+      dataOpts,
+    );
+  }
+}

src/pages/app-demo/store.ts

@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query';
+import { QueryApi } from './query';
+import { toast } from 'react-toastify';
+
+export const queryApi = new QueryApi({ query });
+type Store = {
+  list: any[];
+  setList: (list: any[]) => void;
+  data: any;
+  setData: (data: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  formData: any;
+  setFormData: (data: any) => void;
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  getList: () => Promise<any>;
+  init: () => Promise<void>;
+  getData: (id: string) => Promise<any>;
+  updateData: (data: any, opts?: { refresh?: boolean }) => Promise<any>;
+  deleteData: (id: string, opts?: { refresh?: boolean }) => Promise<any>;
+};
+export const useDemoStore = create<Store>((set, get) => ({
+  list: [],
+  setList: (list) => set({ list }),
+  data: null,
+  setData: (data) => set({ data }),
+  loading: false,
+  setLoading: (loading) => set({ loading }),
+  formData: null,
+  setFormData: (formData) => set({ formData }),
+  showEdit: false,
+  setShowEdit: (showEdit) => set({ showEdit }),
+  getList: async () => {
+    set({ loading: true });
+    const res = await queryApi.getList();
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ list: res.data });
+    }
+    return res;
+  },
+  init: async () => {
+    await get().getList();
+  },
+  getData: async (id) => {
+    set({ loading: true });
+    const res = await queryApi.getDetail(id);
+    set({ loading: false });
+    if (res.code === 200) {
+      const data = res.data;
+      set({ data });
+    }
+    return res;
+  },
+  updateData: async (data, opts = { refresh: true }) => {
+    set({ loading: true });
+    const res = await queryApi.update(data);
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ data: res.data });
+      toast.success('更新成功');
+    } else {
+      toast.error(res.message || '更新失败');
+    }
+    if (opts.refresh) {
+      await get().getList();
+    }
+    return res;
+  },
+  deleteData: async (id, opts = { refresh: true }) => {
+    set({ loading: true });
+    const res = await queryApi.delete(id);
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ data: null });
+      toast.success('删除成功');
+    } else {
+      toast.error(res.message || '删除失败');
+    }
+    if (opts.refresh) {
+      await get().getList();
+    }
+    return res;
+  },
+}));