@luck-design-biz/luckda 0.0.25-1 → 0.0.25-3

package/es/lowcode/engine/tools/usePromiseState.js

@@ -1,26 +1,35 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useRef, useCallback } from 'react';
-import { useResetState, useDeepCompareEffect } from 'ahooks';
+import { useHistoryTravel, useUpdateLayoutEffect } from 'ahooks';
+import { isEqual } from 'lodash';
 var usePromiseState = function usePromiseState(initialState) {
-  var _useResetState = useResetState(initialState),
-    _useResetState2 = _slicedToArray(_useResetState, 3),
-    state = _useResetState2[0],
-    setState = _useResetState2[1],
-    resetState = _useResetState2[2];
+  var _useHistoryTravel = useHistoryTravel(initialState),
+    value = _useHistoryTravel.value,
+    setValue = _useHistoryTravel.setValue,
+    backLength = _useHistoryTravel.backLength,
+    forwardLength = _useHistoryTravel.forwardLength,
+    back = _useHistoryTravel.back,
+    forward = _useHistoryTravel.forward;
   var promiseRef = useRef(null);
-  var setStatePromise = useCallback(function (_state) {
+  var setStatePromise = useCallback(function (_value) {
     return new Promise(function (resolve) {
       promiseRef.current = resolve;
-      console.log('_state', _state);
-      setState(_state);
+      var _valStr = JSON.stringify(_value);
+      if (!isEqual(value, _valStr)) {
+        setValue(_valStr);
+      }
     });
   }, []);
-  useDeepCompareEffect(function () {
+  useUpdateLayoutEffect(function () {
     if (promiseRef.current) {
-      promiseRef.current(state);
+      promiseRef.current(JSON.parse(value));
       promiseRef.current = null;
     }
-  }, [state]);
-  return [state, setStatePromise, resetState];
+  }, [value]);
+  return [JSON.parse(value), setStatePromise, {
+    backLength: backLength - 1,
+    forwardLength: forwardLength,
+    back: back,
+    forward: forward
+  }];
 };
 export default usePromiseState;

package/es/lowcode/painter/Design.js

@@ -1,9 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useState } from 'react';
-import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
+import React, { useRef, useState, useEffect } from 'react';
+import { RawIntlProvider, getLocale, getIntl, localeInfo, history } from 'umi';
 import { useMemoizedFn } from 'ahooks';
 import moment from 'moment';
 import { ConfigProvider } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useRemoteSource } from "../engine/provider/ContextProvider";
 import DesignToolbar from "./DesignToolbar";
 import DesignOperator from "./DesignOperator";
 import Page from "../view/Page";
@@ -11,6 +13,7 @@ import styles from "./style/design.less";
 var Design = function Design() {
   var _localeInfo$locale;
   var simulatorRef = useRef(null);
+  var remoteSource = useRemoteSource();
   var _useState = useState(function () {
       return getLocale();
     }),
@@ -23,6 +26,35 @@ var Design = function Design() {
     _useState4 = _slicedToArray(_useState3, 2),
     intl = _useState4[0],
     setIntl = _useState4[1];
+  var unblock = useMemoizedFn(function () {
+    if (remoteSource.backLength > 0) return confirm("".concat(formatMessage({
+      id: 'app.base.operate.comfire.leave',
+      label: '离开当前页面？'
+    }), "\n").concat(formatMessage({
+      id: 'app.base.operate.comfire.message.leave',
+      label: '系统可能不会保存您所做的更改。'
+    })));
+    return true;
+  });
+  var handleBeforeUnload = useMemoizedFn(function (event) {
+    if (remoteSource.backLength > 0) {
+      event.preventDefault();
+      event.returnValue = null;
+      return null;
+    }
+  });
+  useEffect(function () {
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    history.block(function () {
+      return unblock();
+    });
+    return function () {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      history.block(function () {
+        return true;
+      });
+    };
+  }, []);
   var handleLangChange = useMemoizedFn(function (_locale) {
     if (moment !== null && moment !== void 0 && moment.locale) {
       var _localeInfo$_locale;

package/es/lowcode/painter/DesignOperator.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import { last, initial } from 'lodash';
 import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
 import { Icon, Dropdown, message } from 'luck-design/antd';
-import { cloneDeep, reverse } from 'lodash';
+import { reverse } from 'lodash';
 import { suid } from '@luck-design-biz/base/utils';
 import { useContext, usePageData } from "../engine/provider/ContextProvider";
 import { add, deleteById } from "../engine/tools/dataProcess";
@@ -71,21 +71,20 @@ var DesignOperator = function DesignOperator(_ref) {
   var addComponent = useMemoizedFn(function (data, targetId) {
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
     var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
-    var cloneData = cloneDeep(pageData);
-    add(cloneData, targetId, _id, json);
+    add(pageData, targetId, _id, json);
     context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
       var mountCompId = _ref3.id;
       if (mountCompId === _id) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id,
-          pageData: cloneData
+          pageData: pageData
         });
         context.$publisher(context.topics.COMPONENT_ACTIVE, {
           id: _id
         });
       }
     }).watch();
-    setPageData(cloneData);
+    setPageData(pageData);
   });
   var acticeProps = useCreation(function () {
     if (!operatorId.selector) return null;
@@ -231,9 +230,8 @@ var DesignOperator = function DesignOperator(_ref) {
       if (lastSelectorId.current === id) {
         context.$publisher(context.topics.COMPONENT_ACTIVE, null);
       }
-      var cloneData = cloneDeep(pageData);
-      deleteById(cloneData, id);
-      setPageData(cloneData);
+      deleteById(pageData, id);
+      setPageData(pageData);
     });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);

package/es/lowcode/painter/DesignToolbar.js

@@ -1,24 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["key", "label"];
 import React, { useRef, useEffect, useState } from 'react';
+import { useLocation } from 'umi';
 import classNames from 'classnames';
-import { useMemoizedFn } from 'ahooks';
-import { Select, Button, Icon, Divider, Modal, message } from 'luck-design/antd';
+import { useMemoizedFn, useRequest, useDebounceFn, useCookieState } from 'ahooks';
+import { Select, Button, Icon, Divider, Modal, message, Drawer } from 'luck-design/antd';
 import { showPop, formatMessage } from '@luck-design-biz/base/utils';
 import { useContext, usePageData, useRemoteSource } from "../engine/provider/ContextProvider";
 import JsonEditor from "../painter/components/code-editor/JsonEditor";
-import { LC_BUILDIN_UNIT_KEY } from "../constants";
-import { updatePageData } from "./services/toolbar";
+import Preview from "../preview";
+import { LC_BUILDIN_UNIT_KEY, COOKIE_VIRTUAL_ACCOUNT_KEY } from "../constants";
 import styles from "./style/design.less";
+import { fetchClearCache, fetchUpdatePageData } from "../constants/api-url";
+import { readAllUser } from '@luck-design-biz/base/lib/sys/services';
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
+  var location = useLocation();
   var editorRef = useRef();
   var context = useContext();
   var _usePageData = usePageData(),
     _usePageData2 = _slicedToArray(_usePageData, 2),
     pageData = _usePageData2[0],
-    setPageData = _usePageData2[1].setPageData;
+    _usePageData2$ = _usePageData2[1],
+    setPageData = _usePageData2$.setPageData,
+    back = _usePageData2$.back,
+    forward = _usePageData2$.forward,
+    backLength = _usePageData2$.backLength,
+    forwardLength = _usePageData2$.forwardLength;
   var _ref2 = useRemoteSource() || {},
     pageinfo = _ref2.pageinfo;
   var _useState = useState(null),
@@ -33,6 +48,29 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     show = _useState6[0],
     setShow = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showPreview = _useState8[0],
+    setShowPreview = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    userOptions = _useState10[0],
+    setUserOptions = _useState10[1];
+  var _useCookieState = useCookieState(COOKIE_VIRTUAL_ACCOUNT_KEY),
+    _useCookieState2 = _slicedToArray(_useCookieState, 2),
+    userId = _useCookieState2[0],
+    setUserId = _useCookieState2[1];
+  var _useRequest = useRequest(fetchClearCache, {
+      manual: true
+    }),
+    clearCacheLoading = _useRequest.loading,
+    runClearCache = _useRequest.run;
+  var _useRequest2 = useRequest(fetchUpdatePageData, {
+      manual: true,
+      debounceWait: 300
+    }),
+    updatePageDataLoading = _useRequest2.loading,
+    runAsync = _useRequest2.runAsync;
   useEffect(function () {
     var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
       var _langList = _ref3.langList;
@@ -42,20 +80,57 @@ var DesignToolbar = function DesignToolbar(_ref) {
       return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
     };
   }, []);
-  var handleSave = useMemoizedFn(function () {
+  useEffect(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
+  var handleSave = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _pageinfo$relationshi;
-    updatePageData({}, {
-      pageData: JSON.stringify(pageData),
-      pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
-    }).then(function (_ref4) {
-      var code = _ref4.code;
-      if (code === 1) {
-        showPop(formatMessage({
-          id: 'app.base.tip.operate.success'
-        }), null, 'success');
+    var _yield$runAsync, code;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return runAsync({
+            pageData: JSON.stringify(pageData),
+            pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+          });
+        case 2:
+          _yield$runAsync = _context.sent;
+          code = _yield$runAsync.code;
+          if (code === 1) {
+            showPop(formatMessage({
+              id: 'app.base.tip.operate.success'
+            }), null, 'success');
+          }
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var handleClearCache = useMemoizedFn(function () {
+    Modal.confirm({
+      title: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.clear.tip',
+        label: '清除提示'
+      }),
+      content: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.clear',
+        label: '确定清除当前页面及模块缓存么？'
+      }),
+      getContainer: function getContainer() {
+        return document.getElementById('lc-design-workspace');
+      },
+      zIndex: 3000,
+      onOk: function onOk() {
+        return runClearCache({
+          moduleCode: pageinfo.relationship.moduleCode
+        });
       }
     });
-  }, []);
+  });
   var handleOk = useMemoizedFn(function () {
     var code = editorRef.current.editor.getValue();
     try {
@@ -69,6 +144,43 @@ var DesignToolbar = function DesignToolbar(_ref) {
       }));
     }
   });
+  var _useDebounceFn = useDebounceFn( /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value) {
+        var _yield$readAllUser, code, list, detail;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return readAllUser({
+                sname: value
+              });
+            case 2:
+              _yield$readAllUser = _context2.sent;
+              code = _yield$readAllUser.code;
+              list = _yield$readAllUser.list;
+              detail = _yield$readAllUser.detail;
+              if (code === 1) {
+                setUserOptions(list.map(function (id) {
+                  var item = detail[id];
+                  return _objectSpread(_objectSpread({}, item), {}, {
+                    key: "".concat(item.indocno),
+                    label: item.sname
+                  });
+                }));
+              }
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x) {
+        return _ref5.apply(this, arguments);
+      };
+    }(), {
+      wait: 500
+    }),
+    handleSearch = _useDebounceFn.run;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-toolbar']
   }, /*#__PURE__*/React.createElement(Select, {
@@ -100,6 +212,35 @@ var DesignToolbar = function DesignToolbar(_ref) {
     type: "mobile"
   })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, backLength < 1)),
+    onClick: function onClick() {
+      return backLength > 0 && back();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    style: {
+      transform: 'rotateY(180deg)'
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, forwardLength < 1)),
+    onClick: function onClick() {
+      return forwardLength > 0 && forward();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
   }), /*#__PURE__*/React.createElement("span", {
     style: {
       width: 'auto',
@@ -111,15 +252,35 @@ var DesignToolbar = function DesignToolbar(_ref) {
         id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
-  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.pageAttrs',
+    label: '页面属性'
+  })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
   }), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     style: {
       fontSize: 12,
       margin: '0 4px 0 2px'
+    },
+    loading: clearCacheLoading,
+    onClick: handleClearCache
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.clear',
+    label: '清除缓存'
+  })), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    },
+    onClick: function onClick() {
+      return setShowPreview(true);
     }
-  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Button, {
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.preview',
+    label: '预览'
+  })), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     type: "primary",
     style: {
@@ -132,7 +293,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
       padding: '0 7px'
     },
     onClick: handleSave
-  }, "\u4FDD\u5B58"), /*#__PURE__*/React.createElement("div", {
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.save',
+    label: '保存'
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'inline-block'
     },
@@ -140,7 +304,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       return setShow(true);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
-    type: "eye"
+    type: updatePageDataLoading ? 'loading' : 'eye'
   })))), /*#__PURE__*/React.createElement(Modal, {
     visible: show,
     width: 1024,
@@ -157,6 +321,79 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(JsonEditor, {
     ref: editorRef
-  }, JSON.stringify(pageData, null, '\t'))));
+  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/React.createElement(Drawer, {
+    title: /*#__PURE__*/React.createElement("div", {
+      id: "preview-drawer-header",
+      style: {
+        display: 'flex',
+        height: 54,
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        marginBottom: 0
+      }
+    }, formatMessage({
+      id: 'luckda.lowcode.design.toolbar.pagePreview',
+      label: '页面预览'
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      placeholder: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.selectUser',
+        label: '请选择模拟登录人'
+      }),
+      allowClear: true,
+      style: {
+        width: 180
+      },
+      dropdownStyle: {
+        zIndex: 3100
+      },
+      filterOption: false,
+      labelInValue: true,
+      showSearch: true,
+      getPopupContainer: function getPopupContainer() {
+        return document.getElementById('preview-drawer-header').closest('.ant-drawer-wrapper-body');
+      },
+      onSearch: handleSearch,
+      onChange: function onChange(_, _opt) {
+        if (_opt) {
+          setUserId(_opt.props.sloginid);
+        } else {
+          setUserId(void 0);
+        }
+      }
+    }, userOptions.map(function (_ref6) {
+      var key = _ref6.key,
+        label = _ref6.label,
+        rest = _objectWithoutProperties(_ref6, _excluded);
+      return /*#__PURE__*/React.createElement(Select.Option, _extends({
+        key: key,
+        value: key
+      }, rest), label);
+    })))),
+    placement: "bottom",
+    height: "94vh",
+    footer: false,
+    zIndex: 3000,
+    headerStyle: {
+      padding: '0 48px 0 24px'
+    },
+    bodyStyle: {
+      height: 'calc(100% - 54px)',
+      backgroundColor: '#F0F2F5'
+    },
+    visible: showPreview,
+    destroyOnClose: true,
+    onClose: function onClose() {
+      return setShowPreview(false);
+    },
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(Preview, {
+    code: location.query.code,
+    userId: userId || 'no-user'
+  })));
 };
 export default DesignToolbar;

package/es/lowcode/painter/Panel.js

@@ -5,7 +5,7 @@ import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Breadcrumb } from 'luck-design/antd';
 import classNames from 'classnames';
-import { takeRight, cloneDeep, isNil, reduce, get, set } from 'lodash';
+import { takeRight, isNil, reduce, get, set } from 'lodash';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { useContext, usePageData } from "../engine/provider/ContextProvider";
 import AttrsPanel from "./components/AttrsPanel";
@@ -58,24 +58,23 @@ var Panel = function Panel() {
     }
   }, [activeNode]);
   var handleChange = useMemoizedFn(function (field, value, repositioning) {
-    var cloneData = cloneDeep(pageData);
     if (field === 'enableHeader') {
       if (value) {
         var headerMeta = require("../engine/meta/pageheader.props.default.json");
-        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
+        add(pageData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
           buildIn: true
         }));
       } else {
-        deleteById(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+        deleteById(pageData, LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
       }
     } else if (field === 'enableFooter') {
       if (value) {
         var footerMeta = require("../engine/meta/pagefooter.props.default.json");
-        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
+        add(pageData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
           buildIn: true
         }));
       } else {
-        deleteById(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
+        deleteById(pageData, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
       }
     }
     var component = context.componentMap.get(activeNode.node.id);
@@ -83,11 +82,11 @@ var Panel = function Panel() {
       node = _component$api$getSel.node;
     var oldValue = _defineProperty({}, field, get(node.props, field));
     var newNodeData = set(node.props, field, value);
-    modifyById(cloneData, activeNode.node.id, newNodeData);
-    setPageData(cloneData).then(function (newData) {
+    modifyById(pageData, activeNode.node.id, newNodeData);
+    setPageData(pageData).then(function (newData) {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
         id: activeNode.node.id,
-        pageData: cloneDeep(newData),
+        pageData: newData,
         oldValue: oldValue,
         newValue: _defineProperty({}, field, value)
       });

package/es/lowcode/painter/components/AttrsPanel.js

@@ -56,7 +56,7 @@ var AttrsPanel = function AttrsPanel(_ref) {
         props = _ref2.props,
         wrapper = _ref2.wrapper,
         wrapperProps = _ref2.wrapperProps,
-        _next2 = _ref2.next,
+        next = _ref2.next,
         repositioning = _ref2.repositioning,
         rest = _objectWithoutProperties(_ref2, _excluded);
       var Comp = factory.current.getPanelItemFor(startsWith(type, '_') ? 'dynamic' : type, type);
@@ -66,8 +66,8 @@ var AttrsPanel = function AttrsPanel(_ref) {
           key: key,
           field: key,
           label: name,
-          next: _next2 ? function (_dp) {
-            return goNext(_next2, _dp);
+          next: next ? function (_dp) {
+            return goNext(next, _dp);
           } : null,
           defaultCollapsed: defaultValue,
           desc: desc
@@ -78,9 +78,9 @@ var AttrsPanel = function AttrsPanel(_ref) {
         nodeId: value.id,
         key: key,
         defaultValue: isNil(_originalVal) ? defaultValue : _originalVal,
-        next: function next(_dp) {
-          return goNext(_next2, _dp);
-        },
+        next: next !== null && next !== void 0 && next.props ? function (_dp) {
+          return goNext(next, _dp);
+        } : null,
         onChange: function onChange(val) {
           return handleChange(valueKey || key, val, repositioning);
         },

package/es/lowcode/painter/components/DragDrop/DragDropWrapper.js

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { cloneElement, useEffect } from 'react';
+import { useCreation } from 'ahooks';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { useContext } from "../../../engine/provider/ContextProvider";
-import { useCreation } from 'ahooks';
 import { Action } from "./DragDropContext";
 import { NO_DRAGABLE, NO_DROPABLE } from "../../../constants";
 export default function (_ref) {
@@ -33,6 +33,9 @@ export default function (_ref) {
       }
     }),
     setDropRef = _useDroppable.setNodeRef;
+  var _memoListeners = useCreation(function () {
+    return listeners;
+  }, []);
   useEffect(function () {
     var dom = getTargetDom();
     if (dom) {
@@ -41,7 +44,7 @@ export default function (_ref) {
     }
   }, []);
   var comp = useCreation(function () {
-    return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), listeners), attributes));
+    return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), _memoListeners), attributes));
   }, [id, children]);
   return comp;
 }

package/es/lowcode/painter/components/ListEditor.js

@@ -70,7 +70,8 @@ export var ListEditorItem = function ListEditorItem(_ref2) {
     _ref2$sortable = _ref2.sortable,
     sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
     transform = _ref2.transform,
-    transition = _ref2.transition;
+    transition = _ref2.transition,
+    onAddLine = _ref2.onAddLine;
   return /*#__PURE__*/React.createElement("div", {
     ref: setNodeRef,
     style: style,
@@ -94,5 +95,10 @@ export var ListEditorItem = function ListEditorItem(_ref2) {
     d: "M0.499972716,6 L1.50002728,6 C1.77615459,6 2,6.22384541 2,6.49997272 C2,6.77610002 1.77615459,6.99994543 1.50002728,6.99994543 L0.499972716,6.99994543 C0.22384541,6.99994543 3.38158422e-17,6.77610002 0,6.49997272 C-3.38158422e-17,6.22384541 0.22384541,6 0.499972716,6 Z M0.499972716,3 L1.50002728,3 C1.77615459,3 2,3.22384541 2,3.49997272 C2,3.77610002 1.77615459,3.99994543 1.50002728,3.99994543 L0.499972716,3.99994543 C0.22384541,3.99994543 3.38158422e-17,3.77610002 0,3.49997272 C-3.38158422e-17,3.22384541 0.22384541,3 0.499972716,3 Z M0.499972716,7.28787148e-18 L1.50002728,5.55666624e-14 C1.77615459,7.07214574e-14 2,0.22384541 2,0.499972716 C2,0.776100022 1.77615459,0.999945432 1.50002728,0.999945432 L0.499972716,0.999945432 C0.22384541,0.999945432 3.38158422e-17,0.776100022 0,0.499972716 C-3.38158422e-17,0.22384541 0.22384541,5.0723721e-17 0.499972716,0 Z M0.5,9.00002729 L1.5,9.00002729 C1.77614237,9.00002729 2,9.22388491 2,9.50002729 C2,9.77616966 1.77614237,10.0000273 1.5,10.0000273 L0.5,10.0000273 C0.223857625,10.0000273 3.38176876e-17,9.77616966 0,9.50002729 C-3.38176876e-17,9.22388491 0.223857625,9.00002729 0.5,9.00002729 Z M0.5,12.0000273 L1.5,12.0000273 C1.77614237,12.0000273 2,12.2238849 2,12.5000273 C2,12.7761697 1.77614237,13.0000273 1.5,13.0000273 L0.5,13.0000273 C0.223857625,13.0000273 3.38176876e-17,12.7761697 0,12.5000273 C-3.38176876e-17,12.2238849 0.223857625,12.0000273 0.5,12.0000273 Z M0.5,15.0000273 L1.5,15.0000273 C1.77614237,15.0000273 2,15.2238849 2,15.5000273 C2,15.7761697 1.77614237,16.0000273 1.5,16.0000273 L0.5,16.0000273 C0.223857625,16.0000273 3.38176876e-17,15.7761697 0,15.5000273 C-3.38176876e-17,15.2238849 0.223857625,15.0000273 0.5,15.0000273 Z M3.49997272,6 L4.50002728,6 C4.77615459,6 5,6.22384541 5,6.49997272 C5,6.77610002 4.77615459,6.99994543 4.50002728,6.99994543 L3.49997272,6.99994543 C3.22384541,6.99994543 3,6.77610002 3,6.49997272 C3,6.22384541 3.22384541,6 3.49997272,6 Z M3.49997272,3 L4.50002728,3 C4.77615459,3 5,3.22384541 5,3.49997272 C5,3.77610002 4.77615459,3.99994543 4.50002728,3.99994543 L3.49997272,3.99994543 C3.22384541,3.99994543 3,3.77610002 3,3.49997272 C3,3.22384541 3.22384541,3 3.49997272,3 Z M3.49997272,7.28787148e-18 L4.50002728,5.55666624e-14 C4.77615459,7.07214574e-14 5,0.22384541 5,0.499972716 C5,0.776100022 4.77615459,0.999945432 4.50002728,0.999945432 L3.49997272,0.999945432 C3.22384541,0.999945432 3,0.776100022 3,0.499972716 C3,0.22384541 3.22384541,5.0723721e-17 3.49997272,0 Z M3.5,9.00002729 L4.5,9.00002729 C4.77614237,9.00002729 5,9.22388491 5,9.50002729 C5,9.77616966 4.77614237,10.0000273 4.5,10.0000273 L3.5,10.0000273 C3.22385763,10.0000273 3,9.77616966 3,9.50002729 C3,9.22388491 3.22385763,9.00002729 3.5,9.00002729 Z M3.5,12.0000273 L4.5,12.0000273 C4.77614237,12.0000273 5,12.2238849 5,12.5000273 C5,12.7761697 4.77614237,13.0000273 4.5,13.0000273 L3.5,13.0000273 C3.22385763,13.0000273 3,12.7761697 3,12.5000273 C3,12.2238849 3.22385763,12.0000273 3.5,12.0000273 Z M3.5,15.0000273 L4.5,15.0000273 C4.77614237,15.0000273 5,15.2238849 5,15.5000273 C5,15.7761697 4.77614237,16.0000273 4.5,16.0000273 L3.5,16.0000273 C3.22385763,16.0000273 3,15.7761697 3,15.5000273 C3,15.2238849 3.22385763,15.0000273 3.5,15.0000273 Z"
   }))), left), /*#__PURE__*/React.createElement("div", {
     className: styles['list-item-right']
-  }, right));
+  }, right), onAddLine ? /*#__PURE__*/React.createElement("div", {
+    className: styles['list-item-bottom-line'],
+    onClick: function onClick() {
+      return onAddLine(item);
+    }
+  }) : null);
 };