add react demo

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "packages/components"]
+	path = packages/components
+	url = git@git.xiongxiao.me:kevisual/components.git

package.json

@@ -12,7 +12,8 @@
     "preview": "vite preview",
     "pub": "envision deploy ./dist -k vite-react -v 0.0.1",
     "dev:lib": "turbo dev",
-    "cmd": "tsx ./script/cmd.ts "
+    "git:submodule": "git submodule update --init --recursive",
+    "cmd": "tsx ./script/index.ts "
   },
   "files": [
     "dist"
@@ -20,7 +21,10 @@
   "author": "abearxiong <xiongxiao@xiongxiao.me>",
   "license": "MIT",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@kevisual/router": "0.0.10",
+    "@mui/material": "^7.0.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
@@ -28,6 +32,9 @@
     "nanoid": "^5.1.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.55.0",
+    "react-router": "^7.5.0",
+    "react-router-dom": "^7.5.0",
     "react-toastify": "^11.0.5",
     "zustand": "^5.0.3"
   },
@@ -35,6 +42,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@kevisual/components": "workspace:*",
     "@kevisual/query": "0.0.17",
     "@kevisual/types": "^0.0.6",
     "@tailwindcss/vite": "^4.1.3",

packages/components

@@ -0,0 +1 @@
+Subproject commit bdf6243bd9d09174f37b883e4094e8e7f97ada37

script/index.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { program, Command } from 'commander';
+import { program, Command } from './program';
 
 export const root = process.cwd();
 

script/program.ts

@@ -0,0 +1,2 @@
+import { program, Command } from 'commander';
+export { program, Command };

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;
+  },
+}));

vite.config.mjs

@@ -53,7 +53,7 @@ export default defineConfig({
   plugins,
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': path.resolve(__dirname, './src')
     },
   },
   base: basename,