Initial commit

This commit is contained in:
kevisual 2025-04-14 23:52:39 +08:00
commit dc83e37811
29 changed files with 3434 additions and 0 deletions

30
.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
tsconfig.app.tsbuildinfo
tsconfig.node.tsbuildinfo
.turbo

3
.gitmodules vendored Normal file
View File

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

3
.npmrc Normal file
View File

@ -0,0 +1,3 @@
//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
ignore-workspace-root-check=true

1
README.md Normal file
View File

@ -0,0 +1 @@
# vite-react-template

33
index.html Normal file
View File

@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="https://kevisual.xiongxiao.me/root/center/panda.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<link rel="stylesheet" href="/src/index.css" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#root {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

61
package.json Normal file
View File

@ -0,0 +1,61 @@
{
"name": "vite-react",
"private": true,
"version": "0.0.1",
"type": "module",
"basename": "/",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:css": "tailwindcss -i ./src/index.css -o ./dist/render.css --minify",
"postbuild2": "pnpm build:css",
"preview": "vite preview",
"pub": "envision deploy ./dist -k vite-react -v 0.0.1",
"dev:lib": "turbo dev",
"git:submodule": "git submodule update --init --recursive",
"cmd": "tsx ./script/index.ts "
},
"files": [
"dist"
],
"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",
"lucide-react": "^0.487.0",
"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"
},
"publishConfig": {
"access": "public"
},
"devDependencies": {
"@kevisual/components": "workspace:*",
"@kevisual/query": "0.0.17",
"@kevisual/types": "^0.0.6",
"@tailwindcss/vite": "^4.1.3",
"@types/node": "^22.14.0",
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.1",
"@vitejs/plugin-basic-ssl": "^2.0.0",
"@vitejs/plugin-react": "^4.3.4",
"commander": "^13.1.0",
"inquire": "^0.4.8",
"tailwindcss": "^4.1.3",
"typescript": "^5.8.3",
"vite": "^6.2.5"
},
"packageManager": "pnpm@10.7.1"
}

0
packages/.gitkeep Normal file
View File

1
packages/components Submodule

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

2837
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

3
pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,3 @@
packages:
- 'submodules/*'
- 'packages/*'

39
public/demo.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="https://kevisual.xiongxiao.me/root/center/panda.png" />
<title>Demo</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#root {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" crossorigin href="./render.css">
</head>
<body>
<div id="root"></div>
<script type="module">
import { render } from './render.js';
console.log('render', render);
const opts = {
renderRoot: document.getElementById('root'),
}
render(opts);
</script>
</body>
</html>

15
script/index.ts Normal file
View File

@ -0,0 +1,15 @@
import fs from 'fs';
import path from 'path';
import { program, Command } from './program';
export const root = process.cwd();
export const clearWorkspace = () => {
const files = ['submodules', 'packages', 'pnpm-workspace.yaml', 'turbo.json'];
for (const file of files) {
fs.rmSync(path.join(root, file), { recursive: true, force: true });
}
};
program.addCommand(new Command('clear').action(clearWorkspace));
program.parse(process.argv);

2
script/program.ts Normal file
View File

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

0
src/app.ts Normal file
View File

1
src/index.css Normal file
View File

@ -0,0 +1 @@
@import "tailwindcss";

10
src/main.tsx Normal file
View File

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

1
src/modules/basename.ts Normal file
View File

@ -0,0 +1 @@
export const basename = DEV_SERVER ? '/' : BASE_NAME;

3
src/modules/query.ts Normal file
View File

@ -0,0 +1,3 @@
import { QueryClient } from '@kevisual/query';
export const query = new QueryClient();

18
src/pages/App.tsx Normal file
View File

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

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

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

View File

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

1
src/routes/index.ts Normal file
View File

@ -0,0 +1 @@
// import {}

6
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
/// <reference types="vite/client" />
type SimpleObject = {
[key: string | number]: any;
};
declare let BASE_NAME: string;

0
submodules/.gitkeep Normal file
View File

43
tsconfig.json Normal file
View File

@ -0,0 +1,43 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
// "jsx": "react",
// "jsxFragmentFactory": "Fragment",
// "jsxFactory": "h",
"jsx": "react-jsx",
"baseUrl": "./",
"typeRoots": [
"node_modules/@types",
"node_modules/@kevisual/types",
],
"paths": {
"@/*": [
"src/*"
]
},
/* Linting */
"strict": true,
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": [
"src",
"typings.d.ts"
]
}

22
turbo.json Normal file
View File

@ -0,0 +1,22 @@
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
"dist/**"
]
},
"dev:lib": {
"persistent": true,
"cache": true
},
"build:lib": {
"dependsOn": [
"^build:lib"
]
}
}
}

95
vite.config.mjs Normal file
View File

@ -0,0 +1,95 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import pkgs from './package.json' with { type: 'json' };
const version = pkgs.version || '0.0.1';
const isDev = process.env.NODE_ENV === 'development';
const basename = isDev ? '/' : pkgs?.basename || '/';
const checkJsh = () => {
return process.env.SHELL === '/bin/jsh';
};
const isJsh = checkJsh();
const plugins = [react(), ];
if (!isJsh) {
const basicSsl = await import('@vitejs/plugin-basic-ssl');
const tailwindcss = await import('@tailwindcss/vite');
const defaultPlugin = basicSsl.default;
const defaultCssPlugin = tailwindcss.default;
plugins.push(defaultCssPlugin(),defaultPlugin());
}
let target = 'https://kevisual.xiongxiao.me';
if (isDev) {
target = 'https://kevisual.xiongxiao.me';
} else {
target = 'https://kevisual.cn';
}
let proxy = {
'/root/center/': {
target: `https://${target}/root/center/`,
},
'/root/system-lib/': {
target: `https://${target}/root/system-lib/`,
},
'/user/login/': {
target: `https://${target}/user/login/`,
},
'/api': {
target: `https://${target}`,
changeOrigin: true,
ws: true,
rewriteWsOrigin: true,
cookieDomainRewrite: 'localhost',
},
};
/**
* @see https://vitejs.dev/config/
*/
export default defineConfig({
plugins,
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
},
},
base: basename,
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
APP_VERSION: JSON.stringify(version),
BASE_NAME: JSON.stringify(basename),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
build: {
target: 'modules',
// lib: {
// entry: './src/libs.ts',
// formats: ['es'],
// fileName: (format) => `render.js`,
// },
},
server: {
port: 7008,
host: '0.0.0.0',
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
ws: true,
rewriteWsOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
'/api/router': {
target: 'ws://localhost:3000',
changeOrigin: true,
ws: true,
rewriteWsOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
...proxy,
},
},
});