From 0df98bc226396cfc924afde1768e7707f789dd19 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 29 Feb 2024 16:54:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(runtime):=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E5=87=BA?=
 =?UTF-8?q?=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/react/page/App.tsx | 11 ++++++++---
 runtime/vue2/page/App.vue  | 12 ++++++++----
 runtime/vue3/page/App.vue  | 12 ++++++++----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/runtime/react/page/App.tsx b/runtime/react/page/App.tsx
index fbc4decd..668d5798 100644
--- a/runtime/react/page/App.tsx
+++ b/runtime/react/page/App.tsx
@@ -23,7 +23,7 @@ import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);
@@ -33,11 +33,16 @@ function App() {
   const [config, setConfig] = useState(app.page.data);
 
   app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
+    let pageConfig = config;
     nodes.forEach((node) => {
-      replaceChildNode(node, [config]);
+      if (isPage(node)) {
+        pageConfig = node;
+      } else {
+        replaceChildNode(node, [pageConfig]);
+      }
     });
 
-    setConfig(cloneDeep(config));
+    setConfig(cloneDeep(pageConfig));
 
     setTimeout(() => {
       app.emit('replaced-node', {
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index b04b36db..f604551c 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -3,23 +3,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, reactive } from 'vue';
+import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
     const app = inject<Core | undefined>('app');
-    const pageConfig = reactive(app?.page?.data || {});
+    const pageConfig = ref(app?.page?.data || {});
 
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
-        replaceChildNode(reactive(node), [pageConfig as MNode]);
+        if (isPage(node)) {
+          pageConfig.value = node;
+        } else {
+          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
+        }
       });
 
       if (!app) return;
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index b04b36db..f604551c 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -3,23 +3,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, reactive } from 'vue';
+import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
     const app = inject<Core | undefined>('app');
-    const pageConfig = reactive(app?.page?.data || {});
+    const pageConfig = ref(app?.page?.data || {});
 
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
-        replaceChildNode(reactive(node), [pageConfig as MNode]);
+        if (isPage(node)) {
+          pageConfig.value = node;
+        } else {
+          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
+        }
       });
 
       if (!app) return;