@luck-design-biz/luckda 0.0.24-1 → 0.0.24-2

package/es/lowcode/view/Page.js

@@ -1,241 +1,28 @@
 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 = ["pageCode", "className"];
+var _excluded = ["className"];
 import React, { useRef, useEffect, forwardRef } from 'react';
-import { useMemoizedFn, useBoolean } from 'ahooks';
+import { useMemoizedFn, useBoolean, useCreation } 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 { decompress } from "../engine/tools/dataProcess";
+import ldModuleBuild from "../../components/Builder";
 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 d = {
-  props: {
-    id: 'page_root',
-    group: 'build-in',
-    component: 'Page',
-    name: '页面',
-    hasHeder: true,
-    hasFooter: true
-  },
-  children: ['page_header', 'page_content', 'page_footer', 'dialog_ms2o9hj0', 'drawer_ou79jw8c'],
-  page_header: {
-    props: {
-      id: 'page_header',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageHeader',
-      name: '页面头',
-      fixed: false
-    },
-    children: ['text_kju78bvs'],
-    text_kju78bvs: {
-      props: {
-        id: 'text_kju78bvs',
-        parentId: 'page_header',
-        group: 'basic',
-        component: 'Text',
-        name: '文本'
-      }
-    }
-  },
-  page_content: {
-    props: {
-      id: 'page_content',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageContent',
-      name: '页面内容'
-    },
-    children: ['layout_OL4gi6mr'],
-    layout_OL4gi6mr: {
-      props: {
-        component: 'Layout',
-        name: '布局容器',
-        icon: 'icon-layout',
-        group: 'container',
-        groupName: '布局',
-        desc: '布局容器是一种提供列比例、列间距、行间距和样式等配置选项的元素，用于创建灵活的页面布局。它使用户能够轻松组织和排列组件，并实现各种复杂的布局需求。',
-        order: 1,
-        style: {},
-        columnRatio: '12:3:9',
-        columnSpacing: 16,
-        lineSpacing: 16,
-        id: 'layout_OL4gi6mr'
-      },
-      children: ['box_xFuKLKBI', 'box_jeVHiHZV', 'box_5KLx4rGb'],
-      box_xFuKLKBI: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 12',
-            height: 'auto'
-          },
-          id: 'box_xFuKLKBI'
-        },
-        children: ['button_okj2n87x', 'text_nmu9wqqw'],
-        button_okj2n87x: {
-          props: {
-            id: 'button_okj2n87x',
-            parentId: 'box_ihj2n8cv',
-            group: 'basic',
-            component: 'Button',
-            name: '按钮',
-            title: '这是一个按钮',
-            type: 'primary',
-            size: 'large'
-          }
-        },
-        text_nmu9wqqw: {
-          props: {
-            id: 'text_nmu9wqqw',
-            parentId: 'box_ihj2n8cv',
-            group: 'basic',
-            component: 'Text',
-            name: '文本'
-          }
-        }
-      },
-      box_jeVHiHZV: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 3',
-            height: '60px'
-          },
-          id: 'box_jeVHiHZV'
-        },
-        children: ['tree_hh2b87qs'],
-        tree_hh2b87qs: {
-          props: {
-            id: 'tree_hh2b87qs',
-            parentId: 'box_diam9dis',
-            group: 'advance',
-            component: 'Tree',
-            name: '树'
-          }
-        }
-      },
-      box_5KLx4rGb: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 9',
-            height: '360px'
-          },
-          id: 'box_5KLx4rGb'
-        },
-        children: ['table_diam9dis'],
-        table_diam9dis: {
-          props: {
-            id: 'table_diam9dis',
-            parentId: 'box_s0j3j08t',
-            group: 'advance',
-            component: 'Table',
-            name: '列表',
-            dataset: 'dsWmsMaterialsData'
-          }
-        }
-      }
-    }
-  },
-  page_footer: {
-    props: {
-      id: 'page_footer',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageFooter',
-      name: '页面尾'
-    }
-  },
-  dialog_ms2o9hj0: {
-    props: {
-      id: 'dialog_ms2o9hj0',
-      parentId: 'page_root',
-      group: 'basic',
-      component: 'Dialog',
-      name: '对话框'
-    },
-    children: ['form_gyusku8j'],
-    form_gyusku8j: {
-      props: {
-        id: 'form_gyusku8j',
-        parentId: 'dialog_ms2o9hj0',
-        group: 'advance',
-        component: 'Form',
-        name: '表单'
-      }
-    }
-  },
-  drawer_ou79jw8c: {
-    props: {
-      id: 'drawer_ou79jw8c',
-      parentId: 'page_root',
-      group: 'basic',
-      component: 'Drawer',
-      name: '抽屉'
-    },
-    children: ['form_jknbjkun'],
-    form_jknbjkun: {
-      props: {
-        id: 'form_jknbjkun',
-        parentId: 'drawer_ou79jw8c',
-        group: 'advance',
-        component: 'Form',
-        name: '表单'
-      }
-    }
-  }
-};
 var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var pageCode = _ref2.pageCode,
-    className = _ref2.className,
+  var _context$pageinfo2;
+  var className = _ref2.className,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _ref = useRef(null);
   var _rootRef = ref || _ref;
   var context = useLDContext();
-  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._setPageData(decompress(pageData));
-      context._setPageData(d);
-      setFalse();
-    });
-  }, []);
+  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 getTargetDom = useMemoizedFn(function () {
     return _rootRef.current;
   });
@@ -245,8 +32,6 @@ var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, /*#__PURE__*/React.createElement("div", _extends({
     ref: _rootRef,
     className: classNames(styles['lc-view-page'], _defineProperty({}, className, !!className))
-  }, props), loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(Canvas, {
-    dataSource: context.pageData
-  })));
+  }, props), context.loading || !context.pageData ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(LDCanvas, null)));
 });
 export default LCPage;

package/es/lowcode/view/index.js

@@ -1,18 +1,17 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["pageCode"];
+var _excluded = ["code"];
 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 pageCode = _ref.pageCode,
+  var code = _ref.code,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(EventBusProvider, {
     runtime: RUNTIME.LIVE
-  }, /*#__PURE__*/React.createElement(ContextProvider, null, /*#__PURE__*/React.createElement(Page, _extends({
-    pageCode: pageCode
-  }, props))));
+  }, /*#__PURE__*/React.createElement(ContextProvider, {
+    code: code
+  }, /*#__PURE__*/React.createElement(Page, props)));
 };
 export default View;

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

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -6,6 +5,7 @@ import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
 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 LCBox = function LCBox(_ref) {
   var id = _ref.id,
@@ -34,5 +34,5 @@ LCBox.propTypes = {
    */
   id: PropTypes.string.isRequired
 };
-LCBox.defaultProps = _objectSpread({}, defaultMeta);
+LCBox.defaultProps = omitBadProps(defaultMeta);
 export default LCBox;

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

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -8,7 +7,9 @@ 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,
@@ -45,7 +46,7 @@ var LCButton = function LCButton(_ref) {
     block: block,
     ghost: ghost,
     style: style,
-    className: classNames(_defineProperty({}, className, !!className)),
+    className: classNames(_defineProperty(_defineProperty({}, styles['runtime-button'], context.runtime === RUNTIME.DESIGN), className, !!className)),
     onClick: handleClick
   }, title));
 };
@@ -64,13 +65,14 @@ LCButton.propTypes = {
   title: PropTypes.string,
   /**
    * @name 按钮类型
-   * @type oneOf('default', 'primary', 'dashed', 'danger')
+   * @type _ButtonType
    * @default 'default'
    */
   type: PropTypes.oneOf(['default', 'primary', 'dashed', 'danger']),
   /**
    * @name 按钮大小
-   * @type oneOf('small', 'default', 'large')
+   * @type segmented
+   * @options [{ "label": "小", "value": "small"}, { "label": "中", "value": "middle" }, { "label": "大", "value": "large" }]
    * @default 'default'
    */
   size: PropTypes.oneOf(['small', 'default', 'large']),
@@ -87,8 +89,9 @@ LCButton.propTypes = {
   serial: PropTypes.string,
   /**
    * @name 资源串效果
-   * @type oneOf('disabled','hidden')
-   * @default 'disabled'
+   * @type segmented
+   * @options [{ "label": "隐藏", "value": "hidden" }, { "label": "禁用", "value": "disable"}]
+   * @default 'hidden'
    */
   serialEffect: PropTypes.oneOf(['disabled', 'hidden']),
   /**
@@ -98,5 +101,5 @@ LCButton.propTypes = {
    */
   ghost: PropTypes.bool
 };
-LCButton.defaultProps = _objectSpread({}, defaultMeta);
+LCButton.defaultProps = omitBadProps(defaultMeta);
 export default LCButton;

package/es/lowcode/view/lc-components/Button/meta.json

@@ -17,6 +17,7 @@
       "key": "title",
       "name": "标题",
       "type": "string",
+      "repositioning": true,
       "default": "按钮"
     },
     {
@@ -29,6 +30,7 @@
       "key": "size",
       "name": "按钮",
       "type": "segmented",
+      "repositioning": true,
       "options": [
         {
           "label": "小",
@@ -50,6 +52,7 @@
       "name": "块级",
       "desc": "将按钮宽度调整为其父宽度的选项",
       "type": "switch",
+      "repositioning": true,
       "default": false
     },
     {
@@ -65,6 +68,7 @@
       "type": "_Icon",
       "next": {
         "name": "选择图标",
+        "autoClose": true,
         "props": [
           {
             "key": "icon",
@@ -72,7 +76,8 @@
             "type": "_IconSelector"
           }
         ]
-      }
+      },
+      "repositioning": true
     },
     {
       "key": "serials",
@@ -82,7 +87,7 @@
     {
       "key": "serialEffect",
       "name": "资源串效果",
-      "type": "_SerialEffect",
+      "type": "segmented",
       "options": [
         {
           "label": "禁用",

package/es/lowcode/view/lc-components/Button/style.less

@@ -0,0 +1,3 @@
+.runtime-button{
+    transition: none;
+}

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

@@ -1,9 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
+var _excluded = ["context", "id", "children", "className"];
+import React, { useEffect } from 'react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { cloneDeep } from 'lodash';
 import Index from "./index";
+import { suid } from '@luck-design-biz/base/utils';
+import { add } from "../../../engine/tools/dataProcess";
+import classNames from 'classnames';
+import styles from "./index.less";
+import boxDefaultMeta from "../../../engine/meta/box.props.default.json";
 var FunctionDesign = function FunctionDesign(_ref) {
-  var children = _ref.children,
+  var context = _ref.context,
+    id = _ref.id,
+    children = _ref.children,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Index, props, children);
+  var handleAppendBox = useMemoizedFn(function (_pageData) {
+    var cloneData = cloneDeep(_pageData);
+    add(cloneData, id, "box_".concat(suid()), boxDefaultMeta);
+    context._setPageData(cloneData);
+  });
+  useCreation(function () {
+    if (children !== null && children !== void 0 && children.length) return;
+    context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref2) {
+      var compId = _ref2.id,
+        pageData = _ref2.pageData;
+      if (compId !== id) return;
+      handleAppendBox(pageData);
+    }).watch();
+  }, []);
+  useEffect(function () {
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref3) {
+      var parentId = _ref3.parentId,
+        pageData = _ref3.pageData;
+      if (parentId !== id) return;
+      handleAppendBox(pageData);
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Index, _extends({
+    id: id,
+    wrapClassName: classNames(styles['runtime-design'], _defineProperty({}, className, !!className)),
+    getContainer: false,
+    maskStyle: {
+      position: 'absolute'
+    }
+  }, props), children);
 };
 export default FunctionDesign;

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

@@ -1,21 +1,22 @@
 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"];
+var _excluded = ["id", "children", "getContainer", "wrapClassName", "maskStyle"];
 import React, { useRef, useImperativeHandle } from 'react';
-import { useMemoizedFn, useBoolean, useUpdateEffect } from 'ahooks';
+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 context = useLDContext();
+  var domRef = useRef();
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     open = _useBoolean2[0],
@@ -24,7 +25,8 @@ var LCDialog = function LCDialog(_ref) {
     setFalse = _useBoolean2$.setFalse,
     toggle = _useBoolean2$.toggle;
   var getTargetDom = useMemoizedFn(function () {
-    return (context.runtime === RUNTIME.DESIGN ? context.componentMap.get(CELL_KEY.PAGE_ROOT).dom : document).getElementsByClassName('ant-modal-content')[0];
+    var _domRef$current;
+    return (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.closest('.ant-modal-content');
   });
   useImperativeHandle(apiRef, function () {
     return {
@@ -34,28 +36,24 @@ var LCDialog = function LCDialog(_ref) {
       toggle: toggle
     };
   });
-  useUpdateEffect(function () {
-    if (open) {
-      context.$publisher(context.topics.MODAL_OPEN, {
-        id: id
-      });
-    } else {
-      context.$publisher(context.topics.MODAL_CLOSE, {
-        id: id
-      });
-    }
-  }, [open]);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom,
     api: apiRef
   }, /*#__PURE__*/React.createElement(Modal, {
     visible: open,
-    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));
+    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));
 };
 export default LCDialog;

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

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

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

@@ -1,9 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
+var _excluded = ["children", "className"];
 import Index from "./index";
+import classNames from 'classnames';
+import styles from "./index.less";
 var FunctionDesign = function FunctionDesign(_ref) {
   var children = _ref.children,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Index, props, children);
+  return /*#__PURE__*/React.createElement(Index, _extends({
+    className: classNames(styles['runtime-design'], _defineProperty({}, className, !!className)),
+    getContainer: false,
+    style: {
+      position: 'absolute'
+    }
+  }, props), children);
 };
 export default FunctionDesign;