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

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

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

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

@@ -6,7 +6,7 @@ var _excluded = ["events"],
   _excluded2 = ["events"],
   _excluded3 = ["render"],
   _excluded4 = ["render"];
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Menu, Dropdown, Button, Tooltip, Icon, Switch } from 'luck-design/antd';
 import styled from 'styled-components';
@@ -26,7 +26,7 @@ var EventItem = styled.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$render, _value$render2;
   var meta = _ref.meta,
     nodeId = _ref.nodeId,
     target = _ref.target,
@@ -51,6 +51,10 @@ var AdvancePanel = function AdvancePanel(_ref) {
     var _meta$advance;
     return keyBy((meta === null || meta === void 0 || (_meta$advance = meta.advance) === null || _meta$advance === void 0 ? void 0 : _meta$advance.events) || [], 'key');
   }, [meta]);
+  var _useState5 = useState((value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_),
+    _useState6 = _slicedToArray(_useState5, 2),
+    editorValue = _useState6[0],
+    setEditorValue = _useState6[1];
   var handleEventClick = useMemoizedFn(function (e) {
     var payload = e.item.props.payload;
     setEvent(_objectSpread(_objectSpread({}, payload), {}, {
@@ -100,6 +104,9 @@ var AdvancePanel = function AdvancePanel(_ref) {
       }
     }));
   });
+  var handleEditorLayoutChange = function handleEditorLayoutChange(code) {
+    setEditorValue(code);
+  };
   var eventsMenu = useCreation(function () {
     var _meta$advance2;
     return /*#__PURE__*/React.createElement(Menu, {
@@ -140,15 +147,15 @@ var AdvancePanel = function AdvancePanel(_ref) {
     },
     suppressIcon: true,
     extraRender: function extraRender() {
-      var _value$render;
       return /*#__PURE__*/React.createElement(PopConfirm, {
         placement: "left",
         title: /*#__PURE__*/React.createElement(FullScreenEditor, {
           ref: editorRef,
           EditorComponent: JSEditor,
+          onLayoutChange: handleEditorLayoutChange,
           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_),
+        }, editorValue),
         showBtn: true,
         onConfirm: handleRenderComfirm
       }, /*#__PURE__*/React.createElement(Icon, {

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

@@ -5,32 +5,32 @@ import { useMemoizedFn, useCreation } from 'ahooks';
 import styles from "../style/collapse.less";
 import { Icon, Tooltip } from '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 元素，表示一个具有可折叠功能的容器。
  */
 export default function (_ref) {
   var children = _ref.children,

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

@@ -10,30 +10,30 @@ import { Input } from 'luck-design/antd';
 import styles from "../style/color-input.less";
 import { SketchPicker } from 'react-color';
 
-/**
- * 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__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,

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

@@ -2,12 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { DndContext, DragOverlay, useSensor, MouseSensor, useSensors } from '@dnd-kit/core';
 import Overlay from "./Overlay";
 import { CONTAINER_UNITS } from "../../../constants";
-import { useContext } from "../../../engine/provider/ContextProvider";
+import { useContext, moveNode } from "../../../engine/provider/ContextProvider";
 import { isNil } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
 var SIDE_DiSTANCE = 20;
 var SIDE_DiSTANCE_TREENODE = 10;
 export var Action = /*#__PURE__*/_createClass(function Action() {
@@ -26,15 +27,50 @@ export default function (_ref) {
   var _active$component;
   var children = _ref.children;
   var ctx = useContext();
+  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':
+            {
+              moveNode(fromId, id, actionSide);
+            }
+            break;
+          case 'add':
+            {
+              var compName = fromComp.component.toLowerCase();
+              var json = require("../../../engine/meta/".concat(compName, ".props.default.json"));
+              moveNode(null, id, actionSide, "".concat(compName, "_").concat(suid()), json);
+            }
+            break;
+        }
+      }
+    }).watch();
+    return function () {
+      ctx.$unsubscriber(ctx.topics.COMPONENT_DRAG_END, event_drag);
+    };
+  }, []);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
     setActive = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_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) {
@@ -47,34 +83,65 @@ export default function (_ref) {
     }
   });
   var sensors = useSensors(mouseSensor);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
-    sensors: sensors,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    onDragMove: handleDragMove
-  }, children, /*#__PURE__*/React.createElement(DragOverlay, {
-    style: {
-      zIndex: 21
-    },
-    dropAnimation: null
-  }, active && /*#__PURE__*/React.createElement(Overlay, 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 = 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,
@@ -85,18 +152,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragMove: handleDragMove
+  }, children, /*#__PURE__*/React.createElement(DragOverlay, {
+    style: {
+      zIndex: 21
+    },
+    dropAnimation: null
+  }, active && /*#__PURE__*/React.createElement(Overlay, {
+    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 (isNil(node)) return false;
   return 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 (CONTAINER_UNITS.includes(overComponentName)) {
+      // console.log('parentIsContainer', parentIsContainer, parentNode)
       // 如果是最小单元容器
       if (Math.abs(activeRect.left - overRect.left) <= SIDE_DiSTANCE) {
         if (parentIsContainer) action = ActionSide.LEFT;
@@ -107,20 +213,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 (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/es/lowcode/painter/components/DragDrop/DragDropWrapper.js

@@ -1,9 +1,9 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { cloneElement, useEffect } from 'react';
 import { useCreation } from 'ahooks';
-import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { useDraggable, useDroppable, useDndMonitor } from '@dnd-kit/core';
 import { useContext } from "../../../engine/provider/ContextProvider";
-import { Action } from "./DragDropContext";
+import { Action, ActionSide } from "./DragDropContext";
 import { NO_DRAGABLE, NO_DROPABLE } from "../../../constants";
 export default function (_ref) {
   var id = _ref.id,
@@ -38,13 +38,36 @@ export default function (_ref) {
   }, []);
   useEffect(function () {
     var dom = getTargetDom();
-    if (dom) {
-      if (!NO_DRAGABLE.includes(itemInfo.component)) setDragRef(dom);
-      if (!NO_DROPABLE.includes(itemInfo.component)) setDropRef(dom);
-    }
+    if (!dom || !itemInfo.component) return;
+    if (!NO_DRAGABLE.includes(itemInfo.component)) setDragRef(dom);
+    if (!NO_DROPABLE.includes(itemInfo.component)) setDropRef(dom);
   }, []);
   var comp = useCreation(function () {
     return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), _memoListeners), attributes));
   }, [id, children]);
+  useEffect(function () {
+    var event_drag = ctx.$subscriber(ctx.topics.COMPONENT_DRAG_OVER).on(function (_ref2) {
+      var itemId = _ref2.id,
+        actionSide = _ref2.actionSide;
+      if (actionSide === ActionSide.INSIDE) {
+        ctx.$publisher(ctx.topics.COMPONENT_HOVER, {
+          target: itemId
+        });
+      } else if (actionSide === ActionSide.LEFT || actionSide === ActionSide.RIGHT) {
+        ctx.$publisher(ctx.topics.COMPONENT_HOVER, {
+          target: itemId,
+          side: actionSide
+        });
+      }
+    }).watch();
+    return function () {
+      ctx.$unsubscriber(ctx.topics.COMPONENT_DRAG_OVER, event_drag);
+    };
+  }, []);
+  useDndMonitor({
+    onDragEnd: function onDragEnd() {
+      ctx.$publisher(ctx.topics.COMPONENT_HOVER, null);
+    }
+  });
   return comp;
 }

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

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
+import classNames from 'classnames';
 import styles from "../../style/dragdrop.less";
 export default function (_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    noDrag = _ref.noDrag;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles['dragdrop-overlay']
+    className: classNames([styles['dragdrop-overlay'], _defineProperty({}, styles['no-drag'], noDrag)])
   }, children);
 }

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { useDraggable, useDroppable, useDndMonitor } from '@dnd-kit/core';
 import { Action } from "./DragDropContext";
 import { useContext } from "../../../engine/provider/ContextProvider";
-import styles from "../../style/treedragdrop.less";
+import styles from "../../style/dragdrop.less";
 import { NO_DRAGABLE, NO_DROPABLE } from "../../../constants";
 export default function (_ref) {
   var item = _ref.item,
@@ -19,8 +21,9 @@ export default function (_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);
@@ -58,7 +61,7 @@ export default function (_ref) {
     }),
     setDropRef = _useDroppable.setNodeRef;
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: "".concat(styles['lc-painter-components-treedragdrop'], " ").concat(side ? "".concat(side, "-side") : '', " ").concat(isDragging ? "ondrag" : ''),
+    className: classNames([styles['lc-painter-components-treedragdrop'], _defineProperty(_defineProperty({}, styles["".concat(side, "-side")], side), styles['ondrag'], isDragging)]),
     ref: function ref(node) {
       if (!NO_DRAGABLE.includes(item.component)) setDragRef(node);
       if (!NO_DROPABLE.includes(item.component)) setDropRef(node);

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

@@ -4,14 +4,14 @@ import { Icon, Button } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import styles from "../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} 渲染一个带有操作按钮和标签项的容器。
  */
 export var ListEditor = function ListEditor(_ref) {
   var children = _ref.children,
@@ -41,22 +41,22 @@ export var 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} 渲染一个可编辑的标签项，支持拖拽排序。
  */
 export var ListEditorItem = function ListEditorItem(_ref2) {
   var item = _ref2.item,