fix(playground,runtime): 设备切换时，重新设置root font size与ua

fix #501

playground/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
+    "@tmagic/core": "1.2.13",
     "@tmagic/design": "1.2.13",
     "@tmagic/editor": "1.2.13",
     "@tmagic/element-plus-adapter": "1.2.13",

playground/src/components/DeviceGroup.vue

@@ -6,16 +6,13 @@
   </el-radio-group>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
+import { nextTick, ref } from 'vue';
 
+import Core from '@tmagic/core';
 import { editorService } from '@tmagic/editor';
 
-enum DeviceType {
+import { DeviceType, uaMap } from '../const';
-  Phone = 'phone',
-  Pad = 'pad',
-  PC = 'pc',
-}
 
 const devH: Record<DeviceType, number> = {
   phone: 817,
@@ -33,43 +30,50 @@ const getDeviceHeight = (viewerDevice: DeviceType) => devH[viewerDevice];
 
 const getDeviceWidth = (viewerDevice: DeviceType) => devW[viewerDevice];
 
-export default defineComponent({
+withDefaults(
-  props: {
+  defineProps<{
     modelValue: {
-      type: Object,
+      width: number;
-      default: () => ({
+      height: number;
-        width: 375,
-        height: 817,
-      }),
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  setup(props, { emit }) {
-    const calcFontsize = (width: number) => {
-      const iframe = editorService.get('stage')?.renderer.iframe;
-      if (!iframe?.contentWindow) return;
-      iframe.contentWindow.appInstance.designWidth = width;
-    };
-
-    const viewerDevice = ref(DeviceType.Phone);
-
-    return {
-      viewerDevice,
-
-      deviceSelect(device: DeviceType) {
-        const width = getDeviceWidth(device);
-        const height = getDeviceHeight(device);
-        emit('update:modelValue', {
-          width,
-          height,
-        });
-
-        calcFontsize(width);
-      },
     };
+  }>(),
+  {
+    modelValue: () => ({
+      width: 375,
+      height: 817,
+    }),
   },
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+const calcFontsize = (width: number) => {
+  const iframe = editorService.get('stage')?.renderer.iframe;
+  if (!iframe?.contentWindow) return;
+
+  const app: Core = (iframe.contentWindow as any).appInstance;
+
+  app.setEnv(uaMap[viewerDevice.value]);
+
+  app.setDesignWidth(app.env.isWeb ? width : 375);
+};
+
+const viewerDevice = ref(DeviceType.Phone);
+
+const deviceSelect = async (device: DeviceType) => {
+  const width = getDeviceWidth(device);
+  const height = getDeviceHeight(device);
+  emit('update:modelValue', {
+    width,
+    height,
+  });
+
+  await nextTick();
+  calcFontsize(width);
+};
+
+defineExpose({
+  viewerDevice,
 });
 </script>
 

playground/src/const.ts

@@ -0,0 +1,14 @@
+export enum DeviceType {
+  Phone = 'phone',
+  Pad = 'pad',
+  PC = 'pc',
+}
+
+export const uaMap = {
+  [DeviceType.Phone]:
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
+  [DeviceType.Pad]:
+    'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1',
+  [DeviceType.PC]:
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36',
+};

playground/src/pages/Editor.vue

@@ -15,7 +15,7 @@
       :stage-rect="stageRect"
     >
       <template #workspace-content>
-        <DeviceGroup v-model="stageRect"></DeviceGroup>
+        <DeviceGroup ref="deviceGroup" v-model="stageRect"></DeviceGroup>
       </template>
     </m-editor>
 
@@ -26,13 +26,19 @@
       title="预览"
       :width="stageRect && stageRect.width"
     >
-      <iframe v-if="previewVisible" width="100%" :height="stageRect && stageRect.height" :src="previewUrl"></iframe>
+      <iframe
+        v-if="previewVisible"
+        ref="iframe"
+        width="100%"
+        :height="stageRect && stageRect.height"
+        :src="previewUrl"
+      ></iframe>
     </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRaw } from 'vue';
+import { computed, nextTick, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
 import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -47,12 +53,15 @@ import { asyncLoadJs } from '@tmagic/utils';
 import DeviceGroup from '../components/DeviceGroup.vue';
 import componentGroupList from '../configs/componentGroupList';
 import dsl from '../configs/dsl';
+import { uaMap } from '../const';
 
 const { VITE_RUNTIME_PATH, VITE_ENTRY_PATH } = import.meta.env;
 
 const runtimeUrl = `${VITE_RUNTIME_PATH}/playground/index.html`;
 const router = useRouter();
 const editor = ref<InstanceType<typeof TMagicEditor>>();
+const deviceGroup = ref<InstanceType<typeof DeviceGroup>>();
+const iframe = ref<HTMLIFrameElement>();
 const previewVisible = ref(false);
 const value = ref(dsl);
 const defaultSelected = ref(dsl.items[0].id);
@@ -107,6 +116,14 @@ const menu: MenuBarData = {
           }
         }
         previewVisible.value = true;
+
+        await nextTick();
+
+        if (!iframe.value?.contentWindow || !deviceGroup.value?.viewerDevice) return;
+        Object.defineProperty(iframe.value.contentWindow.navigator, 'userAgent', {
+          value: uaMap[deviceGroup.value.viewerDevice],
+          writable: true,
+        });
       },
     },
     {

pnpm-lock.yaml

@@ -665,6 +665,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.0.9
         version: 2.0.9(vue@3.2.37)
+      '@tmagic/core':
+        specifier: 1.2.13
+        version: link:../packages/core
       '@tmagic/design':
         specifier: 1.2.13
         version: link:../packages/design
@@ -843,8 +846,8 @@ importers:
         specifier: ^4.0.2
         version: 4.0.2(terser@5.14.2)(vite@4.2.1)
       '@vitejs/plugin-vue2':
-        specifier: ^1.1.2
+        specifier: ^2.2.0
-        version: 1.1.2(vite@4.2.1)(vue@2.7.4)
+        version: 2.2.0(vite@4.2.1)(vue@2.7.4)
       recast:
         specifier: ^0.20.4
         version: 0.20.4
@@ -3495,11 +3498,11 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue2@1.1.2(vite@4.2.1)(vue@2.7.4):
+  /@vitejs/plugin-vue2@2.2.0(vite@4.2.1)(vue@2.7.4):
-    resolution: {integrity: sha512-y6OEA+2UdJ0xrEQHodq20v9r3SpS62IOHrgN92JPLvVpNkhcissu7yvD5PXMzMESyazj0XNWGsc8UQk8+mVrjQ==}
+    resolution: {integrity: sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==}
-    engines: {node: '>=14.6.0'}
+    engines: {node: ^14.18.0 || >= 16.0.0}
     peerDependencies:
-      vite: '>=2.5.10'
+      vite: ^3.0.0 || ^4.0.0
       vue: ^2.7.0-0
     dependencies:
       vite: 4.2.1(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)

runtime/react/page/index.html

@@ -25,7 +25,7 @@
       }
     </style>
   </head>
-  <body>
+  <body style="font-size: 14px">
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
   </body>

runtime/react/page/main.tsx

@@ -50,14 +50,14 @@ const getLocalConfig = (): MApp[] => {
 
 window.magicDSL = [];
 
-const designWidth = document.documentElement.getBoundingClientRect().width;
-
 const app = new Core({
-  designWidth,
+  ua: window.navigator.userAgent,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
 
+app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
+
 Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
 Object.values(plugins).forEach((plugin: any) => {
   plugin.install(app);

runtime/react/playground/main.tsx

@@ -35,13 +35,15 @@ declare global {
   }
 }
 
-const designWidth = document.documentElement.getBoundingClientRect().width;
-
 const app = new Core({
-  designWidth,
+  ua: window.navigator.userAgent,
   platform: 'editor',
 });
 
+if (app.env.isWeb) {
+  app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
+}
+
 window.appInstance = app;
 
 let curPageId = '';

runtime/vue2/package.json

@@ -41,7 +41,7 @@
     "sass": "^1.35.1",
     "vite": "^4.2.1",
     "@vitejs/plugin-legacy": "^4.0.2",
-    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vitejs/plugin-vue2": "^2.2.0",
     "vue-template-compiler": "^2.7.4"
   }
 }

runtime/vue2/page/index.html

@@ -25,7 +25,7 @@
     </style>
     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
   </head>
-  <body>
+  <body style="font-size: 14px">
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>

runtime/vue2/page/main.ts

@@ -30,14 +30,14 @@ import { getLocalConfig } from './utils';
 
 Vue.use(request);
 
-const designWidth = document.documentElement.getBoundingClientRect().width;
-
 const app = new Core({
-  designWidth,
+  ua: window.navigator.userAgent,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
 
+app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
+
 Object.keys(components).forEach((type: string) => {
   Vue.component(`magic-ui-${type}`, components[type]);
 });

runtime/vue2/playground/main.ts

@@ -31,13 +31,17 @@ Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]
     Vue.use(plugin);
   });
 
-  const designWidth = document.documentElement.getBoundingClientRect().width;
-
   const app = new Core({
-    designWidth,
+    ua: window.navigator.userAgent,
     platform: 'editor',
   });
 
+  if (app.env.isWeb) {
+    app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
+  }
+
+  window.appInstance = app;
+
   Vue.prototype.app = app;
 
   new Vue({

runtime/vue3/page/index.html

@@ -25,7 +25,7 @@
     </style>
     <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
   </head>
-  <body>
+  <body style="font-size: 14px">
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>

runtime/vue3/page/main.ts

@@ -40,14 +40,14 @@ Object.values(plugins).forEach((plugin: any) => {
   magicApp.use(plugin);
 });
 
-const designWidth = document.documentElement.getBoundingClientRect().width;
-
 const app = new Core({
-  designWidth,
+  ua: window.navigator.userAgent,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
 
+app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
+
 magicApp.config.globalProperties.app = app;
 magicApp.provide('app', app);
 

runtime/vue3/playground/main.ts

@@ -33,12 +33,16 @@ Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]
     magicApp.use(plugin);
   });
 
-  const designWidth = document.documentElement.getBoundingClientRect().width;
   const app = new Core({
-    designWidth,
+    ua: window.navigator.userAgent,
     platform: 'editor',
   });
 
+  if (app.env.isWeb) {
+    app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
+  }
+
+  window.appInstance = app;
   magicApp.config.globalProperties.app = app;
   magicApp.provide('app', app);