fix: rax渲染添加容器占位显示

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, {

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%;
 }