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

package/es/lowcode/view/lc-components/ImEx/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;

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

@@ -12,6 +12,7 @@ var LCImEx = function LCImEx(_ref) {
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "ImEx",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref

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

@@ -34,7 +34,7 @@
       "key": "title",
       "name": "标题",
       "desc": "按钮上显示的文字",
-      "type": "string",
+      "type": "_I18nInput",
       "default": "导入｜导出"
     },
     {
@@ -50,7 +50,7 @@
       "type": "string"
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/es/lowcode/view/lc-components/Image/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;

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

@@ -12,6 +12,7 @@ var LCImage = function LCImage(_ref) {
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "Image",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref

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

@@ -72,13 +72,13 @@
       "key": "title",
       "name": "标题",
       "desc": "图片html原生title",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "alt",
       "name": "替代文本",
       "desc": "图片加载失败的占位文字",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "preview",
@@ -88,7 +88,7 @@
       "default": false
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/es/lowcode/view/lc-components/JSX/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;

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

@@ -1,20 +1,33 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id"];
 import React, { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import styled from 'styled-components';
+import { useContext } from "../../../engine/provider/ContextProvider";
 import Wrapper from "../Wrapper";
+import LdRuntimeCom from "../../../../components/LdRuntimeCom";
+var JSXWrapper = styled.div.withConfig({
+  displayName: "JSXWrapper",
+  componentId: "luckda-6530__sc-23r5qk-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
 var LCJSX = function LCJSX(_ref) {
   var id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded);
+    render = _ref.render,
+    css = _ref.css;
   var ref = useRef();
+  var ctx = useContext();
   var getTargetDom = useMemoizedFn(function () {
     return ref.current;
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "JSX",
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, "JSX"));
+  }, /*#__PURE__*/React.createElement(JSXWrapper, {
+    ref: ref,
+    $css: css
+  }, /*#__PURE__*/React.createElement(LdRuntimeCom, {
+    ctx: ctx
+  }, render)));
 };
 export default LCJSX;

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

@@ -9,17 +9,20 @@
   "props": [
     {
       "key": "id",
-      "desc": "唯一标识",
+      "name": "唯一标识",
       "type": "string",
       "disabled": true
     },
     {
       "key": "render",
       "name": "编辑jsx代码",
-      "desc": "可执行的jsx代码",
-      "type": "_CodeEditor"
+      "desc": "编写可执行的完整jsx组件代码",
+      "type": "_JSEditor",
+      "default": "function Component() {\n\treturn(\n\t\t<div>\n\t\t\t此为自定义代码组件，请使用 JSX 语法\n\t\t</div>\n\t)\n}",
+      "mustConfirm": true,
+      "wrapper": "collapse",
+      "wrapperProps": { "suppressIcon": true }
     }
   ],
-  "style": {},
-  "advance": {}
+  "css": "width: 100%; height: auto;"
 }

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

@@ -1,55 +1,57 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "context", "id", "columnRatio"],
-  _excluded2 = ["style"];
-import { useEffect } from 'react';
+var _excluded = ["children", "id", "columnRatio"];
+import React, { useEffect } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { drop, cloneDeep } from 'lodash';
+import { drop } from 'lodash';
 import { suid } from '@luck-design-biz/base/utils';
+import { useContext, usePageData } from "../../../engine/provider/ContextProvider";
 import Index from "./index";
 import { add, modifyById, deleteById, findNodeAndParent } from "../../../engine/tools/dataProcess";
 import boxDefaultMeta from "../../../engine/meta/box.props.default.json";
 var LayoutFunctionDesign = function LayoutFunctionDesign(_ref) {
   var children = _ref.children,
-    context = _ref.context,
     id = _ref.id,
     columnRatio = _ref.columnRatio,
     props = _objectWithoutProperties(_ref, _excluded);
+  var ctx = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    setPageData = _usePageData2[1].setPageData;
   var refreshChild = useMemoizedFn(function (_pageData) {
-    var cloneData = cloneDeep(_pageData);
-    var _findNodeAndParent = findNodeAndParent(id, cloneData),
+    var _findNodeAndParent = findNodeAndParent(id, _pageData),
       current = _findNodeAndParent.node;
     var ratioArr = columnRatio.split(':');
     drop(current.children, ratioArr.length).forEach(function (boxId) {
-      deleteById(cloneData, boxId);
+      deleteById(_pageData, boxId);
     });
     ratioArr.forEach(function (item, index) {
       var _current$children;
       var ratio = parseInt(item, 10);
       var boxId = (_current$children = current.children) === null || _current$children === void 0 ? void 0 : _current$children[index];
       if (boxId) {
-        modifyById(cloneData, current.children[index], _objectSpread(_objectSpread({}, current[boxId].props), {}, {
-          style: _objectSpread(_objectSpread({}, current[boxId].props.style), {}, {
+        modifyById(_pageData, current.children[index], _objectSpread(_objectSpread({}, current[boxId].props), {}, {
+          style: {
             gridColumn: 'span ' + ratio
-          })
+          }
         }));
       } else {
         boxId = "box_".concat(suid());
-        var style = boxDefaultMeta.style,
-          json = _objectWithoutProperties(boxDefaultMeta, _excluded2);
-        add(cloneData, id, boxId, _objectSpread(_objectSpread({}, json), {}, {
-          style: _objectSpread(_objectSpread({}, style), {}, {
+        add(_pageData, id, boxId, _objectSpread(_objectSpread({}, boxDefaultMeta), {}, {
+          buildIn: true,
+          style: {
             gridColumn: 'span ' + ratio
-          })
+          }
         }));
       }
     });
-    context._setPageData(cloneData);
+    setPageData(_pageData);
   });
   useCreation(function () {
     if (children !== null && children !== void 0 && children.length) return;
-    context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref2) {
+    ctx.$subscriber(ctx.topics.COMPONENT_APPEND).once(function (_ref2) {
       var compId = _ref2.id,
         pageData = _ref2.pageData;
       if (compId !== id) return;
@@ -57,19 +59,18 @@ var LayoutFunctionDesign = function LayoutFunctionDesign(_ref) {
     }).watch();
   }, []);
   useEffect(function () {
-    var cmid = context.$subscriber(context.topics.COMPONENT_MODIFY).on(function (_ref3) {
+    var cmid = ctx.$subscriber(ctx.topics.COMPONENT_MODIFY).on(function (_ref3) {
       var compId = _ref3.id,
         pageData = _ref3.pageData;
       if (compId !== id) return;
       refreshChild(pageData);
     }).watch();
     return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_MODIFY, cmid);
+      return ctx.$unsubscriber(ctx.topics.COMPONENT_MODIFY, cmid);
     };
   }, []);
   return /*#__PURE__*/React.createElement(Index, _extends({
-    id: id,
-    context: context
+    id: id
   }, props), children);
 };
 export default LayoutFunctionDesign;

package/es/lowcode/view/lc-components/Layout/FunctionLive.js

@@ -1,15 +1,10 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "context", "id"];
+var _excluded = ["children"];
+import React from 'react';
 import Index from "./index";
 var LayoutFunctionLive = function LayoutFunctionLive(_ref) {
   var children = _ref.children,
-    context = _ref.context,
-    id = _ref.id,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Index, _extends({
-    id: id,
-    context: context
-  }, props), children);
+  return /*#__PURE__*/React.createElement(Index, props, children);
 };
 export default LayoutFunctionLive;

package/es/lowcode/view/lc-components/Layout/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var LayoutFunctionPreview = function LayoutFunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default LayoutFunctionPreview;

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

@@ -18,6 +18,7 @@ var LCLayout = function LCLayout(_ref) {
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "Layout",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

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

@@ -10,7 +10,6 @@
     {
       "key": "id",
       "name": "唯一标识",
-      "desc": "组件的唯一标识符，不能够与其它组件重名，不能够为空，且只能够使用以字母开头的，下划线以及数字的组合",
       "type": "string",
       "disabled": true
     },
@@ -88,7 +87,7 @@
       "default": 16
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/es/lowcode/view/lc-components/Link/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;

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

@@ -12,6 +12,7 @@ var LCLink = function LCLink(_ref) {
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "Link",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref

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

@@ -17,7 +17,7 @@
       "key": "content",
       "name": "内容",
       "desc": "超链接的展示内容",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "textOverflow",
@@ -66,7 +66,7 @@
       "key": "serials",
       "name": "资源串",
       "desc": "挂接模块资源串",
-      "type": "string"
+      "type": "_SerialsSelector"
     },
     {
       "key": "effect",
@@ -86,7 +86,7 @@
       "default": "hidden"
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

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

@@ -0,0 +1,49 @@
+{
+  "component": "Page",
+  "name": "页面",
+  "group": "build-in",
+  "props": [
+    {
+      "key": "pageSlot",
+      "name": "页面插槽",
+      "type": "group",
+      "props": [
+        {
+          "key": "enableHeader",
+          "name": "启用页头",
+          "type": "switch",
+          "default": "false"
+        },
+        {
+          "key": "fixedHeader",
+          "name": "固定页头",
+          "type": "switch",
+          "default": "true"
+        },
+        {
+          "key": "enableFooter",
+          "name": "启用页尾",
+          "type": "switch",
+          "default": "false"
+        }
+      ]
+    }
+  ],
+  "css": "background-color: transparent;",
+  "advance": {
+    "events": [
+      {
+        "key": "onPageMount",
+        "name": "组件首次渲染时",
+        "desc": "在组件首次渲染时，执行方法",
+        "func": "(params)=>{\n\t\n}"
+      },
+      {
+        "key": "onPageUnmount",
+        "name": "组件卸载时",
+        "desc": "在组件卸载时，执行方法。",
+        "func": "(params)=>{\n\t\n}"
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef } from 'react';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import styled from 'styled-components';
+import { usePageData } from "../../../engine/provider/ContextProvider";
+import useCanvasRender from "../../../engine/tools/useCanvasRender";
+import Wrapper from "../Wrapper";
+import { LC_BUILDIN_UNIT_KEY } from "../../../constants";
+import { parseCSS } from "../../../engine/tools/helper";
+var Div = styled.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-19wkpor-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageContent = function PageContent() {
+  var ref = useRef();
+  var _usePageData = usePageData([LC_BUILDIN_UNIT_KEY.PAGE_CONTENT, 'props.enableHeader', "".concat(LC_BUILDIN_UNIT_KEY.PAGE_HEADER, ".props.css")]),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    _usePageData2$ = _slicedToArray(_usePageData2[0], 3),
+    pagecontent = _usePageData2$[0],
+    enableHeader = _usePageData2$[1],
+    headercss = _usePageData2$[2];
+  var canvas = useCanvasRender(pagecontent);
+  var contentStyle = useCreation(function () {
+    if (enableHeader) {
+      var headerCss = parseCSS(headercss);
+      var _h = "calc(100% - ".concat(headerCss.height || '0px', " - ").concat(headerCss['margin-bottom'] || '0px', " - ").concat(headerCss['margin-top'] || '0px', ")");
+      return {
+        width: '100%',
+        height: 'auto',
+        minHeight: _h
+      };
+    }
+    return {
+      width: '100%',
+      height: '100%'
+    };
+  }, [enableHeader, headercss]);
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: LC_BUILDIN_UNIT_KEY.PAGE_CONTENT,
+    displayName: "PageContent",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement(Div, {
+    ref: ref,
+    $css: pagecontent.props.css,
+    style: contentStyle
+  }, canvas));
+};
+export default PageContent;

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

@@ -0,0 +1,9 @@
+{
+  "component": "PageContent",
+  "name": "页面内容",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "background-color: transparent"
+}

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

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import styled from 'styled-components';
+import { usePageData } from "../../../engine/provider/ContextProvider";
+import useCanvasRender from "../../../engine/tools/useCanvasRender";
+import Wrapper from "../Wrapper";
+import { LC_BUILDIN_UNIT_KEY } from "../../../constants";
+var Div = styled.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-1d40970-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageFooter = function PageFooter() {
+  var ref = useRef();
+  var _usePageData = usePageData(LC_BUILDIN_UNIT_KEY.PAGE_FOOTER),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    pagefoot = _usePageData2[0];
+  var canvas = useCanvasRender(pagefoot);
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: LC_BUILDIN_UNIT_KEY.PAGE_FOOTER,
+    displayName: "PageFooter",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement(Div, {
+    ref: ref,
+    $css: pagefoot.props.css,
+    style: {
+      width: '100%',
+      height: 80,
+      background: '#69c0ff'
+    }
+  }, canvas));
+};
+export default PageFooter;

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

@@ -0,0 +1,9 @@
+{
+  "component": "PageFooter",
+  "name": "页面尾",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "width: 100%; height: 80px; background-color: transparent"
+}

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

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import styled from 'styled-components';
+import { usePageData } from "../../../engine/provider/ContextProvider";
+import useCanvasRender from "../../../engine/tools/useCanvasRender";
+import Wrapper from "../Wrapper";
+import { LC_BUILDIN_UNIT_KEY } from "../../../constants";
+var Div = styled.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-1t2cxpy-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageHeader = function PageHeader() {
+  var ref = useRef();
+  var _usePageData = usePageData([LC_BUILDIN_UNIT_KEY.PAGE_HEADER, 'props.fixedHeader']),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    _usePageData2$ = _slicedToArray(_usePageData2[0], 2),
+    pageheader = _usePageData2$[0],
+    fixed = _usePageData2$[1];
+  var canvas = useCanvasRender(pageheader);
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: LC_BUILDIN_UNIT_KEY.PAGE_HEADER,
+    displayName: "PageHeader",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement(Div, {
+    ref: ref,
+    $css: pageheader.props.css,
+    style: fixed ? {
+      position: 'sticky',
+      top: 0,
+      zIndex: 10
+    } : null
+  }, canvas));
+};
+export default PageHeader;

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

@@ -0,0 +1,9 @@
+{
+  "component": "PageHeader",
+  "name": "页面头",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "width: 100%; height:120px; background-color: #fff; margin-bottom: 8px"
+}

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

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { reduce } from 'lodash';
+import { usePageData } from "../../../engine/provider/ContextProvider";
+import useCanvasRender from "../../../engine/tools/useCanvasRender";
+import { LC_BUILDIN_UNIT_KEY_LIST } from "../../../constants";
+var PageModal = function PageModal() {
+  var _usePageData = usePageData(function (pagedata) {
+      return reduce(pagedata.children, function (result, childId) {
+        if (!LC_BUILDIN_UNIT_KEY_LIST.includes(childId)) {
+          result[childId] = pagedata[childId];
+          if (!result.children) {
+            result.children = [];
+          }
+          result.children.push(childId);
+        }
+        return result;
+      }, {});
+    }),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    pagemodal = _usePageData2[0];
+  return useCanvasRender(pagemodal);
+};
+export default PageModal;

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

@@ -1,9 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
+var _excluded = ["children", "id"];
+import React from 'react';
 import Index from "./index";
+import { useCreation } from 'ahooks';
+import { suid } from '@luck-design-biz/base/utils';
+import { useContext, usePageData } from "../../../engine/provider/ContextProvider";
+import { add } from "../../../engine/tools/dataProcess";
+import boxDefaultMeta from "../../../engine/meta/box.props.default.json";
 var FunctionDesign = function FunctionDesign(_ref) {
   var children = _ref.children,
+    id = _ref.id,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Index, props, children);
+  var ctx = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    setPageData = _usePageData2[1].setPageData;
+  useCreation(function () {
+    if (children !== null && children !== void 0 && children.length) return;
+    ctx.$subscriber(ctx.topics.COMPONENT_APPEND).once(function (_ref2) {
+      var compId = _ref2.id,
+        pageData = _ref2.pageData;
+      if (compId !== id) return;
+      var boxId = "box_".concat(suid());
+      add(pageData, id, boxId, _objectSpread(_objectSpread({}, boxDefaultMeta), {}, {
+        buildIn: true
+      }));
+      setPageData(pageData);
+    }).watch();
+  }, []);
+  return /*#__PURE__*/React.createElement(Index, _extends({
+    id: id
+  }, props), children);
 };
 export default FunctionDesign;

package/es/lowcode/view/lc-components/Section/FunctionPreview.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;