From c3f4e41cc864cd1e5c6486d34da79e4b684546c5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 28 Mar 2022 19:47:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(playground):=20=E6=96=B0=E5=A2=9E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=BB=98=E8=AE=A4width=20height=20100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui-react/src/page/initValue.ts |  8 +++++++-
 packages/ui-vue2/src/page/initValue.ts  |  8 +++++++-
 packages/ui/src/page/src/initValue.ts   |  4 ++--
 runtime/react/src/page/App.css          | 15 +++++++++------
 runtime/react/src/playground/App.css    | 18 +++++++++++++-----
 runtime/vue2/src/page/App.vue           | 13 ++++++++-----
 runtime/vue2/src/playground/App.vue     | 16 ++++++++++++++++
 runtime/vue3/src/page/App.vue           | 13 ++++++++-----
 runtime/vue3/src/playground/App.vue     | 16 ++++++++++++++++
 9 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/packages/ui-react/src/page/initValue.ts b/packages/ui-react/src/page/initValue.ts
index 21dc884a..7d370f58 100644
--- a/packages/ui-react/src/page/initValue.ts
+++ b/packages/ui-react/src/page/initValue.ts
@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default {};
+export default {
+  items: [],
+  style: {
+    width: '100%',
+    height: '100%',
+  },
+};
diff --git a/packages/ui-vue2/src/page/initValue.ts b/packages/ui-vue2/src/page/initValue.ts
index 21dc884a..7d370f58 100644
--- a/packages/ui-vue2/src/page/initValue.ts
+++ b/packages/ui-vue2/src/page/initValue.ts
@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default {};
+export default {
+  items: [],
+  style: {
+    width: '100%',
+    height: '100%',
+  },
+};
diff --git a/packages/ui/src/page/src/initValue.ts b/packages/ui/src/page/src/initValue.ts
index ffd14b82..7d370f58 100644
--- a/packages/ui/src/page/src/initValue.ts
+++ b/packages/ui/src/page/src/initValue.ts
@@ -19,7 +19,7 @@
 export default {
   items: [],
   style: {
-    width: '375',
-    height: '728',
+    width: '100%',
+    height: '100%',
   },
 };
diff --git a/runtime/react/src/page/App.css b/runtime/react/src/page/App.css
index ee47fa00..12634385 100644
--- a/runtime/react/src/page/App.css
+++ b/runtime/react/src/page/App.css
@@ -1,8 +1,11 @@
-#root {
-  width: fit-content;
-  position: relative;
-  margin: 0 auto;
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
 }
-::-webkit-scrollbar {
-  width: 0;
+
+#app {
+  position: relative;
+  overflow: auto;
 }
\ No newline at end of file
diff --git a/runtime/react/src/playground/App.css b/runtime/react/src/playground/App.css
index 592e01b6..e6768580 100644
--- a/runtime/react/src/playground/App.css
+++ b/runtime/react/src/playground/App.css
@@ -1,11 +1,19 @@
-#root {
-  width: fit-content;
-  position: relative;
-  margin: 0 auto;
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
 }
-::-webkit-scrollbar {
+
+#app {
+  position: relative;
+  overflow: auto;
+}
+
+#app::-webkit-scrollbar {
   width: 0;
 }
+
 .magic-ui-container {
   background-color: rgba(136, 136, 136, 0.5);
 }
diff --git a/runtime/vue2/src/page/App.vue b/runtime/vue2/src/page/App.vue
index 84e923f4..d5b10442 100644
--- a/runtime/vue2/src/page/App.vue
+++ b/runtime/vue2/src/page/App.vue
@@ -22,12 +22,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+html,
+body,
 #app {
-  width: fit-content;
-  position: relative;
-  margin: 0 auto;
+  width: 100%;
+  height: 100%;
 }
-::-webkit-scrollbar {
-  width: 0;
+
+#app {
+  position: relative;
+  overflow: auto;
 }
 </style>
diff --git a/runtime/vue2/src/playground/App.vue b/runtime/vue2/src/playground/App.vue
index caeb6e8d..bbd0acf5 100644
--- a/runtime/vue2/src/playground/App.vue
+++ b/runtime/vue2/src/playground/App.vue
@@ -133,6 +133,22 @@ export default Vue.extend({
 </script>
 
 <style lang="scss">
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+#app {
+  position: relative;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}
+
 .magic-ui-container {
   background-color: rgba(136, 136, 136, 0.5);
 }
diff --git a/runtime/vue3/src/page/App.vue b/runtime/vue3/src/page/App.vue
index 1c1d06ae..af020504 100644
--- a/runtime/vue3/src/page/App.vue
+++ b/runtime/vue3/src/page/App.vue
@@ -22,12 +22,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+html,
+body,
 #app {
-  width: fit-content;
-  position: relative;
-  margin: 0 auto;
+  width: 100%;
+  height: 100%;
 }
-::-webkit-scrollbar {
-  width: 0;
+
+#app {
+  position: relative;
+  overflow: auto;
 }
 </style>
diff --git a/runtime/vue3/src/playground/App.vue b/runtime/vue3/src/playground/App.vue
index 0af19d65..77060ee3 100644
--- a/runtime/vue3/src/playground/App.vue
+++ b/runtime/vue3/src/playground/App.vue
@@ -110,6 +110,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+#app {
+  position: relative;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}
+
 .magic-ui-container {
   background-color: rgba(136, 136, 136, 0.5);
 }