@aloudata/aloudata-design 2.13.8 → 2.13.9

package/dist/ConfigProvider/getUserList.d.ts

@@ -4,6 +4,9 @@ export declare enum EUserType {
     USER = "USER",
     USER_GROUP = "USER_GROUP"
 }
+export declare enum EUserSource {
+    ALOUDATA = "Aloudata"
+}
 export interface IUser {
     type: EUserType.USER;
     userId: string;
@@ -11,7 +14,11 @@ export interface IUser {
     nickname?: string;
     photo?: string;
     name: string;
+    ban?: boolean;
     [key: string]: unknown;
+    email?: string;
+    phone?: string;
+    userSource?: EUserSource;
 }
 export interface IUserGroup {
     type: EUserType.USER_GROUP;

package/dist/ConfigProvider/getUserList.js

@@ -4,6 +4,10 @@ export var EUserType = /*#__PURE__*/function (EUserType) {
   EUserType["USER_GROUP"] = "USER_GROUP";
   return EUserType;
 }({});
+export var EUserSource = /*#__PURE__*/function (EUserSource) {
+  EUserSource["ALOUDATA"] = "Aloudata";
+  return EUserSource;
+}({});
 var GetUserListContext = /*#__PURE__*/React.createContext({});
 export var SizeContextProvider = function SizeContextProvider(_ref) {
   var children = _ref.children,

package/dist/Icon/components/DragLightLine.d.ts

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+interface SVGRProps {
+    size?: number | string;
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+}
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+export default Memo;

package/dist/Icon/components/DragLightLine.js

@@ -0,0 +1,35 @@
+var _excluded = ["title", "titleId", "desc", "descId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { forwardRef, memo } from 'react';
+var DragLightLine = function DragLightLine(_ref, ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    desc = _ref.desc,
+    descId = _ref.descId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width || props.size || 16,
+    height: props.height || props.size || 16,
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ref: ref,
+    "aria-labelledby": titleId,
+    "aria-describedby": descId
+  }, props), desc ? /*#__PURE__*/React.createElement("desc", {
+    id: descId
+  }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: "#6B7280",
+    fillRule: "evenodd",
+    d: "M6 4a.667.667 0 1 0 0-1.334.667.667 0 0 0 0 1.333Zm0 4.666a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333Zm.667 4a.667.667 0 1 1-1.334 0 .667.667 0 0 1 1.334 0ZM10 3.999a.667.667 0 1 0 0-1.333A.667.667 0 0 0 10 4Zm0 4.667a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333Zm.667 4a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0Z",
+    clipRule: "evenodd"
+  }));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(DragLightLine);
+var Memo = /*#__PURE__*/memo(ForwardRef);
+export default Memo;

package/dist/Icon/index.d.ts

@@ -22,6 +22,7 @@ export { default as CloseLLine } from './components/CloseLLine';
 export { default as CloseLightLine } from './components/CloseLightLine';
 export { default as CloseMLine } from './components/CloseMLine';
 export { default as DangerFill } from './components/DangerFill';
+export { default as DragLightLine } from './components/DragLightLine';
 export { default as DragLine } from './components/DragLine';
 export { default as Ellipsis } from './components/Ellipsis';
 export { default as EyeOffLine } from './components/EyeOffLine';

package/dist/Icon/index.js

@@ -22,6 +22,7 @@ export { default as CloseLLine } from "./components/CloseLLine";
 export { default as CloseLightLine } from "./components/CloseLightLine";
 export { default as CloseMLine } from "./components/CloseMLine";
 export { default as DangerFill } from "./components/DangerFill";
+export { default as DragLightLine } from "./components/DragLightLine";
 export { default as DragLine } from "./components/DragLine";
 export { default as Ellipsis } from "./components/Ellipsis";
 export { default as EyeOffLine } from "./components/EyeOffLine";

package/dist/Icon/svg/drag-light-line.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id=" Icon / Light / Interface / drag-light-line">
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M6.00016 3.99935C6.36835 3.99935 6.66683 3.70087 6.66683 3.33268C6.66683 2.96449 6.36835 2.66602 6.00016 2.66602C5.63197 2.66602 5.3335 2.96449 5.3335 3.33268C5.3335 3.70087 5.63197 3.99935 6.00016 3.99935ZM6.00016 8.66602C6.36835 8.66602 6.66683 8.36754 6.66683 7.99935C6.66683 7.63116 6.36835 7.33268 6.00016 7.33268C5.63197 7.33268 5.3335 7.63116 5.3335 7.99935C5.3335 8.36754 5.63197 8.66602 6.00016 8.66602ZM6.66683 12.666C6.66683 13.0342 6.36835 13.3327 6.00016 13.3327C5.63197 13.3327 5.3335 13.0342 5.3335 12.666C5.3335 12.2978 5.63197 11.9993 6.00016 11.9993C6.36835 11.9993 6.66683 12.2978 6.66683 12.666ZM10.0002 3.99935C10.3684 3.99935 10.6668 3.70087 10.6668 3.33268C10.6668 2.96449 10.3684 2.66602 10.0002 2.66602C9.63197 2.66602 9.3335 2.96449 9.3335 3.33268C9.3335 3.70087 9.63197 3.99935 10.0002 3.99935ZM10.0002 8.66602C10.3684 8.66602 10.6668 8.36754 10.6668 7.99935C10.6668 7.63116 10.3684 7.33268 10.0002 7.33268C9.63197 7.33268 9.3335 7.63116 9.3335 7.99935C9.3335 8.36754 9.63197 8.66602 10.0002 8.66602ZM10.6668 12.666C10.6668 13.0342 10.3684 13.3327 10.0002 13.3327C9.63197 13.3327 9.3335 13.0342 9.3335 12.666C9.3335 12.2978 9.63197 11.9993 10.0002 11.9993C10.3684 11.9993 10.6668 12.2978 10.6668 12.666Z" fill="#6B7280"/>
+</g>
+</svg>

package/dist/LogicTree/components/LogicItem/index.d.ts

@@ -9,6 +9,10 @@ interface IProps<T> {
     changeRecordData: (id: string, data: T) => void;
     changeRelation: (id: string, logicType: ELogicType) => void;
     renderCondition: TRenderCondition<T>;
+    onDragEnd: (dragId: string, hoverId: string) => void;
+    hoverId: string;
+    setHoverId: (id: string) => void;
+    isRoot?: boolean;
 }
-export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, }: IProps<T>): React.JSX.Element;
+export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, isRoot, hoverId, setHoverId, }: IProps<T>): React.JSX.Element;
 export {};

package/dist/LogicTree/components/LogicItem/index.js

@@ -4,8 +4,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
 import _ from 'lodash';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import DragLightLine from "../../../Icon/components/DragLightLine";
 import PlusIcon from "../../../Icon/components/SignLightLine";
 import CloseIcon from "../../../Icon/components/TimesLightLine";
 import IconButton from "../../../IconButton";
@@ -21,7 +24,12 @@ export default function LogicItem(_ref) {
     changeRecordData = _ref.changeRecordData,
     remove = _ref.remove,
     changeRelation = _ref.changeRelation,
-    renderCondition = _ref.renderCondition;
+    renderCondition = _ref.renderCondition,
+    onDragEnd = _ref.onDragEnd,
+    _ref$isRoot = _ref.isRoot,
+    isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot,
+    hoverId = _ref.hoverId,
+    setHoverId = _ref.setHoverId;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     firstNodeHight = _useState2[0],
@@ -41,6 +49,55 @@ export default function LogicItem(_ref) {
     label: t.LogicTree.select.or
   }];
   var type = value.type;
+  var ref = useRef(null);
+  var _useDrag = useDrag({
+      type: 'LOGIC_ITEM',
+      item: {
+        id: value.id
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      },
+      canDrag: !isRoot
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1];
+  var _useDrop = useDrop({
+      accept: 'LOGIC_ITEM',
+      drop: function drop(item, monitor) {
+        if (!ref.current) {
+          return;
+        }
+        var dragId = item.id;
+        var hoverId = value.id;
+        if (dragId === hoverId) {
+          return;
+        }
+        // 检查是否为最顶层的放置目标
+        if (monitor.didDrop()) {
+          return;
+        }
+        onDragEnd(dragId, hoverId);
+      },
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver({
+            shallow: true
+          }),
+          canDrop: monitor.canDrop()
+        };
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    isOver = _useDrop2$.isOver,
+    canDrop = _useDrop2$.canDrop,
+    drop = _useDrop2[1];
+  drag(drop(ref));
+  var isDragOver = isOver && canDrop && !isRoot;
   var firstRefCallback = function firstRefCallback(e) {
     if (e) {
       setFirstNodeHight(e.clientHeight);
@@ -74,9 +131,25 @@ export default function LogicItem(_ref) {
   if (type === ENodeType.LOGIC) {
     var nodes = value.nodes,
       _logicType = value.logicType;
-    var verticalLineHeight = nodes.length > 1 ? "calc(100% - ".concat(firstNodeHight / TWO, "px - ").concat(lastNodeHight / TWO, "px - 40px)") : "30px";
+    var verticalLineHeight = nodes.length > 1 ? "calc(100% - ".concat(firstNodeHight / TWO, "px - ").concat(lastNodeHight / TWO, "px - 42px)") : "30px";
     return /*#__PURE__*/React.createElement("div", {
-      className: "ald-logic-tree-logic-node"
+      className: classNames('ald-logic-tree-logic-node', {
+        'is-over': isDragOver,
+        'is-hover': hoverId === value.id,
+        'is-dragging': isDragging
+      }),
+      ref: ref,
+      onMouseMove: function onMouseMove(e) {
+        e.stopPropagation();
+        setHoverId(value.id);
+      },
+      onMouseOut: function onMouseOut(e) {
+        e.stopPropagation();
+        setHoverId(value.id);
+      },
+      style: {
+        opacity: isDragging ? 0.5 : 1
+      }
     }, _.map(nodes, function (node, index) {
       var ref = null;
       if (index === 0) {
@@ -98,7 +171,10 @@ export default function LogicItem(_ref) {
         remove: remove,
         changeRelation: changeRelation,
         renderCondition: renderCondition,
-        changeRecordData: changeRecordData
+        changeRecordData: changeRecordData,
+        hoverId: hoverId,
+        setHoverId: setHoverId,
+        onDragEnd: onDragEnd
       }));
     }), /*#__PURE__*/React.createElement("div", {
       className: "ald-logic-tree-operation"
@@ -118,8 +194,12 @@ export default function LogicItem(_ref) {
       className: "ald-logic-tree-logic-vertical-line",
       style: {
         height: verticalLineHeight,
-        top: "".concat(firstNodeHight / TWO, "px")
+        top: "".concat(firstNodeHight / TWO + 4, "px")
       }
+    }), !isRoot && (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement(DragLightLine, {
+      size: 16,
+      color: "#6B7280",
+      className: "ald-logic-tree-node-drag-icon"
     }), /*#__PURE__*/React.createElement(Select, {
       options: logicOptions,
       className: "ald-logic-tree-select-relation",
@@ -130,8 +210,28 @@ export default function LogicItem(_ref) {
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "ald-logic-tree-record-node"
-  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-logic-tree-record-node', {
+      'is-over': isDragOver,
+      'is-hover': hoverId === value.id,
+      'is-dragging': isDragging
+    }),
+    ref: ref,
+    onMouseMove: function onMouseMove(e) {
+      e.stopPropagation();
+      setHoverId(value.id);
+    },
+    onMouseOut: function onMouseOut(e) {
+      e.stopPropagation();
+      setHoverId(value.id);
+    },
+    style: {
+      opacity: isDragging ? 0.5 : 1
+    }
+  }, (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement(DragLightLine, {
+    size: 16,
+    color: "#6B7280",
+    className: "ald-logic-tree-record-node-drag-icon"
+  }), /*#__PURE__*/React.createElement("div", {
     className: "ald-logic-tree-render-condition-wrap"
   }, renderCondition(value.data, {
     changeData: onChangeRecordData

package/dist/LogicTree/helper.d.ts

@@ -1,4 +1,6 @@
-import { ELogicType, TNode } from './type';
+import { ELogicType, ILogicNode, TNode } from './type';
+export declare function findNodeById<T>(nodeId: string, currentNodes: TNode<T>): TNode<T> | undefined;
+export declare function findParentNodeById<T>(nodeId: string, currentNodes: TNode<T>): ILogicNode<T> | undefined;
 export declare function addLogicNode<T>(nodeId: string, rootNode: TNode<T>, newInitializationData: T): TNode<T>;
 export declare function addRecordNode<T>(nodeId: string, rootNode: TNode<T>, newInitializationData: T): TNode<T>;
 export declare function removeNode<T>(nodeId: string, rootNode: TNode<T>, initialNode: TNode<T>, rootNodeAllowedEmpty?: boolean): TNode<T>;

package/dist/LogicTree/helper.js

@@ -6,7 +6,7 @@ import { getUniqId } from "../_utils/getUniqId";
 import { ELogicType, ENodeType } from "./type";
 
 // 递归查找节点
-function findNodeById(nodeId, currentNodes) {
+export function findNodeById(nodeId, currentNodes) {
   if (nodeId === currentNodes.id) {
     return currentNodes;
   }
@@ -32,7 +32,7 @@ function findNodeById(nodeId, currentNodes) {
 }
 
 // 递归查找父节点
-function findParentNodeById(nodeId, currentNodes) {
+export function findParentNodeById(nodeId, currentNodes) {
   if (currentNodes.type === ENodeType.LOGIC) {
     var childrenNodes = currentNodes.nodes;
     var _iterator2 = _createForOfIteratorHelper(childrenNodes),

package/dist/LogicTree/index.js

@@ -6,11 +6,14 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useControllableValue } from 'ahooks';
 import classNames from 'classnames';
-import React from 'react';
+import _ from 'lodash';
+import React, { useCallback, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { getUniqId } from "../_utils/getUniqId";
 import DisplayLogicTree from "./DisplayLogicTree";
 import LogicItem from "./components/LogicItem";
-import { addLogicNode, addRecordNode, changeRecordData, changeRelation, removeNode } from "./helper";
+import { addLogicNode, addRecordNode, changeRecordData, changeRelation, findNodeById, findParentNodeById, removeNode } from "./helper";
 import { ELogicType, ENodeType } from "./type";
 export { DisplayLogicTree, ELogicType, ENodeType };
 export default function LogicTree(props) {
@@ -37,10 +40,14 @@ export default function LogicTree(props) {
     _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
     innerValue = _useControllableValue2[0],
     setInnerValue = _useControllableValue2[1];
-  var changeInnerValue = function changeInnerValue(newValue) {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverItemId = _useState2[0],
+    setHoverItemId = _useState2[1];
+  var changeInnerValue = useCallback(function (newValue) {
     setInnerValue(newValue);
     propsOnChange(newValue);
-  };
+  }, [propsOnChange, setInnerValue]);
   var onAddCondition = function onAddCondition(id) {
     var newRootNode = addRecordNode(id, innerValue, newInitializationData);
     changeInnerValue(newRootNode);
@@ -61,10 +68,50 @@ export default function LogicTree(props) {
     var newRootNode = changeRecordData(id, data, innerValue);
     changeInnerValue(newRootNode);
   };
+  var moveNode = useCallback(function (dragId, hoverId) {
+    var newRootNode = _.cloneDeep(innerValue);
+    var dragNode = findNodeById(dragId, newRootNode);
+    var hoverNode = findNodeById(hoverId, newRootNode);
+    if (dragNode && hoverNode) {
+      var dragParent = findParentNodeById(dragId, newRootNode);
+      var hoverParent = findParentNodeById(hoverId, newRootNode);
+      if (dragParent && hoverParent) {
+        var tempDragParentNodes = dragParent.nodes.filter(function (node) {
+          return node.id !== dragId;
+        });
+
+        // 如果  tempDragParentNodes 为空的话，则删除dragParent结点
+        if (tempDragParentNodes.length === 0) {
+          var grandParent = findParentNodeById(dragParent.id, newRootNode);
+          if (grandParent) {
+            grandParent.nodes = grandParent.nodes.filter(function (node) {
+              return node.id !== dragParent.id;
+            });
+          } else {
+            // 如果 dragParent 是根节点，则不删除，只清空其 nodes
+            dragParent.nodes = [];
+          }
+        } else {
+          dragParent.nodes = tempDragParentNodes;
+        }
+
+        // 插入到新位置
+        var hoverIndex = hoverParent.nodes.findIndex(function (node) {
+          return node.id === hoverId;
+        });
+        hoverParent.nodes.splice(hoverIndex + 1, 0, dragNode);
+
+        // 直接更新状态
+        changeInnerValue(newRootNode);
+      }
+    }
+  }, [innerValue, changeInnerValue]);
   if (!innerValue) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-logic-tree-wrap', className)
   }, /*#__PURE__*/React.createElement(LogicItem, {
     value: innerValue,
@@ -73,6 +120,10 @@ export default function LogicTree(props) {
     remove: onRemove,
     changeRecordData: onChangeRecordData,
     renderCondition: renderCondition,
-    changeRelation: onChangeRelation
-  }));
+    changeRelation: onChangeRelation,
+    onDragEnd: moveNode,
+    hoverId: hoverItemId,
+    setHoverId: setHoverItemId,
+    isRoot: true // 将最顶层的LogicItem标记为根节点
+  })));
 }

package/dist/LogicTree/style/LoginItem.less

@@ -1,12 +1,36 @@
-@recordLineWidth: 32px;
+@recordLineWidth: 48px;
 @selectWidth: 48px;
+@dragIConWidth: 16px;
+
+.ald-logic-tree-wrap > .ald-logic-tree-logic-node {
+  &.is-hover {
+    background: rgba(255, 255, 255, 0);
+  }
+}
 
 .ald-logic-tree-logic-node {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding-left: calc(@recordLineWidth + @selectWidth / 2);
+  padding-left: calc(@recordLineWidth + @selectWidth / 2 + @dragIConWidth);
   position: relative;
+  cursor: pointer;
+  border-radius: 6px;
+  margin-left: -16px;
+
+  &.is-hover {
+    background: rgba(244, 244, 245);
+  }
+
+  &.is-dragging {
+    background: var(--alias-colors-bg-selected-default, #e8f2fe);
+  }
+
+  .ald-logic-tree-node-drag-icon {
+    position: absolute;
+    top: calc(50% + 5px);
+    left: 0;
+    transform: translateY(-50%);
+  }
 
   .ald-logic-tree-node-wrap {
     position: relative;
@@ -22,6 +46,7 @@
 
   .ald-logic-tree-operation {
     height: 32px;
+    padding: 4px 0;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -33,20 +58,20 @@
       height: calc(50% - 16px);
       width: @recordLineWidth;
       top: 50%;
-      left: calc(@selectWidth / 2);
+      left: calc(@selectWidth / 2 + @dragIConWidth);
     }
   }
 
   .ald-logic-tree-logic-vertical-line {
     position: absolute;
     border-left: 1px solid #d1d5db;
-    left: calc(@selectWidth / 2);
+    left: calc(@selectWidth / 2 + @dragIConWidth);
   }
 
   .ald-logic-tree-select-relation {
     position: absolute !important;
-    top: calc(50% - 14px);
-    left: 0;
+    top: calc(50% - 10px);
+    left: 16px;
     z-index: 1;
     width: @selectWidth !important;
     background: #fff !important;
@@ -70,6 +95,30 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  cursor: pointer;
+  padding-left: 16px;
+  margin-left: -16px;
+
+  &.is-hover {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    background: rgba(244, 244, 245);
+  }
+
+  &.is-dragging {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    background: var(--alias-colors-bg-selected-default, #e8f2fe);
+  }
+
+  .ald-logic-tree-record-node-drag-icon {
+    position: absolute;
+    top: calc(50%);
+    left: 0;
+    transform: translateY(-50%);
+  }
 
   .ald-logic-tree-render-condition-wrap {
     display: flex;
@@ -77,3 +126,21 @@
     flex: 0 0 fit-content;
   }
 }
+
+.ald-logic-tree-logic-node,
+.ald-logic-tree-record-node {
+  position: relative;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.ald-logic-tree-logic-node.is-over:last-child::after,
+.ald-logic-tree-record-node.is-over:last-child::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 16px;
+  width: calc(100% - 16px);
+  height: 2px;
+  background-color: #126fdd;
+}

package/dist/MemberPicker/components/MemberSelection.js

@@ -15,7 +15,6 @@ import Spin from "../../Spin";
 import { LocaleContext, getTranslator } from "../../locale/default";
 import { isUser } from "../utils/getUsersWithUserId";
 import MultipleOption from "./MultipleOption";
-import { userDisplayNameIsRepeated } from "./Panel";
 import SingleOption from "./SingleOption";
 export var OPTION_HEIGHT = 36;
 export var WRAPPER_HEIGHT = 300;
@@ -121,7 +120,7 @@ export default function MemberSelection(props) {
       user: user,
       disabled: disabled,
       selected: isSelected,
-      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
+      showUserId: true,
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
@@ -129,7 +128,7 @@ export default function MemberSelection(props) {
       key: user.userId,
       user: user,
       selected: isSelected,
-      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
+      showUserId: true,
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }

package/dist/MemberPicker/components/MultipleOption.js

@@ -4,12 +4,13 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classnames from 'classnames';
 import React, { useContext } from 'react';
+import Badge from "../../Badge";
 import Checkbox from "../../Checkbox";
 import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { LocaleContext, getTranslator } from "../../locale/default";
 import { getAccount, getId, getPhoto } from "../utils";
-import { isUserGroup } from "../utils/getUsersWithUserId";
+import { isUser, isUserGroup } from "../utils/getUsersWithUserId";
 import NickLabel from "./NickLabel";
 export default function MultipleList(params) {
   var _useContext = useContext(LocaleContext),
@@ -49,6 +50,9 @@ export default function MultipleList(params) {
     addonBefore: showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("span", {
       className: 'ald-member-picker-option-id'
     }, user.userId)
+  }), isUser(user) && user.ban && /*#__PURE__*/React.createElement(Badge, {
+    status: "default",
+    count: t.MemberPicker.ban
   }))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -1,19 +1,19 @@
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useContext } from 'react';
+import Badge from "../../Badge";
 import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
 import { LocaleContext, getTranslator } from "../../locale/default";
 import { getAccount, getId, getPhoto } from "../utils";
+import { isUser } from "../utils/getUsersWithUserId";
 import NickLabel from "./NickLabel";
-import { userDisplayNameIsRepeated } from "./Panel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
     selectedUsers = props.selectedUsers,
     width = props.width,
     _props$lockedIds = props.lockedIds,
-    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
-    userList = props.userList;
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -30,7 +30,6 @@ export default function SelectedMemberTags(props) {
     }
   }, selectedUsers.map(function (user) {
     var hasLocked = false;
-    var isDisplayNameRepeat = false;
     if (user && user.hasOwnProperty('groupId')) {
       var index = _.findIndex(lockedIds, {
         groupId: user.groupId,
@@ -42,7 +41,6 @@ export default function SelectedMemberTags(props) {
         userId: user.userId,
         type: user.type
       });
-      isDisplayNameRepeat = userDisplayNameIsRepeated(userList, user.nickname);
       hasLocked = _index !== -1;
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -56,10 +54,13 @@ export default function SelectedMemberTags(props) {
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user),
-      addonBefore: isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("span", {
+      addonBefore: user.type === 'USER' && /*#__PURE__*/React.createElement("span", {
         className: "ald-member-picker-option-id"
       }, user.userId)
-    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+    })), isUser(user) && user.ban && /*#__PURE__*/React.createElement(Badge, {
+      status: "default",
+      count: t.MemberPicker.ban
+    }), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",