+
+ );
+};
diff --git a/src/apps/ai-html/index.tsx b/src/apps/ai-html/index.tsx
new file mode 100644
index 0000000..d4674f7
--- /dev/null
+++ b/src/apps/ai-html/index.tsx
@@ -0,0 +1,14 @@
+import { Home } from './Home';
+import { ToastProvider } from '@/modules/toast/Provider';
+
+export const App = () => {
+ return (
+
+
+
+
+ {
+ // const editorContent = editorRef.current?.getContent();
+ const editorContent = editorRef.current?.state.doc.toString();
+ if (editorContent) {
+ setOpenUploadModal(true);
+ setText(editorContent);
+ } else {
+ toast.error('请先输入代码');
+ }
+ }}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {'>'} 快速部署html小应用, 粘贴前端html代码。点击部署。(这个页面内容自动缓存到本地)
+
+ 管理
+
+
+
+
+
+
+
+ {isHtml && (
+
+
+ {
+ setOpenPreview(e.target.checked);
+ }}
+ />
+
+
+ )}
+
+ {isHtml && openPreview && (
+
+
+
+ )}
+
+
+ );
+};
+export const SuccessModal = () => {
+ const { openSuccessModal, setOpenSuccessModal, appKey, version, filename } = useHomeStore(
+ useShallow((state) => ({
+ openSuccessModal: state.openSuccessModal,
+ setOpenSuccessModal: state.setOpenSuccessModal,
+ appKey: state.appKey, //
+ version: state.version, //
+ filename: state.filename, //
+ })),
+ );
+ const [link, setLink] = useState{label}
+ {children}
+
+
+
+
+
+
+
+
+
+ 注: 如果需要其他人访问，需要设置共享。
+
+
+
+
+
+
+
+ 部署页面
+
+
+
+
-
+
+ );
+};
+export const getUrlId = () => {
+ const url = new URL(window.location.href);
+ return url.searchParams.get('id') || '';
+};
+export const DrawApp = () => {
+ const [id, setId] = useState('');
+ const urlId = getUrlId();
+
+ useLayoutEffect(() => {
+ const state = getHistoryState();
+ if (state?.id) {
+ setId(state.id);
+ return;
+ }
+ if (urlId) {
+ setId(urlId);
+ }
+ }, []);
+
+ return (
+ {
+ setId('');
+ setHistoryState({
+ id: '',
+ });
+ }}
+ />
+ ) : (
+ */}
+ */}
+ => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+
+ reader.onload = async (event) => {
+ try {
+ const content = event.target?.result;
+ if (content instanceof ArrayBuffer) {
+ const contentString = new TextDecoder().decode(content);
+ const hashHex = MD5(contentString).toString();
+ resolve(hashHex);
+ } else if (typeof content === 'string') {
+ const hashHex = MD5(content).toString();
+ resolve(hashHex);
+ } else {
+ throw new Error('Invalid content type');
+ }
+ } catch (error) {
+ console.error('hashFile error', error);
+ reject(error);
+ }
+ };
+
+ reader.onerror = (error) => {
+ reject(error);
+ };
+
+ // 读取文件为 ArrayBuffer
+ reader.readAsArrayBuffer(file);
+ });
+};
diff --git a/src/apps/draw/modules/query.ts b/src/apps/draw/modules/query.ts
new file mode 100644
index 0000000..f3f1330
--- /dev/null
+++ b/src/apps/draw/modules/query.ts
@@ -0,0 +1,7 @@
+import { query } from '@/modules/query';
+import { QueryMark } from '@/query/query-mark/query-mark';
+
+export const queryMark = new QueryMark({
+ query: query,
+ markType: 'excalidraw',
+});
diff --git a/src/apps/draw/modules/to-file.ts b/src/apps/draw/modules/to-file.ts
new file mode 100644
index 0000000..019540d
--- /dev/null
+++ b/src/apps/draw/modules/to-file.ts
@@ -0,0 +1,112 @@
+const getFileExtension = (filename: string) => {
+ return filename.split('.').pop();
+};
+const getFileType = (extension: string) => {
+ switch (extension) {
+ case 'js':
+ return 'text/javascript';
+ case 'css':
+ return 'text/css';
+ case 'html':
+ return 'text/html';
+ case 'json':
+ return 'application/json';
+ case 'png':
+ return 'image/png';
+ case 'jpg':
+ return 'image/jpeg';
+ case 'jpeg':
+ return 'image/jpeg';
+ case 'gif':
+ return 'image/gif';
+ case 'svg':
+ return 'image/svg+xml';
+ case 'webp':
+ return 'image/webp';
+ case 'ico':
+ return 'image/x-icon';
+ default:
+ return 'text/plain';
+ }
+};
+const checkIsBase64 = (content: string) => {
+ return content.startsWith('data:');
+};
+/**
+ * 获取文件的目录和文件名
+ * @param filename 文件名
+ * @returns 目录和文件名
+ */
+export const getDirectoryAndName = (filename: string) => {
+ if (!filename) {
+ return null;
+ }
+ if (filename.startsWith('.')) {
+ return null;
+ } else {
+ filename = filename.replace(/^\/+/, ''); // Remove all leading slashes
+ }
+ const hasDirectory = filename.includes('/');
+ if (!hasDirectory) {
+ return { directory: '', name: filename };
+ }
+ const parts = filename.split('/');
+ const name = parts.pop()!; // Get the last part as the file name
+ const directory = parts.join('/'); // Join the remaining parts as the directory
+ return { directory, name };
+};
+/**
+ * 把字符串转为文件流，并返回文件流，根据filename的扩展名，自动设置文件类型.
+ * 当不是文本类型，自动需要把base64的字符串转为blob
+ * @param content 字符串
+ * @param filename 文件名
+ * @returns 文件流
+ */
+export const toFile = (content: string, filename: string) => {
+ // 如果文件名是 a/d/a.js 格式的，则需要把d作为目录，a.js作为文件名
+ const directoryAndName = getDirectoryAndName(filename);
+ if (!directoryAndName) {
+ throw new Error('Invalid filename');
+ }
+ const { name } = directoryAndName;
+ const extension = getFileExtension(name);
+ if (!extension) {
+ throw new Error('Invalid filename');
+ }
+ const isBase64 = checkIsBase64(content);
+ const type = getFileType(extension);
+
+ if (isBase64) {
+ // Decode base64 string
+ let base64Data = content.split(',')[1]; // Remove the data URL prefix
+ const byteCharacters = atob(base64Data);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], { type });
+ return new File([blob], filename, { type });
+ } else {
+ const blob = new Blob([content], { type });
+ return new File([blob], filename, { type });
+ }
+};
+
+/**
+ * 把字符串转为文本文件
+ * @param content 字符串
+ * @param filename 文件名
+ * @returns 文件流
+ */
+export const toTextFile = (content: string = 'keep directory exist', filename: string = 'keep.txt') => {
+ const file = toFile(content, filename);
+ return file;
+};
+
+export const downloadFile = (file: File) => {
+ const a = document.createElement('a');
+ a.href = URL.createObjectURL(file);
+ a.download = file.name;
+ a.click();
+};
diff --git a/src/apps/draw/modules/upload.ts b/src/apps/draw/modules/upload.ts
new file mode 100644
index 0000000..7ca82d9
--- /dev/null
+++ b/src/apps/draw/modules/upload.ts
@@ -0,0 +1,57 @@
+// import NProgress from 'nprogress';
+import { Id, toast } from 'react-toastify';
+import { toastLogin } from '@/modules/toast/ToastLogin';
+import { uploadFileChunked, UploadProgress } from '@/query/query-upload/query-upload';
+
+export type ConvertOpts = {
+ appKey?: string;
+ version?: string;
+ username?: string;
+ directory?: string;
+ isPublic?: boolean;
+ filename?: string;
+ /**
+ * 是否不检查应用文件, 默认 true，默认不检测
+ */
+ noCheckAppFiles?: boolean;
+};
+
+export const uploadChunkV2 = async (file: File, opts: ConvertOpts) => {
+ const filename = opts.filename || file.name;
+ const token = localStorage.getItem('token');
+ if (!token) {
+ console.log('uploadChunk token', token);
+ toastLogin();
+ return;
+ }
+ let loaded: Id;
+ const uploadProgress = new UploadProgress({
+ onStart: function () {
+ // NProgress.start();
+ loaded = toast.loading(`${filename} 上传中...`);
+ },
+ onDone: () => {
+ // NProgress.done();
+ toast.dismiss(loaded);
+ },
+ onProgress: (progress, data) => {
+ // NProgress.set(progress);
+ // console.log('uploadChunk progress', progress, data);
+ toast.update(loaded, {
+ render: `${filename} 上传中... ${progress.toFixed(2)}%`,
+ isLoading: true,
+ autoClose: false,
+ });
+ },
+ });
+
+ const result = await uploadFileChunked(file, opts, {
+ uploadProgress,
+ token,
+ createEventSource: (url: string, searchParams: URLSearchParams) => {
+ return new EventSource(url + '?' + searchParams.toString());
+ },
+ FormDataFn: FormData,
+ });
+ return result;
+};
diff --git a/src/apps/draw/pages/Draw.tsx b/src/apps/draw/pages/Draw.tsx
new file mode 100644
index 0000000..25c1dab
--- /dev/null
+++ b/src/apps/draw/pages/Draw.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createMarkStore, store, useMarkStore } from '../store';
+console.log('store', store);
+import { StoreContextProvider } from '@kevisual/store/react';
+import { LineChart } from 'lucide-react';
+import { useShallow } from 'zustand/shallow';
+import { Core } from './core/Excalidraw';
+
+export const Draw = ({ id, onClose }: { id: string; onClose: () => void }) => {
+ useLayoutEffect(() => {
+ // @ts-ignore
+ window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
+ // window.EXCALIDRAW_ASSET_PATH = '/';
+ }, []);
+ return (
+
+
+ );
+};
+
+type ExcaliDrawComponentProps = {
+ /** 修改的id */
+ id: string;
+ /** 关闭 */
+ onClose: () => void;
+};
+export const ExcaliDrawComponent = ({ id, onClose }: ExcaliDrawComponentProps) => {
+ const store = useMarkStore(
+ useShallow((state) => {
+ return {
+ id: state.id,
+ setId: state.setId,
+ getMark: state.getMark,
+ };
+ }),
+ );
+
+ const memo = useMemo(() => ([]);
+ useEffect(() => {
+ initImages();
+ }, []);
+ const refFiles = useRef({});
+ const { api } = useMarkStore(
+ useShallow((state) => {
+ return {
+ api: state.api,
+ };
+ }),
+ );
+ const initImages = async () => {
+ if (!api) return;
+ const res = api.getFiles();
+ console.log('res from ImageResource', res);
+ setImages(Object.keys(res));
+ refFiles.current = res;
+ };
+ return (
+
+ {
+ store.updateMark();
+ }}>
+
+ {}} isCollaborating={false} /> */}
+ {/* {
+ const newLang = lang === 'zh-CN' ? 'en' : 'zh-CN';
+ setLang(newLang);
+ }}>
+
+ {onClose && (
+ <>
+
+
+
+ )}
+
+
+
+ {
+ Tab two!
+
+ Image Resources
+ Two
+
+
+
+
+
+
+ );
+};
+type CoreProps = {
+ onClose: () => void;
+ id: string;
+};
+export const Core = ({ onClose, id }: CoreProps) => {
+ const ref = useRef(null);
+ const { lang } = useListenLang();
+ const uploadLoadingRef = useRef(false);
+ const store = useMarkStore(
+ useShallow((state) => {
+ return {
+ id: state.id,
+ loading: state.loading,
+ getMark: state.getMark,
+ api: state.api,
+ setApi: state.setApi,
+ getCache: state.getCache,
+ updateMark: state.updateMark,
+ };
+ }),
+ );
+ const cacheDataRef = useRef<{
+ elements: { [key: string]: number };
+ filesObject: Record;
+ }>({
+ elements: {},
+ filesObject: {},
+ });
+ useEffect(() => {
+ id && store.getMark(id);
+ }, [id]);
+ const onSave = throttle(async (elements, appState, filesObject) => {
+ const { elements: cacheElements, filesObject: cacheFiles } = cacheDataRef.current;
+ const _store = StoreManager.getStore(id);
+ if (!_store) {
+ console.error('Store not found for id:', id);
+ return;
+ }
+ const { setCache, loading } = _store.getState();
+ if (loading) {
+ return;
+ }
+ if (uploadLoadingRef.current) return;
+ let isChange = false;
+ const elementsObj = elements.reduce((acc, e) => {
+ acc[e.id] = e.version;
+ return acc;
+ }, {});
+ if (JSON.stringify(elementsObj) !== JSON.stringify(cacheElements)) {
+ isChange = true;
+ }
+ if (JSON.stringify(cacheFiles) !== JSON.stringify(filesObject)) {
+ isChange = true;
+ const files = Object.values(filesObject) as any as BinaryFileData[];
+ uploadLoadingRef.current = true;
+ for (const file of files) {
+ if (file.dataURL.startsWith('data')) {
+ const _file = toFile(file.dataURL, file.id);
+ const res = (await uploadChunkV2(_file, {
+ filename: file.id,
+ directory: id,
+ })) as any;
+ if (res.code === 200) {
+ toast.success('上传图片成功');
+ } else {
+ toast.error('上传图片失败');
+ }
+
+ const [upload] = res.data?.upload || [];
+ if (upload) {
+ filesObject[file.id] = {
+ ...filesObject[file.id],
+ dataURL: upload.path,
+ };
+ } else {
+ toast.error('上传图片失败');
+ }
+ } else {
+ continue;
+ }
+ }
+ uploadLoadingRef.current = false;
+ }
+ console.log('onSave', elements, appState, filesObject, 'isChange', isChange);
+ if (!isChange) {
+ return;
+ }
+ cacheDataRef.current = { elements: elementsObj, filesObject };
+ setCache({
+ data: {
+ elements,
+ filesObject,
+ },
+ });
+ }, 2000);
+ return (
+ {
+ if (store.loading) return;
+ onSave(elements, appState, filesObject);
+ }}
+ langCode={lang || 'zh-CN'}
+ renderTopRightUI={() => {
+ return ;
+ }}
+ excalidrawAPI={async (api) => {
+ ref.current = api;
+ store.setApi(api);
+ const cache = await store.getCache(id, true);
+ if (!cache) return;
+ const elementsObj = cache.elements.reduce((acc, e) => {
+ acc[e.id] = e.version;
+ return acc;
+ }, {});
+ cacheDataRef.current = {
+ elements: elementsObj,
+ filesObject: cache.filesObject,
+ };
+ }}
+ generateIdForFile={async (file) => {
+ // return dayjs().format('YYYY-MM-DD-HH-mm-ss') + '.' + file.type.split('/')[1];
+ const hash = await hashFile(file);
+ console.log('hash', hash, 'filetype', file.type);
+ const fileId = hash + '.' + file.type.split('/')[1];
+ console.log('fileId', fileId);
+
+ return fileId;
+ }}>
+
+ );
+};
diff --git a/src/apps/draw/pages/core/hooks/listen-lang.ts b/src/apps/draw/pages/core/hooks/listen-lang.ts
new file mode 100644
index 0000000..b182a72
--- /dev/null
+++ b/src/apps/draw/pages/core/hooks/listen-lang.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+export const useListenLang = () => {
+ const [lang, setLang] = useState('zh-CN');
+ useEffect(() => {
+ const lang = localStorage.getItem('excalidrawLang');
+ if (lang) {
+ setLang(lang);
+ }
+ // 监听 localStorage中excalidrawLang的变化
+ const onStorage = (e: StorageEvent) => {
+ if (e.key === 'excalidrawLang') {
+ e.newValue && setLang(e.newValue);
+ }
+ };
+ window.addEventListener('storage', onStorage);
+ return () => {
+ window.removeEventListener('storage', onStorage);
+ };
+ }, []);
+ return {
+ lang,
+ setLang: (lang: string) => {
+ // setLang(lang);
+ localStorage.setItem('excalidrawLang', lang);
+ },
+ isZh: lang === 'zh-CN',
+ };
+};
diff --git a/src/apps/draw/pages/core/hooks/listen-library.ts b/src/apps/draw/pages/core/hooks/listen-library.ts
new file mode 100644
index 0000000..46ca735
--- /dev/null
+++ b/src/apps/draw/pages/core/hooks/listen-library.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+export const useListenLibrary = () => {
+ useEffect(() => {
+ addLibraryItem();
+ }, []);
+
+ const addLibraryItem = async () => {
+ const hash = window.location.hash; // 获取哈希值
+ const addLibrary = hash.split('addLibrary=')[1];
+ if (!addLibrary || addLibrary === 'undefined') {
+ return;
+ }
+ const token = hash.split('token=')[1];
+ console.log('addLibrary', addLibrary, token);
+ const _fetchURL = decodeURIComponent(addLibrary);
+ const fetchURL = _fetchURL.split('&')[0];
+
+ console.log('fetchURL', fetchURL);
+ const res = await fetch(fetchURL, {
+ method: 'GET',
+ mode: 'cors',
+ });
+ const data = await res.json();
+ console.log('data', data);
+ };
+ return {
+ addLibraryItem,
+ };
+};
diff --git a/src/apps/draw/store/index.ts b/src/apps/draw/store/index.ts
new file mode 100644
index 0000000..dd83bf3
--- /dev/null
+++ b/src/apps/draw/store/index.ts
@@ -0,0 +1,215 @@
+import { StoreManager } from '@kevisual/store';
+import { useContextKey } from '@kevisual/store/context';
+import { StateCreator, StoreApi, UseBoundStore } from 'zustand';
+import { queryMark } from '../modules/query';
+import { useStore, BoundStore } from '@kevisual/store/react';
+import { createStore, set as setCache, get as getCache } from 'idb-keyval';
+import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
+import { toast } from 'react-toastify';
+import { BinaryFileData, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types';
+export const cacheStore = createStore('excalidraw-store', 'excalidraw');
+
+export const store = useContextKey('store', () => {
+ return new StoreManager();
+});
+
+type MarkStore = {
+ id: string;
+ setId: (id: string) => void;
+ mark: any;
+ setMark: (mark: any) => void;
+ info: any;
+ setInfo: (info: any) => void;
+ getList: () => Promise;
+ list: any[];
+ setList: (list: any[]) => void;
+ getMark: (markId: string) => Promise;
+ updateMark: () => Promise;
+ getCache: (
+ id: string,
+ updateApiData?: boolean,
+ ) => Promise<
+ | {
+ elements: OrderedExcalidrawElement[];
+ filesObject: Record;
+ }
+ | undefined
+ >;
+ setCache: (cache: any, version?: number) => Promise;
+ loading: boolean;
+ setLoading: (loading: boolean) => void;
+ // excalidraw
+
+ api: ExcalidrawImperativeAPI | null;
+ setApi: (api: ExcalidrawImperativeAPI) => void;
+};
+export const createMarkStore: StateCreator = (set, get, store) => {
+ return {
+ id: '',
+ setId: (id: string) => set(() => ({ id })),
+ mark: null,
+ setMark: (mark: any) => set(() => ({ mark })),
+ loading: true,
+ setLoading: (loading: boolean) => set(() => ({ loading })),
+ info: null,
+ setCache: async (cache: any, version?: number) => {
+ const { id, mark } = get();
+ console.log('cacheData setCache ,id', cache, id);
+ if (!id) {
+ return;
+ }
+ const cacheData = (await getCache(`${id}`, cacheStore)) || {};
+ await setCache(
+ `${id}`,
+ {
+ ...cacheData,
+ ...cache,
+ data: {
+ ...cacheData?.data,
+ ...cache?.data,
+ },
+ version: version || mark?.version || 0,
+ },
+ cacheStore,
+ );
+ },
+ updateMark: async () => {
+ const { id } = get();
+ if (!id) {
+ return;
+ }
+
+ const cacheData = await getCache(id, cacheStore);
+ let mark = cacheData || {};
+ if (!mark) {
+ return;
+ }
+ const { data } = mark;
+ const { elements, filesObject } = data;
+ console.log('updateMark', elements, filesObject);
+ const res = await queryMark.updateMark({ id, data });
+ if (res.code === 200) {
+ set(() => ({ mark: res.data }));
+ toast.success('更新成功');
+ get().setCache({}, res.data!.version);
+ }
+ },
+ getCache: async (id: string, updateApiData?: boolean) => {
+ if (!id) {
+ return;
+ }
+ // 获取缓存
+ let cacheData = (await getCache(`${id}`, cacheStore)) || { data: { elements: [], filesObject: {} } };
+ console.log('getCache', id, cacheData);
+ if (cacheData) {
+ if (updateApiData) {
+ const api = get().api;
+ if (api) {
+ const files = Object.values(cacheData.data.filesObject || {}) as BinaryFileData[];
+ api.addFiles(files || []);
+ api.updateScene({
+ elements: [...(cacheData.data?.elements || [])],
+ appState: {},
+ });
+ }
+ }
+ }
+
+ return {
+ elements: cacheData.data.elements || [],
+ filesObject: cacheData.data.filesObject || {},
+ };
+ },
+ setInfo: (info: any) => set(() => ({ info })),
+ getList: async () => {
+ const res = await queryMark.getMarkList({ page: 1, pageSize: 10 });
+ console.log(res);
+ },
+ list: [],
+ setList: (list: any[]) => set(() => ({ list })),
+ getMark: async (markId: string) => {
+ set(() => ({ loading: true, id: markId }));
+ const toastId = toast.loading(`获取数据中...`);
+ const now = new Date().getTime();
+ const cacheData = await getCache(markId, cacheStore);
+ const checkVersion = await queryMark.checkVersion(markId, cacheData?.version);
+ if (checkVersion) {
+ const res = await queryMark.getMark(markId);
+ if (res.code === 200) {
+ set(() => ({
+ mark: res.data,
+ id: markId,
+ }));
+ const mark = res.data!;
+ const excalidrawData = mark.data || {};
+ await get().setCache({
+ data: {
+ elements: excalidrawData.elements,
+ filesObject: excalidrawData.filesObject,
+ },
+ version: mark.version,
+ });
+ get().getCache(markId, true);
+ } else {
+ toast.error(res.message || '获取数据失败');
+ }
+ }
+
+ const end = new Date().getTime();
+ const getTime = end - now;
+ if (getTime < 2 * 1000) {
+ await new Promise((resolve) => setTimeout(resolve, 2 * 1000 - getTime));
+ }
+ toast.dismiss(toastId);
+ set(() => ({ loading: false }));
+ },
+ api: null,
+ setApi: (api: ExcalidrawImperativeAPI) => set(() => ({ api })),
+ };
+};
+
+export const useMarkStore = useStore as BoundStore;
+
+export const fileDemo = {
+ abc: {
+ dataURL: 'https://kevisual.xiongxiao.me/root/center/panda.png' as any,
+ // @ts-ignore
+ id: 'abc',
+ name: 'test2.png',
+ type: 'image/png',
+ },
+};
+export const demoElements: OrderedExcalidrawElement[] = [
+ {
+ id: '1',
+ type: 'image',
+ x: 100,
+ y: 100,
+ width: 100,
+ height: 100,
+ fileId: 'abc' as any,
+ version: 2,
+ versionNonce: 28180243,
+ index: 'a0' as any,
+ isDeleted: false,
+ fillStyle: 'solid',
+ strokeWidth: 2,
+ strokeStyle: 'solid',
+ roughness: 1,
+ opacity: 100,
+ angle: 0,
+ strokeColor: '#1e1e1e',
+ backgroundColor: 'transparent',
+ seed: 1,
+ groupIds: [],
+ frameId: null,
+ roundness: null,
+ boundElements: [],
+ updated: 1743219351869,
+ link: null,
+ locked: false,
+ status: 'pending',
+ scale: [1, 1],
+ crop: null,
+ },
+];
diff --git a/src/apps/draw/vite-env.d.ts b/src/apps/draw/vite-env.d.ts
new file mode 100644
index 0000000..d68a84f
--- /dev/null
+++ b/src/apps/draw/vite-env.d.ts
@@ -0,0 +1,6 @@
+///
+
+
+
+ );
+};
diff --git a/src/apps/mark/manager/Provider.tsx b/src/apps/mark/manager/Provider.tsx
new file mode 100644
index 0000000..a5a074e
--- /dev/null
+++ b/src/apps/mark/manager/Provider.tsx
@@ -0,0 +1,9 @@
+import { StoreContextProvider } from '@kevisual/store/react';
+import { createManagerStore } from './store/index';
+export const ManagerProvider = ({ children, id }: { children: React.ReactNode; id?: string }) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/apps/mark/manager/components/index.tsx b/src/apps/mark/manager/components/index.tsx
new file mode 100644
index 0000000..c211b56
--- /dev/null
+++ b/src/apps/mark/manager/components/index.tsx
@@ -0,0 +1,27 @@
+import { Button as aButton } from '@/components/a/button';
+import { Input } from '@/components/a/input';
+export const Button = aButton;
+
+export const TextField = Input;
+
+export const IconButton = aButton;
+
+export const Menu = () => {
+ return <>dev;
+};
+
+export const InputAdornment = () => {
+ return <>dev;
+};
+export const MenuItem = () => {
+ return <>dev;
+};
+export const Autocomplete = () => {
+ return <>dev;
+};
+
+export const Box = () => {
+ return <>dev;
+};
+
+
diff --git a/src/apps/mark/manager/constant.ts b/src/apps/mark/manager/constant.ts
new file mode 100644
index 0000000..1910d7d
--- /dev/null
+++ b/src/apps/mark/manager/constant.ts
@@ -0,0 +1 @@
+export const MarkTypes = ['md', 'wallnote', 'excalidraw', 'chat'];
diff --git a/src/apps/mark/manager/edit/Edit.tsx b/src/apps/mark/manager/edit/Edit.tsx
new file mode 100644
index 0000000..38abf07
--- /dev/null
+++ b/src/apps/mark/manager/edit/Edit.tsx
@@ -0,0 +1,156 @@
+import { useForm, Controller } from 'react-hook-form';
+import { TextField } from '../components';
+import { Button } from '@/components/a/button';
+import { AutoComplate } from '@/components/a/auto-complate';
+import { TagsInput } from '@/components/a/input';
+import { useManagerStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { pick } from 'lodash-es';
+import { toast } from 'react-toastify';
+import { Select } from '@/components/a/select';
+import { MarkTypes } from '../constant';
+
+export const EditMark = () => {
+ const { control, handleSubmit, reset } = useForm();
+ const { updateMark, markData, setCurrentMarkId, setMarkData } = useManagerStore(
+ useShallow((state) => {
+ return {
+ updateMark: state.updateMark,
+ markData: state.markData,
+ setCurrentMarkId: state.setCurrentMarkId,
+ currentMarkId: state.currentMarkId,
+ setMarkData: state.setMarkData,
+ };
+ }),
+ );
+ // const [mark, setMark] = useState(markData);
+ const mark = pick(markData, ['id', 'title', 'description', 'markType', 'summary', 'tags', 'link', 'thumbnail']);
+ useEffect(() => {
+ reset(mark);
+ console.log('markData', markData);
+ }, [markData?.id]);
+ const onSubmit = async (data: any) => {
+ const res = await updateMark({ ...mark, ...data });
+ if (res.code === 200) {
+ toast.success('编辑成功');
+ }
+
+ // setCurrentMarkId('');
+ // setMarkData(undefined);
+ };
+ return (
+
+ );
+};
diff --git a/src/apps/mark/manager/store/index.ts b/src/apps/mark/manager/store/index.ts
new file mode 100644
index 0000000..72bb4f9
--- /dev/null
+++ b/src/apps/mark/manager/store/index.ts
@@ -0,0 +1,137 @@
+import { StateCreator, StoreManager } from '@kevisual/store';
+import { useContextKey } from '@kevisual/store/context';
+// import { StateCreator, StoreApi, UseBoundStore } from 'zustand';
+import { query as queryClient } from '@/modules/query';
+import { Result } from '@kevisual/query/query';
+import { QueryMark, Mark, MarkType } from '@/query/query-mark/query-mark';
+import { useStore, BoundStore } from '@kevisual/store/react';
+import { uniqBy } from 'lodash-es';
+export const store = useContextKey('store', () => {
+ return new StoreManager();
+});
+
+type ManagerStore = {
+ /** 当前选中的Mark */
+ currentMarkId: string;
+ setCurrentMarkId: (markId: string) => void;
+ markData: Mark | undefined;
+ setMarkData: (mark?: Partial) => void;
+ /** 获取Mark列表 */
+ getList: () => Promise;
+ getMarkFromList: (markId: string) => Mark | undefined;
+ updateMark: (mark: Mark) => Promise;
+ getMark: (markId: string) => Promise>;
+ deleteMark: (markId: string) => Promise;
+ /** Mark列表 */
+ list: Mark[];
+ setList: (list: Mark[]) => void;
+ pagination: {
+ current: number;
+ pageSize: number;
+ total: number;
+ };
+ setPagination: (pagination: { current: number; pageSize: number; total: number }) => void;
+ /** 搜索 */
+ search: string;
+ setSearch: (search: string) => void;
+ /** 初始化 */
+ init: (markType: MarkType) => Promise;
+ queryMark: QueryMark;
+ markType: MarkType;
+ open: boolean;
+ setOpen: (open?: boolean) => void;
+};
+export const createManagerStore: StateCreator = (set, get, store) => {
+ return {
+ currentMarkId: '',
+ setCurrentMarkId: (markId: string) => set(() => ({ currentMarkId: markId })),
+ open: false,
+ setOpen: (open: boolean) => set(() => ({ open })),
+ getList: async () => {
+ const queryMark = get().queryMark;
+ const { search, pagination } = get();
+ const res = await queryMark.getMarkList({ page: pagination.current, pageSize: pagination.pageSize, search });
+ const oldList = get().list;
+ if (res.code === 200) {
+ const { pagination, list } = res.data || {};
+ const newList = [...oldList, ...list!];
+ const uniqueList = uniqBy(newList, 'id');
+ set(() => ({ list: uniqueList }));
+ set(() => ({ pagination: { current: pagination!.current, pageSize: pagination!.pageSize, total: pagination!.total } }));
+ }
+ },
+ getMarkFromList: (markId: string) => {
+ return get().list.find((item) => item.id === markId);
+ },
+ updateMark: async (mark: Mark) => {
+ const queryMark = get().queryMark;
+ const res = await queryMark.updateMark(mark);
+ if (res.code === 200) {
+ set((state) => {
+ const oldList = state.list;
+ const resMark = res.data!;
+ const newList = oldList.map((item) => (item.id === mark.id ? mark : item));
+ if (!mark.id) {
+ newList.unshift(resMark);
+ }
+ return {
+ list: newList,
+ };
+ });
+ }
+ return res;
+ },
+ getMark: async (markId: string) => {
+ const queryMark = get().queryMark;
+ const res = await queryMark.getMark(markId);
+ return res;
+ },
+ list: [],
+ setList: (list: any[]) => set(() => ({ list })),
+ init: async (markType: MarkType = 'wallnote') => {
+ // await get().getList();
+ console.log('init', set, get);
+ const queryMark = new QueryMark({
+ query: queryClient as any,
+ markType,
+ });
+ const url = new URL(window.location.href);
+ const pageSize = url.searchParams.get('pageSize') || '10';
+ set({ queryMark, markType, list: [], pagination: { current: 1, pageSize: parseInt(pageSize), total: 0 }, currentMarkId: '', markData: undefined });
+ setTimeout(async () => {
+ console.log('get', get);
+ get().getList();
+ }, 1000);
+ },
+ deleteMark: async (markId: string) => {
+ const queryMark = get().queryMark;
+ const res = await queryMark.deleteMark(markId);
+ const currentMarkId = get().currentMarkId;
+ if (res.code === 200) {
+ // get().getList();
+ set((state) => ({
+ list: state.list.filter((item) => item.id !== markId),
+ }));
+ if (currentMarkId === markId) {
+ set(() => ({ currentMarkId: '', markData: undefined }));
+ }
+ }
+ return res;
+ },
+ queryMark: undefined,
+ markType: 'simple',
+ markData: undefined,
+ setMarkData: (mark: Mark) => set(() => ({ markData: mark })),
+ pagination: {
+ current: 1,
+ pageSize: 10,
+ total: 0,
+ },
+ setPagination: (pagination: { current: number; pageSize: number; total: number }) => set(() => ({ pagination })),
+ /** 搜索 */
+ search: '',
+ setSearch: (search: string) => set(() => ({ search, list: [], pagination: { current: 1, pageSize: 10, total: 0 } })),
+ };
+};
+
+export const useManagerStore = useStore as BoundStore;
diff --git a/src/components/a/input.tsx b/src/components/a/input.tsx
index 948c0c9..bba456d 100644
--- a/src/components/a/input.tsx
+++ b/src/components/a/input.tsx
@@ -1,6 +1,92 @@
import { Input as UIInput } from '@/components/ui/input';
+import React, { useState, useRef, useEffect } from 'react';
export type InputProps = { label?: string } & React.ComponentProps<'input'>;
export const Input = (props: InputProps) => {
return (null);
+
+ useEffect(() => {
+ setInput('');
+ }, [value]);
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ setInput(e.target.value);
+ };
+
+ const handleInputKeyDown = (e: React.KeyboardEvent) => {
+ if (
+ (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') &&
+ input.trim()
+ ) {
+ e.preventDefault();
+ const newTag = input.trim();
+ if (!value.includes(newTag)) {
+ onChange([...value, newTag]);
+ }
+ setInput('');
+ } else if (e.key === 'Backspace' && !input && value.length) {
+ onChange(value.slice(0, -1));
+ }
+ };
+
+ const handleRemoveTag = (idx: number) => {
+ onChange(value.filter((_, i) => i !== idx));
+ };
+
+ return (
+
+ {props.children ? props.children : showSelectedValue}
+
+ {props.options?.map((option) => (
+ handleSelect(option.value)}>
+ {option.label}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/a/tooltip.tsx b/src/components/a/tooltip.tsx
index 5e82081..e890ceb 100644
--- a/src/components/a/tooltip.tsx
+++ b/src/components/a/tooltip.tsx
@@ -1,12 +1,12 @@
import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import React from 'react';
-export const Tooltip = (props: { children?: React.ReactNode; title?: React.ReactNode }) => {
+export const Tooltip = (props: { children?: React.ReactNode; title?: React.ReactNode; placement?: 'top' | 'bottom' | 'left' | 'right' }) => {
return (
{props.children}
-
+
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..0d6741b
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
diff --git a/src/pages/docs/kevisual/index.astro b/src/pages/docs/kevisual/index.astro
index d63a021..5fdc915 100644
--- a/src/pages/docs/kevisual/index.astro
+++ b/src/pages/docs/kevisual/index.astro
@@ -1,7 +1,6 @@
---
import { getCollection } from 'astro:content';
const posts = await getCollection('kevisual');
-console.log('post', posts);
import { basename } from '@/modules/basename';
import Blank from '@/components/html/blank.astro';
---
diff --git a/src/pages/mark/draw.astro b/src/pages/mark/draw.astro
new file mode 100644
index 0000000..8aa727b
--- /dev/null
+++ b/src/pages/mark/draw.astro
@@ -0,0 +1,11 @@
+---
+import '@/styles/theme.css';
+import '@/styles/global.css';
+import Blank from '@/components/html/blank.astro';
+import { App } from '@/apps/draw/App';
+---
+
+
+
+
diff --git a/src/pages/mark/index.astro b/src/pages/mark/index.astro
new file mode 100644
index 0000000..47a01e7
--- /dev/null
+++ b/src/pages/mark/index.astro
@@ -0,0 +1,10 @@
+---
+import '@/styles/theme.css';
+import '@/styles/global.css';
+import Blank from '@/components/html/blank.astro';
+import { App } from '@/apps/mark/manager/Manager';
+---
+
+
+
diff --git a/src/query/query-app/query-app.ts b/src/query/query-app/query-app.ts
index 6f882f7..08c1172 100644
--- a/src/query/query-app/query-app.ts
+++ b/src/query/query-app/query-app.ts
@@ -15,4 +15,7 @@ export class QueryApp extends BaseQuery {
getList(data: any, opts?: DataOpts) {
return this.appDefine.queryChain('listApps').post(data, opts);
}
+ publishVersion(data: any, opts?: DataOpts) {
+ return this.appDefine.queryChain('publishApp').post(data, opts);
+ }
}
diff --git a/src/query/query-upload/query-upload-node.ts b/src/query/query-upload/query-upload-node.ts
index e69de29..f638cb6 100644
--- a/src/query/query-upload/query-upload-node.ts
+++ b/src/query/query-upload/query-upload-node.ts
@@ -0,0 +1 @@
+// console.log('upload)
\ No newline at end of file
-
-
-
+
+
+
+ );
+};
+export const App = (props: any) => {
+ return (
+
+
+ );
+};
+
+const ShowLinks = (props: { links: { title: string; description: string; link: string }[] }) => {
+ return (
+
+
);
};
diff --git a/src/apps/assistant-home/module/is-dev.ts b/src/apps/assistant-home/module/is-dev.ts
new file mode 100644
index 0000000..8242e7f
--- /dev/null
+++ b/src/apps/assistant-home/module/is-dev.ts
@@ -0,0 +1 @@
+export const isDev = () => location.origin.includes('localhost:4321');
diff --git a/src/apps/draw/App.tsx b/src/apps/draw/App.tsx
new file mode 100644
index 0000000..961e399
--- /dev/null
+++ b/src/apps/draw/App.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { getHistoryState, setHistoryState } from '@kevisual/store/web-page.js';
+import { Draw } from './pages/Draw';
+import { App as Manager, ProviderManagerName, useManagerStore } from '../mark/manager/Manager';
+import { ToastProvider } from '@/modules/toast/Provider';
+
+import './index.css';
+import { useShallow } from 'zustand/shallow';
+import { toast } from 'react-toastify';
+
+// @ts-ignore
+window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
+
+export const App = () => {
+ return (
+
+ {props.links.map((item, index) => (
+
+
+ {item.title}
+
+
+ ))}
+ {item.description}
+
+ {
+ if (data.id !== id) {
+ setId('');
+ const url = new URL(location.href);
+ url.searchParams.set('id', data.id);
+ console.log('set url', url.toString());
+ setHistoryState({}, url.toString());
+ setTimeout(() => {
+ setId(data.id);
+ }, 200);
+ const _store = useManagerStore.getState(ProviderManagerName);
+ if (_store.markData) {
+ _store.setCurrentMarkId('');
+ // _store.setOpen(false);
+ _store.setMarkData(undefined);
+ }
+ } else if (data.id === id) {
+ toast.success('已选择当前画布');
+ }
+ console.log('onClick', data, id);
+ }}>
+
+
+ );
+};
+
+export const DrawWrapper = (props: { id?: string; setId: (id: string) => void }) => {
+ const { id, setId } = props;
+ const store = useManagerStore(
+ useShallow((state) => {
+ return {
+ currentMarkId: state.currentMarkId,
+ };
+ }),
+ );
+ console.log('DrawApp store', store);
+ return (
+ <>
+ {id ? (
+
+
+ {store.currentMarkId ? '' : '请先选择一个画布'}
+ )}
+
+ );
+};
diff --git a/src/apps/draw/Bootstrap.tsx b/src/apps/draw/Bootstrap.tsx
new file mode 100644
index 0000000..c8f61d5
--- /dev/null
+++ b/src/apps/draw/Bootstrap.tsx
@@ -0,0 +1,21 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+import { ToastContainer } from 'react-toastify';
+// import { I18NextProvider, initI18n } from '@kevisual/components/translate/index.tsx';
+
+export const Bootstrap = (element: HTMLElement) => {
+ createRoot(element).render(
+ <>
+ {/*
+ {images.map((image) => {
+ const isUrl = refFiles.current[image]?.dataURL?.startsWith?.('http');
+ const dataURL = refFiles.current[image]?.dataURL;
+ return (
+
+ );
+};
+
+export const ExcalidrawExpand = (props: { onClose: () => void }) => {
+ const { onClose } = props;
+ const [docked, setDocked] = useState(false);
+ const store = useMarkStore(
+ useShallow((state) => {
+ return {
+ loading: state.loading,
+ updateMark: state.updateMark,
+ api: state.api,
+ };
+ }),
+ );
+ const { lang, setLang, isZh } = useListenLang();
+ return (
+ <>
+ {store.loading && (
+
+ 
+
+ );
+ })}
+
+ {isUrl &&
+ {dataURL}
}
+ {refFiles.current[image]?.name}
+ {refFiles.current[image]?.type}
+ {refFiles.current[image]?.id}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+export const EditMark = () => {
+ const { markData } = useManagerStore(
+ useShallow((state) => {
+ return {
+ markData: state.markData,
+ };
+ }),
+ );
+ const mark = markData;
+ if (!mark) {
+ return null;
+ }
+ if (mark) {
+ return
+
+
+ (
+
+
+ {
+ if (event.key === 'Enter') {
+ setSearch(field.value);
+ if (!field.value) {
+ getList();
+ }
+ }
+ }}
+ />
+
+ )}
+ />
+
+ setSearch(field.value)} />
+
+
+ {showSelect && (
+ <>
+
+
+ )}
+
+ {markData && (
+
+ )}
+
+
+ {list.map((item, index) => {
+ const isCurrent = item.id === currentMarkId;
+ return (
+
+ {
+ onClick?.(item, e as any);
+ e.stopPropagation();
+ e.preventDefault();
+ }}>
+
+ );
+ })}
+
+
+ {item.title}
+
+
+
+
+ 类型: {item.markType}
+ 概要: {item.summary}
+ 标签: {item.tags?.join?.(', ')}
+ {/* 描述: {item.description}
*/}
+ {
+ window.open(item.link, '_blank');
+ }}>
+ 链接: {item.link}
+
+ 创建时间: {dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+ 更新时间: {dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
+
+ {list.length < pagination.total && (
+
+ )}
+
+
+
+ );
+};
+export type AppProps = {
+ /**
+ * 标记类型， wallnote md excalidraw
+ */
+ markType?: MarkType;
+ /**
+ * 是否显示搜索框
+ */
+ showSearch?: boolean;
+ /**
+ * 是否显示添加按钮
+ */
+ showAdd?: boolean;
+ /**
+ * 点击事件
+ */
+ onClick?: (data?: any) => void;
+ /**
+ * 管理器id, 存储到store的id
+ */
+ managerId?: string;
+ children?: React.ReactNode;
+ showSelect?: boolean;
+ openMenu?: boolean;
+};
+export const ProviderManagerName = 'mark-manager';
+export const App = (props: AppProps) => {
+ return (
+
+ {
+ setOpenMenu(!openMenu);
+ }}>
+
+
+ {props.children}
+ {(!props.expandChildren || isEdit) && (
+
+
+ )}
+ {props.expandChildren && {props.expandChildren}
}
+
+ {showLabel && label && (
+
+ )}
+
+ );
+};
diff --git a/src/components/a/menu.tsx b/src/components/a/menu.tsx
new file mode 100644
index 0000000..7727cec
--- /dev/null
+++ b/src/components/a/menu.tsx
@@ -0,0 +1,39 @@
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import { useEffect, useState } from 'react';
+type Props = {
+ children?: React.ReactNode;
+ className?: string;
+ options?: { label: string; value: string }[];
+ onSelect?: (value: string) => void;
+};
+
+export const Menu = (props: Props) => {
+ const [open, setOpen] = useState(false);
+ const [selectedValue, setSelectedValue] = useState('');
+
+ const handleSelect = (value: string) => {
+ setSelectedValue(value);
+ props.onSelect?.(value);
+ setOpen(false);
+ };
+ const showSelectedValue = selectedValue || 'Select an option';
+ return (
+ inputRef.current?.focus()}
+ >
+ {value.map((tag, idx) => (
+
+ {tag}
+
+
+ ))}
+
+
+ {props.title}