@aloudata/aloudata-design 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/Table/index.js

@@ -18,7 +18,7 @@ import Pagination from "./components/Pagination";
 import { getTableColumns, prefixCls } from "./helper";
 import useScrollX from "./hooks/useScroll";
 // 32 行高 + 1 底线高度
-var HEADER_HEIGHT = 33;
+var HEADER_HEIGHT = 41;
 function Table(props, ref) {
   var _classnames;
   var columns = props.columns,
@@ -34,7 +34,8 @@ function Table(props, ref) {
     _props$rowClassName = props.rowClassName,
     rowClassName = _props$rowClassName === void 0 ? function () {
       return '';
-    } : _props$rowClassName;
+    } : _props$rowClassName,
+    onRowClick = props.onRowClick;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
@@ -117,6 +118,19 @@ function Table(props, ref) {
       }));
     }));
   }));
+  var onClickRow = useCallback(function (rowData, rowIndex) {
+    return function () {
+      var _window$getSelection;
+      if (typeof onRowClick !== 'function') {
+        return;
+      }
+      if (((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString().length) !== 0) {
+        // 防止选择文本时触发 onRowClick
+        return;
+      }
+      onRowClick(rowData, rowIndex);
+    };
+  }, [onRowClick]);
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement(Spin, {
@@ -135,7 +149,8 @@ function Table(props, ref) {
   })) : _.map(rows, function (row, rowIndex) {
     return /*#__PURE__*/React.createElement("div", {
       key: row.id,
-      className: classnames(prefixCls('tr'), rowClassName(row.original, rowIndex))
+      className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('row-hover'), typeof onRowClick === 'function'), rowClassName(row.original, rowIndex)),
+      onClick: onClickRow(row.original, rowIndex)
     }, _.map(row.getVisibleCells(), function (cell) {
       return /*#__PURE__*/React.createElement("div", {
         className: prefixCls('td'),

package/dist/Table/style/index.less

@@ -2,6 +2,7 @@
 @import '../../Pagination/style/index.less';
 @import '../../Spin/style/index.less';
 @import '../../ScrollArea/style/index.less';
+@import '../../Empty/style/index.less';
 
 .ald-table-container {
   position: relative;
@@ -12,10 +13,10 @@
 
 .ald-table-main {
   width: 100%;
-  color: #171717;
   font-size: 13px;
   line-height: 20px;
   background: #fff;
+  color: var(--alias-colors-text-subtle, #4b5563);
 
   .ald-table-content {
     display: flex;
@@ -68,6 +69,7 @@
 
   .ald-table-th-default {
     font-weight: 500;
+    line-height: 16px;
     padding: 0 var(--alias-spacing-200, 16px);
     font-size: 12px;
     overflow: hidden;
@@ -77,13 +79,13 @@
   }
 
   .ald-table-td-default {
+    line-height: 20px;
     padding: 0 var(--alias-spacing-200, 16px);
     display: flex;
     align-items: center;
     height: 100%;
     font-size: 14px;
     min-height: 47px;
-    font-weight: 400;
     overflow: hidden;
   }
 
@@ -101,15 +103,19 @@
   }
 
   .ald-table-body {
-    min-height: 200px;
+    min-height: 96px;
     overflow: auto;
 
-    .ald-table-tr:hover {
-      .ald-table-td {
-        background-color: var(
-          --alias-colors-bg-interaction-hover,
-          rgba(0, 0, 0, 0.05)
-        );
+    .ald-table-tr {
+      &.ald-table-row-hover:hover {
+        cursor: pointer;
+
+        .ald-table-td {
+          background-color: var(
+            --alias-colors-bg-interaction-hover,
+            rgba(0, 0, 0, 0.05)
+          );
+        }
       }
     }
   }
@@ -160,4 +166,5 @@
 
 .ald-table-empty {
   margin-top: 80px;
+  overflow: hidden;
 }

package/dist/Table/types.d.ts

@@ -13,6 +13,7 @@ export interface ITableProps<TDataItem extends object> {
     pagination?: IPaginationProps;
     empty?: React.ReactNode;
     rowClassName?: (record: TDataItem, index: number) => string;
+    onRowClick?: (record: TDataItem, index: number) => void;
 }
 export interface ITableRef {
     scrollToFirstRow: () => void;

package/dist/Tabs/index.d.ts

@@ -59,6 +59,11 @@ export interface ITabsProps extends Omit<TabsProps, 'size'> {
      * @default false
      */
     compact?: boolean;
+    /**
+     * @description tabs和content之间是否包含分割线
+     * @default false
+     */
+    hasDividing?: boolean;
 }
 declare function Tabs(props: ITabsProps): React.JSX.Element;
 declare namespace Tabs {

package/dist/Tabs/index.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact", "hasDividing"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -27,6 +27,8 @@ export default function Tabs(props) {
     _props$padding = props.padding,
     padding = _props$padding === void 0 ? false : _props$padding,
     compact = props.compact,
+    _props$hasDividing = props.hasDividing,
+    hasDividing = _props$hasDividing === void 0 ? true : _props$hasDividing,
     otherProps = _objectWithoutProperties(props, _excluded);
   var headerBackgroundColor = props.headerBackgroundColor;
   var tabsProps = _objectSpread({}, otherProps);
@@ -66,7 +68,8 @@ export default function Tabs(props) {
       'ald-tabs-default': size !== 'small',
       'ald-tabs-monospace': _monospace,
       'ald-tabs-padding': !!padding,
-      'ald-tabs-compact': !!compact
+      'ald-tabs-compact': !!compact,
+      'ald-tabs-no-dividing': !hasDividing
     })
   }, tabsProps));
 }

package/dist/Tabs/style/index.less

@@ -53,8 +53,7 @@
   .ant-tabs-ink-bar {
     height: @tabs-ink-link-bar-height;
     background: @tab-ink-link-bar-background;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-radius: 2px;
   }
 
   /* small size */
@@ -62,6 +61,7 @@
     .ant-tabs-tab {
       font-size: @tabs-font-size-small;
       line-height: @tabs-line-height-small;
+      height: 40px;
     }
 
     .ant-tabs-ink-bar {
@@ -79,6 +79,7 @@
     .ant-tabs-tab {
       font-size: @tabs-font-size;
       line-height: @tabs-line-height;
+      height: 44px;
     }
 
     .ald-tabs-more-icon {
@@ -132,7 +133,7 @@
     margin-bottom: 20px;
 
     &::before {
-      border-color: @BG70;
+      border-color: var(--alias-colors-border-default, #e5e7eb);
     }
   }
 
@@ -149,10 +150,6 @@
   &.ald-tabs-compact {
     .ant-tabs-nav {
       margin-bottom: 0;
-
-      &::before {
-        border: 0;
-      }
     }
   }
 }
@@ -217,3 +214,9 @@
     padding: 0 var(--tabs-padding) var(--tabs-padding);
   }
 }
+
+.ald-tabs-no-dividing {
+  &.ant-tabs-top > .ant-tabs-nav::before {
+    border-bottom: 0;
+  }
+}

package/dist/TextLink/index.js

@@ -7,7 +7,8 @@ import React from 'react';
 function TextLink(props) {
   var _classNames;
   var propsSize = props.size,
-    type = props.type,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'primary' : _props$type,
     underline = props.underline,
     disabled = props.disabled,
     _props$icon = props.icon,
@@ -18,7 +19,7 @@ function TextLink(props) {
   var size = propsSize || 'middle';
   var icon = underline ? null : propsIcon;
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames('ald-text-link', className, (_classNames = {}, _defineProperty(_classNames, "ald-text-link-".concat(size), size), _defineProperty(_classNames, "ald-text-link-".concat(type), type), _defineProperty(_classNames, "ald-text-link-".concat(type, "-disabled"), disabled), _defineProperty(_classNames, "ald-text-link-show-underline", underline), _classNames)),
+    className: classNames('ald-text-link', className, (_classNames = {}, _defineProperty(_classNames, "ald-text-link-".concat(size), size), _defineProperty(_classNames, "ald-text-link-".concat(type), type), _defineProperty(_classNames, "ald-text-link-disabled", disabled), _defineProperty(_classNames, "ald-text-link-show-underline", underline), _classNames)),
     onClick: onClick
   }, icon, children);
 }

package/dist/TextLink/style/index.less

@@ -6,4 +6,9 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+
+  &.ald-text-link-disabled {
+    pointer-events: none;
+    cursor: default;
+  }
 }

package/dist/TextLink/style/type.less

@@ -9,7 +9,7 @@
     color: var(--alias-colors-link-hover, #0f59b1);
   }
 
-  &-disabled {
+  &.ald-text-link-disabled {
     color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
   }
 }
@@ -25,7 +25,7 @@
     color: var(--alias-colors-text-selected, #126fdd);
   }
 
-  &-disabled {
+  &.ald-text-link-disabled {
     color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
   }
 }

package/dist/Tree/DirectoryTree.js

@@ -19,9 +19,6 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 FileOutlined from '@ant-design/icons/FileOutlined';
-import FolderOpenOutlined from '@ant-design/icons/FolderOpenOutlined';
-import FolderOutlined from '@ant-design/icons/FolderOutlined';
 import classNames from 'classnames';
 import { conductExpandParent } from 'rc-tree/lib/util';
 import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
@@ -29,14 +26,6 @@ import * as React from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import Tree from "./Tree";
 import { calcRangeKeys, convertDirectoryKeysToNodes } from "./utils/dictUtil";
-function getIcon(props) {
-  var isLeaf = props.isLeaf,
-    expanded = props.expanded;
-  if (isLeaf) {
-    return /*#__PURE__*/React.createElement(FileOutlined, null);
-  }
-  return expanded ? /*#__PURE__*/React.createElement(FolderOpenOutlined, null) : /*#__PURE__*/React.createElement(FolderOutlined, null);
-}
 function getTreeData(_ref) {
   var treeData = _ref.treeData,
     children = _ref.children;
@@ -154,7 +143,6 @@ var DirectoryTree = function DirectoryTree(_ref2, ref) {
   var prefixCls = getPrefixCls('tree', customizePrefixCls);
   var connectClassName = classNames("".concat(prefixCls, "-directory"), _defineProperty({}, "".concat(prefixCls, "-directory-rtl"), direction === 'rtl'), className);
   return /*#__PURE__*/React.createElement(Tree, _extends({
-    icon: getIcon,
     ref: ref,
     blockNode: true
   }, otherProps, {

package/dist/Tree/Tree.d.ts

@@ -80,7 +80,7 @@ interface DraggableConfig {
     icon?: React.ReactNode | false;
     nodeDraggable?: DraggableFn;
 }
-export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'> {
+export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon' | 'filterTreeNode'> {
     showLine?: boolean | {
         showLeafIcon: boolean | TreeLeafIcon;
     };
@@ -116,7 +116,7 @@ export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTr
     defaultSelectedKeys?: Key[];
     selectable?: boolean;
     /** 点击树节点触发 */
-    filterAldTreeNode?: (node: AldTreeNode) => boolean;
+    filterTreeNode?: (node: DataNode) => boolean;
     loadedKeys?: Key[];
     /** 设置节点可拖拽（IE>8） */
     draggable?: DraggableFn | boolean | DraggableConfig;

package/dist/Tree/Tree.js

@@ -1,4 +1,7 @@
 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); }
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -25,7 +28,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     getPrefixCls = _React$useContext.getPrefixCls,
     direction = _React$useContext.direction,
     virtual = _React$useContext.virtual;
-  var size = props.size || 'small';
+  var size = props.size || 'large';
   var className = props.className,
     _props$showIcon = props.showIcon,
     showIcon = _props$showIcon === void 0 ? false : _props$showIcon,
@@ -42,6 +45,8 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showTabLeader = props.showTabLeader,
     _props$handlerRender = props.handlerRender,
     handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
+    filterTreeNode = props.filterTreeNode,
+    treeData = props.treeData,
     _props$motion = props.motion,
     motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
       motionAppear: false
@@ -105,13 +110,62 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   };
+  var newTreeData = React.useMemo(function () {
+    if (!filterTreeNode) return treeData;
+    var processNode = function processNode(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();
+        }
+      }
+
+      // 如果shouldAddDisabled为true，就为当前节点添加className
+      if (shouldAddDisabled) {
+        node.className = classNames(node.className, 'ald-tree-node-disabled');
+      }
+      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);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return treeData;
+  }, [filterTreeNode, treeData]);
   return /*#__PURE__*/React.createElement(RcTree, _extends({
     itemHeight: 20,
     ref: ref,
     virtual: virtual
   }, newProps, {
     prefixCls: prefixCls,
-    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'), _classNames), className),
+    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), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")

package/dist/Tree/demo/directoryTree/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

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

@@ -0,0 +1,44 @@
+import { Tree } from "../../..";
+import React from 'react';
+var DirectoryTree = Tree.DirectoryTree;
+var treeData = [{
+  title: 'parent 0',
+  key: '0-0',
+  children: [{
+    title: 'leaf 0-0',
+    key: '0-0-0',
+    isLeaf: true
+  }, {
+    title: 'leaf 0-1',
+    key: '0-0-1',
+    isLeaf: true
+  }]
+}, {
+  title: 'parent 1',
+  key: '0-1',
+  children: [{
+    title: 'leaf 1-0',
+    key: '0-1-0',
+    isLeaf: true
+  }, {
+    title: 'leaf 1-1',
+    key: '0-1-1',
+    isLeaf: true
+  }]
+}];
+var App = function App() {
+  var onSelect = function onSelect(keys, info) {
+    console.log('Trigger Select', keys, info);
+  };
+  var onExpand = function onExpand(keys, info) {
+    console.log('Trigger Expand', keys, info);
+  };
+  return /*#__PURE__*/React.createElement(DirectoryTree, {
+    multiple: true,
+    defaultExpandAll: true,
+    onSelect: onSelect,
+    onExpand: onExpand,
+    treeData: treeData
+  });
+};
+export default App;

package/dist/Tree/demo/filter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

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

@@ -0,0 +1,63 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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); }
+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 { App, Input, Tree } from "../../..";
+import React from 'react';
+export default (function () {
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterKey = _React$useState2[0],
+    setFilterKey = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    expandedKeys = _React$useState4[0],
+    setExpandedKeys = _React$useState4[1];
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Input, {
+    onChange: function onChange(v) {
+      setFilterKey(v.target.value);
+    }
+  }), /*#__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(filterKey);
+      }
+      return false;
+    },
+    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
+        }]
+      }]
+    }]
+  }));
+});

package/dist/Tree/style/index.less

@@ -6,21 +6,25 @@
 @import './reset.less';
 @import './checkbox.less';
 
-@tree-font-size-large: 13px;
-@tree-padding-large: 6px 4px;
+@tree-font-size-large: 14px;
+@tree-padding-large: 6px;
 @tree-line-height-large: 20px;
 
 @tree-font-size-default: 12px;
 @tree-padding-default: 4px;
 @tree-line-height-default: 16px;
 .aldCheckboxFn();
-
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
 .@{tree-prefix-cls} {
   .antTreeFn(@tree-prefix-cls);
 }
 
 .ald-tree {
-  padding: 3px 0;
+  padding: 0;
+
+  &.ald-draggable-tree {
+    padding: 3px 0;
+  }
 
   .ald-tree-treenode.ald-tree-treenode-draggable {
     .ald-tree-draggable-icon {
@@ -34,8 +38,11 @@
   align-items: center;
   font-size: @tree-font-size-default;
   font-weight: 400;
-  color: #171717;
-  width: 100%;
+  color: var(--alias-colors-text-default, #1f2937);
+
+  &.ald-tree-node-disabled {
+    display: none;
+  }
 
   .ald-tree-draggable-icon {
     display: inline-flex;
@@ -59,6 +66,7 @@
     flex: 1;
     display: flex;
     align-items: center;
+    border-radius: 4px;
     // stylelint-disable-next-line
     .ald-tree-iconEle {
       display: inline-flex;
@@ -71,11 +79,9 @@
 
     .ald-tree-title {
       line-height: @tree-line-height-default;
-      border-radius: 2px;
       display: inline-flex;
       align-items: center;
       justify-content: space-between;
-      color: #171717;
       flex: 1;
 
       .ald-tree-tab-leader {
@@ -87,13 +93,23 @@
     }
 
     &:hover {
-      background: var(--colors-gray-97, #f8f8f8);
-      mix-blend-mode: multiply;
+      background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
     }
 
     &.ald-tree-node-selected {
-      border-radius: 2px;
-      background: var(--colors-blue-100, #f0f6ff);
+      background: var(--alias-colors-bg-selected-default, #e8f2fe);
+      color: var(--alias-colors-text-selected, #126fdd);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
+
+  &.ald-tree-treenode-disabled {
+    .ald-tree-node-content-wrapper {
+      &:hover {
+        background: inherit;
+      }
     }
   }
 }
@@ -109,10 +125,17 @@
 
     .ald-tree-node-content-wrapper {
       padding: @tree-padding-large;
+      border-radius: var(--alias-radius-75, 6px);
 
       .ald-tree-title {
         line-height: @tree-line-height-large;
       }
+
+      &.ald-tree-node-selected {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+      }
     }
   }
 }