From 84e2cdf22da1f376689e87fb05fe98f62db1e62a Mon Sep 17 00:00:00 2001 From: roymondchen Date: Mon, 10 Apr 2023 16:42:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(playground,runtime):=20=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=EF=BC=8C=E9=87=8D=E6=96=B0=E8=AE=BE?= =?UTF-8?q?=E7=BD=AEroot=20font=20size=E4=B8=8Eua?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #501 --- playground/package.json | 1 + playground/src/components/DeviceGroup.vue | 86 ++++++++++++----------- playground/src/const.ts | 14 ++++ playground/src/pages/Editor.vue | 23 +++++- pnpm-lock.yaml | 15 ++-- runtime/react/page/index.html | 2 +- runtime/react/page/main.tsx | 6 +- runtime/react/playground/main.tsx | 8 ++- runtime/vue2/package.json | 2 +- runtime/vue2/page/index.html | 2 +- runtime/vue2/page/main.ts | 6 +- runtime/vue2/playground/main.ts | 10 ++- runtime/vue3/page/index.html | 2 +- runtime/vue3/page/main.ts | 6 +- runtime/vue3/playground/main.ts | 8 ++- 15 files changed, 120 insertions(+), 71 deletions(-) create mode 100644 playground/src/const.ts diff --git a/playground/package.json b/playground/package.json index 0126dd96..25ae58c3 100644 --- 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 index 74d21478..648147e2 100644 --- a/playground/src/components/DeviceGroup.vue +++ b/playground/src/components/DeviceGroup.vue @@ -6,16 +6,13 @@ - diff --git a/playground/src/const.ts b/playground/src/const.ts new file mode 100644 index 00000000..63c22e19 --- /dev/null +++ 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 index 4a528cd3..d21abadf 100644 --- a/playground/src/pages/Editor.vue +++ b/playground/src/pages/Editor.vue @@ -15,7 +15,7 @@ :stage-rect="stageRect" > @@ -26,13 +26,19 @@ title="预览" :width="stageRect && stageRect.width" > - + diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx index 7e5cce8f..fcdf22fd 100644 --- 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 index 9535ed48..4ca0211c 100644 --- 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 index a93f1f8d..8f99efcf 100644 --- 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 index 8b0c4f68..221ad39a 100644 --- a/runtime/vue2/page/index.html +++ b/runtime/vue2/page/index.html @@ -25,7 +25,7 @@ - +
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts index efd54b91..a3d1d1a4 100644 --- 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 index 2a9933ac..27431c71 100644 --- 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 index 0e8e2270..aaa7f5a5 100644 --- a/runtime/vue3/page/index.html +++ b/runtime/vue3/page/index.html @@ -25,7 +25,7 @@ - +
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts index 1e8b9e93..92668477 100644 --- 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 index 3e8171ff..4f950fc1 100644 --- 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);