bkui-vue 2.0.2-beta.3 → 2.0.2-beta.30

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__ = {};
 /******/ 
@@ -338,7 +339,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)
   }),
   /**
    * 每个节点偏移左侧距离
@@ -835,10 +841,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 +1470,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 +1495,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 +1505,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 +1605,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 +1636,7 @@ var use_node_action_this = undefined;
     e.stopImmediatePropagation();
     e.stopPropagation();
     e.preventDefault();
-    handleTreeNodeClick(node, e);
+    handleTreeNodeClick(node, e, 'expand');
   };
   /**
    * 设置节点选中状态
@@ -1629,6 +1650,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 +1695,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 +1723,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 +1829,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 +1838,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 +1864,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 +1899,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,7 +1907,6 @@ var use_node_drag_this = undefined;
     getNodeParentIdById = _useNodeAttribute.getNodeParentIdById,
     extendNodeAttr = _useNodeAttribute.extendNodeAttr,
     getNodeAttrById = _useNodeAttribute.getNodeAttrById,
-    getNodePathById = _useNodeAttribute.getNodePathById,
     isRootNode = _useNodeAttribute.isRootNode;
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
@@ -1888,6 +1917,8 @@ var use_node_drag_this = undefined;
     return typeof props.disableDrop === 'function';
   });
   var dragNodeId = '';
+  var draggedItem = null;
+  var nodeRectMap = new WeakMap();
   var getTargetTreeNode = function getTargetTreeNode(e) {
     var target = e.target;
     return target.closest('[data-tree-node]');
@@ -1911,10 +1942,45 @@ 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 * 0.2;
+    var offsetY = clientY - top;
+    if (offsetY < threshold) {
+      if (!targetNode.classList.contains(dropBefore)) {
+        targetNode.classList.add(dropBefore);
+        targetNode.classList.remove(dropAfter, dropInner);
+      }
+    } else if (offsetY > height - threshold) {
+      if (!targetNode.classList.contains(dropAfter)) {
+        targetNode.classList.add(dropAfter);
+        targetNode.classList.remove(dropBefore, dropInner);
+      }
+    } else {
+      if (!targetNode.classList.contains(dropInner)) {
+        targetNode.classList.add(dropInner);
+        targetNode.classList.remove(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 +1995,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,10 +2003,12 @@ 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();
@@ -1952,34 +2020,38 @@ var use_node_drag_this = undefined;
     }
     var sourceNodeId = dragNodeId; // e.dataTransfer.getData('node-id');
     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]);
+      }
+      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;
+    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 sourceNodeParent = getParentNodeData(sourceId);
-    var targetNodeParent = getParentNodeData(targetId);
     var sourceNodeIndex = getNodeAttrById(sourceId, NODE_ATTRIBUTES.INDEX);
+    sourceNodeParent === null || sourceNodeParent === void 0 || sourceNodeParent[props.children].splice(sourceNodeIndex, 1);
     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 ((_dragOverItem6 = dragOverItem) !== null && _dragOverItem6 !== void 0 && _dragOverItem6.classList.contains(dropAfter)) {
+      targetNodeIndex = targetNodeIndex + 1;
+    }
+    var targetNodeParent = getParentNodeData(targetId);
+    targetNodeParent === null || targetNodeParent === void 0 || targetNodeParent[props.children].splice(targetNodeIndex, 0, sourceNodeData);
   };
   var dragAsChildNode = function dragAsChildNode(sourceNodeId, targetNodeId) {
     var sourceNodeData = getSourceNodeByUID(sourceNodeId);
@@ -2005,10 +2077,11 @@ var use_node_drag_this = undefined;
     e.preventDefault();
     var targetNode = getTargetTreeNode(e);
     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 +2091,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 +2723,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 +2869,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 +2883,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

@@ -240,6 +240,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;
+}

package/lib/tree/tree.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         cache: boolean;
         deepAutoOpen?: string;
+        trigger?: string[];
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -186,6 +187,7 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         cache: boolean;
         deepAutoOpen?: string;
+        trigger?: string[];
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;

package/lib/tree/tree.less

@@ -5,13 +5,38 @@
 
 .@{bk-prefix}-tree {
   font-size: 14px;
+  position: relative;
 
   .@{bk-prefix}-node-row {
     padding-left: calc(var(--offset-left));
+    position: relative;
 
     &.is-selected {
       background-color: #ebf2ff;
     }
+
+    &.drop-before {
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #2196F3;
+      }
+    }
+    &.drop-after {
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #2196F3;
+      }
+    }
   }
 
   &-node {
@@ -27,6 +52,25 @@
       margin-left: calc(var(--depth)*var(--indent));
 
       &.level-line {
+
+        .@{bk-prefix}-node-action {
+          &.empty-child {
+            position: relative;
+
+            &::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: '';
+            }
+          }
+        }
+
         &::before {
           position: absolute;
           top: calc(50% + 1px);
@@ -47,6 +91,7 @@
       }
     }
 
+
     .node-virtual-line {
       position: absolute;
       top: -12px;
@@ -68,6 +113,7 @@
     .@{bk-prefix}-node-action {
       margin-right: 6px;
       color: #979ba5;
+      min-width: 14px;
     }
 
     .@{bk-prefix}-tree-icon {
@@ -80,6 +126,10 @@
       align-items: center;
       min-width: 0;
 
+      .node-check-box {
+        display: inline-flex;
+      }
+
       .@{bk-prefix}-checkbox {
         margin: 0;
 
@@ -108,7 +158,12 @@
     }
   }
 
-  &-drag-disabled {
-
+  .insert-line {
+    position: absolute;
+    height: 2px;
+    background: #2196F3;
+    display: none;
+    pointer-events: none;
+    z-index: 999;
   }
 }