From 1a09282bfae8bbbd3a2af32a68cd28276b03129f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=B5=E8=90=BD?= <jiaqiu.cjq@alibaba-inc.com>
Date: Wed, 31 Mar 2021 19:06:41 +0800
Subject: [PATCH] feat(): add deviceStyle props

---
 packages/designer/src/builtin-simulator/host-view.tsx | 5 +++--
 packages/designer/src/builtin-simulator/host.ts       | 9 +++++++++
 packages/rax-simulator-renderer/src/renderer.less     | 3 ---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/host-view.tsx b/packages/designer/src/builtin-simulator/host-view.tsx
index b5b5640d0..75506f4a0 100644
--- a/packages/designer/src/builtin-simulator/host-view.tsx
+++ b/packages/designer/src/builtin-simulator/host-view.tsx
@@ -54,6 +54,7 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
   render() {
     const sim = this.props.host;
     let className = 'lc-simulator-canvas';
+    const { canvas = {}, viewport = {} } = sim.deviceStyle || {};
     if (sim.deviceClassName) {
       className += ` ${sim.deviceClassName}`;
     } else if (sim.device) {
@@ -61,8 +62,8 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
     }
 
     return (
-      <div className={className}>
-        <div ref={(elmt) => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport">
+      <div className={className} style={canvas}>
+        <div ref={(elmt) => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport" style={viewport}>
           <BemTools host={sim} />
           <Content host={sim} />
         </div>
diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index 0486b5743..eb81fd101 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@@ -48,6 +48,11 @@ export interface LibraryItem {
   urls?: Asset;
 }
 
+export interface DeviceStyleProps {
+  canvas?: object;
+  viewport?: object;
+}
+
 export interface BuiltinSimulatorProps {
   // 从 documentModel 上获取
   // suspended?: boolean;
@@ -178,6 +183,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     return this.designer.componentsMap;
   }
 
+  @computed get deviceStyle(): DeviceStyleProps | undefined {
+    return this.get('deviceStyle');
+  }
+
   @obx.ref _props: BuiltinSimulatorProps = {};
 
   /**
diff --git a/packages/rax-simulator-renderer/src/renderer.less b/packages/rax-simulator-renderer/src/renderer.less
index dec6fec26..abc72bd4d 100644
--- a/packages/rax-simulator-renderer/src/renderer.less
+++ b/packages/rax-simulator-renderer/src/renderer.less
@@ -4,9 +4,6 @@ body, html {
   padding: 0;
   margin: 0;
 }
-html.engine-design-mode {
-  padding-bottom: 30px;
-}
 
 html.engine-cursor-move, html.engine-cursor-move * {
   cursor: grabbing !important;