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 = (
+
+ {viewProps.placeholder || '拖拽组件或模板到这里'}
+
+ );
+ }
// 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%;
}