add prompt js page

src/pages/container/preview/index.tsx

@@ -57,6 +57,75 @@ export const Preview = () => {
   const containerRef = useRef<Container | null>(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,
+        codeId: data.id,
+        code: data.code,
+        data: data.data,
+      };
+      init([code]);
+    } else {
+      message.error(res.msg || 'Failed to fetch data');
+    }
+  };
+  const refresh = (data: any) => {
+    if (!data.id) return;
+    const code = {
+      id: data.id,
+      title: data.title,
+      codeId: data.id,
+      code: data.code,
+      data: data.data,
+      hash: '',
+    };
+    init([code], true);
+  };
+  useListener(id, { refresh: refresh });
+  const init = async (data: any[], replace: boolean = false) => {
+    // console.log('data', data, ref.current);
+    if (containerRef.current) {
+      const container = containerRef.current;
+      console.log('data', data, container.data);
+      container.updateData(data);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+      console.log('update---data', data, container.data);
+      container.destroy(id!);
+      container.renderId(id!);
+      return;
+    }
+    console.log('data', containerRef.current);
+    const container = new Container({
+      root: ref.current!,
+      data: data as any,
+      showChild: false,
+    });
+    container.renderId(id!);
+    containerRef.current = container;
+  };
+  return <div className='mx-auto border bg-gray-200 h-full w-full' ref={ref}></div>;
+};
+export const PreviewWrapper = () => {
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<Container | null>(null);
   useEffect(() => {
     if (!id) return;
     fetch();
@@ -121,13 +190,13 @@ export const Preview = () => {
   };
   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='text-center mb-4 pt-2 font-bold text-4xl '>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 className='mx-auto border bg-white h-h-full w-[80%] h-[80%] overflow-y-auto' ref={ref}></div>
       </div>
     </div>
   );