temp

package.json

@@ -12,7 +12,7 @@
     "deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web"
   },
   "dependencies": {
-    "@abearxiong/container": "0.0.1-alpha.6",
+    "@abearxiong/container": "0.0.1-alpha.8",
     "@abearxiong/flows": "0.0.1-alpha.9",
     "@abearxiong/ui": "0.0.1-alpha.0",
     "@ant-design/icons": "^5.5.1",
@@ -52,7 +52,7 @@
     "globals": "^15.9.0",
     "react-is": "^18.3.1",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.6.0",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@abearxiong/container':
-        specifier: 0.0.1-alpha.6
+        specifier: 0.0.1-alpha.8
-        version: 0.0.1-alpha.6(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)
+        version: 0.0.1-alpha.8(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)
       '@abearxiong/flows':
         specifier: 0.0.1-alpha.9
         version: 0.0.1-alpha.9(@xyflow/react@12.3.0(@types/react@18.3.8)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zustand@4.5.5(@types/react@18.3.8)(immer@10.1.1)(react@18.3.1))
@@ -86,10 +86,10 @@ importers:
         version: 9.11.0
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
-        version: 0.4.2(tailwindcss@3.4.12)
+        version: 0.4.2(tailwindcss@3.4.13)
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.12)
+        version: 0.5.15(tailwindcss@3.4.13)
       '@types/node':
         specifier: ^22.5.5
         version: 22.5.5
@@ -124,11 +124,11 @@ importers:
         specifier: ^2.5.2
         version: 2.5.2
       tailwindcss:
-        specifier: ^3.4.12
+        specifier: ^3.4.13
-        version: 3.4.12
+        version: 3.4.13
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.12)
+        version: 1.0.7(tailwindcss@3.4.13)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
@@ -141,8 +141,8 @@ importers:
 
 packages:
 
-  '@abearxiong/container@0.0.1-alpha.6':
+  '@abearxiong/container@0.0.1-alpha.8':
-    resolution: {integrity: sha512-rhEPkVWGOxn8o7kVSgkHOpc+/PybOQTYt/V9BQpVzM6nXw5Sl1fDCaQux2Nn06bz54bU1O38wGfk6y46S0weSw==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.6/77e190e08005b8eb0f2a5ca5a6778ae727bdc263}
+    resolution: {integrity: sha512-7DNio7j1YYGIQ1tVLD8p49spwmY1zf+PeX+M5VRw9dQXnKWlFr3FLAWoEJH2Lk7ODEMkRfzwsLMAh1vXFossfQ==, tarball: https://npm.pkg.github.com/download/@abearxiong/container/0.0.1-alpha.8/6191afd30d2b3040a41596d4bf96a319d15ee664}
     peerDependencies:
       '@emotion/css': ^11.13.0
       crypto-js: ^4.2.0
@@ -2136,8 +2136,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.12:
+  tailwindcss@3.4.13:
-    resolution: {integrity: sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==}
+    resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -2370,7 +2370,7 @@ packages:
 
 snapshots:
 
-  '@abearxiong/container@0.0.1-alpha.6(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
+  '@abearxiong/container@0.0.1-alpha.8(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
     dependencies:
       '@emotion/css': 11.13.0
       crypto-js: 4.2.0
@@ -2933,17 +2933,17 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.22.0':
     optional: true
 
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.12)':
+  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.13)':
     dependencies:
-      tailwindcss: 3.4.12
+      tailwindcss: 3.4.13
 
-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.12)':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.12
+      tailwindcss: 3.4.13
 
   '@types/babel__core@7.20.5':
     dependencies:
@@ -4571,11 +4571,11 @@ snapshots:
 
   tailwind-merge@2.5.2: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.12):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
     dependencies:
-      tailwindcss: 3.4.12
+      tailwindcss: 3.4.13
 
-  tailwindcss@3.4.12:
+  tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2

src/App.tsx

@@ -4,6 +4,7 @@ import { App as ContainerApp } from './pages/container';
 import { App as PanelApp } from './pages/panel';
 import { App as PublishApp } from './pages/publish';
 import { App as CodeEditorApp } from './pages/code-editor';
+import '@abearxiong/container/dist/container.css';
 
 export const App = () => {
   return (

src/modules/deck-to-flow/deck.ts

@@ -0,0 +1,142 @@
+import { RenderData } from '@abearxiong/container';
+
+type Page = {
+  data: {
+    edges: { id: string; source: string; target: string }[];
+    nodes: { id: string; type: string; position: { x: number; y: number }; data: any }[];
+  };
+  id: string;
+  type: string;
+  [key: string]: any;
+};
+type Container = {
+  code: string;
+  id: string;
+  [key: string]: any;
+};
+type PageEditData = {
+  page: Page;
+  containerList: Container[];
+};
+export const getContainerData = (pageEditData: PageEditData) => {
+  const { page, containerList } = pageEditData;
+  const containerObj = containerList.reduce((acc, container) => {
+    acc[container.id] = container;
+    return acc;
+  }, {});
+
+  const { edges, nodes } = page.data;
+  const nodesObj = nodes.reduce((acc, node) => {
+    acc[node.id] = node;
+    return acc;
+  }, {});
+  const treeArray = getTreeFromEdges(edges);
+  const floatNodes = nodes.filter((node) => !treeArray.find((item) => item.id === node.id));
+  const treeNodes = nodes.filter((node) => treeArray.find((item) => item.id === node.id));
+  const renderData: RenderData[] = [];
+  for (let tree of treeArray) {
+    const node = nodesObj[tree.id];
+    const container = containerObj[node.data?.cid];
+    const style = node.data?.style ?? {
+      position: 'absolute',
+      width: 100,
+      height: 100,
+    };
+    const data = {
+      node: { ...node },
+      container: { ...container },
+    };
+    renderData.push({
+      id: node.id,
+      children: tree.children,
+      parents: tree.parents,
+      code: container?.code || '',
+      codeId: container?.id,
+      data: data || {},
+      className: node.data?.className,
+      shadowRoot: node.data?.shadowRoot,
+      showChild: node.data?.showChild,
+      style,
+    });
+  }
+  for (let node of floatNodes) {
+    const container = containerObj[node.data?.cid];
+    const style = node.data?.style ?? {
+      position: 'absolute',
+      width: 100,
+      height: 100,
+    };
+    const data = {
+      node: { ...node },
+      container: { ...container },
+    };
+    renderData.push({
+      id: node.id,
+      children: [],
+      parents: [],
+      code: container?.code || '',
+      codeId: container?.id,
+      data: data || {},
+      className: node.data?.className,
+      shadowRoot: node.data?.shadowRoot,
+      showChild: node.data?.showChild,
+      style,
+    });
+  }
+  return renderData;
+};
+const getTreeFromEdges = (
+  edges: { id: string; source: string; target: string }[],
+): {
+  id: string;
+  parents: string[];
+  children: string[];
+}[] => {
+  // 构建树形结构
+  function buildNodeTree(edges) {
+    const nodeMap = {};
+
+    // 初始化每个节点的子节点列表和父节点列表
+    edges.forEach((edge) => {
+      if (!nodeMap[edge.source]) {
+        nodeMap[edge.source] = { id: edge.source, parents: [], children: [] };
+      }
+      if (!nodeMap[edge.target]) {
+        nodeMap[edge.target] = { id: edge.target, parents: [], children: [] };
+      }
+
+      // 连接父节点和子节点
+      nodeMap[edge.source].children.push(nodeMap[edge.target]);
+      nodeMap[edge.target].parents.push(nodeMap[edge.source]);
+    });
+
+    return nodeMap;
+  }
+
+  const nodeTree = buildNodeTree(edges);
+
+  // 递归获取所有父节点，按顺序
+  function getAllParents(node) {
+    const parents: string[] = [];
+    function traverseParents(currentNode) {
+      if (currentNode.parents.length > 0) {
+        currentNode.parents.forEach((parent: any) => {
+          parents.push(parent.id);
+          traverseParents(parent);
+        });
+      }
+    }
+    traverseParents(node);
+    return parents.reverse(); // 确保顺序从最顶层到直接父节点
+  }
+
+  function getNodeInfo(nodeMap) {
+    return Object.values(nodeMap).map((node: any) => ({
+      id: node.id,
+      parents: getAllParents(node),
+      children: node.children.map((child) => child.id),
+    }));
+  }
+  const result = getNodeInfo(nodeTree);
+  return result;
+};

src/modules/index.ts

@@ -1,30 +1,2 @@
-import { Query } from '@kevisual/query';
+export * from './query';
-export const query = new Query({});
+export * from './deck-to-flow/deck';
-export const request = query.post;
-export const ws = new WebSocket('ws://localhost:6010/api/router');
-import { create } from 'zustand';
-
-type Store = {
-  connected: boolean;
-  setConnected: (connected: boolean) => void;
-};
-export const useStore = create<Store>((set) => ({
-  connected: false,
-  setConnected: (connected) => set({ connected }),
-}));
-
-// 当连接成功时
-ws.onopen = () => {
-  console.log('Connected to WebSocket server');
-  useStore.getState().setConnected(true);
-};
-// 接收服务器的消息
-ws.onmessage = (event) => {
-  console.log('Received message:', event.data);
-  // const message = JSON.parse(event.data);
-};
-
-// 处理 WebSocket 关闭
-ws.onclose = () => {
-  console.log('Disconnected from WebSocket server');
-};

src/modules/query.ts

@@ -0,0 +1,30 @@
+import { Query } from '@kevisual/query';
+export const query = new Query({});
+export const request = query.post;
+export const ws = new WebSocket('ws://localhost:6010/api/router');
+import { create } from 'zustand';
+
+type Store = {
+  connected: boolean;
+  setConnected: (connected: boolean) => void;
+};
+export const useStore = create<Store>((set) => ({
+  connected: false,
+  setConnected: (connected) => set({ connected }),
+}));
+
+// 当连接成功时
+ws.onopen = () => {
+  console.log('Connected to WebSocket server');
+  useStore.getState().setConnected(true);
+};
+// 接收服务器的消息
+ws.onmessage = (event) => {
+  // console.log('Received message:', event.data);
+  // const message = JSON.parse(event.data);
+};
+
+// 处理 WebSocket 关闭
+ws.onclose = () => {
+  console.log('Disconnected from WebSocket server');
+};

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 containerRef = useRef<ContainerEdit | null>(null);
-  const [data, setData] = useState<any>({});
 
   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;
+      const result = getContainerData({ page, containerList });
-      for (let edge of edges) {
+      init(result);
-        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);
     }
     // 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,
     });