feat: add ai-html

2025-06-02 13:22:04 +08:00
parent a43cfb4b5f
commit a309faead0
46 changed files with 11067 additions and 416 deletions
--- a/src/apps/draw/App.tsx
+++ 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 (
+    <ToastProvider>
+      <DrawApp />
+    </ToastProvider>
+  );
+};
+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 (
+    <div className='bg-white w-full h-full flex'>
+      <Manager
+        showSearch={true}
+        showAdd={true}
+        markType={'excalidraw'}
+        openMenu={!urlId}
+        onClick={(data) => {
+          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);
+        }}>
+        <div className='h-full grow'>
+          <DrawWrapper id={id} setId={setId} />
+        </div>
+      </Manager>
+    </div>
+  );
+};
+
+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 ? (
+        <Draw
+          id={id}
+          onClose={() => {
+            setId('');
+            setHistoryState({
+              id: '',
+            });
+          }}
+        />
+      ) : (
+        <div className='flex items-center justify-center h-full text-gray-500'> {store.currentMarkId ? '' : '请先选择一个画布'} </div>
+      )}
+    </>
+  );
+};