@aloudata/aloudata-design 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/Checkbox/style/index.less

@@ -118,8 +118,8 @@
   }
 
   .ant-checkbox-inner {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     background-color: @checkbox-inner-bgc-normal;
     border-color: @checkbox-border-color-normal;
     border-radius: 2px;

package/dist/ConfigProvider/index.js

@@ -20,6 +20,7 @@ var AldCustomConfigProvider = function AldCustomConfigProvider(props) {
     }, children);
   }
   return /*#__PURE__*/React.createElement(ConfigProvider, _extends({
+    autoInsertSpaceInButton: false,
     theme: {
       token: {
         fontFamily: "Inter,'PingFang SC', system-ui, -apple-system, blinkmacsystemfont,\n          'Helvetica Neue', 'Segoe UI', helvetica, arial, 'Microsoft YaHei',\n          'WenQuanYi Micro Hei', sans-serif;"

package/dist/DataPreviewTable/style/index.less

@@ -38,12 +38,12 @@
     padding: 4px 13px 3px 20px;
     height: 100%;
     width: 100%;
-    line-height: 20px;
+    line-height: 25px;
     background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
 
     .ald-data-preview-header-left {
       width: 20px;
-      height: 20px;
+      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -52,6 +52,8 @@
       left: 4px;
       z-index: 1;
       color: #575757;
+      top: 0;
+      bottom: 0;
       // background:rgb(0 0 0 / 0%)
     }
 

package/dist/Form/style/index.d.ts

@@ -1,2 +1,3 @@
 import '../../style';
+import '../../Tooltip/style/index';
 import './index.less';

package/dist/Form/style/index.js

@@ -1,2 +1,3 @@
 import "../../style";
+import "../../Tooltip/style/index";
 import "./index.less";

package/dist/MemberPicker/index.js

@@ -191,6 +191,11 @@ var Component = function Component(_ref) {
     setDropdownOpen(open);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
   }, [onOpenChange]);
+  var panelKey = useMemo(function () {
+    if (dropdownOpen) {
+      return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');
+    }
+  }, [dropdownOpen]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     prefix: propPrefix
   }, restProps, {
@@ -252,6 +257,7 @@ var Component = function Component(_ref) {
         dataList: totalUserList,
         lockedIds: lockedIds,
         multiple: multiple,
+        key: panelKey,
         loading: loading,
         dropdownWidth: dropdownContentWidth,
         onSearchValueChange: onSearchValueChange,

package/dist/Radio/components/Radio/index.js

@@ -9,7 +9,6 @@ import _ from 'lodash';
 import React, { useContext, useEffect, useRef } from 'react';
 import { getUUID } from "../../../_utils/hooks/useId";
 import { RadioGroupContext } from "../Group";
-var FILL_BUTTON_MARGIN = 4;
 export default function Radio(props) {
   var groupContext = useContext(RadioGroupContext);
   var labelRef = useRef(null);
@@ -63,8 +62,8 @@ export default function Radio(props) {
   useEffect(function () {
     var _groupContext$sliderR;
     if (radioProps.checked && groupContext !== null && groupContext !== void 0 && (_groupContext$sliderR = groupContext.sliderRef) !== null && _groupContext$sliderR !== void 0 && _groupContext$sliderR.current && labelRef !== null && labelRef !== void 0 && labelRef.current) {
-      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft, "px");
-      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth - FILL_BUTTON_MARGIN, "px");
+      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft - 2, "px");
+      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
     }
   }, [groupContext.sliderRef, radioProps.checked]);
   var onChange = function onChange() {
@@ -90,6 +89,29 @@ export default function Radio(props) {
   }), /*#__PURE__*/React.createElement("span", {
     className: "ald-radio-inner"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "ald-radio-desc"
+    className: "ald-radio-desc",
+    onMouseEnter: function onMouseEnter() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR2, _groupContext$sliderR3;
+        (_groupContext$sliderR2 = groupContext.sliderRef) === null || _groupContext$sliderR2 === void 0 ? void 0 : (_groupContext$sliderR3 = _groupContext$sliderR2.current) === null || _groupContext$sliderR3 === void 0 ? void 0 : _groupContext$sliderR3.classList.add('ald-radio-fill-slider-hover');
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR4, _groupContext$sliderR5, _groupContext$sliderR6, _groupContext$sliderR7;
+        (_groupContext$sliderR4 = groupContext.sliderRef) === null || _groupContext$sliderR4 === void 0 ? void 0 : (_groupContext$sliderR5 = _groupContext$sliderR4.current) === null || _groupContext$sliderR5 === void 0 ? void 0 : _groupContext$sliderR5.classList.remove('ald-radio-fill-slider-hover');
+        (_groupContext$sliderR6 = groupContext.sliderRef) === null || _groupContext$sliderR6 === void 0 ? void 0 : (_groupContext$sliderR7 = _groupContext$sliderR6.current) === null || _groupContext$sliderR7 === void 0 ? void 0 : _groupContext$sliderR7.classList.remove('ald-radio-fill-slider-active');
+      }
+    },
+    onMouseDown: function onMouseDown() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR8, _groupContext$sliderR9;
+        (_groupContext$sliderR8 = groupContext.sliderRef) === null || _groupContext$sliderR8 === void 0 ? void 0 : (_groupContext$sliderR9 = _groupContext$sliderR8.current) === null || _groupContext$sliderR9 === void 0 ? void 0 : _groupContext$sliderR9.classList.add('ald-radio-fill-slider-active');
+      }
+    },
+    onMouseUp: function onMouseUp() {
+      var _groupContext$sliderR10, _groupContext$sliderR11;
+      if (radioProps.checked) (_groupContext$sliderR10 = groupContext.sliderRef) === null || _groupContext$sliderR10 === void 0 ? void 0 : (_groupContext$sliderR11 = _groupContext$sliderR10.current) === null || _groupContext$sliderR11 === void 0 ? void 0 : _groupContext$sliderR11.classList.remove('ald-radio-fill-slider-active');
+    }
   }, props.children));
 }

package/dist/Radio/style/index.less

@@ -183,12 +183,17 @@
   // transition: width, left, height 0.3s, 0.3s, 0.3s ease;
   cursor: pointer;
 
-  &:hover {
+  &:hover,
+  &.ald-radio-fill-slider-hover {
+    border-radius: var(--alias-radius-75, 6px);
     border: 1px solid
       var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
   }
 
-  &:active {
+  &:active,
+  &.ald-radio-fill-slider-active {
+    border-radius: var(--alias-radius-75, 6px);
     border: 1px solid
       var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
     background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
@@ -202,7 +207,6 @@
   align-items: flex-start;
   box-sizing: border-box;
   width: min-content;
-  width: auto;
   padding: 0;
   overflow: hidden;
 
@@ -368,6 +372,11 @@
   // 各种大小
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
+    border-radius: @border-radius-middle;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-50, 4px);
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -375,6 +384,12 @@
       }
     }
 
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 28px;
+      border-radius: @border-radius-middle;
+      margin-top: 2px;
+    }
+
     .ald-radio-icon-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-middle;
@@ -409,6 +424,11 @@
 
   &.ald-radio-group-small {
     height: @radio-group-height-small;
+    border-radius: @border-radius-small;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-25, 2px);
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -416,6 +436,12 @@
       }
     }
 
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 24px;
+      margin-top: 2px;
+      border-radius: @border-radius-small;
+    }
+
     .ald-radio-icon-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-small;
@@ -469,6 +495,17 @@
 
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
+    border-radius: @border-radius-large;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-75, 6px);
+    }
+
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 32px;
+      margin-top: 2px;
+      border-radius: @border-radius-large!important;
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -527,3 +564,20 @@
     }
   }
 }
+
+.ald-radio-group-filled {
+  display: flex;
+  gap: 2px;
+  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+  padding: 0 2px;
+
+  .ald-radio-label:not(.ald-radio-wrapper-disabled) {
+    &:hover {
+      background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
+    }
+
+    &:active {
+      background: var(--alias-colors-bg-interaction-press, rgba(0, 0, 0, 0.1));
+    }
+  }
+}

package/dist/Select/index.js

@@ -393,7 +393,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     bordered: false,
     open: typeof _open === 'boolean' ? _open : isOpen,
     disabled: mergedDisabled,
-    maxTagCount: 1,
+    maxTagCount: type === 'secondary' ? 'responsive' : 1,
     ref: selectRef,
     tagRender: tagRender || defaultTagRender,
     onChange: onChange,
@@ -414,7 +414,6 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "ald-select-suffix-icon"
     }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
-      console.log(open, 'open');
       setIsOpen(open);
       if (!open) {
         dropDownTimeRef.current = Date.now();

package/dist/Select/style/index.less

@@ -34,6 +34,10 @@
     &.ald-select-prefix-multiple {
       cursor: default;
     }
+
+    .ant-select-selection-overflow {
+      margin-left: 6px;
+    }
   }
 
   .ant-select {
@@ -64,14 +68,13 @@
       .ant-select-selection-overflow {
         align-self: normal;
         flex-wrap: nowrap;
-        margin-left: 6px;
         min-width: 52px;
         height: 100%;
 
         .ant-select-selection-overflow-item {
           align-items: center;
           line-height: inherit;
-          flex: 1;
+          // flex: 1;
           min-width: 0;
           // height: 100%;
 
@@ -114,11 +117,6 @@
                 height: 16px;
                 padding: 0 var(--alias-spacing-50, 4px);
                 border-radius: var(--alias-radius-100, 8px);
-                background: var(
-                  --alias-colors-bg-accent-blue-subtle-default,
-                  #d4e7fd
-                );
-                color: var(--alias-colors-text-information, #0f59b1);
                 font-size: 12px;
               }
             }
@@ -134,6 +132,17 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            // position: relative;;
+
+            &::before {
+              content: '，';
+            }
+          }
+
+          &:first-of-type {
+            .ald-select-multiple-tag-default::before {
+              content: '';
+            }
           }
 
           .ant-select-selection-search-input {

package/dist/Select/style/status.less

@@ -14,6 +14,16 @@
   &.ald-select-multiple .ant-select {
     .ant-select-selector {
       color: var(--alias-colors-text-selected, #126fdd);
+
+      .ant-select-selection-overflow-item-rest {
+        .ant-select-selection-item-content {
+          background: var(
+            --alias-colors-bg-accent-blue-subtle-default,
+            #d4e7fd
+          );
+          color: var(--alias-colors-text-information, #0f59b1);
+        }
+      }
     }
   }
 
@@ -62,6 +72,17 @@
   &.ald-select-secondary {
     .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
 
+    &.ald-select-multiple .ant-select {
+      .ant-select-selector {
+        .ant-select-selection-overflow-item-rest {
+          .ant-select-selection-item-content {
+            background: transparent;
+            color: var(--alias-colors-text-subtle, #4b5563);
+          }
+        }
+      }
+    }
+
     &.ald-select-fitted {
       .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
     }

package/dist/Tooltip/style/index.less

@@ -1,25 +1,25 @@
 @import '../../style/index.less';
 
-.ald-tooltip-overlay.ald-tooltip-overlay {
+.ant-tooltip.ant-tooltip {
   .ant-tooltip-inner {
     padding: 6px 8px;
     line-height: 16px;
-    background: @BG10;
-    border-radius: 2px;
+    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
+    border-radius: var(--alias-radius-50, 4px);
     box-shadow: none;
-    color: @ND0;
     font-weight: 400;
     font-size: 12px;
     min-height: 28px;
+    color: var(--alias-colors-text-inverse-strong, #fff);
   }
 
   .ant-tooltip-arrow {
     &::before {
-      background-color: @BG10;
+      background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
     }
   }
 
   .ant-tooltip-arrow-content {
-    background: @BG10;
+    background: var(--alias-colors-bg-skeleton-inverse-subtler, #111827);
   }
 }

package/dist/Tree/Tree.d.ts

@@ -131,6 +131,7 @@ export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTr
     titleRender?: (node: T) => React.ReactNode;
     showTabLeader?: boolean;
     handlerRender?: (node: T) => React.ReactNode;
+    highlightFilteredTitle?: boolean;
 }
 declare const Tree: React.ForwardRefExoticComponent<TreeProps<DataNode> & React.RefAttributes<RcTree<DataNode>>>;
 export default Tree;

package/dist/Tree/Tree.js

@@ -1,3 +1,4 @@
+var _excluded = ["className", "showIcon", "showLine", "blockNode", "children", "checkable", "selectable", "draggable", "titleRender", "showTabLeader", "handlerRender", "filterTreeNode", "treeData", "highlightFilteredTitle", "motion"];
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -8,7 +9,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 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); }
+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 classNames from 'classnames';
+import { produce } from 'immer';
 import { noop } from 'lodash';
 import RcTree from 'rc-tree';
 import * as React from 'react';
@@ -18,6 +22,7 @@ import collapseMotion from "../_utils/motion";
 import dropIndicatorRender from "./utils/dropIndicator";
 import renderSwitcherIcon from "./utils/iconUtil";
 var TREE_SWITCH_CION_SIZE = 16;
+var NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';
 
 // [Legacy] Compatible for v3
 
@@ -46,17 +51,19 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
     filterTreeNode = props.filterTreeNode,
     treeData = props.treeData,
+    highlightFilteredTitle = props.highlightFilteredTitle,
     _props$motion = props.motion,
     motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
       motionAppear: false
-    }) : _props$motion;
+    }) : _props$motion,
+    rest = _objectWithoutProperties(props, _excluded);
   var prefixCls = getPrefixCls('tree', 'ald-tree');
   var customTitleRender = React.useCallback(function (node) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, titleRender ? titleRender(node) : node.title, showTabLeader && /*#__PURE__*/React.createElement("div", {
       className: "ald-tree-tab-leader"
     }), handlerRender && handlerRender(node));
   }, [titleRender, showTabLeader, handlerRender]);
-  var newProps = _objectSpread(_objectSpread({}, props), {}, {
+  var newProps = _objectSpread(_objectSpread({}, rest), {}, {
     checkable: checkable,
     selectable: selectable,
     showIcon: showIcon,
@@ -110,52 +117,47 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   };
   var newTreeData = React.useMemo(function () {
-    if (!filterTreeNode) return treeData;
-    var processNode = function processNode(node) {
-      // 初始化一个标志来表示是否需要为当前节点及其所有子节点添加className
+    if (!filterTreeNode || !treeData) return treeData;
+    var shouldNodeDisabled = function shouldNodeDisabled(node) {
+      // 初始化一个标志来表示是否需要为当前节点添加className
       var shouldAddDisabled = true;
-      // 检查当前节点的title是否包含目标字符串，包含则不需要添加className
       if (filterTreeNode(node)) {
         shouldAddDisabled = false;
       }
       if (node.children) {
-        // 遍历当前节点的子节点
-        var _iterator = _createForOfIteratorHelper(node.children),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var child = _step.value;
-            // 递归调用processNode函数来处理子节点，判断子节点是否需要添加className
-            var childShouldAddDisabled = processNode(child);
-            shouldAddDisabled = shouldAddDisabled && childShouldAddDisabled;
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
+        // 遍历当前节点的子节点，只要有一个子节点不disable，则该不需要添加className
+        var allChildrenShouldAddDisabled = node.children.reduce(function (pre, child) {
+          return shouldNodeDisabled(child) && pre;
+        }, shouldAddDisabled);
+        shouldAddDisabled = allChildrenShouldAddDisabled;
       }
 
       // 如果shouldAddDisabled为true，就为当前节点添加className
       if (shouldAddDisabled) {
-        node.className = classNames(node.className, 'ald-tree-node-disabled');
+        var _node$className;
+        node.className = (_node$className = node.className) !== null && _node$className !== void 0 && _node$className.includes(NODE_DISABLE_CLASS_NAME) ? node.className : classNames(node.className, NODE_DISABLE_CLASS_NAME);
+      } else {
+        var _node$className2;
+        var reg = /ald-tree-node-disabled/g;
+        (_node$className2 = node.className) === null || _node$className2 === void 0 ? void 0 : _node$className2.replace(reg, ' ');
       }
       return shouldAddDisabled;
     };
-    if (!treeData) return treeData;
-    var _iterator2 = _createForOfIteratorHelper(treeData),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var rootNode = _step2.value;
-        processNode(rootNode);
+    var newTreeData = produce(treeData, function (draft) {
+      var _iterator = _createForOfIteratorHelper(draft),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var rootNode = _step.value;
+          shouldNodeDisabled(rootNode);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
-    return treeData;
+    });
+    return newTreeData;
   }, [filterTreeNode, treeData]);
   var noChildren = React.useMemo(function () {
     if (newTreeData !== null && newTreeData !== void 0 && newTreeData.length) {
@@ -173,7 +175,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, newProps, {
     prefixCls: prefixCls,
     treeData: newTreeData,
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _defineProperty(_classNames, "".concat(prefixCls, "-no-children"), noChildren), _classNames), className),
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _defineProperty(_classNames, "".concat(prefixCls, "-no-children"), noChildren), _defineProperty(_classNames, 'ald-tree-highlight-filtered-title', highlightFilteredTitle), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")

package/dist/Tree/demo/filter/index.js

@@ -30,6 +30,48 @@ export default (function () {
       }
       return false;
     },
+    highlightFilteredTitle: true,
+    expandedKeys: expandedKeys,
+    onExpand: function onExpand(keys) {
+      setExpandedKeys(keys);
+    },
+    treeData: [{
+      title: 'Parent 1',
+      key: '0-0',
+      children: [{
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          title: 'leaf',
+          key: '0-0-0-0',
+          isLeaf: true
+        }, {
+          title: 'leaf',
+          key: '0-0-0-1',
+          isLeaf: true
+        }]
+      }, {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          title: 'ssss',
+          key: '0-0-1-0',
+          disabled: true
+        }]
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement("p", null), /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    showIcon: true,
+    icon: 'icon',
+    filterTreeNode: function filterTreeNode(node) {
+      var title = node.title;
+      if (typeof title === 'string') {
+        return title.includes('2');
+      }
+      return false;
+    },
+    highlightFilteredTitle: true,
     expandedKeys: expandedKeys,
     onExpand: function onExpand(keys) {
       setExpandedKeys(keys);

package/dist/Tree/style/index.less

@@ -26,13 +26,15 @@
     padding: 3px 0;
   }
 
-  .ald-tree-treenode.ald-tree-treenode-draggable {
-    .ald-tree-draggable-icon {
-      opacity: 1;
-      cursor: grab;
-
-      &:active {
-        cursor: grabbing;
+  .ald-tree-treenode {
+    &.ald-tree-treenode-draggable {
+      .ald-tree-draggable-icon {
+        opacity: 1;
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
       }
     }
   }
@@ -42,6 +44,15 @@
       display: none;
     }
   }
+
+  &.ald-tree-highlight-filtered-title {
+    .filter-node {
+      .ald-tree-title {
+        font-weight: 500;
+        color: var(--alias-colors-text-danger);
+      }
+    }
+  }
 }
 
 .ald-tree-treenode {

package/dist/Tree/style/mixin.less

@@ -102,10 +102,10 @@
       background: @tree-node-hover-bg;
     }
 
-    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
-      font-weight: 500;
-      color: var(--alias-colors-text-danger);
-    }
+    // &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
+    //   // font-weight: 500;
+    //   // color: var(--alias-colors-text-danger);
+    // }
 
     &-draggable {
       .@{custom-tree-prefix-cls}-draggable-icon {