feat(runtime): 支持页面切换

Tencent · Feb 26, 2025 · 4026c0c · 4026c0c
1 parent 6d2b9d5
commit 4026c0c
Show file tree

Hide file tree

Showing 20 changed files with 172 additions and 109 deletions.
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
@@ -64,6 +64,21 @@ const dsl: MApp = {
       },
       params: [],
     },
+    code_6778: {
+      name: 'toOtherPage',
+      desc: '',
+      timing: '',
+      params: [
+        {
+          name: 'pageId',
+          extra: '',
+          type: '',
+        },
+      ],
+      content: ({ app, params }) => {
+        app.setPage(params.pageId);
+      },
+    },
   },
   items: [
     {
@@ -250,6 +265,37 @@ const dsl: MApp = {
           created: [],
           displayConds: [],
         },
+        {
+          id: 'button_1cb163ad',
+          text: '前往page2',
+          multiple: true,
+          style: {
+            width: '270',
+            height: '37.5',
+            border: 0,
+            backgroundColor: '#fb6f00',
+            position: 'absolute',
+            left: 56,
+            top: 266,
+          },
+          type: 'button',
+          name: '按钮',
+          events: [
+            {
+              name: 'magic:common:events:click',
+              actions: [
+                {
+                  actionType: ActionType.CODE,
+                  codeId: 'code_6778',
+                  params: {
+                    pageId: 'page_171ff161',
+                  },
+                },
+              ],
+            },
+          ],
+          displayConds: [],
+        },
         {
           type: 'overlay',
           id: 'overlay_2159',
@@ -376,6 +422,53 @@ const dsl: MApp = {
         },
       ],
     },
+    {
+      id: 'page_171ff161',
+      items: [
+        {
+          id: 'button_80ca1076',
+          text: '返回',
+          multiple: true,
+          style: {
+            width: '270',
+            height: '37.5',
+            border: 0,
+            backgroundColor: '#fb6f00',
+            position: 'absolute',
+            left: 48,
+            top: 297,
+          },
+          type: 'button',
+          name: '按钮',
+          events: [
+            {
+              name: 'magic:common:events:click',
+              actions: [
+                {
+                  actionType: ActionType.CODE,
+                  codeId: 'code_6778',
+                  params: {
+                    pageId: 'page_299',
+                  },
+                },
+              ],
+            },
+          ],
+          displayConds: [],
+        },
+      ],
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        top: 0,
+        left: 0,
+      },
+      type: NodeType.PAGE,
+      name: 'page2',
+      title: '',
+      layout: 'absolute',
+    },
   ],
   dataSources: [
     {

diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
@@ -263,7 +263,7 @@ const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): Movea
 
 const save = () => {
   localStorage.setItem(
-    'magicDSL',
+    'magicDSL2',
     serialize(toRaw(value.value), {
       space: 2,
       unsafe: true,
@@ -290,7 +290,7 @@ asyncLoadJs(`${VITE_ENTRY_PATH}/ds-value/index.umd.cjs`).then(() => {
 
 try {
   // eslint-disable-next-line no-eval
-  const magicDSL = eval(`(${localStorage.getItem('magicDSL')})`);
+  const magicDSL = eval(`(${localStorage.getItem('magicDSL2')})`);
   if (!magicDSL) {
     save();
   } else {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/runtime/react-runtime-help/package.json b/runtime/react-runtime-help/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/react-runtime-help",
   "type": "module",
   "sideEffects": false,

diff --git a/runtime/react-runtime-help/src/hooks/use-dsl.ts b/runtime/react-runtime-help/src/hooks/use-dsl.ts
@@ -6,24 +6,26 @@ import type TMagicApp from '@tmagic/core';
 import { isPage, replaceChildNode } from '@tmagic/core';
 
 export const useDsl = (app: TMagicApp | undefined) => {
-  if (!app?.page) return null;
+  const [pageConfig, setPageConfig] = useState(app?.page?.data);
 
-  const [pageConfig, setPageConfig] = useState(app.page.data);
+  app?.on('page-change', () => {
+    setPageConfig(app.page?.data);
+  });
 
   const updateDataHandler = (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
     let config = pageConfig;
     nodes.forEach((node) => {
       if (isPage(node)) {
         config = node;
       } else {
-        replaceChildNode(node, [config]);
+        config && replaceChildNode(node, [config]);
       }
     });
 
     setPageConfig(cloneDeep(config));
 
     setTimeout(() => {
-      app.emit('replaced-node', {
+      app?.emit('replaced-node', {
         ...event,
         nodes,
         sourceId,
@@ -32,10 +34,10 @@ export const useDsl = (app: TMagicApp | undefined) => {
   };
 
   useEffect(() => {
-    app.dataSourceManager?.on('update-data', updateDataHandler);
+    app?.dataSourceManager?.on('update-data', updateDataHandler);
 
     return () => {
-      app.dataSourceManager?.off('update-data', updateDataHandler);
+      app?.dataSourceManager?.off('update-data', updateDataHandler);
     };
   }, []);
 

diff --git a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
@@ -11,11 +11,11 @@ declare global {
   }
 }
 
-export const useEditorDsl = (app: TMagicApp | undefined, renderDom: () => void) => {
+export const useEditorDsl = (app: TMagicApp, renderDom: () => void) => {
   let curPageId: Id = '';
 
   const updateConfig = (root: MApp) => {
-    app?.setConfig(root, curPageId);
+    app.setConfig(root, curPageId);
     renderDom();
   };
 
@@ -30,7 +30,7 @@ export const useEditorDsl = (app: TMagicApp | undefined, renderDom: () => void)
 
     updatePageId(id: Id) {
       curPageId = id;
-      app?.setPage(curPageId);
+      app.setPage(curPageId);
       renderDom();
     },
 

diff --git a/runtime/react/dev.vite.config.ts b/runtime/react/dev.vite.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
       { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
       { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
       { find: /^@tmagic\/dep/, replacement: path.join(__dirname, '../../packages/dep/src/index.ts') },
+      { find: /^@tmagic\/react-runtime-help/, replacement: path.join(__dirname, '../react-runtime-help/src/index.ts') },
     ],
   },
 

diff --git a/runtime/react/package.json b/runtime/react/package.json
@@ -20,11 +20,8 @@
   },
   "dependencies": {
     "@tmagic/core": "1.5.9",
-    "@tmagic/data-source": "1.5.9",
-    "@tmagic/react-runtime-help": "0.0.3",
-    "@tmagic/schema": "1.5.9",
+    "@tmagic/react-runtime-help": "0.0.4",
     "@tmagic/stage": "1.5.9",
-    "@tmagic/utils": "1.5.9",
     "axios": "^0.25.0",
     "terser": "^5.31.6",
     "react": "^18.3.1",

diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx
@@ -18,11 +18,9 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+import type { MApp } from '@tmagic/core';
+import Core, { DataSourceManager, DeepObservedData, getUrlParam } from '@tmagic/core';
 import { AppContent } from '@tmagic/react-runtime-help';
-import type { MApp } from '@tmagic/schema';
-import { getUrlParam } from '@tmagic/utils';
 
 import components from '../.tmagic/comp-entry';
 import dataSources from '../.tmagic/datasource-entry';

diff --git a/runtime/react/playground/App.tsx b/runtime/react/playground/App.tsx
@@ -19,8 +19,8 @@
 import React, { useContext } from 'react';
 
 import type Core from '@tmagic/core';
+import type { MPage } from '@tmagic/core';
 import { AppContent } from '@tmagic/react-runtime-help';
-import type { MPage } from '@tmagic/schema';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);

diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
@@ -19,8 +19,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+import Core, { DataSourceManager, DeepObservedData } from '@tmagic/core';
 import { AppContent, useEditorDsl } from '@tmagic/react-runtime-help';
 
 import components from '../.tmagic/comp-entry';

diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "1.0.0",
   "name": "@tmagic/vue-runtime-help",
   "type": "module",
   "sideEffects": false,