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