fix: 解决编辑同步问题

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');
-                              window.open(link.toString(), '_blank');
+                              if (isRunning) {
+                                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: {
-                  ...item.data.node.data.style,
-                  ...style,
-                },
+                style: newStyle,
               },
             },
           },
@@ -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 });