From a60c580e7709b4b83fdfdcc365bc7ca54e4a57bc Mon Sep 17 00:00:00 2001
From: "zude.hzd" <zude.hzd@alibaba-inc.com>
Date: Thu, 25 Feb 2021 22:57:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20rax=E6=B8=B2=E6=9F=93=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=8D=A0=E4=BD=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax-simulator-renderer/src/renderer-view.tsx  | 13 +++++++++++++
 packages/rax-simulator-renderer/src/renderer.less | 15 +++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx
index bebd7ba9d..b80e26ca4 100644
--- a/packages/rax-simulator-renderer/src/renderer-view.tsx
+++ b/packages/rax-simulator-renderer/src/renderer-view.tsx
@@ -194,6 +194,19 @@ class Renderer extends Component<{
           const leaf = documentInstance.getNode(__id);
           viewProps._leaf = leaf;
           viewProps._componentName = leaf?.componentName;
+          // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动
+          if (
+            !viewProps.dataSource &&
+            leaf?.isContainer() &&
+            (children == null || (Array.isArray(children) && !children.length)) &&
+            (!viewProps.style || Object.keys(viewProps.style).length === 0)
+          ) {
+            children = (
+              <div className="lc-container-placeholder" style={viewProps.placeholderStyle}>
+                {viewProps.placeholder || '拖拽组件或模板到这里'}
+              </div>
+            );
+          }
 
           // if (viewProps._componentName === 'Menu') {
           //   Object.assign(viewProps, {
diff --git a/packages/rax-simulator-renderer/src/renderer.less b/packages/rax-simulator-renderer/src/renderer.less
index f5ba21b87..dec6fec26 100644
--- a/packages/rax-simulator-renderer/src/renderer.less
+++ b/packages/rax-simulator-renderer/src/renderer.less
@@ -83,6 +83,19 @@ html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
   justify-content: center;
 }
 
+.lc-container-placeholder {
+  min-height: 60px;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(240, 240, 240);
+  border: 1px dotted;
+  color: rgb(167, 177, 189);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
 body.engine-document {
   &:after, &:before {
     content: "";
@@ -110,10 +123,12 @@ body.engine-document {
   user-select: text;
 }
 
+/* stylelint-disable-next-line selector-max-id */
 #app {
   height: 100vh;
 }
 
+
 .luna-page {
   height: 100%;
 }