@luck-design-biz/luckda 1.0.1-9 → 1.0.2

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/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

@@ -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/ListEditor.js

@@ -10,14 +10,14 @@ var _react = _interopRequireDefault(require("react"));
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _listEditor = _interopRequireDefault(require("../style/list-editor.less"));
-/**
- * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
- * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
- * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
- * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
+/**
+ * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
+ * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
+ * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
+ * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
  */
 var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   var children = _ref.children,
@@ -47,22 +47,22 @@ var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   }))));
 };
 
-/**
- * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
- * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {Object} props.item - 表示标签项数据的对象。
- * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
- * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
- * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
- * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
- * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
- * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
- * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
- * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
- * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
- * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
+/**
+ * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
+ * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {Object} props.item - 表示标签项数据的对象。
+ * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
+ * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
+ * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
+ * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
+ * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
+ * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
+ * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
+ * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
+ * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
+ * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
  */
 var ListEditorItem = exports.ListEditorItem = function ListEditorItem(_ref2) {
   var item = _ref2.item,

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

@@ -15,34 +15,34 @@ var _numberInput = _interopRequireDefault(require("../style/number-input.less"))
 var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _excluded = ["value", "options", "onChange", "defaultValue", "allowNull", "convertInt"];
-/**
- * NumberInput 组件是一个带单位选择的数字输入框组件，允许用户输入一个数值并从预定义的选项中选择一个单位。
- * 它支持默认值、空值、自动类型转换以及自定义更改处理逻辑。
- * 组件内部通过 Dropdown 组件提供一个单位的下拉选择菜单，并通过 InputNumber 接收数值输入。
- * 该组件也支持将输入值转换为整数或保持为原始格式，并允许通过 options 定制可选单位。
- * 
- * @component
- * @example
- * const options = [{ value: 'px', label: '像素' }, { value: '%', label: '百分比' }];
- * <NumberInput
- *   value={100}
- *   options={options}
- *   onChange={(newValue) => console.log('New value:', newValue)}
- *   defaultValue={0}
- *   allowNull={true}
- *   convertInt={false}
- * />
- * 
- * @param {Object} props - 组件的属性。
- * @param {number|string} props.value - 初始化输入框的值。
- * @param {Object[]} props.options - 可选单位的数组，每个对象包含 value（单位的值）和 label（显示在下拉菜单中的标签）。
- * @param {Function} props.onChange - 当输入值或单位改变时触发的回调函数。传递新的值作为参数。
- * @param {number|string} [props.defaultValue] - 未指定 value 时的默认值。
- * @param {boolean} [props.allowNull=true] - 是否允许空值。
- * @param {boolean} [props.convertInt=false] - 是否将输入值转换为整数。
- * @param {Object} rest - 传递给 InputNumber 组件的其他属性。
- * 
- * @returns {ReactElement} 返回一个 React 元素，表示一个带单位选择的数字输入框组件。
+/**
+ * NumberInput 组件是一个带单位选择的数字输入框组件，允许用户输入一个数值并从预定义的选项中选择一个单位。
+ * 它支持默认值、空值、自动类型转换以及自定义更改处理逻辑。
+ * 组件内部通过 Dropdown 组件提供一个单位的下拉选择菜单，并通过 InputNumber 接收数值输入。
+ * 该组件也支持将输入值转换为整数或保持为原始格式，并允许通过 options 定制可选单位。
+ * 
+ * @component
+ * @example
+ * const options = [{ value: 'px', label: '像素' }, { value: '%', label: '百分比' }];
+ * <NumberInput
+ *   value={100}
+ *   options={options}
+ *   onChange={(newValue) => console.log('New value:', newValue)}
+ *   defaultValue={0}
+ *   allowNull={true}
+ *   convertInt={false}
+ * />
+ * 
+ * @param {Object} props - 组件的属性。
+ * @param {number|string} props.value - 初始化输入框的值。
+ * @param {Object[]} props.options - 可选单位的数组，每个对象包含 value（单位的值）和 label（显示在下拉菜单中的标签）。
+ * @param {Function} props.onChange - 当输入值或单位改变时触发的回调函数。传递新的值作为参数。
+ * @param {number|string} [props.defaultValue] - 未指定 value 时的默认值。
+ * @param {boolean} [props.allowNull=true] - 是否允许空值。
+ * @param {boolean} [props.convertInt=false] - 是否将输入值转换为整数。
+ * @param {Object} rest - 传递给 InputNumber 组件的其他属性。
+ * 
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带单位选择的数字输入框组件。
  */
 function _default(_ref) {
   var value = _ref.value,