@luck-design-biz/luckda 0.0.25 → 0.0.26

package/es/lowcode/view/Canvas.js

@@ -1,22 +1,22 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["props", "children"],
-  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
+var _excluded = ["props", "children"];
 import React, { useRef, useState } from 'react';
 import { dynamic } from 'umi';
 import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
-import { reduce, upperFirst } from 'lodash';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import Box from "./lc-components/Box";
+import { reduce } from 'lodash';
+import Wrapper from "./lc-components/Wrapper";
 import { CELL_KEY } from "../constants";
 import styles from "./style/canvas.less";
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
-var Canvas = function Canvas() {
-  var dynamicCompMap = useRef({});
-  var context = useLDContext();
+var Canvas = function Canvas(_ref) {
+  var dataSource = _ref.dataSource;
+  console.log('dataSource', dataSource);
+  var headerRef = useRef();
+  var contentRef = useRef();
+  var footerRef = useRef();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     header = _useState2[0],
@@ -33,54 +33,40 @@ var Canvas = function Canvas() {
     _useState8 = _slicedToArray(_useState7, 2),
     modal = _useState8[0],
     setModal = _useState8[1];
-  var render = useMemoizedFn(function (_ref) {
-    var props = _ref.props,
-      children = _ref.children,
-      childrenMap = _objectWithoutProperties(_ref, _excluded);
+  var render = useMemoizedFn(function (_ref2) {
+    var props = _ref2.props,
+      children = _ref2.children,
+      childrenMap = _objectWithoutProperties(_ref2, _excluded);
     if (props && !PAGE_CELL.includes(props.id)) {
-      var id = props.id,
-        component = props.component,
-        name = props.name,
-        desc = props.desc,
-        icon = props.icon,
-        group = props.group,
-        groupName = props.groupName,
-        order = props.order,
-        rest = _objectWithoutProperties(props, _excluded2);
-      if (!dynamicCompMap.current[component]) {
-        dynamicCompMap.current[component] = dynamic({
-          loader: function () {
-            var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-              var _runtime, _yield$import, _Comp;
-              return _regeneratorRuntime().wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _runtime = upperFirst(context.runtime);
-                    _context.next = 3;
-                    return import("./lc-components/".concat(component, "/Function").concat(_runtime));
-                  case 3:
-                    _yield$import = _context.sent;
-                    _Comp = _yield$import.default;
-                    return _context.abrupt("return", _Comp);
-                  case 6:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            function loader() {
-              return _loader.apply(this, arguments);
-            }
-            return loader;
-          }()
-        });
-      }
-      var Comp = dynamicCompMap.current[component];
-      return /*#__PURE__*/React.createElement(Comp, _extends({
-        key: id,
-        id: id,
-        context: context
-      }, rest), (children || []).map(function (_id) {
+      var Comp = dynamic({
+        loader: function () {
+          var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            var _yield$import, _Comp;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return import("./lc-components/".concat(props.type));
+                case 2:
+                  _yield$import = _context.sent;
+                  _Comp = _yield$import.default;
+                  return _context.abrupt("return", _Comp);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function loader() {
+            return _loader.apply(this, arguments);
+          }
+          return loader;
+        }()
+      });
+      return /*#__PURE__*/React.createElement(Comp, {
+        id: props.id,
+        lcdata: props
+      }, (children || []).map(function (_id) {
         return render(childrenMap[_id]);
       }));
     }
@@ -89,18 +75,18 @@ var Canvas = function Canvas() {
     });
   });
   useDeepCompareLayoutEffect(function () {
-    setHeader(render(context.pageData[CELL_KEY.PAGE_HEADER]));
-  }, [context.pageData[CELL_KEY.PAGE_HEADER]]);
+    setHeader(render(dataSource[CELL_KEY.PAGE_HEADER]));
+  }, [dataSource[CELL_KEY.PAGE_HEADER]]);
   useDeepCompareLayoutEffect(function () {
-    setContent(render(context.pageData[CELL_KEY.PAGE_CONTENT]));
-  }, [context.pageData[CELL_KEY.PAGE_CONTENT]]);
+    setContent(render(dataSource[CELL_KEY.PAGE_CONTENT]));
+  }, [dataSource[CELL_KEY.PAGE_CONTENT]]);
   useDeepCompareLayoutEffect(function () {
-    setFooter(render(context.pageData[CELL_KEY.PAGE_FOOTER]));
-  }, [context.pageData[CELL_KEY.PAGE_FOOTER]]);
+    setFooter(render(dataSource[CELL_KEY.PAGE_FOOTER]));
+  }, [dataSource[CELL_KEY.PAGE_FOOTER]]);
   useDeepCompareLayoutEffect(function () {
-    var pageModal = reduce(context.pageData.children, function (result, _id) {
+    var pageModal = reduce(dataSource.children, function (result, _id) {
       if (!PAGE_CELL.includes(_id)) {
-        result[_id] = context.pageData[_id];
+        result[_id] = dataSource[_id];
         if (!result.children) {
           result.children = [];
         }
@@ -109,36 +95,41 @@ var Canvas = function Canvas() {
       return result;
     }, {});
     setModal(render(pageModal));
-  }, [context.pageData.children, context.pageData.children.map(function (_id) {
-    return context.pageData[_id];
-  })]);
+  }, [dataSource.children]);
   return /*#__PURE__*/React.createElement("div", {
     id: "page-canvas",
     className: styles['lc-view-canvas']
-  }, /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_HEADER,
+  }, /*#__PURE__*/React.createElement(Wrapper, {
     id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return headerRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: headerRef,
     style: {
       width: '100%',
       height: 120,
       backgroundColor: '#d3f261'
     }
-  }, header), /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_CONTENT,
+  }, header)), /*#__PURE__*/React.createElement(Wrapper, {
     id: CELL_KEY.PAGE_CONTENT,
-    style: {
-      width: '100%',
-      height: 'calc(100% - 120px)',
-      backgroundColor: 'transparent'
+    getTargetDom: function getTargetDom() {
+      return contentRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, content)), /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return footerRef.current;
     }
-  }, content), /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_FOOTER,
-    id: CELL_KEY.PAGE_FOOTER,
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: footerRef,
     style: {
       width: '100%',
       height: 80,
       backgroundColor: '#69c0ff'
     }
-  }, footer), modal);
+  }, footer)), modal);
 };
 export default Canvas;

package/es/lowcode/view/Page.js

@@ -1,28 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
+var _excluded = ["pageCode", "className"];
 import React, { useRef, useEffect, forwardRef } from 'react';
-import { useMemoizedFn, useBoolean, useCreation } from 'ahooks';
+import { useMemoizedFn, useBoolean } from 'ahooks';
 import classNames from 'classnames';
 import { useLDContext } from "../engine/provider/ContextProvider";
 import Loading from "./Loading";
 import Wrapper from "./lc-components/Wrapper";
 import Canvas from "./Canvas";
-import ldModuleBuild from "../../components/Builder";
+import { decompress, compress } from "../engine/tools/dataProcess";
 import { CELL_KEY } from "../constants";
 import styles from "./style/page.less";
+var mock = function mock(_pageCode) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var data = 'ᯡࠣ䂼྆ڑÙ⁅䁆䞠䌣䰪ぞ婈Ø䀦䉑Ŝ持䀥ດ⠦榠⍼Ⲉᗣᠱ嵜䐠׆Ⱐॼ哘ᄳࡠ֕惂ᬠ౪Ӕ沥尡㸴Ƭ䎰嫀䗠ވ䀻▯ἰ湬⥒ᓡᰀ᪡㱲璻䞠ೣⰊ焥⍂へ僸簠ⷌ)䔠ԂࠡⰠಢ㍬[婿ԯဧデ匒<̰N䁞椌狲⎣℁ࡈ琤ᶡ৅桎睑砢◛㶤ს㕍Ʃ䅌欫㊓㢛粠᙭⃀㤠ȉᑤզ愕ۦ厁䷅ᜧ㱯䀦密䭋氠㞘㵵朞礒⺛㺕婐㰵占マ១犚弐x㙁䘸㮱劐ش೮䈈J毟䈦Ⳙీฺ㐠槬⁽Ჰ栰帿࿠٠䂠㐳楂唏៣爭ᡘℼ撘䑼㴷ᨀ᭖䶀㠤嫯䐢䌵n皹᪑ᣬ䭅曢冪富ધ䤲瘠೯嗰ᾕ㍿䎋㪣⣷⟕䃎䌪㟨媽⽸㝐墎㲂暘抮ⴳ₂†ٳõᶢ㹕ㄢà㵠g❌L檪䠨晴⸨ⶱ淛္≢曈廳ܥ䁀⊸ᱥႫ帲墛ᷯ猦↕埄㩀磫ῠ琉Ẁ崆㴮梌棖巶翖㈈䏕䒒⪭掩犕὚唹䠽䊗ࣾᅡ爌䩛㓧࿠ⲑ㲥Ꮸ®㏾❰僷戦熂濛紎玈㋻్羜㺗㸌᠁猑℄畛㶋泧₀¥毗䚼⬦Сღ䀮劶☔⟫㢯਎㵏Ⰺ渍཮װ爊㱏ᘇ給㮄̋ᐆ͈䇑෫˅ࠢ⑰樼↫⦉ࡋᖃ䌍ࠤ效✿䃫༼䂁ߏ籈涎㑽ᗎ甥ᙉ抸咈ǰ䪠ˢᛦ儏ⰲ㐹೺浦☉Ȱ䗁䤘ⲇ沞ⵑ梾䣡炕߄哾ߢ^ສࣀ旔▨॒⍨夿੒ᠷ䦩焲╨ᥖ❒—囓恦 ⊱ᯮ㥝ဤ羊}璀̰塎㎥⥸ᗸၠ㢿΀⨾⋠㮾≴璺碠⋄喵૊哵䃝礔۔垵䫚囵棜ゥ὜᠙⣖䞮ွ⌵哄ω䀵Ⳇ捜䐯䤪ㅦ⡊㕦欐硤娪Ф⥪㥥⢊㽸䔙ᓯચɳ嫬怷ʚ‫橔²ᵼ嚻᝻৷剛䆃塯彁Ⱟ䈕㺿啴૰˻磡ᠯ㻿喀亾䮲眝囕ົṖ⛘䵕曍ᐠ';
+      resolve(data);
+    }, 400);
+  });
+};
 var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _context$pageinfo2;
-  var className = _ref2.className,
+  var pageCode = _ref2.pageCode,
+    className = _ref2.className,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _ref = useRef(null);
   var _rootRef = ref || _ref;
   var context = useLDContext();
-  var LDCanvas = useCreation(function () {
-    var _context$pageinfo;
-    return !((_context$pageinfo = context.pageinfo) !== null && _context$pageinfo !== void 0 && _context$pageinfo.relationship.moduleCode) ? null : ldModuleBuild(Canvas, context.pageinfo.relationship.moduleCode);
-  }, [(_context$pageinfo2 = context.pageinfo) === null || _context$pageinfo2 === void 0 ? void 0 : _context$pageinfo2.relationship.moduleCode]);
+  var _useBoolean = useBoolean(true),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    setFalse = _useBoolean2[1].setFalse;
+  useEffect(function () {
+    context._pageCode.current = pageCode;
+    mock(pageCode).then(function (pageData) {
+      context._pageData.current = decompress(pageData);
+      setFalse();
+    });
+  }, []);
   var getTargetDom = useMemoizedFn(function () {
     return _rootRef.current;
   });
@@ -32,6 +48,8 @@ var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, /*#__PURE__*/React.createElement("div", _extends({
     ref: _rootRef,
     className: classNames(styles['lc-view-page'], _defineProperty({}, className, !!className))
-  }, props), context.loading || !context.pageData ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(LDCanvas, null)));
+  }, props), loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(Canvas, {
+    dataSource: context.pageData
+  })));
 });
 export default LCPage;

package/es/lowcode/view/index.js

@@ -1,17 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["code"];
+var _excluded = ["pageCode"];
 import React from 'react';
 import EventBusProvider from "../engine/provider/EventBusProvider";
 import ContextProvider from "../engine/provider/ContextProvider";
 import Page from "./Page";
 import { RUNTIME } from "../constants/index";
 var View = function View(_ref) {
-  var code = _ref.code,
+  var pageCode = _ref.pageCode,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(EventBusProvider, {
     runtime: RUNTIME.LIVE
-  }, /*#__PURE__*/React.createElement(ContextProvider, {
-    code: code
-  }, /*#__PURE__*/React.createElement(Page, props)));
+  }, /*#__PURE__*/React.createElement(ContextProvider, null, /*#__PURE__*/React.createElement(Page, _extends({
+    pageCode: pageCode
+  }, props))));
 };
 export default View;

package/es/lowcode/view/lc-components/Box/index.js

@@ -1,32 +1,12 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _styled from "styled-components";
-import React, { useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { useMemoizedFn, useCreation } from 'ahooks';
-import classNames from 'classnames';
-import styled from 'styled-components';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
 import Wrapper from "../Wrapper";
-import styles from "./index.less";
-import { omitBadProps } from "../../../engine/tools/helper";
-import defaultMeta from "../../../engine/meta/box.props.default.json";
-var Box = styled.div.withConfig({
-  displayName: "Box",
-  componentId: "luckda-6530__sc-19se5zf-0"
-})(["", ""], function (props) {
-  return props.css;
-});
-var _StyledBox = styled(Box).withConfig({
-  displayName: "_StyledBox",
-  componentId: "luckda-6530__sc-19se5zf-1"
-})(["", ""], function (p) {
-  return p.$_css;
-});
 var LCBox = function LCBox(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    className = _ref.className,
-    css = _ref.css,
-    style = _ref.style;
+    props = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
   var getTargetDom = useMemoizedFn(function () {
     return ref.current;
@@ -34,21 +14,8 @@ var LCBox = function LCBox(_ref) {
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement(_StyledBox, {
-    ref: ref,
-    className: classNames(styles['lc-component-box'], _defineProperty({}, className, !!className)),
-    style: style,
-    name: "box",
-    $_css: css
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, "LCBox", children));
 };
-LCBox.propTypes = {
-  /**
-   * @name 唯一标识
-   * @type string
-   * @disabled true
-   */
-  id: PropTypes.string.isRequired
-};
-LCBox.defaultProps = omitBadProps(defaultMeta);
 export default LCBox;

package/es/lowcode/view/lc-components/Button/index.js

@@ -1,26 +1,16 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useMemoizedFn } from 'ahooks';
-import classNames from 'classnames';
 import { useLDContext } from "../../../engine/provider/ContextProvider";
 import { Button } from 'luck-design/antd';
 import Wrapper from "../Wrapper";
 import { RUNTIME } from "../../../constants";
-import { omitBadProps } from "../../../engine/tools/helper";
-import defaultMeta from "../../../engine/meta/button.props.default.json";
-import styles from "./style.less";
 var LCButton = function LCButton(_ref) {
   var id = _ref.id,
-    title = _ref.title,
-    type = _ref.type,
-    size = _ref.size,
-    block = _ref.block,
-    serial = _ref.serial,
-    serialEffect = _ref.serialEffect,
-    ghost = _ref.ghost,
-    style = _ref.style,
-    className = _ref.className;
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var context = useLDContext();
   var ref = useRef();
   var getTargetDom = useMemoizedFn(function () {
@@ -39,67 +29,9 @@ var LCButton = function LCButton(_ref) {
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
-    type: type,
-    size: size,
-    block: block,
-    ghost: ghost,
-    style: style,
-    className: classNames(_defineProperty(_defineProperty({}, styles['runtime-button'], context.runtime === RUNTIME.DESIGN), className, !!className)),
     onClick: handleClick
-  }, title));
+  }, props), "LCButton-", id));
 };
-LCButton.propTypes = {
-  /**
-   * @name 唯一标识
-   * @type string
-   * @disabled true
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * @name 按钮标题
-   * @type string
-   * @default 12:3:9
-   */
-  title: PropTypes.string,
-  /**
-   * @name 按钮类型
-   * @type _ButtonType
-   * @default 'default'
-   */
-  type: PropTypes.oneOf(['default', 'primary', 'dashed', 'danger']),
-  /**
-   * @name 按钮大小
-   * @type segmented
-   * @options [{ "label": "小", "value": "small"}, { "label": "中", "value": "middle" }, { "label": "大", "value": "large" }]
-   * @default 'default'
-   */
-  size: PropTypes.oneOf(['small', 'default', 'large']),
-  /**
-   * @name 将按钮宽度调整为其父宽度的选项
-   * @type boolean
-   * @default false
-   */
-  block: PropTypes.bool,
-  /**
-   * @name 资源串
-   * @type string
-   */
-  serial: PropTypes.string,
-  /**
-   * @name 资源串效果
-   * @type segmented
-   * @options [{ "label": "隐藏", "value": "hidden" }, { "label": "禁用", "value": "disable"}]
-   * @default 'hidden'
-   */
-  serialEffect: PropTypes.oneOf(['disabled', 'hidden']),
-  /**
-   * @name 幽灵按钮
-   * @type boolean
-   * @default false
-   */
-  ghost: PropTypes.bool
-};
-LCButton.defaultProps = omitBadProps(defaultMeta);
 export default LCButton;

package/es/lowcode/view/lc-components/Dialog/index.js

@@ -1,22 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "children", "getContainer", "wrapClassName", "maskStyle"];
+var _excluded = ["id", "children"];
 import React, { useRef, useImperativeHandle } from 'react';
 import { useMemoizedFn, useBoolean } from 'ahooks';
 import { Modal } from 'luck-design/antd';
 import classNames from 'classnames';
+import { useLDContext } from "../../../engine/provider/ContextProvider";
+import { CELL_KEY, RUNTIME } from "../../../constants";
 import Wrapper from "../Wrapper";
 import styles from "./index.less";
 var LCDialog = function LCDialog(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    getContainer = _ref.getContainer,
-    wrapClassName = _ref.wrapClassName,
-    maskStyle = _ref.maskStyle,
     props = _objectWithoutProperties(_ref, _excluded);
   var apiRef = useRef();
-  var domRef = useRef();
+  var context = useLDContext();
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     open = _useBoolean2[0],
@@ -25,8 +24,7 @@ var LCDialog = function LCDialog(_ref) {
     setFalse = _useBoolean2$.setFalse,
     toggle = _useBoolean2$.toggle;
   var getTargetDom = useMemoizedFn(function () {
-    var _domRef$current;
-    return (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.closest('.ant-modal-content');
+    return (context.runtime === RUNTIME.DESIGN ? context.componentMap.get(CELL_KEY.PAGE_ROOT).dom : document).getElementsByClassName('ant-modal-content')[0];
   });
   useImperativeHandle(apiRef, function () {
     return {
@@ -42,18 +40,11 @@ var LCDialog = function LCDialog(_ref) {
     api: apiRef
   }, /*#__PURE__*/React.createElement(Modal, {
     visible: open,
-    getContainer: getContainer,
-    maskStyle: maskStyle,
-    wrapClassName: classNames(styles['lc-component-dialog-wrapper'], _defineProperty({}, wrapClassName, !!wrapClassName))
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: 0,
-      width: 0,
-      margin: 0,
-      padding: 0,
-      visibility: 'hidden'
-    },
-    ref: domRef
-  }), children));
+    getContainer: context.runtime !== RUNTIME.DESIGN,
+    wrapClassName: classNames(styles['lc-component-modal-wrapper'], _defineProperty({}, styles['runtime-design'], context.runtime === RUNTIME.DESIGN)),
+    maskStyle: {
+      position: context.runtime !== RUNTIME.DESIGN ? 'fixed' : 'absolute'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "LCDialog-", id), children));
 };
 export default LCDialog;

package/es/lowcode/view/lc-components/Dialog/index.less

@@ -1,3 +1,3 @@
-.lc-component-dialog-wrapper.runtime-design {
+.lc-component-modal-wrapper.runtime-design {
   position: absolute !important;
 }

package/es/lowcode/view/lc-components/Drawer/index.js

@@ -1,22 +1,18 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "children", "className", "getContainer", "style"];
+var _excluded = ["id", "children"];
 import React, { useRef, useImperativeHandle } from 'react';
 import { useMemoizedFn, useBoolean } from 'ahooks';
 import { Drawer } from 'luck-design/antd';
-import classNames from 'classnames';
+import { useLDContext } from "../../../engine/provider/ContextProvider";
+import { CELL_KEY, RUNTIME } from "../../../constants";
 import Wrapper from "../Wrapper";
-import styles from "./index.less";
 var LCDrawer = function LCDrawer(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    className = _ref.className,
-    getContainer = _ref.getContainer,
-    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var apiRef = useRef();
-  var domRef = useRef();
+  var context = useLDContext();
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     open = _useBoolean2[0],
@@ -25,30 +21,13 @@ var LCDrawer = function LCDrawer(_ref) {
     setFalse = _useBoolean2$.setFalse,
     toggle = _useBoolean2$.toggle;
   var getTargetDom = useMemoizedFn(function () {
-    var _domRef$current;
-    return (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.closest('.ant-drawer-content-wrapper');
+    return (context.runtime === RUNTIME.DESIGN ? context.componentMap.get(CELL_KEY.PAGE_ROOT).dom : document).getElementsByClassName('ant-drawer-content-wrapper')[0];
   });
   useImperativeHandle(apiRef, function () {
     return {
-      /**
-       * 是否打开
-       * @property
-       */
       open: open,
-      /**
-       * 打开弹窗
-       * @method
-       */
       doOpen: setTrue,
-      /**
-       * 关闭弹窗
-       * @method
-       */
       doClose: setFalse,
-      /**
-       * @method
-       * 切换弹窗
-       */
       toggle: toggle
     };
   });
@@ -58,18 +37,10 @@ var LCDrawer = function LCDrawer(_ref) {
     api: apiRef
   }, /*#__PURE__*/React.createElement(Drawer, {
     visible: open,
-    getContainer: getContainer,
-    style: style,
-    className: classNames(styles['lc-component-drawer'], _defineProperty({}, className, !!className))
-  }, /*#__PURE__*/React.createElement("div", {
+    getContainer: context.runtime !== RUNTIME.DESIGN,
     style: {
-      height: 0,
-      width: 0,
-      margin: 0,
-      padding: 0,
-      visibility: 'hidden'
-    },
-    ref: domRef
-  }), /*#__PURE__*/React.createElement("div", null, "LCDrawer-", id), children));
+      position: context.runtime === RUNTIME.DESIGN ? 'absolute' : 'fixed'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "LCDrawer-", id), children));
 };
 export default LCDrawer;