bkui-vue 2.0.2-beta.4 → 2.0.2-beta.41

package/lib/tree/index.js

@@ -12,6 +12,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_lodash_isElement_e6b2a6ce__ from "lodash/i
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__ from "../checkbox";
 import "../checkbox/checkbox.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
 /******/ 
@@ -168,6 +169,7 @@ function _defineProperty(obj, key, value) {
 }
 ;// CONCATENATED MODULE: ../../packages/tree/src/constant.ts
 
+var _TreeEmitEventsType;
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -200,6 +202,7 @@ var EVENTS;
   EVENTS["NODE_COLLAPSE"] = "nodeCollapse";
   EVENTS["NODE_DRAG_LEAVE"] = "nodeDragLeave";
   EVENTS["NODE_DRAG_OVER"] = "nodeDragOver";
+  EVENTS["NODE_DRAG_SORT"] = "nodeDragSort";
   EVENTS["NODE_DRAG_START"] = "nodeDragStart";
   EVENTS["NODE_DROP"] = "nodeDrop";
   EVENTS["NODE_ENTER_VIEW"] = "nodeEnterView";
@@ -209,7 +212,7 @@ var EVENTS;
 var EMPTY = function EMPTY() {
   return true;
 };
-var TreeEmitEventsType = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EVENTS.NODE_CLICK, EMPTY), EVENTS.NODE_COLLAPSE, EMPTY), EVENTS.NODE_EXPAND, EMPTY), EVENTS.NODE_CHECKED, EMPTY), EVENTS.NODE_DRAG_START, EMPTY), EVENTS.NODE_DRAG_OVER, EMPTY), EVENTS.NODE_DRAG_LEAVE, EMPTY), EVENTS.NODE_DROP, EMPTY), EVENTS.NODE_ENTER_VIEW, EMPTY), EVENTS.NODE_SELECTED, EMPTY);
+var TreeEmitEventsType = (_TreeEmitEventsType = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TreeEmitEventsType, EVENTS.NODE_CLICK, EMPTY), EVENTS.NODE_COLLAPSE, EMPTY), EVENTS.NODE_EXPAND, EMPTY), EVENTS.NODE_CHECKED, EMPTY), EVENTS.NODE_DRAG_START, EMPTY), EVENTS.NODE_DRAG_OVER, EMPTY), EVENTS.NODE_DRAG_LEAVE, EMPTY), EVENTS.NODE_DRAG_SORT, EMPTY), EVENTS.NODE_DROP, EMPTY), EVENTS.NODE_ENTER_VIEW, EMPTY), _defineProperty(_TreeEmitEventsType, EVENTS.NODE_SELECTED, EMPTY));
 /**
  * 节点扩展属性
  */
@@ -338,7 +341,12 @@ var treeProps = {
      * 可选值：once 只在初始化是执行一次
      * every 每次数据更新都执行
      */
-    deepAutoOpen: (0,external_vue_types_namespaceObject.toType)('columnType', {}).def(ColumnTypeEnum.ONCE)
+    deepAutoOpen: (0,external_vue_types_namespaceObject.toType)('columnType', {}).def(ColumnTypeEnum.ONCE),
+    /**
+     * 触发异步加载的时机
+     * 可选值：'expand', 'click', 'checked'
+     */
+    trigger: shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.oneOf(['expand', 'click', 'checked'])).def(null)
   }),
   /**
    * 每个节点偏移左侧距离
@@ -376,10 +384,23 @@ var treeProps = {
   draggable: shared_namespaceObject.PropTypes.bool.def(false),
   disableDrag: shared_namespaceObject.PropTypes.func,
   disableDrop: shared_namespaceObject.PropTypes.func,
+  /**
+   * 拖拽阈值
+   * 用于判断拖拽时鼠标位置与节点的距离
+   * 当鼠标位置与节点的距离大于此值时，才会触发拖拽
+   */
+  dragThreshold: shared_namespaceObject.PropTypes.number.def(0.2),
   /**
    * 节点拖拽时可交换位置（开启拖拽可交换位置后将不支持改变层级）
    */
   dragSort: shared_namespaceObject.PropTypes.bool.def(false),
+  /**
+   * 拖拽排序模式
+   * - any: 允许拖拽到任意位置
+   * - next: 只允许拖拽到同级节点的前后位置
+   * 默认 any
+   */
+  dragSortMode: shared_namespaceObject.PropTypes.oneOf(['any', 'next']).def('any'),
   /**
    * 节点是否可以选中
    */
@@ -835,10 +856,14 @@ const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MO
     });
   };
   var getParentNodeData = function getParentNodeData(node) {
-    if (isRootNode(node)) {
+    var target = node;
+    if (typeof target === 'string') {
+      target = getSourceNodeByUID(target);
+    }
+    if (isRootNode(target)) {
       return _defineProperty({}, props.children, props.data);
     }
-    return getParentNode(node);
+    return getParentNode(target);
   };
   /**
    * 处理scoped slot 透传数据
@@ -1460,6 +1485,14 @@ var use_node_action_this = undefined;
       deepUpdateChildNode(chid, attr, value);
     });
   };
+  var isRemoteFnExec = function isRemoteFnExec(event) {
+    var _props$async;
+    if ((_props$async = props.async) !== null && _props$async !== void 0 && (_props$async = _props$async.trigger) !== null && _props$async !== void 0 && _props$async.length) {
+      var _props$async2;
+      return (_props$async2 = props.async) === null || _props$async2 === void 0 ? void 0 : _props$async2.trigger.includes(event);
+    }
+    return true;
+  };
   var handleNodeItemCheckboxChange = function handleNodeItemCheckboxChange(item, value, event) {
     event === null || event === void 0 || event.preventDefault();
     event === null || event === void 0 || event.stopImmediatePropagation();
@@ -1477,7 +1510,7 @@ var use_node_action_this = undefined;
     }), flatData.data.filter(function (t) {
       return isIndeterminate(t);
     }));
-    handleNodeContentClick(item, event);
+    handleNodeContentClick(item, event, 'checked');
   };
   var isIndeterminate = function isIndeterminate(item) {
     return isNodeChecked(item) && getNodeAttr(item, NODE_ATTRIBUTES.IS_INDETERMINATE);
@@ -1487,6 +1520,7 @@ var use_node_action_this = undefined;
       return null;
     }
     return (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "node-check-box",
       "onClick": handleNodeCheckboxClick
     }, [(0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
       "indeterminate": isIndeterminate(item),
@@ -1586,25 +1620,27 @@ var use_node_action_this = undefined;
    * 节点点击
    * @param item
    */
-  var handleTreeNodeClick = function handleTreeNodeClick(item, e) {
+  var handleTreeNodeClick = function handleTreeNodeClick(item, e, event) {
     var isOpen = isItemOpen(item);
     if (isOpen) {
       setNodeOpened(item, false, e, true);
       return;
     }
-    /** 如果是异步请求加载 */
-    asyncNodeClick(item)["finally"](function () {
-      if (getNodeAttr(item, NODE_ATTRIBUTES.IS_LOADING)) {
-        registerNextLoop('setNodeOpenedAfterLoading', {
-          type: 'once',
-          fn: function fn() {
-            return setNodeOpened(item, true, e, true);
-          }
-        });
-      } else {
-        setNodeOpened(item, true, e, true);
-      }
-    });
+    if (isRemoteFnExec(event)) {
+      /** 如果是异步请求加载 */
+      asyncNodeClick(item)["finally"](function () {
+        if (getNodeAttr(item, NODE_ATTRIBUTES.IS_LOADING)) {
+          registerNextLoop('setNodeOpenedAfterLoading', {
+            type: 'once',
+            fn: function fn() {
+              return setNodeOpened(item, true, e, true);
+            }
+          });
+        } else {
+          setNodeOpened(item, true, e, true);
+        }
+      });
+    }
   };
   /**
    * 点击树形节点展开、收起图标处理事件
@@ -1615,7 +1651,7 @@ var use_node_action_this = undefined;
     e.stopImmediatePropagation();
     e.stopPropagation();
     e.preventDefault();
-    handleTreeNodeClick(node, e);
+    handleTreeNodeClick(node, e, 'expand');
   };
   /**
    * 设置节点选中状态
@@ -1629,6 +1665,7 @@ var use_node_action_this = undefined;
     var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var autoOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     var triggerEvent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    var event = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
     var nodeList = Array.isArray(nodes) ? nodes : [nodes];
     if (!nodeList.length) {
       return;
@@ -1673,12 +1710,14 @@ var use_node_action_this = undefined;
      * 处理异步节点多层级展开选中
      */
     if (getNodeAttr(resolvedItem, NODE_ATTRIBUTES.IS_ASYNC)) {
-      asyncNodeClick(resolvedItem).then(function () {
-        (0,external_vue_namespaceObject.nextTick)(function () {
-          nodeList.shift();
-          setSelect(nodeList, selected, autoOpen);
+      if (isRemoteFnExec(event)) {
+        asyncNodeClick(resolvedItem).then(function () {
+          (0,external_vue_namespaceObject.nextTick)(function () {
+            nodeList.shift();
+            setSelect(nodeList, selected, autoOpen, triggerEvent, event);
+          });
         });
-      });
+      }
     }
   };
   var resolveNodeAction = function resolveNodeAction(node) {
@@ -1699,19 +1738,19 @@ var use_node_action_this = undefined;
    * 点击节点事件
    * @param item
    */
-  var handleNodeContentClick = function handleNodeContentClick(item, e) {
+  var handleNodeContentClick = function handleNodeContentClick(item, e, event) {
     var nodeActions = resolveNodeAction(item);
     if (nodeActions.includes('selected')) {
-      setSelect(item, true, true, true);
+      setSelect(item, true, true, true, event);
     }
     if (nodeActions.includes('expand')) {
       if (!isNodeOpened(item)) {
-        handleTreeNodeClick(item, e);
+        handleTreeNodeClick(item, e, event);
       }
     }
     if (nodeActions.includes('collapse')) {
       if (isNodeOpened(item)) {
-        handleTreeNodeClick(item, e);
+        handleTreeNodeClick(item, e, event);
       }
     }
     if (nodeActions.includes('click')) {
@@ -1805,6 +1844,7 @@ var use_node_action_this = undefined;
   var renderTreeNode = function renderTreeNode(item) {
     var _ctx$slots$nodeAppend, _ctx$slots4;
     var showTree = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var child = getActionIcon(item);
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "key": getNodeId(item),
       "class": getNodeRowClass(item, flatData.schema),
@@ -1813,14 +1853,14 @@ var use_node_action_this = undefined;
       "style": getNodeItemStyle(item, props, flatData, showTree),
       "class": getNodeItemClass(item, flatData.schema, props, showTree),
       "onClick": function onClick(e) {
-        return handleNodeContentClick(item, e);
+        return handleNodeContentClick(item, e, 'click');
       }
     }, [(0,external_vue_namespaceObject.createVNode)("div", {
-      "class": [resolveClassName('node-action')],
+      "class": [resolveClassName('node-action'), child ? '' : 'empty-child'],
       "onClick": function onClick(e) {
         return handleNodeActionClick(e, item);
       }
-    }, [getActionIcon(item)]), (0,external_vue_namespaceObject.createVNode)("div", {
+    }, [child]), (0,external_vue_namespaceObject.createVNode)("div", {
       "class": resolveClassName('node-content')
     }, [[getCheckboxRender(item), getNodePrefixIcon(item)], (0,external_vue_namespaceObject.createVNode)("span", {
       "class": resolveClassName('node-text')
@@ -1839,6 +1879,10 @@ var use_node_action_this = undefined;
     isIndeterminate: isIndeterminate
   };
 });
+;// CONCATENATED MODULE: external "lodash/throttle"
+var throttle_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var throttle_y = x => () => x
+const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__["default"] });
 ;// CONCATENATED MODULE: ../../packages/tree/src/use-node-drag.tsx
 var use_node_drag_this = undefined;
 /*
@@ -1870,6 +1914,7 @@ var use_node_drag_this = undefined;
 
 
 
+
 /* harmony default export */ const use_node_drag = (function (props, ctx, root, flatData) {
   var _useNodeAttribute = use_node_attribute(flatData, props),
     getSourceNodeByUID = _useNodeAttribute.getSourceNodeByUID,
@@ -1877,8 +1922,8 @@ var use_node_drag_this = undefined;
     getNodeParentIdById = _useNodeAttribute.getNodeParentIdById,
     extendNodeAttr = _useNodeAttribute.extendNodeAttr,
     getNodeAttrById = _useNodeAttribute.getNodeAttrById,
-    getNodePathById = _useNodeAttribute.getNodePathById,
-    isRootNode = _useNodeAttribute.isRootNode;
+    isRootNode = _useNodeAttribute.isRootNode,
+    setNodeAttrById = _useNodeAttribute.setNodeAttrById;
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var isNeedCheckDraggable = (0,external_vue_namespaceObject.computed)(function () {
@@ -1887,7 +1932,10 @@ var use_node_drag_this = undefined;
   var isNeedCheckDroppable = (0,external_vue_namespaceObject.computed)(function () {
     return typeof props.disableDrop === 'function';
   });
+  var dragThreshold = props.dragThreshold || 0.2; // 新增配置项，默认值为 0.2
   var dragNodeId = '';
+  var draggedItem = null;
+  var nodeRectMap = new WeakMap();
   var getTargetTreeNode = function getTargetTreeNode(e) {
     var target = e.target;
     return target.closest('[data-tree-node]');
@@ -1897,6 +1945,14 @@ var use_node_drag_this = undefined;
     var uid = targetNode === null || targetNode === void 0 || (_targetNode$dataset = targetNode.dataset) === null || _targetNode$dataset === void 0 ? void 0 : _targetNode$dataset.treeNode;
     return getSourceNodeByUID(uid);
   };
+  var updateDropStyles = function updateDropStyles(targetNode, stylesToAdd, stylesToRemove) {
+    stylesToRemove.forEach(function (style) {
+      return targetNode.classList.remove(style);
+    });
+    stylesToAdd.forEach(function (style) {
+      return targetNode.classList.add(style);
+    });
+  };
   var handleTreeNodeMouseup = function handleTreeNodeMouseup(e) {
     var targetNode = getTargetTreeNode(e);
     targetNode.removeEventListener('mouseup', handleTreeNodeMouseup);
@@ -1911,10 +1967,37 @@ var use_node_drag_this = undefined;
     targetNode.setAttribute('draggable', 'true');
     targetNode.addEventListener('mouseup', handleTreeNodeMouseup);
   };
-  var handleTreeNodeDragover = function handleTreeNodeDragover(e) {
+  var dropBefore = 'drop-before';
+  var dropAfter = 'drop-after';
+  var dropInner = 'drop-inner';
+  var dragOverItem = null;
+  var handleTreeNodeDragover = (0,throttle_namespaceObject["default"])(function (e) {
     e.preventDefault();
+    if (!draggedItem) return;
     var targetNode = getTargetTreeNode(e);
+    if (dragOverItem !== targetNode) {
+      var _dragOverItem;
+      (_dragOverItem = dragOverItem) === null || _dragOverItem === void 0 || _dragOverItem.classList.remove(dropBefore, dropAfter, dropInner);
+      dragOverItem = targetNode;
+    }
     var data = extendNodeAttr(getNodeByTargetTreeNode(targetNode));
+    // 如果目标节点不在缓存中，重新计算并缓存
+    if (!nodeRectMap.has(targetNode)) {
+      nodeRectMap.set(targetNode, targetNode.getBoundingClientRect());
+    }
+    var clientY = e.clientY;
+    var _nodeRectMap$get = nodeRectMap.get(targetNode),
+      top = _nodeRectMap$get.top,
+      height = _nodeRectMap$get.height;
+    var threshold = height * dragThreshold; // 使用配置项
+    var offsetY = clientY - top;
+    if (offsetY < threshold) {
+      updateDropStyles(targetNode, [dropBefore], [dropAfter, dropInner]);
+    } else if (offsetY > height - threshold) {
+      updateDropStyles(targetNode, [dropAfter], [dropBefore, dropInner]);
+    } else {
+      updateDropStyles(targetNode, [dropInner], [dropBefore, dropAfter]);
+    }
     ctx.emit(EVENTS.NODE_DRAG_OVER, e, targetNode, data);
     if (isNeedCheckDroppable.value && props !== null && props !== void 0 && props.disableDrop(data)) {
       e.dataTransfer.effectAllowed = 'move';
@@ -1929,7 +2012,7 @@ var use_node_drag_this = undefined;
     var transferEffect = isNodeSortable(sourceNodeId, targetNodeId) ? 'move' : 'none';
     e.dataTransfer.effectAllowed = transferEffect;
     e.dataTransfer.dropEffect = transferEffect;
-  };
+  });
   var handleTreeNodeDragStart = function handleTreeNodeDragStart(e) {
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.dropEffect = 'move';
@@ -1937,49 +2020,104 @@ var use_node_drag_this = undefined;
     e.dataTransfer.setData('text/plain', '');
     var nodeId = targetNode.getAttribute('data-tree-node');
     dragNodeId = nodeId;
+    draggedItem = targetNode;
     e.dataTransfer.setData('node-id', nodeId);
     ctx.emit(EVENTS.NODE_DRAG_START, e, targetNode);
   };
   var handleTreeNodeDrop = function handleTreeNodeDrop(e) {
+    var _dragOverItem5;
     /** firefox的drop事件必须调用preventDefault()和stopPropagation(), 否则会自动重定向 */
     e.preventDefault();
     e.stopPropagation();
     var targetNode = getTargetTreeNode(e);
+    if (!targetNode) return;
     targetNode.classList.remove("".concat(resolveClassName('tree-drop-active')), "".concat(resolveClassName('tree-drop-disabled')));
     var data = extendNodeAttr(getNodeByTargetTreeNode(targetNode));
     if (isNeedCheckDroppable.value && props.disableDrop(data)) {
       return;
     }
-    var sourceNodeId = dragNodeId; // e.dataTransfer.getData('node-id');
+    var sourceNodeId = dragNodeId;
     var targetNodeId = targetNode.getAttribute('data-tree-node');
-    Reflect.apply(props.dragSort ? dragSortData : dragAsChildNode, use_node_drag_this, [sourceNodeId, targetNodeId]);
-    ctx.emit(EVENTS.NODE_DROP, e, targetNode, data);
+    if (sourceNodeId !== targetNodeId) {
+      var _dragOverItem2, _dragOverItem3, _dragOverItem4;
+      if ((_dragOverItem2 = dragOverItem) !== null && _dragOverItem2 !== void 0 && _dragOverItem2.classList.contains(dropInner)) {
+        Reflect.apply(dragAsChildNode, use_node_drag_this, [sourceNodeId, targetNodeId]);
+      } else if ((_dragOverItem3 = dragOverItem) !== null && _dragOverItem3 !== void 0 && _dragOverItem3.classList.contains(dropAfter) || (_dragOverItem4 = dragOverItem) !== null && _dragOverItem4 !== void 0 && _dragOverItem4.classList.contains(dropBefore)) {
+        Reflect.apply(dragSortData, use_node_drag_this, [sourceNodeId, targetNodeId]);
+      }
+      ctx.emit(EVENTS.NODE_DROP, e, targetNode, data);
+    }
+    nodeRectMap = new WeakMap();
+    (_dragOverItem5 = dragOverItem) === null || _dragOverItem5 === void 0 || _dragOverItem5.classList.remove(dropAfter, dropBefore, dropInner);
+    dragOverItem = null;
   };
   var isNodeSortable = function isNodeSortable(sourceId, targetId) {
-    var sourcePath = getNodePathById(sourceId);
-    var targetPath = getNodePathById(targetId);
-    // if (!sourcePath || targetPath) {
-    //   return false;
-    // }
-    var sourceParentNodeId = getNodeParentIdById(sourceId);
-    var targetParentNode = getNodeParentIdById(targetId);
-    if (sourceParentNodeId === targetParentNode) {
-      return true;
-    }
-    return sourcePath.indexOf(targetPath) === -1 && targetPath.indexOf(sourcePath) === -1;
+    return sourceId !== targetId;
   };
   var dragSortData = function dragSortData(sourceId, targetId) {
-    if (!isNodeSortable(sourceId, targetId)) {
+    var _dragOverItem6, _dragOverItem7;
+    if (!props.dragSort || !isNodeSortable(sourceId, targetId)) {
       return;
     }
-    var sourceNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(sourceId)));
-    var targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(targetId)));
+    var sourceNodeData = getSourceNodeByUID(sourceId);
+    var targetNodeData = getSourceNodeByUID(targetId);
+    if (!sourceNodeData || !targetNodeData) return;
     var sourceNodeParent = getParentNodeData(sourceId);
     var targetNodeParent = getParentNodeData(targetId);
-    var sourceNodeIndex = getNodeAttrById(sourceId, NODE_ATTRIBUTES.INDEX);
-    var targetNodeIndex = getNodeAttrById(targetId, NODE_ATTRIBUTES.INDEX);
-    sourceNodeParent === null || sourceNodeParent === void 0 || sourceNodeParent[props.children].splice(sourceNodeIndex, 1, targetNodeData);
-    targetNodeParent === null || targetNodeParent === void 0 || targetNodeParent[props.children].splice(targetNodeIndex, 1, sourceNodeData);
+    if (!sourceNodeParent || !targetNodeParent) return;
+    // 只允许同父节点下排序
+    if (props.dragSortMode === 'next') {
+      if (sourceNodeParent !== targetNodeParent) return;
+    }
+    var childrenKey = props.children;
+    var sourceSiblings = sourceNodeParent[childrenKey];
+    var targetSlibings = targetNodeParent[childrenKey];
+    if (!Array.isArray(sourceSiblings)) return;
+    var sourceNodeIndex = sourceSiblings.findIndex(function (item) {
+      return item === sourceNodeData;
+    });
+    var targetNodeIndex = targetSlibings.findIndex(function (item) {
+      return item === targetNodeData;
+    });
+    if (sourceNodeIndex === -1 || targetNodeIndex === -1) return;
+    // 先移除源节点
+    sourceSiblings.splice(sourceNodeIndex, 1);
+    // 计算插入位置
+    if ((_dragOverItem6 = dragOverItem) !== null && _dragOverItem6 !== void 0 && _dragOverItem6.classList.contains(dropAfter)) {
+      // 如果源节点在目标节点前面，移除后 targetNodeIndex 需要减 1
+      if (sourceNodeIndex < targetNodeIndex) {
+        targetNodeIndex = targetNodeIndex - 1;
+      }
+      targetNodeIndex = targetNodeIndex + 1;
+    } else if ((_dragOverItem7 = dragOverItem) !== null && _dragOverItem7 !== void 0 && _dragOverItem7.classList.contains(dropBefore)) {
+      // 如果源节点在目标节点后面，移除后 targetNodeIndex 不变
+      if (sourceNodeIndex > targetNodeIndex) {
+        // do nothing
+      }
+    }
+    // 插入节点
+    targetSlibings.splice(targetNodeIndex, 0, sourceNodeData);
+    // 更新所有兄弟节点的 INDEX
+    targetSlibings.forEach(function (item, idx) {
+      var nodeId = getNodeAttrById(item[NODE_ATTRIBUTES.UUID], NODE_ATTRIBUTES.UUID) || item[NODE_ATTRIBUTES.UUID];
+      if (nodeId) {
+        setNodeAttrById(nodeId, NODE_ATTRIBUTES.INDEX, idx);
+      }
+    });
+    sourceSiblings.forEach(function (item, idx) {
+      var nodeId = getNodeAttrById(item[NODE_ATTRIBUTES.UUID], NODE_ATTRIBUTES.UUID) || item[NODE_ATTRIBUTES.UUID];
+      if (nodeId) {
+        setNodeAttrById(nodeId, NODE_ATTRIBUTES.INDEX, idx);
+      }
+    });
+    // 触发更新
+    ctx.emit(EVENTS.NODE_DRAG_SORT, {
+      sourceNode: sourceNodeData,
+      targetNode: targetNodeData,
+      sourceIndex: sourceNodeIndex,
+      targetIndex: targetNodeIndex,
+      targetSlibings: targetSlibings
+    });
   };
   var dragAsChildNode = function dragAsChildNode(sourceNodeId, targetNodeId) {
     var sourceNodeData = getSourceNodeByUID(sourceNodeId);
@@ -2004,11 +2142,16 @@ var use_node_drag_this = undefined;
   var handleTreeNodeDragLeave = function handleTreeNodeDragLeave(e) {
     e.preventDefault();
     var targetNode = getTargetTreeNode(e);
+    // 移除目标节点的缓存
+    if (nodeRectMap.has(targetNode)) {
+      nodeRectMap["delete"](targetNode);
+    }
     targetNode.classList.remove("".concat(resolveClassName('tree-drop-active')), "".concat(resolveClassName('tree-drop-disabled')));
+    targetNode.classList.remove(dropAfter, dropBefore, dropInner);
     ctx.emit(EVENTS.NODE_DRAG_LEAVE, e, targetNode);
   };
   (0,external_vue_namespaceObject.onMounted)(function () {
-    if (props.draggable && root.value) {
+    if ((props.draggable || props.dragSort) && root.value) {
       var rootTree = root.value.$el;
       rootTree.addEventListener('mousedown', handleTreeNodeMousedown);
       rootTree.addEventListener('dragstart', handleTreeNodeDragStart);
@@ -2018,7 +2161,7 @@ var use_node_drag_this = undefined;
     }
   });
   (0,external_vue_namespaceObject.onUnmounted)(function () {
-    if (props.draggable && root.value) {
+    if ((props.draggable || props.dragSort) && root.value) {
       var rootTree = root.value.$el;
       rootTree.removeEventListener('mousedown', handleTreeNodeMousedown);
       rootTree.removeEventListener('dragstart', handleTreeNodeDragStart);
@@ -2650,6 +2793,7 @@ var use_tree_init_this = undefined;
       getNodePath = _useNodeAttribute.getNodePath,
       getNodeId = _useNodeAttribute.getNodeId,
       getNodeAttr = _useNodeAttribute.getNodeAttr,
+      getNodeById = _useNodeAttribute.getNodeById,
       getParentNode = _useNodeAttribute.getParentNode,
       getIntersectionResponse = _useNodeAttribute.getIntersectionResponse;
     var _useSearch = use_search(props),
@@ -2795,6 +2939,11 @@ var use_tree_init_this = undefined;
         return;
       }
     };
+    var setCheckedById = function setCheckedById(id) {
+      var checked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      setChecked(getNodeById(id), checked, triggerEvent);
+    };
     ctx.expose({
       handleTreeNodeClick: handleTreeNodeClick,
       isNodeChecked: isNodeChecked,
@@ -2804,6 +2953,7 @@ var use_tree_init_this = undefined;
       hasChildNode: hasChildNode,
       setOpen: setOpen,
       setChecked: setChecked,
+      setCheckedById: setCheckedById,
       setNodeAction: setNodeAction,
       setNodeOpened: setOpen,
       setSelect: setSelect,

package/lib/tree/props.d.ts

@@ -132,6 +132,16 @@ export declare const treeProps: {
     disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
+    /**
+     * 拖拽阈值
+     * 用于判断拖拽时鼠标位置与节点的距离
+     * 当鼠标位置与节点的距离大于此值时，才会触发拖拽
+     */
+    dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
     /**
      * 节点拖拽时可交换位置（开启拖拽可交换位置后将不支持改变层级）
      */
@@ -140,6 +150,15 @@ export declare const treeProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 拖拽排序模式
+     * - any: 允许拖拽到任意位置
+     * - next: 只允许拖拽到同级节点的前后位置
+     * 默认 any
+     */
+    dragSortMode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     /**
      * 节点是否可以选中
      */
@@ -240,6 +259,7 @@ type AsyncOption = {
     callback: (item: any, cb: any) => Promise<VNode | string>;
     cache: boolean;
     deepAutoOpen?: string;
+    trigger?: string[];
 };
 export type IIntersectionObserver = {
     enabled: boolean;

package/lib/tree/tree.css

@@ -257,13 +257,33 @@
 }
 .bk-tree {
   font-size: 14px;
+  position: relative;
 }
 .bk-tree .bk-node-row {
   padding-left: calc(var(--offset-left));
+  position: relative;
 }
 .bk-tree .bk-node-row.is-selected {
   background-color: #ebf2ff;
 }
+.bk-tree .bk-node-row.drop-before::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #2196F3;
+}
+.bk-tree .bk-node-row.drop-after::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #2196F3;
+}
 .bk-tree-node {
   position: relative;
   display: flex;
@@ -276,6 +296,20 @@
 .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
 }
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child {
+  position: relative;
+}
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child::before {
+  position: absolute;
+  top: calc(50% + 1px);
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
 .bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
@@ -309,6 +343,7 @@
 .bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
+  min-width: 14px;
 }
 .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
@@ -319,6 +354,9 @@
   align-items: center;
   min-width: 0;
 }
+.bk-tree-node .bk-node-content .node-check-box {
+  display: inline-flex;
+}
 .bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }
@@ -340,3 +378,11 @@
 .bk-tree-drop-disabled .bk-tree-node {
   cursor: no-drop;
 }
+.bk-tree .insert-line {
+  position: absolute;
+  height: 2px;
+  background: #2196F3;
+  display: none;
+  pointer-events: none;
+  z-index: 999;
+}