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

fix #501
Tencent · Apr 10, 2023 · 84e2cdf · 84e2cdf
1 parent 3d9f387
commit 84e2cdf
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 66 deletions.
diff --git a/playground/package.json b/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",

diff --git a/playground/src/components/DeviceGroup.vue b/playground/src/components/DeviceGroup.vue
@@ -6,16 +6,13 @@
   </el-radio-group>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue';
 
+import Core from '@tmagic/core';
 import { editorService } from '@tmagic/editor';
 
-enum DeviceType {
-  Phone = 'phone',
-  Pad = 'pad',
-  PC = 'pc',
-}
+import { DeviceType, uaMap } from '../const';
 
 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({
-  props: {
+withDefaults(
+  defineProps<{
     modelValue: {
-      type: Object,
-      default: () => ({
-        width: 375,
-        height: 817,
-      }),
-    },
+      width: number;
+      height: number;
+    };
+  }>(),
+  {
+    modelValue: () => ({
+      width: 375,
+      height: 817,
+    }),
   },
+);
 
-  emits: ['update:modelValue'],
+const emit = defineEmits(['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 calcFontsize = (width: number) => {
+  const iframe = editorService.get('stage')?.renderer.iframe;
+  if (!iframe?.contentWindow) return;
 
-    const viewerDevice = ref(DeviceType.Phone);
+  const app: Core = (iframe.contentWindow as any).appInstance;
 
-    return {
-      viewerDevice,
+  app.setEnv(uaMap[viewerDevice.value]);
 
-      deviceSelect(device: DeviceType) {
-        const width = getDeviceWidth(device);
-        const height = getDeviceHeight(device);
-        emit('update:modelValue', {
-          width,
-          height,
-        });
+  app.setDesignWidth(app.env.isWeb ? width : 375);
+};
 
-        calcFontsize(width);
-      },
-    };
-  },
+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>
 

diff --git a/playground/src/const.ts b/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',
+};
diff --git a/playground/src/pages/Editor.vue b/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,
+        });
       },
     },
     {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/runtime/react/page/index.html b/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>

diff --git a/runtime/react/page/main.tsx b/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);

diff --git a/runtime/react/playground/main.tsx b/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 = '';

diff --git a/runtime/vue2/package.json b/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"
   }
 }
diff --git a/runtime/vue2/page/index.html b/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>

diff --git a/runtime/vue2/page/main.ts b/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]);
 });

diff --git a/runtime/vue2/playground/main.ts b/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({

diff --git a/runtime/vue3/page/index.html b/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>

diff --git a/runtime/vue3/page/main.ts b/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);
 

diff --git a/runtime/vue3/playground/main.ts b/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);