fix(runtime): 切换设计窗体大小时，同时修改app

packages/core/src/App.ts

@@ -70,8 +70,7 @@ class App extends EventEmitter {
     // 根据屏幕大小计算出跟节点的font-size，用于rem样式的适配
     if (this.platform === 'mobile' || this.platform === 'editor') {
       const calcFontsize = () => {
-        let { width } = document.documentElement.getBoundingClientRect();
-        width = Math.min(800, width);
+        const { width } = document.documentElement.getBoundingClientRect();
         const fontSize = width / (this.designWidth / 100);
         document.documentElement.style.fontSize = `${fontSize}px`;
       };

playground/src/components/DeviceGroup.vue

@@ -49,10 +49,9 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const calcFontsize = (width: number) => {
-      const fontSize = width / 3.75;
       const { iframe } = editorService.get<StageCore>('stage').renderer;
       if (!iframe?.contentWindow) return;
-      iframe.contentWindow.document.documentElement.style.fontSize = `${fontSize}px`;
+      iframe.contentWindow.appInstance.designWidth = width;
     };
 
     const viewerDevice = ref(DeviceType.Phone);

runtime/react/page/main.tsx

@@ -50,7 +50,10 @@ const getLocalConfig = (): MApp[] => {
 
 window.magicDSL = [];
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });

runtime/react/playground/main.tsx

@@ -29,11 +29,16 @@ import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: {},
   platform: 'editor',
 });
 
+window.appInstance = app;
+
 let curPageId = '';
 
 const updateConfig = (root: MApp) => {

runtime/vue2/page/main.ts

@@ -30,7 +30,10 @@ import { getLocalConfig } from './utils';
 
 Vue.use(request);
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });

runtime/vue2/playground/App.vue

@@ -26,11 +26,16 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
+    const designWidth = document.documentElement.getBoundingClientRect().width;
+
     const app = new Core({
+      designWidth,
       config: root.value,
       platform: 'editor',
     });
 
+    globalThis.appInstance = app;
+
     provide('app', app);
 
     watch(pageConfig, async () => {

runtime/vue3/page/main.ts

@@ -43,7 +43,10 @@ Object.values(plugins).forEach((plugin: any) => {
   magicApp.use(plugin);
 });
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });

runtime/vue3/playground/App.vue

@@ -26,11 +26,15 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
+    const designWidth = document.documentElement.getBoundingClientRect().width;
     const app = new Core({
+      designWidth,
       config: root.value,
       platform: 'editor',
     });
 
+    globalThis.appInstance = app;
+
     provide('app', app);
 
     watch(pageConfig, async () => {