fix: 解决编辑同步问题

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@abearxiong/container':
         specifier: 0.0.1-alpha.11
-        version: 0.0.1-alpha.11(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)
+        version: 0.0.1-alpha.11(@emotion/css@11.13.4)(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.1(@types/react@18.3.11)(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.11)(immer@10.1.1)(react@18.3.1))
@@ -335,8 +335,8 @@ packages:
   '@emotion/cache@11.13.1':
     resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==}
 
-  '@emotion/css@11.13.0':
+  '@emotion/css@11.13.4':
-    resolution: {integrity: sha512-BUk99ylT+YHl+W/HN7nv1RCTkDYmKKqa1qbvM/qLSQEg61gipuBF5Hptk/2/ERmX2DCv0ccuFGhz9i0KSZOqPg==}
+    resolution: {integrity: sha512-CthbOD5EBw+iN0rfM96Tuv5kaZN4nxPyYDvGUs0bc7wZBBiU/0mse+l+0O9RshW2d+v5HH1cme+BAbLJ/3Folw==}
 
   '@emotion/hash@0.8.0':
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
@@ -347,8 +347,8 @@ packages:
   '@emotion/memoize@0.9.0':
     resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/serialize@1.3.1':
+  '@emotion/serialize@1.3.2':
-    resolution: {integrity: sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==}
+    resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
 
   '@emotion/sheet@1.4.0':
     resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
@@ -359,8 +359,8 @@ packages:
   '@emotion/unitless@0.7.5':
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
 
-  '@emotion/utils@1.4.0':
+  '@emotion/utils@1.4.1':
-    resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==}
+    resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
 
   '@emotion/weak-memoize@0.4.0':
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
@@ -2659,9 +2659,9 @@ packages:
 
 snapshots:
 
-  '@abearxiong/container@0.0.1-alpha.11(@emotion/css@11.13.0)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
+  '@abearxiong/container@0.0.1-alpha.11(@emotion/css@11.13.4)(crypto-js@4.2.0)(eventemitter3@5.0.1)':
     dependencies:
-      '@emotion/css': 11.13.0
+      '@emotion/css': 11.13.4
       crypto-js: 4.2.0
       eventemitter3: 5.0.1
       nanoid: 5.0.7
@@ -2874,7 +2874,7 @@ snapshots:
       '@babel/runtime': 7.25.6
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.2
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -2888,17 +2888,17 @@ snapshots:
     dependencies:
       '@emotion/memoize': 0.9.0
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
-  '@emotion/css@11.13.0':
+  '@emotion/css@11.13.4':
     dependencies:
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.2
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -2908,12 +2908,12 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/serialize@1.3.1':
+  '@emotion/serialize@1.3.2':
     dependencies:
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       csstype: 3.1.3
 
   '@emotion/sheet@1.4.0': {}
@@ -2922,7 +2922,7 @@ snapshots:
 
   '@emotion/unitless@0.7.5': {}
 
-  '@emotion/utils@1.4.0': {}
+  '@emotion/utils@1.4.1': {}
 
   '@emotion/weak-memoize@0.4.0': {}
 

src/pages/app/edit/List.tsx

@@ -1,7 +1,7 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useUserAppStore } from '../store';
 import { useEffect } from 'react';
-import { Button, Form, Input, Modal, Select, Tooltip } from 'antd';
+import { Button, Form, Input, message, Modal, Select, Tooltip } from 'antd';
 import { CodeOutlined, DashboardOutlined, DeleteOutlined, EditOutlined, LinkOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { useNavigate } from 'react-router';
@@ -158,12 +158,23 @@ export const List = () => {
                               navicate(`/app/${item.key}/version/list`);
                             }}></Button>
                         </Tooltip>
-                        <Tooltip title={'App Version List'}>
+                        <Tooltip title={'To App'}>
                           <Button
                             icon={<LinkOutlined />}
                             onClick={() => {
-                              const link = new URL(`/${item.user}/${item.key}`, 'https://kevisual.xiongxiao.me');
+                              if (isRunning) {
-                              window.open(link.toString(), '_blank');
+                                let baseUri = 'https://kevisual.xiongxiao.me';
+                                if (item.domain) {
+                                  baseUri = item.domain;
+                                }
+                                if (DEV_SERVER) {
+                                  baseUri = 'http://localhost:3005';
+                                }
+                                const link = new URL(`/${item.user}/${item.key}`, baseUri);
+                                window.open(link.toString(), '_blank');
+                              } else {
+                                message.error('The app is not running');
+                              }
                             }}></Button>
                         </Tooltip>
                         <Tooltip title={'Delete'}>

src/pages/panel/deck/index.tsx

@@ -11,7 +11,16 @@ import { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@a
 import { useDeckPageStore } from './deck-store';
 import { FormModal } from './Model.tsx';
 import { useAiStore } from '@/pages/ai-chat/index.tsx';
-
+export const clearBlank = (newStyle: any) => {
+  let change = false;
+  for (let key in newStyle) {
+    if (newStyle[key] === '' || newStyle[key] === undefined || newStyle[key] === null) {
+      delete newStyle[key];
+      change = true;
+    }
+  }
+  return change;
+};
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
   const connected = useStore((state) => state.connected);
@@ -138,7 +147,6 @@ export const Deck = () => {
     await new Promise((resolve) => {
       setTimeout(resolve, 2000);
     });
-    console.log('containerList update', containerList);
     // container.reRender();
     containerList.forEach((item) => {
       container.hotReload(item.id);
@@ -189,6 +197,8 @@ export const Deck = () => {
           },
         };
         if (width && height) {
+          // @ts-ignore
+          newData.nodeData.data.style.position = 'absolute';
           panelStore.updateNodeDataStyle(newData);
         }
         updateStyle(cid, { width, height });
@@ -217,6 +227,7 @@ export const Deck = () => {
       message.error('JSON format error');
       return;
     }
+    // clearBlank(data);
     const newData = {
       id: rid,
       nodeData: {
@@ -226,7 +237,9 @@ export const Deck = () => {
         },
       },
     };
-    panelStore.updateNodeDataStyle(newData);
+    panelStore.updateNodeDataStyle(newData, true);
+    const newDataStyle = updateStyle(cid, data);
+    reRender(newDataStyle, cid);
   };
   const setCodeStyle = (cid: string) => {
     const pageData = deckPageStore.getPageData();
@@ -249,18 +262,22 @@ export const Deck = () => {
     const pageData = deckPageStore.getPageData();
     const _pageData = pageData.map((item) => {
       if (item.id === rid) {
+        const newStyle = {
+          ...item.data.node.data.style,
+          ...style,
+        };
+        // 过滤掉空的style
+        clearBlank(newStyle);
         return {
           ...item,
+          style: newStyle,
           data: {
             ...item.data,
             node: {
               ...item.data.node,
               data: {
                 ...item.data.node.data,
-                style: {
+                style: newStyle,
-                  ...item.data.node.data.style,
-                  ...style,
-                },
               },
             },
           },
@@ -269,6 +286,7 @@ export const Deck = () => {
       return item;
     });
     deckPageStore.setPageData([..._pageData]);
+    return _pageData;
   };
   const init = async (data: any[]) => {
     // console.log('data', data, ref.current);
@@ -285,6 +303,14 @@ export const Deck = () => {
       const { id, code } = data;
     });
   };
+  const reRender = async (data: any[], cid?: string) => {
+    if (containerRef.current) {
+      const container = containerRef.current;
+      await container.updateData(data);
+      await container.renderId(cid!);
+      return;
+    }
+  };
   return (
     <div className='w-full h-full relative'>
       <div className='w-full h-full bg-gray-200 '>

src/pages/panel/store/panel.ts

@@ -13,7 +13,7 @@ type PanelStore = {
   getPanel: (id?: string) => Promise<void>;
   saveNodesEdges: (data: { nodes?: any[]; edges?: any[]; viewport?: any }) => Promise<void>;
   updateNodeData: (data: any) => Promise<void>;
-  updateNodeDataStyle: (data: any) => Promise<any>;
+  updateNodeDataStyle: (data: any, force?: boolean) => Promise<any>;
 };
 export const usePanelStore = create<PanelStore>((set, get) => {
   return {
@@ -98,7 +98,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
         message.error(res.message || 'Request failed');
       }
     },
-    updateNodeDataStyle: async (data) => {
+    updateNodeDataStyle: async (data, force) => {
       const { loading } = get();
       if (loading) {
         message.error('Request in progress, please wait');
@@ -110,6 +110,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
         path: 'page',
         key: 'updateNode',
         data: data,
+        force,
       });
       loaded();
       set({ loading: false });

vite.config.ts

@@ -31,12 +31,12 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/api': {
-        target: 'http://localhost:4000',
+        target: 'http://localhost:4002',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '/api'),
       },
       '/api/router': {
-        target: 'ws://localhost:4000',
+        target: 'ws://localhost:4002',
         changeOrigin: true,
         ws: true,
         rewriteWsOrigin: true,