From 0c746aa3d97cdb28531408bb0e89564f4b567186 Mon Sep 17 00:00:00 2001
From: Evan Wu <56573480+Little-LittleProgrammer@users.noreply.github.com>
Date: Tue, 19 Mar 2024 16:18:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(runtime,=20utils):=20Fix=20issue=20#503,?=
 =?UTF-8?q?=20setPage=E5=AE=9E=E7=8E=B0=E8=B7=B3=E8=BD=AC=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20(#581)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复moveable中custom able旋转中心错误问题

* feat(runtime): fix issue #503, 增加page-change回调

* feat(core, runtime): 增加页面不存在时调用报错

* fix(runtime, core, utils): 提取addParamsToUrl公共方法且更改'page-change'逻辑

* fix(utils): 优化addParamToUrl方法
---
 packages/utils/src/index.ts | 20 ++++++++++++++++++++
 runtime/vue2/page/App.vue   | 10 +++++++++-
 runtime/vue3/page/App.vue   | 10 +++++++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index f4c326b8..97409daf 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -405,3 +405,23 @@ export const convertToNumber = (value: number | string, parentValue = 0) => {
 
   return parseFloat(value);
 };
+
+/**
+ * 添加参数到URL
+ * @param obj 参数对象
+ * @param global window对象
+ * @param needReload 是否需要刷新
+ */
+export const addParamToUrl = (obj: Record<string, any>, global = globalThis, needReload = true) => {
+  const url = new URL(global.location.href);
+  const { searchParams } = url;
+  for (const [k, v] of Object.entries(obj)) {
+    searchParams.set(k, v);
+  }
+  const newUrl = url.toString();
+  if (needReload) {
+    global.location.href = newUrl;
+  } else {
+    global.history.pushState({}, '', url);
+  }
+};
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index f604551c..27bd78ab 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -5,10 +5,11 @@
 <script lang="ts">
 import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
+import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -17,6 +18,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = ref(app?.page?.data || {});
 
+    app?.on('page-change', (page?: Page) => {
+      if (!page) {
+        throw new Error(`页面不存在`);
+      }
+      addParamToUrl({ page: page.data.id }, window);
+    });
+
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
         if (isPage(node)) {
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index f604551c..27bd78ab 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -5,10 +5,11 @@
 <script lang="ts">
 import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
+import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -17,6 +18,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = ref(app?.page?.data || {});
 
+    app?.on('page-change', (page?: Page) => {
+      if (!page) {
+        throw new Error(`页面不存在`);
+      }
+      addParamToUrl({ page: page.data.id }, window);
+    });
+
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
         if (isPage(node)) {