feat: add preview and change edit and flow

src/pages/container/edit/List.tsx

@@ -4,7 +4,8 @@ import { TextArea } from '../components/TextArea';
 import { useContainerStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
-
+import copy from 'copy-to-clipboard';
+import { useNavigate } from 'react-router';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useContainerStore(
@@ -73,6 +74,7 @@ const FormModal = () => {
   );
 };
 export const ContainerList = () => {
+  const navicate = useNavigate();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {
@@ -90,10 +92,23 @@ export const ContainerList = () => {
   }, []);
 
   const columns = [
-    // {
-    //   title: 'ID',
-    //   dataIndex: 'id',
-    // },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      render: (text: string) => {
+        return (
+          <div
+            className='w-40 truncate cursor-pointer'
+            title={text}
+            onClick={() => {
+              copy(text);
+              message.success('copy success');
+            }}>
+            {text}
+          </div>
+        );
+      },
+    },
     {
       title: 'Title',
       dataIndex: 'title',
@@ -124,6 +139,12 @@ export const ContainerList = () => {
               }}>
               Edit
             </Button>
+            <Button
+              onClick={() => {
+                navicate('/container/preview/' + record.id);
+              }}>
+              Preview
+            </Button>
             <Button
               danger
               onClick={() => {

src/pages/container/index.tsx

@@ -1,13 +1,15 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { ContainerList } from './edit/List';
 import { Main } from './layouts';
-
+import { Preview } from './preview';
 export const App = () => {
   return (
     <Routes>
       <Route element={<Main />}>
         <Route path='/' element={<Navigate to='/container/edit/list' />}></Route>
         <Route path='edit/list' element={<ContainerList />} />
+        <Route path='preview/:id' element={<Preview />} />
+        
         <Route path='/' element={<div>Home</div>} />
       </Route>
     </Routes>

src/pages/container/preview/index.tsx

@@ -0,0 +1,61 @@
+import { Container } from '@abearxiong/container';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import { query } from '@/modules';
+import { message } from 'antd';
+
+export const Preview = () => {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<any>(null);
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    if (!id) return;
+    fetch();
+  }, []);
+  const fetch = async () => {
+    const res = await query.post({
+      path: 'container',
+      key: 'get',
+      id,
+    });
+    if (res.code === 200) {
+      const data = res.data;
+      // setData([data]);
+      console.log('data', data);
+      const code = {
+        id: data.id,
+        title: data.title,
+        code: data.code,
+        data: data.data,
+      };
+      init([code]);
+    } else {
+      message.error(res.msg || 'Failed to fetch data');
+    }
+  };
+  const init = async (data: any[]) => {
+    // console.log('data', data, ref.current);
+    const container = new Container({
+      root: ref.current!,
+      data: data as any,
+      showChild: false,
+    });
+    container.render(id!);
+    containerRef.current = container;
+  };
+  return (
+    <div className='w-full h-full bg-gray-200'>
+      <div className='text-center mb-10 font-bold text-4xl mt-4 '>Preview</div>
+      <div
+        className='flex '
+        style={{
+          height: 'calc(100% - 32px)',
+        }}>
+        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%]' ref={ref}></div>
+      </div>
+    </div>
+  );
+};