@luck-design-biz/luckda 0.0.25-8 → 0.0.25-9

package/lib/lowcode/painter/DesignOperator.js

@@ -16,26 +16,26 @@ var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
-var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   if (!cellNode) return {};
-  var _page$getBoundingClie = page.getBoundingClientRect(),
-    pageLeft = _page$getBoundingClie.left,
-    pageTop = _page$getBoundingClie.top;
+  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+    pageLeft = _canvas$getBoundingCl.left,
+    pageTop = _canvas$getBoundingCl.top;
   var _cellNode$getBounding = cellNode.getBoundingClientRect(),
     cellNodeLeft = _cellNode$getBounding.left,
     cellNodeTop = _cellNode$getBounding.top;
   return {
     left: "".concat(cellNodeLeft - pageLeft, "px"),
-    top: "".concat(cellNodeTop - pageTop, "px"),
+    top: "".concat(cellNode.offsetTop, "px"),
     width: "".concat(cellNode.offsetWidth, "px"),
     height: "".concat(cellNode.offsetHeight, "px")
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getDomById, _getDomById2;
-  var target = _ref.target;
+  var _getElement, _getElement2;
+  var canvas = _ref.canvas;
   var context = (0, _ContextProvider.useContext)();
-  var size = (0, _ahooks.useSize)(target);
+  var size = (0, _ahooks.useSize)(canvas);
   var _useState = (0, _react.useState)((0, _utils.suid)()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     positionKey = _useState2[0],
@@ -49,18 +49,18 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
   var currentModal = (0, _react.useRef)(null);
-  var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
+  var getElement = (0, _ahooks.useMemoizedFn)(function (_target) {
     var _context$componentMap;
-    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
+    return (0, _lodash.isString)(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
   });
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_target) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
+      target: _target
     } : null);
   });
-  var handleHover = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
+  var handleHover = (0, _ahooks.useMemoizedFn)(function (_target) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
+      target: _target
     } : null);
   });
   var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
@@ -76,9 +76,7 @@ var DesignOperator = function DesignOperator(_ref) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
         });
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: _id
-        });
+        handleSelect(_id);
       }
     }).watch();
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
@@ -87,7 +85,17 @@ var DesignOperator = function DesignOperator(_ref) {
   });
   var acticeProps = (0, _ahooks.useCreation)(function () {
     if (!operatorId.selector) return null;
-    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    var _id = (0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.ancestorId;
+    var levelNodes = context.componentMap.get(_id).api.getLevelNodes();
+    if (operatorId.selectorTarget) {
+      var _operatorId$selectorT = operatorId.selectorTarget,
+        id = _operatorId$selectorT.id,
+        label = _operatorId$selectorT.label;
+      levelNodes.push({
+        id: id,
+        name: label
+      });
+    }
     return {
       props: (0, _lodash.last)(levelNodes),
       menu: /*#__PURE__*/_react.default.createElement("div", {
@@ -109,50 +117,70 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
-  var lastDetectorNode = (0, _ahooks.useCreation)(function () {
-    return operatorId.detector ? (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  var lastDetectorName = (0, _ahooks.useCreation)(function () {
+    var _last;
+    return operatorId.detector && (0, _lodash.isString)(operatorId.detector) ? (_last = (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
   }, [operatorId.detector]);
   (0, _ahooks.useEventListener)('mousemove', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      handleHover(targetFormItem);
+      return;
+    }
     var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
-      setOperatorId({
-        detector: targetCellId
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: targetCellId
-      });
+      handleHover(targetCellId);
     } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   (0, _ahooks.useEventListener)('mouseleave', function () {
     if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   (0, _ahooks.useEventListener)('click', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      var _fieldName = targetFormItem.getAttribute('data-__field');
+      var _fieldLabel = targetFormItem.getAttribute('data-__label');
+      var _masterId = targetFormItem.getAttribute('data-__master');
+      var _ancestorId = targetFormItem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]")).getAttribute('id');
+      var _ancestor = context.componentMap.get(_ancestorId);
+      var ancestorData = _ancestor.api.getSelfData();
+      var blockIndex = ancestorData.props.blocks.findIndex(function (b) {
+        return b.id === _masterId;
+      });
+      var fieldIndex = ancestorData.props.blocks[blockIndex].fields.findIndex(function (f) {
+        return f.field === _fieldName;
+      });
+      var _target = {
+        element: targetFormItem,
+        id: "".concat(_ancestorId, ".").concat(_masterId, ".").concat(_fieldName),
+        field: _fieldName,
+        label: _fieldLabel,
+        masterId: _masterId,
+        ancestorId: _ancestorId,
+        keyPath: "blocks[".concat(blockIndex, "].fields[").concat(fieldIndex, "]")
+      };
+      handleHover();
+      handleSelect(_target);
+      return;
+    }
     var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (!targetCellId || targetCellId === operatorId.selector) return;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: targetCell.id
-    });
+    handleHover();
+    handleSelect(targetCell.id);
   }, {
-    target: target
+    target: canvas
   });
   (0, _react.useEffect)(function () {
     var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
@@ -164,9 +192,7 @@ var DesignOperator = function DesignOperator(_ref) {
             toggle: true,
             id: compId
           });
-          context.$publisher(context.topics.COMPONENT_ACTIVE, {
-            id: compId
-          });
+          handleSelect(compId);
         }).watch();
         addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
@@ -182,23 +208,34 @@ var DesignOperator = function DesignOperator(_ref) {
       addComponent(data, lastSelectorId.current);
     }).watch();
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) setOperatorId({
-        detector: payload.id
+      if (payload.target) setOperatorId({
+        detector: payload.target
       });else setOperatorId({
         detector: null
       });
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (payload.id) {
-        var node = context.componentMap.get(payload.id).api.getSelfData();
-        setOperatorId({
-          selector: payload.id,
-          deletable: !node || node.props.buildIn !== true,
-          detector: null
-        });
+      if (payload.target) {
+        if ((0, _lodash.isString)(payload.target)) {
+          var node = context.componentMap.get(payload.target).api.getSelfData();
+          setOperatorId({
+            selector: payload.target,
+            selectorTarget: null,
+            deletable: !node || node.props.buildIn !== true,
+            detector: null
+          });
+        } else {
+          setOperatorId({
+            selector: payload.target.id,
+            selectorTarget: payload.target,
+            deletable: false,
+            detector: null
+          });
+        }
       } else {
         setOperatorId({
-          selector: null
+          selector: null,
+          selectorTarget: null
         });
       }
     }).watch();
@@ -206,14 +243,14 @@ var DesignOperator = function DesignOperator(_ref) {
       var toggle = _ref6.toggle,
         id = _ref6.id;
       if (toggle && id !== currentModal.current) {
-        target.current.style.setProperty('overflow', 'hidden');
+        canvas.current.style.setProperty('overflow', 'hidden');
         var _modal = context.componentMap.get(id);
         var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
         _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
         _modal.api.doOpen();
         currentModal.current = id;
       } else if (!toggle) {
-        target.current.style.removeProperty('overflow');
+        canvas.current.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);
@@ -225,7 +262,7 @@ var DesignOperator = function DesignOperator(_ref) {
     var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
       var id = _ref7.id;
       if (lastSelectorId.current === id) {
-        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+        handleSelect();
       }
       (0, _ContextProvider.deleteNode)(id);
     });
@@ -248,22 +285,22 @@ var DesignOperator = function DesignOperator(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-detector",
     className: _design.default['lc-painter-design-detector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.detector), 'detector', operatorId.detector)
+    style: getOperatorStyle(canvas.current, getElement(operatorId.detector))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
-      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
+      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
     }
-  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
+  }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-selector",
     key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
     className: _design.default['lc-painter-design-selector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.selector), 'selector', operatorId.selector)
+    style: getOperatorStyle(canvas.current, getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
   }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-borders-actions'],
     style: acticeProps.props.id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
       top: 0
-    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+    } : ((_getElement2 = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
       bottom: '-23px'
     } : {
       top: '-23px'

package/lib/lowcode/painter/DesignToolbar.js

@@ -25,6 +25,7 @@ var _preview = _interopRequireDefault(require("../preview"));
 var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _apiUrl = require("../constants/api-url");
+var _helper = require("../engine/tools/helper");
 var _services = require("@luck-design-biz/base/lib/sys/services");
 var _excluded = ["key", "label"];
 var DesignToolbar = function DesignToolbar(_ref) {
@@ -34,8 +35,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
   var editorRef = (0, _react.useRef)();
   var context = (0, _ContextProvider.useContext)();
   var pageData = (0, _ContextProvider.useGet)();
-  var _ref2 = (0, _ContextProvider.useRemoteSource)() || {},
-    pageinfo = _ref2.pageinfo;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],
@@ -72,8 +71,8 @@ var DesignToolbar = function DesignToolbar(_ref) {
     updatePageDataLoading = _useRequest2.loading,
     runAsync = _useRequest2.runAsync;
   (0, _react.useEffect)(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
-      var _langList = _ref3.langList;
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
+      var _langList = _ref2.langList;
       return setLangList(_langList);
     }).watch();
     return function () {
@@ -86,7 +85,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }
   }, [showPreview]);
   var handleSave = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-    var _pageinfo$relationshi;
     var _yield$runAsync, code;
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -94,7 +92,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
           _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
+            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
           });
         case 2:
           _yield$runAsync = _context.sent;
@@ -126,7 +124,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
       zIndex: 3000,
       onOk: function onOk() {
         return runClearCache({
-          moduleCode: pageinfo.relationship.moduleCode
+          moduleCode: (0, _helper.getLDMetaAttr)('moduleCode')
         });
       }
     });
@@ -146,7 +144,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }
   });
   var _useDebounceFn = (0, _ahooks.useDebounceFn)( /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
         var _yield$readAllUser, code, list, detail;
         return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -176,7 +174,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
         }, _callee2);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }(), {
       wait: 500
@@ -221,7 +219,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: _design.default['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+        target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
   }, (0, _utils.formatMessage)({
@@ -335,10 +333,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
           setUserId(void 0);
         }
       }
-    }, userOptions.map(function (_ref6) {
-      var key = _ref6.key,
-        label = _ref6.label,
-        rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+    }, userOptions.map(function (_ref5) {
+      var key = _ref5.key,
+        label = _ref5.label,
+        rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
       return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
         key: key,
         value: key

package/lib/lowcode/painter/Outline.js

@@ -48,18 +48,22 @@ var Outline = function Outline(_ref) {
   var lastPageExpandedKeysRef = (0, _ahooks.useLatest)(pageExpandedKeys);
   (0, _react.useEffect)(function () {
     var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
-      setSelectedKey(payload.id);
+      if (!(0, _lodash.isString)(payload.target)) {
+        setSelectedKey(null);
+        return;
+      }
+      setSelectedKey(payload.target);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/'),
+      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/'),
         _split2 = (0, _slicedToArray2.default)(_split, 1),
         _root = _split2[0];
       if (!_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
-        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/')))));
+        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
       } else {
-        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/')))));
+        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
       }
     }).watch();
     return function () {
@@ -69,7 +73,7 @@ var Outline = function Outline(_ref) {
   var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     clickBySelf.current = true;
     ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+      target: _key
     } : null);
   });
   var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {

package/lib/lowcode/painter/Panel.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -42,6 +43,7 @@ var _TAB_LIST_ = [{
   key: 'advance'
 }];
 var Panel = function Panel() {
+  var _activeNode$$target;
   var activeTabRef = (0, _react.useRef)(null);
   var underLineRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
@@ -55,8 +57,24 @@ var Panel = function Panel() {
   var context = (0, _ContextProvider.useContext)();
   var task = (0, _ContextProvider.useTask)('modify');
   var meta = (0, _ahooks.useCreation)(function () {
+    if ((0, _lodash.isNil)(activeNode)) return null;
     try {
-      return (0, _lodash.isNil)(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+      var _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+      if (!(0, _lodash.isNil)(activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target)) {
+        var setValueKey = function setValueKey(items) {
+          items.forEach(function (item) {
+            if (item.next) {
+              setValueKey(item.next.props);
+            } else if (item.props) {
+              setValueKey(item.props);
+            } else {
+              item.valueKey = "".concat(activeNode.$target.keyPath, ".").concat(item.key);
+            }
+          });
+        };
+        setValueKey(_meta.props);
+      }
+      return _meta;
     } catch (e) {
       return null;
     }
@@ -84,41 +102,59 @@ var Panel = function Panel() {
         (0, _ContextProvider.deleteNode)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
       }
     }
-    var component = context.componentMap.get(activeNode.node.id);
+    var targetId = (0, _lodash.isNil)(activeNode.$target) ? activeNode.node.id : activeNode.$target.ancestorId;
+    var component = context.componentMap.get(targetId);
     var node = component.api.getSelfData();
     var oldValue = (0, _defineProperty2.default)({}, field, (0, _lodash.get)(node.props, field));
     var newValue = (0, _defineProperty2.default)({}, field, value);
     if (before) {
       before(handleChange);
     }
-    task(activeNode.node.id, newValue).then(function (a, b) {
+    task(targetId, newValue).then(function () {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
-        id: activeNode.node.id,
+        id: targetId,
         oldValue: oldValue,
         newValue: newValue
       });
       if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
-        id: activeNode.node.id
+        id: targetId
       });
     });
   });
   (0, _react.useEffect)(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+    var tid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       setActiveTabKey('attrs');
-      if (!payload.id) {
+      if (!payload.target) {
         setActiveNode(null);
         return;
       }
-      var component = context.componentMap.get(payload.id);
-      var node = component.api.getSelfData();
-      var levelNodes = (0, _lodash.takeRight)(component.api.getLevelNodes(), 4);
-      setActiveNode({
-        node: node.props,
-        level: levelNodes
-      });
+      if ((0, _lodash.isString)(payload.target)) {
+        var component = context.componentMap.get(payload.target);
+        var node = component.api.getSelfData();
+        var levelNodes = (0, _lodash.takeRight)(component.api.getLevelNodes(), 4);
+        setActiveNode({
+          node: node.props,
+          level: levelNodes
+        });
+      } else {
+        var _component = payload.target.element.getAttribute('data-__component');
+        var ancestor = context.componentMap.get(payload.target.ancestorId);
+        var _levelNodes = (0, _lodash.takeRight)(ancestor.api.getLevelNodes(), 3);
+        setActiveNode({
+          node: {
+            id: payload.target.id,
+            component: _component
+          },
+          level: [].concat((0, _toConsumableArray2.default)(_levelNodes), [{
+            id: payload.target.id,
+            name: payload.target.label
+          }]),
+          $target: payload.target
+        });
+      }
     }).watch();
     return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, tid);
     };
   }, []);
   (0, _react.useLayoutEffect)(function () {
@@ -142,7 +178,7 @@ var Panel = function Panel() {
       onMouseEnter: function onMouseEnter() {
         if (id === activeNode.node.id) return;
         context.$publisher(context.topics.COMPONENT_HOVER, {
-          id: id
+          target: id
         });
       },
       onMouseLeave: function onMouseLeave() {
@@ -152,7 +188,7 @@ var Panel = function Panel() {
       onClick: function onClick() {
         if (id === activeNode.node.id) return;
         context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: id
+          target: id
         });
       }
     }, name);
@@ -184,6 +220,7 @@ var Panel = function Panel() {
   })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement(_AttrsPanel.default, {
     key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
     nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    ancestorId: activeNode === null || activeNode === void 0 || (_activeNode$$target = activeNode.$target) === null || _activeNode$$target === void 0 ? void 0 : _activeNode$$target.ancestorId,
     meta: meta,
     onChange: function onChange(field, value, params) {
       return handleChange(field, value, params);
@@ -197,9 +234,10 @@ var Panel = function Panel() {
   }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement(_AdvancePanel.default, {
     key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
     nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    target: activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target,
     meta: meta,
     onChange: function onChange(val) {
-      return handleChange('advance', val);
+      return handleChange((0, _lodash.isNil)(activeNode.$target) ? 'advance' : "".concat(activeNode.$target.keyPath, ".advance"), val);
     }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_panel.default['lc-painter-panel-empty'], (0, _defineProperty2.default)({}, _panel.default.hidden, !!activeNode))

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

@@ -40,7 +40,8 @@ var _ACTION_CATEGORY_ = [{
 var _DEFAULT_JSON_CODE_ = '{"params":{},"data":{}}';
 var _DEFAULT_JS_CODE_ = 'function todo() {\n\n}';
 var ActionBindModal = function ActionBindModal(_ref) {
-  var event = _ref.event,
+  var nodeId = _ref.nodeId,
+    event = _ref.event,
     _ref$defaultCode = _ref.defaultCode,
     defaultCode = _ref$defaultCode === void 0 ? _DEFAULT_JS_CODE_ : _ref$defaultCode,
     onComfirm = _ref.onComfirm,
@@ -104,10 +105,11 @@ var ActionBindModal = function ActionBindModal(_ref) {
   }, [category]);
   (0, _ahooks.useUpdateEffect)(function () {
     if (activeKey) {
+      var _editorRef$current;
       var action = get(activeKey);
-      (action === null || action === void 0 ? void 0 : action.code) && editorRef.current.editor.setValue(action.code);
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.editor.setValue(action === null || action === void 0 ? void 0 : action.code);
     }
-  }, [activeKey]);
+  }, [category, activeKey]);
   (0, _ahooks.useUpdateEffect)(function () {
     setAll(event === null || event === void 0 ? void 0 : event.actionPool);
   }, [event]);
@@ -170,7 +172,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
       marginTop: 0,
       padding: '4px 24px'
     },
-    title: event === null || event === void 0 ? void 0 : event.name,
+    title: "".concat(event === null || event === void 0 ? void 0 : event.name, "(").concat(nodeId, ")"),
     visible: !!event,
     width: "70vw",
     closable: false,
@@ -201,14 +203,17 @@ var ActionBindModal = function ActionBindModal(_ref) {
       onClick: function onClick() {
         setCategory(key);
         if ('custom' === key) {
-          setActiveKey('coding');
-          if (!actionPool.has(key)) {
-            set('coding', {
+          var _activeKey = 'coding';
+          setActiveKey(_activeKey);
+          if (!actionPool.has(_activeKey)) {
+            set(_activeKey, {
               category: key,
-              key: 'coding',
+              key: _activeKey,
               code: event.func || defaultCode
             });
           }
+        } else {
+          setActiveKey(void 0);
         }
       }
     }, label, key === category && /*#__PURE__*/_react.default.createElement(_antd.Icon, {