feat: add preview and change edit and flow

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>
+  );
+};