@luck-design-biz/luckda 1.0.2-1 → 1.0.2-10

package/lib/lowcode/painter/History.js

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _luckDesign = require("luck-design");
+var _moment = _interopRequireDefault(require("moment"));
+var _lodash = require("lodash");
+var _base = require("@luck-design-biz/base");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _TipIcon = _interopRequireDefault(require("./components/TipIcon"));
+var _DiffEditor = _interopRequireDefault(require("./components/code-editor/DiffEditor"));
+var _utils = require("@luck-design-biz/base/utils");
+var _helper = require("../engine/tools/helper");
+var _dataProcess = require("../engine/tools/dataProcess");
+var _history = _interopRequireDefault(require("./style/history.less"));
+var _apiUrl = require("../constants/api-url");
+var History = function History(_ref) {
+  var form = _ref.form;
+  var ref = (0, _react.useRef)();
+  var editorRef = (0, _react.useRef)();
+  var versionListRef = (0, _react.useRef)(null);
+  var ctx = (0, _ContextProvider.useContext)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    versionList = _useState2[0],
+    setVersionList = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    version = _useState4[0],
+    setVersion = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var _useInViewport = (0, _ahooks.useInViewport)(ref),
+    _useInViewport2 = (0, _slicedToArray2.default)(_useInViewport, 1),
+    inViewport = _useInViewport2[0];
+  var pageData = (0, _ContextProvider.useGet)();
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchHistoryVersionList, {
+      manual: true,
+      onSuccess: function onSuccess(_ref2) {
+        var code = _ref2.code,
+          list = _ref2.list,
+          detail = _ref2.detail;
+        if (code === 1) {
+          versionListRef.current = list.map(function (id) {
+            return detail[id];
+          });
+          setVersionList(versionListRef.current);
+        }
+      }
+    }),
+    loading = _useRequest.loading,
+    runFetchHistoryVersionList = _useRequest.run;
+  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchAddHistoryVersion, {
+      manual: true,
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code;
+        if (code === 1) {
+          setVisible(false);
+          runFetchHistoryVersionList({
+            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
+          });
+        }
+      }
+    }),
+    addLoading = _useRequest2.loading,
+    runFetchAddHistoryVersion = _useRequest2.run;
+  var _useRequest3 = (0, _ahooks.useRequest)(_apiUrl.fetchDelHistoryVersion, {
+      manual: true,
+      onSuccess: function onSuccess(_ref4) {
+        var code = _ref4.code;
+        if (code === 1) {
+          runFetchHistoryVersionList({
+            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
+          });
+        }
+      }
+    }),
+    deleteLoading = _useRequest3.loading,
+    runFetchDelHistoryVersion = _useRequest3.run;
+  var _useRequest4 = (0, _ahooks.useRequest)(_apiUrl.fetchRecoverHistoryVersion, {
+      manual: true,
+      onSuccess: function onSuccess(_ref5) {
+        var code = _ref5.code;
+        return code === 1 && window.location.reload();
+      }
+    }),
+    runFetchRecoverHistoryVersion = _useRequest4.run;
+  var handleSearch = (0, _ahooks.useMemoizedFn)(function (value) {
+    if ((0, _lodash.isNil)(value)) {
+      setVersionList(versionListRef.current);
+    } else {
+      setVersionList(versionListRef.current.filter(function (item) {
+        return JSON.stringify(item).includes(value);
+      }));
+    }
+  });
+  var handleAddVersion = (0, _ahooks.useMemoizedFn)(function () {
+    form.validateFields(function (err, values) {
+      if (!err) {
+        runFetchAddHistoryVersion({
+          pageCode: (0, _helper.getLDMetaAttr)('pageCode'),
+          backupName: values.title,
+          backupNote: values.note
+        });
+      }
+    });
+  });
+  var handleDeleteVersion = (0, _ahooks.useMemoizedFn)(function (item) {
+    (0, _base.recheck)({
+      title: "".concat((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.version.delete',
+        label: '你确定要删除该历史版本吗？'
+      })),
+      checkWords: "".concat(item.backupName, "(").concat(item.backupUserName, ")"),
+      cancelText: (0, _utils.formatMessage)({
+        id: 'app.base.operate.cancel'
+      }),
+      okText: (0, _utils.formatMessage)({
+        id: 'app.base.operate.ok'
+      }),
+      onOk: function onOk() {
+        runFetchDelHistoryVersion({
+          uid: item.id
+        });
+      }
+    });
+  });
+  var handleRecoverVersion = (0, _ahooks.useMemoizedFn)(function () {
+    (0, _base.recheck)({
+      title: "".concat((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.version.confirm.recover',
+        label: '你确定要还原到该历史版本吗？'
+      })),
+      checkWords: "".concat(version.backupName, "(").concat(version.backupUserName, ")"),
+      cancelText: (0, _utils.formatMessage)({
+        id: 'app.base.operate.cancel'
+      }),
+      okText: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.version.recover',
+        label: '还原版本'
+      }),
+      onOk: function onOk() {
+        return runFetchRecoverHistoryVersion({
+          uid: version.id
+        });
+      }
+    });
+  });
+  var handleUseVersion = (0, _ahooks.useMemoizedFn)(function () {
+    var code = editorRef.current.getModel().modified.getValue();
+    try {
+      var data = JSON.parse(code);
+      (0, _ContextProvider.resetPageData)(data);
+      setVersion(null);
+    } catch (e) {
+      console.error(e);
+      message.warning((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  (0, _react.useEffect)(function () {
+    if (inViewport) {
+      runFetchHistoryVersionList({
+        pageCode: (0, _helper.getLDMetaAttr)('pageCode')
+      });
+    }
+  }, [inViewport]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: _history.default['lc-painter-history']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _history.default.historyToolbar
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input.Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.placeholder.search',
+      label: '请输入查询内容'
+    }),
+    size: "small",
+    onSearch: handleSearch
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    icon: "plus",
+    size: "small",
+    style: {
+      marginLeft: '8px',
+      flexShrink: 0
+    },
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: loading || deleteLoading
+  }, /*#__PURE__*/_react.default.createElement(_antd.Timeline, null, versionList.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Timeline.Item, {
+      className: _history.default.timelineItem
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _history.default.timelineItemHeader
+    }, /*#__PURE__*/_react.default.createElement("div", null, item.backupName), /*#__PURE__*/_react.default.createElement("div", {
+      className: _history.default.timelineItemActions
+    }, /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      title: (0, _utils.formatMessage)({
+        id: 'app.base.operate.delete',
+        label: '删除'
+      }),
+      type: "delete",
+      style: {
+        color: 'var(--luck-color-danger)',
+        marginRight: 8
+      },
+      onClick: function onClick() {
+        return handleDeleteVersion(item);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.version.diff',
+        label: '差异比对'
+      }),
+      type: "swap",
+      onClick: function onClick() {
+        ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, null);
+        setVersion(item);
+      }
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: _history.default.timelineItemUser
+    }, /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+      style: {
+        backgroundColor: 'var(--luck-ant-colorful-primary)',
+        verticalAlign: 'middle',
+        marginRight: '8px'
+      }
+    }, item.backupUserName.slice(-1)), item.backupUserName), /*#__PURE__*/_react.default.createElement("div", {
+      className: _history.default.timelineItemTime
+    }, (0, _moment.default)(item.backupTime).fromNow()));
+  })))), /*#__PURE__*/_react.default.createElement(_luckDesign.LuckModal, {
+    title: "".concat(version === null || version === void 0 ? void 0 : version.backupName, "(").concat(version === null || version === void 0 ? void 0 : version.backupUserName, ") \u21CB \u5F53\u524D\u7248\u672C"),
+    width: "80vw",
+    height: "80vh",
+    visible: !(0, _lodash.isNil)(version),
+    fullScreen: true,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    okText: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.recover',
+      label: '还原版本'
+    }),
+    cancelText: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.use',
+      label: '使用'
+    }),
+    cancelButtonProps: {
+      onClick: handleUseVersion
+    },
+    onOk: handleRecoverVersion,
+    onClose: function onClose() {
+      return setVersion(null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DiffEditor.default, {
+    ref: editorRef,
+    language: "json",
+    originalCode: version ? JSON.stringify((0, _dataProcess.decompress)(version === null || version === void 0 ? void 0 : version.pageData), null, '\t') : '',
+    modifiedCode: JSON.stringify(pageData, null, '\t')
+  })), /*#__PURE__*/_react.default.createElement(_luckDesign.LuckModal, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.add',
+      label: '添加到历史版本'
+    }),
+    size: "small",
+    visible: visible,
+    okButtonProps: {
+      loading: addLoading
+    },
+    onOk: handleAddVersion,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form, null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, form.getFieldDecorator('title', {
+    rules: [{
+      required: true
+    }]
+  })( /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.placeholder.title',
+      label: '请输入版本标题'
+    })
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, form.getFieldDecorator('note')( /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+    rows: 6,
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.version.placeholder.note',
+      label: '请输入版本描述'
+    })
+  }))))));
+};
+var _default = exports.default = _antd.Form.create({
+  name: 'version_form'
+})(History);

package/lib/lowcode/painter/Panel.js

@@ -117,7 +117,7 @@ var Panel = function Panel() {
         oldValue: oldValue,
         newValue: newValue
       });
-      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+      if (repositioning || field === 'css') context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
         id: _id
       });
     });

package/lib/lowcode/painter/Ribbon.js

@@ -15,6 +15,7 @@ var _antd = require("luck-design/antd");
 var _Outline = _interopRequireDefault(require("./Outline"));
 var _Components = _interopRequireDefault(require("./Components"));
 var _I18n = _interopRequireDefault(require("./I18n"));
+var _History = _interopRequireDefault(require("./History"));
 var _utils = require("@luck-design-biz/base/utils");
 var _expect = _interopRequireDefault(require("./expect"));
 var _ribbon = _interopRequireDefault(require("./style/ribbon.less"));
@@ -55,6 +56,12 @@ var _DRAWER_I18N_ = {
   title: '多语言文案管理',
   fix: false
 };
+var _DRAWER_HISTORY_ = {
+  width: 240,
+  key: 'history',
+  title: '版本历史',
+  fix: false
+};
 var Ribbon = function Ribbon() {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -114,6 +121,21 @@ var Ribbon = function Ribbon() {
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
     }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "right",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.history',
+      label: _DRAWER_HISTORY_.title
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "history",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_HISTORY_.key && '#1d79f2',
+      fontSize: 20
+    },
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_HISTORY_.key ? null : _DRAWER_HISTORY_);
+    }
   }))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
     title: drawer ? (0, _utils.formatMessage)({
       id: "luckda.lowcode.".concat(drawer.key),
@@ -158,6 +180,20 @@ var Ribbon = function Ribbon() {
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _DRAWER_PROPS.style), {}, {
       display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? 'block' : 'none'
     })
-  }), /*#__PURE__*/_react.default.createElement(_expect.default, null)));
+  }), /*#__PURE__*/_react.default.createElement(_expect.default, null)), /*#__PURE__*/_react.default.createElement(_antd.Drawer, (0, _extends2.default)({
+    title: drawer ? (0, _utils.formatMessage)({
+      id: "luckda.lowcode.".concat(drawer.key),
+      label: drawer.title
+    }) : '',
+    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
+    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_HISTORY_.key,
+    onClose: function onClose() {
+      return setDrawer(null);
+    }
+  }, _DRAWER_PROPS, {
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _DRAWER_PROPS.style), {}, {
+      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_HISTORY_.key ? 'block' : 'none'
+    })
+  }), /*#__PURE__*/_react.default.createElement(_History.default, null)));
 };
 var _default = exports.default = Ribbon;

package/lib/lowcode/painter/components/AdvancePanel.js

@@ -18,10 +18,7 @@ var _lodash = require("lodash");
 var _ContextProvider = require("../../engine/provider/ContextProvider");
 var _utils = require("@luck-design-biz/base/utils");
 var _Collapse = _interopRequireDefault(require("./Collapse"));
-var _PopConfirm = _interopRequireDefault(require("./PopConfirm"));
-var _FullScreenEditor = _interopRequireDefault(require("./code-editor/FullScreenEditor"));
-var _JSEditor = _interopRequireDefault(require("./code-editor/JSEditor"));
-var _ActionBindModal = _interopRequireDefault(require("./ActionBindModal"));
+var _JSEditor = _interopRequireDefault(require("../panel-section/JSEditor"));
 var _constants = require("../../constants");
 var _excluded = ["events"],
   _excluded2 = ["events"],
@@ -34,11 +31,12 @@ var EventItem = _styledComponents.default.div.withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #e5e6e8;border-radius:6px;margin-bottom:6px;font-size:12px;i{color:rgba(0,0,0,0.4);cursor:pointer;}i:not(:last-child){margin-right:6px;}"]);
 var _DEFAULT_FUNC_ = 'function isTrue() {\n return true; \n}';
 var AdvancePanel = function AdvancePanel(_ref) {
-  var _value$render2;
+  var _value$render2, _Map$get;
   var meta = _ref.meta,
     nodeId = _ref.nodeId,
     target = _ref.target,
     onChange = _ref.onChange;
+  var jseditorTrigger = (0, _react.useRef)(null);
   var value = (0, _ContextProvider.useGet)((0, _lodash.isNil)(target) ? {
     id: nodeId,
     path: 'props.advance'
@@ -46,7 +44,6 @@ var AdvancePanel = function AdvancePanel(_ref) {
     id: target.ancestorId,
     path: "props.".concat(target.keyPath, ".advance")
   });
-  var editorRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.events) || {}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     events = _useState2[0],
@@ -64,6 +61,7 @@ var AdvancePanel = function AdvancePanel(_ref) {
     setEvent((0, _objectSpread3.default)((0, _objectSpread3.default)({}, payload), {}, {
       actionPool: null
     }));
+    jseditorTrigger.current.show();
   });
   var handleDeleteEvent = (0, _ahooks.useMemoizedFn)(function (ek) {
     var _ref2 = value || {},
@@ -75,25 +73,29 @@ var AdvancePanel = function AdvancePanel(_ref) {
       events: _events
     }));
   });
-  var handleComfirm = (0, _ahooks.useMemoizedFn)(function (actionPool) {
+  var handleComfirm = (0, _ahooks.useMemoizedFn)(function (_code) {
     var _ref3 = value || {},
       events = _ref3.events,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-    var _events = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, events), {}, (0, _defineProperty2.default)({}, event.key, actionPool));
+    var _events = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, events), {}, (0, _defineProperty2.default)({}, event.key, [['coding', {
+      category: 'custom',
+      key: 'coding',
+      code: _code
+    }]]));
     setEvents(_events);
+    setEvent(null);
     onChange((0, _objectSpread3.default)((0, _objectSpread3.default)({}, rest), {}, {
       events: _events
     }));
   });
-  var handleRenderComfirm = (0, _ahooks.useMemoizedFn)(function () {
-    var val = editorRef.current.editor.getValue();
+  var handleRenderComfirm = (0, _ahooks.useMemoizedFn)(function (_code) {
     var _ref4 = value || {},
       render = _ref4.render,
       rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
     onChange((0, _objectSpread3.default)((0, _objectSpread3.default)({}, rest), {}, {
       render: {
         value: (0, _lodash.isNil)(render === null || render === void 0 ? void 0 : render.value) ? true : render.value,
-        code: val
+        code: _code
       }
     }));
   });
@@ -115,14 +117,14 @@ var AdvancePanel = function AdvancePanel(_ref) {
       style: {
         fontSize: 12
       }
-    }, (0, _lodash.reduce)((_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.events, function (ret, event) {
+    }, (0, _lodash.reduce)((_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.events, function (ret, e) {
       var _value$events;
-      if (!(value !== null && value !== void 0 && (_value$events = value.events) !== null && _value$events !== void 0 && _value$events[event.key])) {
+      if (!(value !== null && value !== void 0 && (_value$events = value.events) !== null && _value$events !== void 0 && _value$events[e.key])) {
         ret.push( /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
-          key: event.key,
-          payload: event
+          key: e.key,
+          payload: e
         }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
-          title: event.desc || event.name,
+          title: e.desc || e.name,
           placement: "left",
           getPopupContainer: function getPopupContainer() {
             return document.getElementById('lc-design-workspace');
@@ -132,7 +134,7 @@ var AdvancePanel = function AdvancePanel(_ref) {
             width: '100%',
             fontSize: 12
           }
-        }, event.name))));
+        }, e.name))));
       }
       return ret;
     }, []));
@@ -149,16 +151,9 @@ var AdvancePanel = function AdvancePanel(_ref) {
     suppressIcon: true,
     extraRender: function extraRender() {
       var _value$render;
-      return /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
-        placement: "left",
-        title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
-          ref: editorRef,
-          EditorComponent: _JSEditor.default,
-          width: "600px",
-          height: "400px"
-        }, (value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_),
-        showBtn: true,
-        onConfirm: handleRenderComfirm
+      return /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+        defaultCode: (value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_,
+        onChange: handleRenderComfirm
       }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
         type: "code"
       }));
@@ -186,9 +181,10 @@ var AdvancePanel = function AdvancePanel(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
       type: "edit",
       onClick: function onClick() {
-        return setEvent((0, _objectSpread3.default)((0, _objectSpread3.default)({}, metaMap[ek]), {}, {
+        setEvent((0, _objectSpread3.default)((0, _objectSpread3.default)({}, metaMap[ek]), {}, {
           actionPool: events[ek]
         }));
+        jseditorTrigger.current.show();
       }
     })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
       title: (0, _utils.formatMessage)({
@@ -213,13 +209,10 @@ var AdvancePanel = function AdvancePanel(_ref) {
   }, (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".addEventAction"),
     label: '添加事件动作'
-  })))), /*#__PURE__*/_react.default.createElement(_ActionBindModal.default, {
-    nodeId: nodeId,
-    event: event,
-    onComfirm: handleComfirm,
-    onClose: function onClose() {
-      return setEvent(null);
-    }
+  })))), /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+    trigger: jseditorTrigger,
+    defaultCode: ((_Map$get = new Map(event === null || event === void 0 ? void 0 : event.actionPool).get('coding')) === null || _Map$get === void 0 ? void 0 : _Map$get.code) || (event === null || event === void 0 ? void 0 : event.func),
+    onChange: handleComfirm
   }));
 };
 var _default = exports.default = AdvancePanel;

package/lib/lowcode/painter/components/Collapse.js

@@ -12,32 +12,32 @@ var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _collapse = _interopRequireDefault(require("../style/collapse.less"));
 var _antd = require("luck-design/antd");
-/**
- * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
- * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
- * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
- *
- * @component
- * @example
- * <Collapse
- *   field="exampleField"
- *   label="示例标签"
- *   desc="这是一个用于演示的折叠组件"
- *   defaultCollapsed={true}
- *   next={() => console.log('Custom next function executed')}
- * >
- *   <p>这里是可折叠的内容</p>
- * </Collapse>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
- * @param {string} [props.field] - 与折叠内容相关联的字段名。
- * @param {string} props.label - 折叠区域的标签名称。
- * @param {string} [props.desc] - 关于折叠内容的描述信息。
- * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
- * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
+/**
+ * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
+ * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
+ * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
+ *
+ * @component
+ * @example
+ * <Collapse
+ *   field="exampleField"
+ *   label="示例标签"
+ *   desc="这是一个用于演示的折叠组件"
+ *   defaultCollapsed={true}
+ *   next={() => console.log('Custom next function executed')}
+ * >
+ *   <p>这里是可折叠的内容</p>
+ * </Collapse>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
+ * @param {string} [props.field] - 与折叠内容相关联的字段名。
+ * @param {string} props.label - 折叠区域的标签名称。
+ * @param {string} [props.desc] - 关于折叠内容的描述信息。
+ * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
+ * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/components/ColorInput.js

@@ -17,30 +17,30 @@ var _antd = require("luck-design/antd");
 var _colorInput = _interopRequireDefault(require("../style/color-input.less"));
 var _reactColor = require("react-color");
 var _excluded = ["value", "onChange", "wrapperStyle"];
-/**
- * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
- * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
- * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
- * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
- *
- * @component
- * @example
- * const handleColorChange = (newColor) => {
- *   console.log('Selected color:', newColor);
- * };
- * <ColorInput
- *   value="rgba(255, 0, 0, 0.5)"
- *   onChange={handleColorChange}
- *   wrapperStyle={{ margin: '20px' }}
- * />
- *
- * @param {Object} props - 组件的属性。
- * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
- * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
- * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
- * @param {Object} rest - 传递给 Input 组件的其他属性。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
+/**
+ * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
+ * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
+ * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
+ * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
+ *
+ * @component
+ * @example
+ * const handleColorChange = (newColor) => {
+ *   console.log('Selected color:', newColor);
+ * };
+ * <ColorInput
+ *   value="rgba(255, 0, 0, 0.5)"
+ *   onChange={handleColorChange}
+ *   wrapperStyle={{ margin: '20px' }}
+ * />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
+ * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
+ * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
+ * @param {Object} rest - 传递给 Input 组件的其他属性。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
  */
 var ColorInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,

package/lib/lowcode/painter/components/DragDrop/DragDropContext.js

@@ -54,9 +54,16 @@ function _default(_ref) {
             break;
           case 'add':
             {
-              var compName = fromComp.component.toLowerCase();
-              var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
-              (0, _ContextProvider.moveNode)(null, id, actionSide, "".concat(compName, "_").concat((0, _utils.suid)()), json);
+              ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).once(function () {
+                var compName = fromComp.component.toLowerCase();
+                var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
+                ctx.$publisher(ctx.topics.COMPONENT_SETTING_CLICK, {
+                  data: json
+                });
+              }).watch();
+              ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, {
+                target: id
+              });
             }
             break;
         }