temp

src/pages/container/preview/index.tsx

@@ -74,7 +74,7 @@ export const Preview = () => {
       const code = {
         id: data.id,
         title: data.title,
-        codeId: data.Id,
+        codeId: data.id,
         code: data.code,
         data: data.data,
       };
@@ -88,7 +88,7 @@ export const Preview = () => {
     const code = {
       id: data.id,
       title: data.title,
-      codeId: data.Id,
+      codeId: data.id,
       code: data.code,
       data: data.data,
       hash: '',

src/pages/panel/deck/index.tsx

@@ -1,16 +1,70 @@
 import { Container, ContainerEdit } from '@abearxiong/container';
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router';
-import { query } from '@/modules';
+import { query, useStore, ws } from '@/modules';
 import { message } from 'antd';
-import '@abearxiong/container/dist/container.css';
-
+import { getContainerData } from '@/modules/deck-to-flow/deck';
+export const useListener = (id?: string, opts?: any) => {
+  const { refresh } = opts || {};
+  const connected = useStore((state) => state.connected);
+  // 监听服务器的消息
+  useEffect(() => {
+    if (!id) return;
+    if (!connected) return;
+    ws.send(
+      JSON.stringify({
+        type: 'subscribe',
+        data: {
+          type: 'pageEdit',
+          data: {
+            pid: id,
+            cids: ['170c0b55-8c13-4d6e-bf35-3f935d979a0d'],
+          },
+        },
+      }),
+    );
+    ws.addEventListener('message', listener);
+    return () => {
+      if (!id) return;
+      if (!connected) return;
+      ws.removeEventListener('message', listener);
+    };
+  }, [id, connected]);
+  const listener = (event) => {
+    const parseIfJson = (data: string) => {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        return data;
+      }
+    };
+    const receivedData = parseIfJson(event.data);
+    if (typeof receivedData === 'string') return;
+    if (receivedData.type === 'pageEdit' && receivedData.source === 'container') {
+      const { data: containerData, pid } = receivedData;
+      if (pid !== id) return;
+      if (refresh) {
+        refresh(containerData);
+      }
+    }
+  };
+};
+const getParent = (data: { children?: string[]; [key: string]: any }[], id: string, list: string[]) => {
+  for (let item of data) {
+    if (item.children?.includes(id)) {
+      // 找到了当前的父亲节点
+      list.unshift(item.id);
+      getParent(data, item.id, list);
+      return;
+    }
+  }
+  return;
+};
 export const Deck = () => {
   const params = useParams<{ id: string }>();
   const id = params.id;
   const ref = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<any>(null);
-  const [data, setData] = useState<any>({});
+  const containerRef = useRef<ContainerEdit | null>(null);
 
   useEffect(() => {
     if (!id) return;
@@ -26,44 +80,8 @@ export const Deck = () => {
       const data = res.data;
       console.log('data', data);
       const { page, containerList } = data;
-      const { edges, nodes } = page.data;
-      for (let edge of edges) {
-        const { source, target } = edge;
-        const node = nodes.find((node: any) => node.id === source);
-        if (!node) continue;
-        node.children = node.children || [];
-        node.children.push(target);
-      }
-      for (let node of nodes) {
-        const container = containerList.find((container: any) => container.id === node.data?.cid);
-        if (container) {
-          node.container = container;
-        }
-      }
-      const codes = nodes.map((node: any) => {
-        const container = node.container;
-        const data = container?.data || {};
-        const nodeData = node.data || {};
-        let style = nodeData.style ?? {
-          position: 'absolute',
-          width: 100,
-          height: 100,
-        };
-        return {
-          id: node.id,
-          title: node.title,
-          code: container?.code || '',
-          data: data,
-          children: node.children,
-          // TODO: style className shadowRoot showChild
-          className: nodeData.className,
-          shadowRoot: nodeData.shadowRoot,
-          showChild: nodeData.showChild,
-          style,
-        };
-      });
-      init(codes);
-      console.log('codes', codes);
+      const result = getContainerData({ page, containerList });
+      init(result);
     }
     // if (res.code === 200) {
     //   const data = res.data;
@@ -80,11 +98,40 @@ export const Deck = () => {
     //   message.error(res.msg || 'Failed to fetch data');
     // }
   };
+  const refresh = async (data: any) => {
+    console.log('refresh', data);
+    if (!data.id) return;
+    const code = {
+      codeId: data.id,
+      code: data.code,
+      hash: '',
+    };
+    const container = containerRef.current!;
+    // @ts-ignore
+    await container.updateDataCode([code]);
+    const containerList = container.data.filter((item) => item.codeId === data.id);
+    await new Promise((resolve) => {
+      setTimeout(resolve, 2000);
+    });
+    console.log('containerList update', containerList);
+    // container.reRender();
+    containerList.forEach((item) => {
+      container.hotReload(item.id);
+    });
+    // @ts-ignore
+    window.c = container;
+  };
+  useListener(id, { refresh });
+
   const init = async (data: any[]) => {
+    console.log(
+      'init',
+      data.filter((item) => item.codeId),
+    );
     // console.log('data', data, ref.current);
     const container = new ContainerEdit({
       root: ref.current!,
-      data: data as any,
+      data: data.filter((item) => item.codeId),
       showChild: true,
       // edit: false,
     });