temp
This commit is contained in:
parent
bc02a11dc6
commit
cc070a81a1
3
.gitignore
vendored
3
.gitignore
vendored
@ -25,4 +25,5 @@ dist-ssr
|
|||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
tsconfig.app.tsbuildinfo
|
tsconfig.app.tsbuildinfo
|
||||||
tsconfig.node.tsbuildinfo
|
tsconfig.node.tsbuildinfo
|
||||||
|
.turbo
|
||||||
|
6
.gitmodules
vendored
Normal file
6
.gitmodules
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
[submodule "submodules/store"]
|
||||||
|
path = submodules/store
|
||||||
|
url = git@git.xiongxiao.me:kevisual/store.git
|
||||||
|
[submodule "submodules/query-mark"]
|
||||||
|
path = submodules/query-mark
|
||||||
|
url = git@git.xiongxiao.me:kevisual/kevisual-query-mark.git
|
39
index.html
39
index.html
@ -1,13 +1,30 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<title>Vite + React + TS</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
</head>
|
<title>Vite + React + TS</title>
|
||||||
<body>
|
<style>
|
||||||
<div id="root"></div>
|
html,
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
body {
|
||||||
</body>
|
margin: 0;
|
||||||
</html>
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
22
package.json
22
package.json
@ -1,29 +1,39 @@
|
|||||||
{
|
{
|
||||||
"name": "draw",
|
"name": "@kevisual/draw",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"basename": "/",
|
"basename": "/gh/draw",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"dev:web": "cross-env WEB_DEV=true vite --mode web",
|
"dev:web": "cross-env WEB_DEV=true vite --mode web",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"pub": "envision deploy ./dist -k vite-react -v 0.0.1",
|
"pub": "envision deploy ./dist -k draw -v 0.0.1",
|
||||||
"ev": "npm run build && npm run deploy"
|
"ev": "npm run build && npm run deploy",
|
||||||
|
"dev:lib": "turbo run dev:lib --filter=./submodules/*"
|
||||||
},
|
},
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
"author": "abearxiong <xiongxiao@xiongxiao.me>",
|
"author": "abearxiong <xiongxiao@xiongxiao.me>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^6.0.0",
|
"@ant-design/icons": "^6.0.0",
|
||||||
|
"@emotion/react": "^11.14.0",
|
||||||
|
"@emotion/styled": "^11.14.0",
|
||||||
|
"@excalidraw/excalidraw": "^0.18.0",
|
||||||
"@kevisual/query": "0.0.15",
|
"@kevisual/query": "0.0.15",
|
||||||
"@kevisual/router": "0.0.9",
|
"@kevisual/router": "0.0.9",
|
||||||
|
"@kevisual/store": "workspace:*",
|
||||||
|
"@mui/material": "^6.4.8",
|
||||||
"antd": "^5.24.5",
|
"antd": "^5.24.5",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
"immer": "^10.1.1",
|
"immer": "^10.1.1",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
"lucide-react": "^0.484.0",
|
||||||
"nanoid": "^5.1.5",
|
"nanoid": "^5.1.5",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
@ -48,8 +58,10 @@
|
|||||||
"tailwind-merge": "^3.0.2",
|
"tailwind-merge": "^3.0.2",
|
||||||
"tailwindcss": "^4.0.16",
|
"tailwindcss": "^4.0.16",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"turbo": "^2.4.4",
|
||||||
"typescript": "^5.8.2",
|
"typescript": "^5.8.2",
|
||||||
"typescript-eslint": "^8.28.0",
|
"typescript-eslint": "^8.28.0",
|
||||||
"vite": "^6.2.3"
|
"vite": "^6.2.3"
|
||||||
}
|
},
|
||||||
|
"packageManager": "pnpm@10.6.5"
|
||||||
}
|
}
|
4881
pnpm-lock.yaml
generated
4881
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
2
pnpm-workspace.yaml
Normal file
2
pnpm-workspace.yaml
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
packages:
|
||||||
|
- 'submodules/*'
|
@ -1,12 +1,11 @@
|
|||||||
import { basename } from './modules/basename';
|
import { basename } from './modules/basename';
|
||||||
|
import { Draw } from './pages/Draw';
|
||||||
|
|
||||||
console.log('basename', basename);
|
console.log('basename', basename);
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
return (
|
return (
|
||||||
<div className='bg-slate-200 w-full h-full border'>
|
<div className='bg-slate-200 w-full h-full'>
|
||||||
<div className='test-loading bg-black'>
|
<Draw />
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
64
src/pages/Draw.tsx
Normal file
64
src/pages/Draw.tsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||||
|
import { createMarkStore, store } from '../store';
|
||||||
|
console.log('store', store);
|
||||||
|
import { StoreContextProvider, useStore } 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'>
|
||||||
|
<div className='h-full w-full'>{children}</div>
|
||||||
|
<DrawHeader />
|
||||||
|
</StoreContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export const Draw = () => {
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
// @ts-ignore
|
||||||
|
window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
|
||||||
|
// window.EXCALIDRAW_ASSET_PATH = '/';
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<DrawLayout>
|
||||||
|
<ExcaliDrawComponent />
|
||||||
|
</DrawLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export const DrawHeader = () => {
|
||||||
|
const store = useStore(
|
||||||
|
useShallow((value: any) => {
|
||||||
|
return {
|
||||||
|
mark: value.mark,
|
||||||
|
setMark: value.setMark,
|
||||||
|
setInfo: value.setInfo,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
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]);
|
||||||
|
return (
|
||||||
|
<div className='fixed left-0 top-0 z-10 h-10 w-10 bg-red-500'>
|
||||||
|
<button>
|
||||||
|
<LineChart />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export const ExcaliDrawComponent = () => {
|
||||||
|
return (
|
||||||
|
<StoreContextProvider id='draw2' stateCreator={createMarkStore}>
|
||||||
|
<Core />
|
||||||
|
</StoreContextProvider>
|
||||||
|
);
|
||||||
|
};
|
15
src/pages/core/Excalidraw.tsx
Normal file
15
src/pages/core/Excalidraw.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Excalidraw } from '@excalidraw/excalidraw';
|
||||||
|
import '@excalidraw/excalidraw/index.css';
|
||||||
|
import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export const Core = () => {
|
||||||
|
return (
|
||||||
|
<Excalidraw
|
||||||
|
initialData={{ elements: [] }}
|
||||||
|
onChange={(elements) => {
|
||||||
|
console.log('elements', elements);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
21
src/store/index.ts
Normal file
21
src/store/index.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { StoreManager } from '@kevisual/store';
|
||||||
|
import { useContextKey } from '@kevisual/store/context';
|
||||||
|
import { StateCreator, StoreApi } from 'zustand';
|
||||||
|
export const store = useContextKey('store', () => {
|
||||||
|
return new StoreManager();
|
||||||
|
});
|
||||||
|
|
||||||
|
type MarkStore = {
|
||||||
|
mark: string;
|
||||||
|
setMark: (mark: string) => void;
|
||||||
|
info: string;
|
||||||
|
setInfo: (info: string) => void;
|
||||||
|
};
|
||||||
|
export const createMarkStore = (get: any, set: any, store: any): MarkStore => {
|
||||||
|
return {
|
||||||
|
mark: 'test',
|
||||||
|
setMark: (mark: string) => set(() => ({ mark })),
|
||||||
|
info: 'test info',
|
||||||
|
setInfo: (info: string) => set(() => ({ info })),
|
||||||
|
};
|
||||||
|
};
|
@ -18,5 +18,4 @@
|
|||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
}
|
||||||
|
22
turbo.json
Normal file
22
turbo.json
Normal 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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
|
|||||||
import react from '@vitejs/plugin-react';
|
import react from '@vitejs/plugin-react';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
import pkgs from './template/package.json' with { type: 'json' };
|
import pkgs from './package.json' with { type: 'json' };
|
||||||
import basicSsl from '@vitejs/plugin-basic-ssl';
|
import basicSsl from '@vitejs/plugin-basic-ssl';
|
||||||
|
|
||||||
const version = pkgs.version || '0.0.1';
|
const version = pkgs.version || '0.0.1';
|
||||||
@ -11,11 +11,7 @@ const isDev = process.env.NODE_ENV === 'development';
|
|||||||
|
|
||||||
const basename = isDev ? '/' : pkgs?.basename || '/';
|
const basename = isDev ? '/' : pkgs?.basename || '/';
|
||||||
const plugins = []
|
const plugins = []
|
||||||
const isWeb = false;
|
plugins.push(basicSsl());
|
||||||
if(isWeb) {
|
|
||||||
// 在bolt.new的页面,没有ssl
|
|
||||||
plugins.push(basicSsl())
|
|
||||||
}
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react(), tailwindcss(), ...plugins],
|
plugins: [react(), tailwindcss(), ...plugins],
|
||||||
@ -34,7 +30,7 @@ export default defineConfig({
|
|||||||
target: 'esnext',
|
target: 'esnext',
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 6004,
|
port: 6006,
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
Loading…
x
Reference in New Issue
Block a user