@luck-design-biz/luckda 1.0.1 → 1.0.2

package/lib/lowcode/painter/DesignToolbar.js

@@ -26,7 +26,20 @@ var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _apiUrl = require("../constants/api-url");
 var _helper = require("../engine/tools/helper");
+var _TipIcon = _interopRequireDefault(require("./components/TipIcon"));
 var _excluded = ["key", "label"];
+var CodeSvg = function CodeSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.4749 9.0916L5.45264 6.20703L5.45439 5.93457V4.69707L0.91748 9.0916L5.45439 13.4844V12.2469L5.45264 11.9744L2.4749 9.0916ZM15.2067 9.00723L12.229 6.12441L12.2272 5.85195V4.61445L16.7642 9.00723L12.2272 13.4018V12.1625L12.229 11.89L15.2067 9.00723ZM8.12451 15.0295H6.76045L9.55713 2.80566H10.9212L8.12451 15.0295Z",
+    fill: "currentColor"
+  }));
+};
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
@@ -233,9 +246,16 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "laptop"
   })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile'))
+    // onClick={() => setActivedTarget('mobile')}
+    ,
     onClick: function onClick() {
-      return setActivedTarget('mobile');
+      _antd.Modal.info({
+        title: (0, _utils.formatMessage)({
+          id: 'luckda.lowcode.not.mobile',
+          label: '此功能暂未开放'
+        })
+      });
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "mobile"
@@ -273,9 +293,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     style: {
       width: 'auto',
-      fontSize: 12
+      fontSize: 12,
+      cursor: 'pointer'
     },
-    className: _design.default['toolbar-item'],
+    className: _design.default.hoverPrimary,
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
         target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
@@ -289,7 +310,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     style: {
-      fontSize: 12,
+      fontSize: 14,
       margin: '0 4px 0 2px'
     },
     disabled: clearCacheLoading,
@@ -297,65 +318,75 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.design.toolbar.clear',
     label: '清除缓存'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
+  })), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.debug',
+      label: '调试'
+    }),
+    type: "bug",
     style: {
       fontSize: 12,
-      margin: '0 4px 0 2px'
+      margin: '0 8px 0 6px'
     },
-    disabled: updatePageDataLoading,
+    className: _design.default.hoverPrimary,
     onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
       return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
+            if (updatePageDataLoading) {
+              _context3.next = 6;
+              break;
+            }
             if (!(0, _ContextProvider.getNeedPrompt)()) {
-              _context3.next = 3;
+              _context3.next = 4;
               break;
             }
-            _context3.next = 3;
+            _context3.next = 4;
             return handleSave();
-          case 3:
+          case 4:
             context.$publisher(context.topics.COMPONENT_ACTIVE, null);
             setShowPreview(true);
-          case 5:
+          case 6:
           case "end":
             return _context3.stop();
         }
       }, _callee3);
     }))
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.preview',
-    label: '预览'
-  }), /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "bug"
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    type: "primary",
-    disabled: updatePageDataLoading,
-    style: {
-      fontSize: 12,
-      padding: '0 7px 0 0',
-      marginLeft: 2
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.code',
+      label: 'Schema面板'
+    }),
+    component: CodeSvg,
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block',
-      padding: '0 7px'
+      fontSize: 14,
+      margin: '0 8px 0 6px'
     },
-    onClick: handleSave
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.save',
-    label: '保存'
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (!updatePageDataLoading) setShow(true);
+          case 1:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.save',
+      label: '保存'
+    }),
+    type: "save",
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block'
+      fontSize: 14,
+      margin: '0 11px 0 5px'
     },
-    onClick: function onClick() {
-      return setShow(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "eye"
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    onClick: handleSave
+  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     visible: show,
     width: 1024,
     getContainer: function getContainer() {
@@ -409,10 +440,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 (_ref7) {
+      var key = _ref7.key,
+        label = _ref7.label,
+        rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded);
       return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
         key: key,
         value: key
@@ -426,7 +457,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     },
     bodyStyle: {
       height: 'calc(100% - 54px)',
-      backgroundColor: '#F0F2F5'
+      backgroundColor: 'var(--ant-component-background,#F0F2F5)'
     },
     visible: showPreview,
     destroyOnClose: true,

package/lib/lowcode/painter/Ribbon.js

@@ -16,6 +16,7 @@ var _Outline = _interopRequireDefault(require("./Outline"));
 var _Components = _interopRequireDefault(require("./Components"));
 var _I18n = _interopRequireDefault(require("./I18n"));
 var _utils = require("@luck-design-biz/base/utils");
+var _expect = _interopRequireDefault(require("./expect.jsx"));
 var _ribbon = _interopRequireDefault(require("./style/ribbon.less"));
 var _WIDTH_ = 48;
 var _DRAWER_PROPS = {
@@ -76,6 +77,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "apartment",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? null : _DRAWER_OUTLINE_);
     }
@@ -87,6 +92,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "appstore",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? null : _DRAWER_COMPONENTS_);
     }
@@ -98,6 +107,10 @@ var Ribbon = function Ribbon() {
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "global",
+    style: {
+      color: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key && '#1d79f2',
+      fontSize: 20
+    },
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
     }
@@ -145,6 +158,6 @@ 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(_I18n.default, null)));
+  }), /*#__PURE__*/_react.default.createElement(_expect.default, null)));
 };
 var _default = exports.default = Ribbon;

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

@@ -25,13 +25,9 @@ var _ACTION_CATEGORY_ = [{
     id: "".concat(_I18N_PREFIX_, ".pageActions"),
     label: '页面行为'
   })
-}, {
-  key: 'trigger',
-  label: (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".trigger"),
-    label: '触发器'
-  })
-}, {
+},
+// { key: 'trigger', label: formatMessage({ id: `${_I18N_PREFIX_}.trigger`, label: '触发器' }) },
+{
   key: 'custom',
   label: (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".custom"),

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

@@ -17,6 +17,7 @@ var _Overlay = _interopRequireDefault(require("./Overlay"));
 var _constants = require("../../../constants");
 var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
 var SIDE_DiSTANCE = 20;
 var SIDE_DiSTANCE_TREENODE = 10;
 var Action = exports.Action = /*#__PURE__*/(0, _createClass2.default)(function Action() {
@@ -35,15 +36,50 @@ function _default(_ref) {
   var _active$component;
   var children = _ref.children;
   var ctx = (0, _ContextProvider.useContext)();
+  (0, _react.useEffect)(function () {
+    var event_drag = ctx.$subscriber(ctx.topics.COMPONENT_DRAG_END).on(function (_ref2) {
+      var id = _ref2.id,
+        fromId = _ref2.fromId,
+        fromComp = _ref2.fromComp,
+        action = _ref2.action,
+        actionSide = _ref2.actionSide,
+        vaild = _ref2.vaild;
+      // console.log('onDargEnd', id, fromId, fromComp, action, actionSide);
+      if (vaild) {
+        switch (action) {
+          case 'move':
+            {
+              (0, _ContextProvider.moveNode)(fromId, id, actionSide);
+            }
+            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);
+            }
+            break;
+        }
+      }
+    }).watch();
+    return function () {
+      ctx.$unsubscriber(ctx.topics.COMPONENT_DRAG_END, event_drag);
+    };
+  }, []);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     active = _useState2[0],
     setActive = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    noDrag = _useState4[0],
+    setNoDrag = _useState4[1];
   function handleDragStart(event) {
     setActive(event.active.data.current);
   }
   function handleDragEnd(event) {
     setActive(null);
+    setNoDrag(null);
     pubEvent(event, ctx.topics.COMPONENT_DRAG_END, ctx);
   }
   function handleDragMove(event) {
@@ -56,34 +92,65 @@ function _default(_ref) {
     }
   });
   var sensors = (0, _core.useSensors)(mouseSensor);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
-    sensors: sensors,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    onDragMove: handleDragMove
-  }, children, /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
-    style: {
-      zIndex: 21
-    },
-    dropAnimation: null
-  }, active && /*#__PURE__*/_react.default.createElement(_Overlay.default, null, active === null || active === void 0 || (_active$component = active.component) === null || _active$component === void 0 ? void 0 : _active$component.name))));
-}
-function pubEvent(event, eventName, ctx) {
-  if (event.active && event.over && event.active.data.current.id !== event.over.data.current.id) {
-    var parentNode = ctx.componentMap.get(event.over.data.current.id).api.getSelfAndParentData().parent;
-
-    // console.log('event.over.data.current.type', event.over.data.current.type)
-    var actionSide = getAction(event.over.data.current.type, event.over.data.current.component.component, event.active.rect.current.translated, event.over.rect, parentNode);
-    console.log({
-      eventName: eventName,
-      id: event.over.data.current.id,
-      fromId: event.active.data.current.id,
-      fromComp: event.active.data.current.component,
-      action: event.active.data.current.action,
-      actionSide: actionSide
-    });
-    if (actionSide) {
+  var pubEvent = (0, _react.useCallback)(function (event, eventName, ctx) {
+    if (event.active && event.over && event.active.data.current.id !== event.over.data.current.id) {
+      var vaild = true;
+      var dropperId = event.over.data.current.id;
+      var dropNodeData = ctx.$(dropperId).api.getSelfAndParentData();
+      var dropNode = dropNodeData === null || dropNodeData === void 0 ? void 0 : dropNodeData.node;
+      var dropParentNode = dropNodeData === null || dropNodeData === void 0 ? void 0 : dropNodeData.parent;
+
+      // console.log('dropperId', dropperId)
+
+      var actionSide = getAction(event.over.data.current.type, event.over.data.current.component.component, event.active.rect.current.translated, event.over.rect, dropNode, dropParentNode);
+
+      // console.log('actionSide', actionSide)
+
+      if (event.active.data.current.action === 'move') {
+        var draggerId = event.active.data.current.id;
+        // console.log('draggerId', draggerId, event.active.data.current)
+
+        var dragNodeData = ctx.$(draggerId).api.getSelfAndParentData();
+        var dragNode = dragNodeData === null || dragNodeData === void 0 ? void 0 : dragNodeData.node;
+        var dragParentNode = dragNodeData === null || dragNodeData === void 0 ? void 0 : dragNodeData.parent;
+
+        // 如果是拖拽到父容器上则不进行处理
+        if (dragParentNode && dragParentNode.props.id === event.over.data.current.id) {
+          vaild = false;
+        }
+
+        // 父结构不容许拖入子结构
+        if (findParent(ctx, dropperId, draggerId)) {
+          vaild = false;
+        }
+
+        // 如果是build类型的组件，不容许跨节点拖拽
+        if (dragNode.props.buildIn == true && (dragNode.props.parentId != dropNode.props.parentId || actionSide == ActionSide.INSIDE)) {
+          vaild = false;
+        }
+        ;
+      } else if (event.active.data.current.action === 'add') {
+        vaild = true;
+      }
+      if (!actionSide) {
+        vaild = false;
+      }
+
+      // console.log('vaild', vaild, actionSide)
+
+      setNoDrag(!vaild);
+
+      // console.log({
+      //   eventName,
+      //   id: event.over.data.current.id,
+      //   fromId: event.active.data.current.id,
+      //   fromComp: event.active.data.current.component,
+      //   action: event.active.data.current.action,
+      //   actionSide,
+      // });
+
       ctx.$publisher(eventName, {
+        vaild: vaild,
         id: event.over.data.current.id,
         // 拖拽目标组件id
         fromId: event.active.data.current.id,
@@ -94,18 +161,57 @@ function pubEvent(event, eventName, ctx) {
         // 行为 add move delete
         actionSide: actionSide // 目标位置 left inside right
       });
+    } else {
+      setNoDrag(true);
+      ctx.$publisher(eventName, {
+        vaild: false
+      });
     }
-  }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragMove: handleDragMove
+  }, children, /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
+    style: {
+      zIndex: 21
+    },
+    dropAnimation: null
+  }, active && /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+    noDrag: noDrag
+  }, active === null || active === void 0 || (_active$component = active.component) === null || _active$component === void 0 ? void 0 : _active$component.name))));
+}
+
+// 查找id是否属于parentid的子层级
+function findParent(ctx, id, parentid) {
+  // 安全地获取节点数据
+  var nodeData = ctx.componentMap.get(id).api.getSelfAndParentData();
+  var node = nodeData === null || nodeData === void 0 ? void 0 : nodeData.node; // 确保这里是 'node' 而非 'nodel'
+
+  // 检查当前节点的parentId是否为目标parentid
+  if (node && node.props.parentId === parentid) return true;
+
+  // 检查是否已经到达页面根节点
+  if (!node.props.parentId || node.props.parentId === 'page_root') return false;
+
+  // 递归调用，检查上一级父节点
+  return findParent(ctx, node.props.parentId, parentid);
 }
 function isContainerUnit(node) {
   if ((0, _lodash.isNil)(node)) return false;
   return _constants.CONTAINER_UNITS.includes(node.props.component);
 }
-function getAction(type, overComponentName, activeRect, overRect, parentNode) {
+function getAction(type, overComponentName, activeRect, overRect, dropNode, dropParentNode) {
   var action = null;
-  var parentIsContainer = isContainerUnit(parentNode);
+  var dropNodeParent = dropParentNode;
+  var parentIsContainer = isContainerUnit(dropNodeParent);
+  var buildIn = dropNode.props.buildIn;
+  // console.log('buildIn', buildIn, dropNode, dropNodeParent)
+
   if (type == 'comp') {
     if (_constants.CONTAINER_UNITS.includes(overComponentName)) {
+      // console.log('parentIsContainer', parentIsContainer, parentNode)
       // 如果是最小单元容器
       if (Math.abs(activeRect.left - overRect.left) <= SIDE_DiSTANCE) {
         if (parentIsContainer) action = ActionSide.LEFT;
@@ -116,20 +222,21 @@ function getAction(type, overComponentName, activeRect, overRect, parentNode) {
       }
     } else {
       // 独立组件
-      if (activeRect.left >= overRect.left && activeRect.left <= overRect.left + overRect.width / 2) {
+      // console.log('pos:',activeRect.left, overRect.left)
+      if (activeRect.left <= overRect.left + overRect.width / 2) {
         if (parentIsContainer) action = ActionSide.LEFT;
-      } else if (activeRect.left > overRect.left + overRect.width / 2 && activeRect.left <= overRect.right) {
+      } else if (activeRect.left > overRect.left + overRect.width / 2) {
         if (parentIsContainer) action = ActionSide.RIGHT;
       }
     }
   } else {
-    // console.log('position', activeRect.top, overRect.bottom)
+    // 大纲树处理
     if (_constants.CONTAINER_UNITS.includes(overComponentName)) {
       // 如果是最小单元容器
       if (Math.abs(activeRect.top - overRect.top) <= SIDE_DiSTANCE_TREENODE) {
-        if (parentIsContainer) action = ActionSide.LEFT;
+        if (parentIsContainer || buildIn) action = ActionSide.LEFT;
       } else if (Math.abs(activeRect.top - overRect.bottom) <= SIDE_DiSTANCE_TREENODE) {
-        if (parentIsContainer) action = ActionSide.RIGHT;
+        if (parentIsContainer || buildIn) action = ActionSide.RIGHT;
       } else {
         action = ActionSide.INSIDE;
       }

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

@@ -45,13 +45,36 @@ function _default(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     var dom = getTargetDom();
-    if (dom) {
-      if (!_constants.NO_DRAGABLE.includes(itemInfo.component)) setDragRef(dom);
-      if (!_constants.NO_DROPABLE.includes(itemInfo.component)) setDropRef(dom);
-    }
+    if (!dom || !itemInfo.component) return;
+    if (!_constants.NO_DRAGABLE.includes(itemInfo.component)) setDragRef(dom);
+    if (!_constants.NO_DROPABLE.includes(itemInfo.component)) setDropRef(dom);
   }, []);
   var comp = (0, _ahooks.useCreation)(function () {
     return /*#__PURE__*/(0, _react.cloneElement)(children, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), _memoListeners), attributes));
   }, [id, children]);
+  (0, _react.useEffect)(function () {
+    var event_drag = ctx.$subscriber(ctx.topics.COMPONENT_DRAG_OVER).on(function (_ref2) {
+      var itemId = _ref2.id,
+        actionSide = _ref2.actionSide;
+      if (actionSide === _DragDropContext.ActionSide.INSIDE) {
+        ctx.$publisher(ctx.topics.COMPONENT_HOVER, {
+          target: itemId
+        });
+      } else if (actionSide === _DragDropContext.ActionSide.LEFT || actionSide === _DragDropContext.ActionSide.RIGHT) {
+        ctx.$publisher(ctx.topics.COMPONENT_HOVER, {
+          target: itemId,
+          side: actionSide
+        });
+      }
+    }).watch();
+    return function () {
+      ctx.$unsubscriber(ctx.topics.COMPONENT_DRAG_OVER, event_drag);
+    };
+  }, []);
+  (0, _core.useDndMonitor)({
+    onDragEnd: function onDragEnd() {
+      ctx.$publisher(ctx.topics.COMPONENT_HOVER, null);
+    }
+  });
   return comp;
 }

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _dragdrop = _interopRequireDefault(require("../../style/dragdrop.less"));
 function _default(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    noDrag = _ref.noDrag;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _dragdrop.default['dragdrop-overlay']
+    className: (0, _classnames.default)([_dragdrop.default['dragdrop-overlay'], (0, _defineProperty2.default)({}, _dragdrop.default['no-drag'], noDrag)])
   }, children);
 }

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _core = require("@dnd-kit/core");
 var _DragDropContext = require("./DragDropContext");
 var _ContextProvider = require("../../../engine/provider/ContextProvider");
-var _treedragdrop = _interopRequireDefault(require("../../style/treedragdrop.less"));
+var _dragdrop = _interopRequireDefault(require("../../style/dragdrop.less"));
 var _constants = require("../../../constants");
 function _default(_ref) {
   var item = _ref.item,
@@ -27,8 +29,9 @@ function _default(_ref) {
     var event_drag = context.$subscriber(context.topics.COMPONENT_DRAG_OVER).on(function (_ref2) {
       var itemId = _ref2.id,
         fromId = _ref2.fromId,
-        actionSide = _ref2.actionSide;
-      if (itemId === id) {
+        actionSide = _ref2.actionSide,
+        vaild = _ref2.vaild;
+      if (vaild && itemId === id) {
         setSide(actionSide);
       } else {
         setSide(null);
@@ -66,7 +69,7 @@ function _default(_ref) {
     }),
     setDropRef = _useDroppable.setNodeRef;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: "".concat(_treedragdrop.default['lc-painter-components-treedragdrop'], " ").concat(side ? "".concat(side, "-side") : '', " ").concat(isDragging ? "ondrag" : ''),
+    className: (0, _classnames.default)([_dragdrop.default['lc-painter-components-treedragdrop'], (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _dragdrop.default["".concat(side, "-side")], side), _dragdrop.default['ondrag'], isDragging)]),
     ref: function ref(node) {
       if (!_constants.NO_DRAGABLE.includes(item.component)) setDragRef(node);
       if (!_constants.NO_DROPABLE.includes(item.component)) setDropRef(node);

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

@@ -66,7 +66,7 @@ function _default(_ref) {
     unit = _parseValue.unit;
   var handleSelect = function handleSelect(item) {
     var newValue;
-    if (item.key == 'auto') newValue = item.key;else if (isNaN(number)) {
+    if (item.key == 'auto') newValue = item.key;else if (!number || isNaN(number)) {
       var defaultNumber = defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
       if (isNaN(defaultNumber)) {
         var match = defaultNumber.match(/[\d\.]+/);

package/lib/lowcode/painter/components/code-editor/BaseEditor.js

@@ -83,7 +83,8 @@ var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           onDidChangeStorage: function onDidChangeStorage() {}
         }
       });
-      editorInstance.current.onDidChangeModelContent(function (event) {
+      // 监听布局变化，重新赋值，解决编辑器全屏切换时，编辑器空白的问题
+      editorInstance.current.onDidLayoutChange(function (event) {
         if (onChange) onChange(editorInstance.current.getValue(), event);
       });
     }

package/lib/lowcode/painter/components/field-setting/FieldAttrs.js

@@ -36,8 +36,8 @@ var LeftBox = _styledComponents.default.div.withConfig({
 var Option = _styledComponents.default.div.withConfig({
   displayName: "Option",
   componentId: "luckda-6530__sc-rwt684-3"
-})(["width:100%;height:32px;cursor:pointer;line-height:32px;padding:0 8px;display:flex;justify-content:space-between;align-items:center;", " &:hover{background-color:#e8e8e8;}"], function (props) {
-  return props.actived ? 'background-color: #e8e8e8;' : void 0;
+})(["width:100%;height:32px;cursor:pointer;line-height:32px;padding:0 8px;display:flex;justify-content:space-between;align-items:center;", " &:hover{background-color:var(--ant-border-color-base,#e8e8e8);}"], function (props) {
+  return props.actived ? 'background-color: var(--ant-border-color-base, #e8e8e8);' : void 0;
 });
 var RightBox = _styledComponents.default.div.withConfig({
   displayName: "RightBox",