暂存添加编辑器和modal

packages/theme-preview/src/pages/codemirror/Json.tsx

@@ -0,0 +1,25 @@
+import { createEditorInstance } from '@kevisual/codemirror/dist/editor.json';
+import { useEffect, useRef } from 'react';
+export const App = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    init();
+  }, []);
+  const init = () => {
+    const editor = createEditorInstance(ref.current!);
+    editor.dom.style.height = '100%';
+  };
+  return (
+    <div className='h-full w-full bg-gray-400'>
+      <div className='p-2 bg-white mb-4'>CodeMirror</div>
+      <div
+        className='rounded-md border shadow-md p-4 bg-white mx-8'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <div ref={ref} className='h-full w-full'></div>
+      </div>
+    </div>
+  );
+};

packages/theme-preview/src/pages/codemirror/Ts.tsx

@@ -0,0 +1,29 @@
+import { createEditorInstance } from '@kevisual/codemirror';
+import { useEffect, useRef } from 'react';
+
+type AppProps = {
+  typescript?: boolean;
+};
+export const App = ({ typescript }: AppProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    init();
+  }, []);
+  const init = () => {
+    const editor = createEditorInstance(ref.current!, { typescript });
+    editor.dom.style.height = '100%';
+  };
+  return (
+    <div className='h-full w-full bg-gray-400'>
+      <div className='p-2 bg-white mb-4'>CodeMirror</div>
+      <div
+        className='rounded-md border shadow-md p-4 bg-white mx-8'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <div ref={ref} className='h-full w-full'></div>
+      </div>
+    </div>
+  );
+};

packages/theme-preview/src/pages/codemirror/index.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import { App as TsApp } from './Ts';
+import { App as JsonApp } from './Json';
+
+export const App = () => {
+  return (
+    <Routes>
+      <Route path='/' element={<Navigate to='/codemirror/ts' />} />
+      <Route path='/ts' element={<TsApp typescript={true} />} />
+      <Route path='/js' element={<TsApp />} />
+      <Route path='/json' element={<JsonApp />} />
+    </Routes>
+  );
+};

packages/theme-preview/src/pages/model/index.tsx

@@ -0,0 +1,73 @@
+import { modalStore, Modal, DialogModal } from '@kevisual/ui';
+import { calc } from 'antd/es/theme/internal';
+import { useEffect, useRef } from 'react';
+import '@kevisual/ui/src/index.css';
+export const App = () => {
+  const showModel = () => {
+    //
+  };
+  return (
+    <div className='flex flex-col w-full h-full bg-gray-400'>
+      <div className='p-2 bg-white rounded-md border-b rounded-s rounded-e'>Model</div>
+      <div
+        className='mt-2 mx-4 bg-white p-2 rounded-md border shadow-sm flex flex-wrap gap-2'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <ModelOne />
+        <ModelTwo />
+      </div>
+    </div>
+  );
+};
+
+const ModelOne = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const showModel = () => {
+    const model = Modal.render(ref.current!, {});
+  };
+  return (
+    <div>
+      <div className='w-100 h-100 p-4 rounded-md shadow-md bg-slate-200'>
+        model one
+        <div className='cursor-pointer p-2 border' onClick={showModel}>
+          show
+        </div>
+        <div ref={ref}> 当前元素是Model的渲染内容</div>
+      </div>
+    </div>
+  );
+};
+
+const ModelTwo = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const showModel = () => {
+    const model = DialogModal.render(ref.current!, {
+      dialogTitle: 'Dialog Modal',
+      width: '400px',
+      dialogTitleCloseIcon: true,
+      contentStyle: {
+        // maxHeight: '100px',
+        // overflow: 'auto',
+      }
+    });
+  };
+  return (
+    <div>
+      <div className='w-100 h-100 p-4 rounded-md shadow-md bg-slate-200'>
+        model two
+        <div className='cursor-pointer p-2 border' onClick={showModel}>
+          show
+        </div>
+        <div ref={ref}>
+          当前元素是Modal Dialog 的渲染内容
+          <div>内容</div>
+          <div>内容2</div>
+          <div>内容3</div>
+          <div>内容4</div>
+        </div>
+      </div>
+    </div>
+  );
+};