feat(runtime, utils): Fix issue #503, setPage实现跳转页面 (#581)

* 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

@@ -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);
+  }
+};

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)) {

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)) {