From 31d60eb1bac7efb215fe9a613b6c7d3d0a2e66de Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 11 Aug 2022 17:50:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(playground):=20pc=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/components/DeviceGroup.vue |  3 ++-
 playground/src/configs/dsl.ts             |  2 +-
 playground/src/pages/Editor.vue           | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/playground/src/components/DeviceGroup.vue b/playground/src/components/DeviceGroup.vue
index 271f81ea..81ae6ba9 100644
--- a/playground/src/components/DeviceGroup.vue
+++ b/playground/src/components/DeviceGroup.vue
@@ -39,7 +39,8 @@ export default defineComponent({
     modelValue: {
       type: Object,
       default: () => ({
-        width: '375',
+        width: 375,
+        height: 817,
       }),
     },
   },
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index f10d30a0..39c71396 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -33,7 +33,7 @@ export default {
         top: 0,
         right: '',
         bottom: '',
-        width: '375',
+        width: '100%',
         height: '1728',
         backgroundImage: '',
         backgroundColor: 'rgba(248, 218, 218, 1)',
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 583990d8..a632c104 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -19,8 +19,14 @@
       </template>
     </m-editor>
 
-    <el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
-      <iframe v-if="previewVisible" width="100%" height="817" :src="previewUrl"></iframe>
+    <el-dialog
+      v-model="previewVisible"
+      destroy-on-close
+      custom-class="pre-viewer"
+      title="预览"
+      :width="stageRect && stageRect.width"
+    >
+      <iframe v-if="previewVisible" width="100%" :height="stageRect && stageRect.height" :src="previewUrl"></iframe>
     </el-dialog>
   </div>
 </template>
@@ -53,7 +59,10 @@ const defaultSelected = ref(dsl.items[0].id);
 const propsValues = ref<Record<string, any>>({});
 const propsConfigs = ref<Record<string, any>>({});
 const eventMethodList = ref<Record<string, any>>({});
-const stageRect = ref();
+const stageRect = ref({
+  width: 375,
+  height: 817,
+});
 
 const previewUrl = computed(
   () => `${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor.value?.editorService.get('page').id}`,