@hsu-react/ui 0.0.1

package/es/components/Tree/_utils/normalizeCheckedKeys.js

@@ -0,0 +1,96 @@
+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; }
+import { getAllChildrenKeys } from ".";
+
+/**
+ * 规范化 checkedKeys：检查父节点，如果子项未全选，将父节点设为半选
+ * @param checkedKeys 待规范化的 checkedKeys
+ * @param treeData 树数据
+ * @returns 规范化后的 checkedKeys
+ */
+export var normalizeCheckedKeys = function normalizeCheckedKeys(checkedKeys, treeData) {
+  if (!checkedKeys || !treeData.length) {
+    return checkedKeys;
+  }
+
+  // 如果是数组格式，转换为对象格式
+  var checkedSet = new Set();
+  var halfCheckedSet = new Set();
+  if (Array.isArray(checkedKeys)) {
+    checkedKeys === null || checkedKeys === void 0 || checkedKeys.forEach(function (key) {
+      return checkedSet.add(key);
+    });
+  } else {
+    var _checkedKeys$checked, _ref;
+    (_checkedKeys$checked = checkedKeys.checked) === null || _checkedKeys$checked === void 0 || _checkedKeys$checked.forEach(function (key) {
+      return checkedSet.add(key);
+    });
+    (_ref = checkedKeys.halfChecked || []) === null || _ref === void 0 || _ref.forEach(function (key) {
+      return halfCheckedSet.add(key);
+    });
+  }
+
+  // 递归遍历所有节点，检查父节点状态
+  // 从最底层开始处理，确保父节点的状态基于子节点的正确状态
+  var processNode = function processNode(node) {
+    var _node$children, _node$children2;
+    // 先递归处理子节点（从最底层开始）
+    if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
+      var _iterator = _createForOfIteratorHelper(node.children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          processNode(child);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    // 然后处理当前节点（父节点）
+    // 如果节点在 checked 中，且有子节点
+    if (checkedSet.has(node.key) && (_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length) {
+      // 获取所有子节点的 key
+      var allChildrenKeys = getAllChildrenKeys(node.children);
+
+      // 检查所有子节点是否都被勾选
+      if (allChildrenKeys.length > 0) {
+        var allChildrenChecked = allChildrenKeys.every(function (childKey) {
+          return checkedSet.has(childKey);
+        });
+        if (!allChildrenChecked) {
+          // 如果子节点未全选，将父节点从 checked 中移除，添加到 halfChecked
+          checkedSet.delete(node.key);
+          halfCheckedSet.add(node.key);
+        } else {
+          // 如果所有子节点都被勾选，确保父节点不在 halfChecked 中
+          halfCheckedSet.delete(node.key);
+        }
+      }
+    }
+  };
+
+  // 遍历所有根节点
+  var _iterator2 = _createForOfIteratorHelper(treeData),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var node = _step2.value;
+      processNode(node);
+    }
+
+    // 返回规范化后的 checkedKeys
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return {
+    checked: Array.from(checkedSet),
+    halfChecked: Array.from(halfCheckedSet)
+  };
+};

package/es/components/Tree/index.d.ts

@@ -0,0 +1,48 @@
+import { TreeProps as AntdTreeProps } from "antd";
+import React, { ReactNode, Key } from "react";
+import { InputProps } from "../Input";
+import { ButtonProps } from "../Button";
+export interface TreeData extends Record<string, unknown> {
+    title: string;
+    key: string | number;
+    value: string | number;
+    selectable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    isLeaf?: boolean;
+    checkable?: boolean;
+    icon?: ReactNode;
+    children?: TreeData[];
+}
+export interface CheckedObject {
+    checked: React.Key[];
+    halfChecked: React.Key[];
+}
+export type CheckedKeys = React.Key[] | CheckedObject;
+export interface TreeProps extends Omit<AntdTreeProps, "treeData" | "loadData" | "loadedKeys" | "titleRender"> {
+    titleRender?: (data: TreeData) => ReactNode;
+    treeClassName?: string;
+    treeContainerClassName?: string;
+    titleClassName?: string;
+    title?: ReactNode;
+    search?: boolean;
+    treeData?: TreeData[];
+    onChange?: (checked: CheckedKeys) => void;
+    searchProps?: InputProps;
+    indent?: number;
+    switchWidth?: number;
+    switchGap?: number;
+    hideLeafExpand?: boolean;
+    buttonGroup?: ButtonProps[];
+    btnPosition?: "left" | "right";
+    /** 默认展开层级（从 1 开始，1 表示第一层，2 表示第二层，以此类推） */
+    defaultExpandLevel?: number;
+    hasPermi?: string[];
+    /** 节点被选中时的回调，返回选中节点的完整路径 */
+    onSelectPath?: (path: TreeData[] | null, selectedKeys: Key[]) => void;
+    /** 点击已选中的节点时是否允许取消选中，默认 true（允许取消选中） */
+    allowDeselect?: boolean;
+    titleSearchBarClassName?: string;
+}
+declare const Tree: React.FC<TreeProps>;
+export default Tree;

package/es/components/Tree/index.js

@@ -0,0 +1,234 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["title", "titleRender", "treeClassName", "treeContainerClassName", "titleClassName", "className", "search", "treeData", "onChange", "onCheck", "onSelect", "searchProps", "indent", "switchWidth", "switchGap", "hideLeafExpand", "expandedKeys", "defaultExpandedKeys", "defaultExpandLevel", "checkedKeys", "selectedKeys", "defaultSelectedKeys", "buttonGroup", "btnPosition", "hasPermi", "onSelectPath", "allowDeselect", "titleSearchBarClassName"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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 { Tree as AntdTree } from "antd";
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { generateRandomStr } from "hsu-utils";
+import styles from "./index.module.less";
+import classNames from "classnames";
+import TitleSearchBar from "./_components/TitleSearchBar";
+import { useTreeSearch } from "./_hooks/useTreeSearch";
+import { useExpandedKeys, useCheckedKeys } from "./_hooks/useTreeState";
+import { useTreeCheck } from "./_hooks/useTreeCheck";
+import { useClearNodeTitle } from "./_hooks/useClearNodeTitle";
+import { getExpandedKeysByLevel, getNodePath } from "./_utils";
+import TextEllipsis from "../TextEllipsis";
+import usePermissions from "../../hooks/usePermissions";
+import { isLegacyHasSelectorBrowser } from "../../utils/cssSupports";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Tree = function Tree(props) {
+  var title = props.title,
+    _titleRender = props.titleRender,
+    treeClassName = props.treeClassName,
+    treeContainerClassName = props.treeContainerClassName,
+    titleClassName = props.titleClassName,
+    className = props.className,
+    search = props.search,
+    _props$treeData = props.treeData,
+    treeData = _props$treeData === void 0 ? [] : _props$treeData,
+    onChange = props.onChange,
+    onCheck = props.onCheck,
+    onSelect = props.onSelect,
+    searchProps = props.searchProps,
+    indent = props.indent,
+    switchWidth = props.switchWidth,
+    switchGap = props.switchGap,
+    hideLeafExpand = props.hideLeafExpand,
+    expandedKeysProps = props.expandedKeys,
+    defaultExpandedKeys = props.defaultExpandedKeys,
+    defaultExpandLevel = props.defaultExpandLevel,
+    checkedKeysProps = props.checkedKeys,
+    selectedKeysProps = props.selectedKeys,
+    defaultSelectedKeys = props.defaultSelectedKeys,
+    buttonGroup = props.buttonGroup,
+    _props$btnPosition = props.btnPosition,
+    btnPosition = _props$btnPosition === void 0 ? "right" : _props$btnPosition,
+    hasPermi = props.hasPermi,
+    onSelectPath = props.onSelectPath,
+    _props$allowDeselect = props.allowDeselect,
+    allowDeselect = _props$allowDeselect === void 0 ? true : _props$allowDeselect,
+    titleSearchBarClassName = props.titleSearchBarClassName,
+    treeConfig = _objectWithoutProperties(props, _excluded);
+  var _usePermissions = usePermissions(hasPermi),
+    permitted = _usePermissions.permitted;
+  var legacyHasSelector = isLegacyHasSelectorBrowser();
+
+  // 生成唯一类名（用于样式隔离）
+  var cls = useMemo(function () {
+    return generateRandomStr(10);
+  }, []);
+  // 根据 defaultExpandLevel 计算默认展开的 keys
+  // 如果同时提供了 defaultExpandedKeys 和 defaultExpandLevel，优先使用 defaultExpandedKeys
+  var computedDefaultExpandedKeys = useMemo(function () {
+    if (defaultExpandedKeys !== undefined) {
+      return defaultExpandedKeys;
+    }
+    if (defaultExpandLevel !== undefined && defaultExpandLevel > 0) {
+      return getExpandedKeysByLevel(treeData, defaultExpandLevel);
+    }
+    return undefined;
+  }, [defaultExpandLevel, treeData, defaultExpandedKeys]);
+
+  // 管理展开状态
+  var _useExpandedKeys = useExpandedKeys(expandedKeysProps, computedDefaultExpandedKeys),
+    _useExpandedKeys2 = _slicedToArray(_useExpandedKeys, 2),
+    expandedKeys = _useExpandedKeys2[0],
+    setExpandedKeys = _useExpandedKeys2[1];
+
+  // 管理勾选状态（自动规范化：父级在 checked 中但子项未全选时，设为半选）
+  var _useCheckedKeys = useCheckedKeys(checkedKeysProps, treeData),
+    _useCheckedKeys2 = _slicedToArray(_useCheckedKeys, 2),
+    checkedKeys = _useCheckedKeys2[0],
+    setCheckedKeys = _useCheckedKeys2[1];
+
+  // 管理选中状态（用于支持 allowDeselect 功能）
+  var _React$useState = React.useState(defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : []),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    internalSelectedKeys = _React$useState2[0],
+    setInternalSelectedKeys = _React$useState2[1];
+
+  // 受控模式使用外部传入的 selectedKeys，非受控模式使用内部状态
+  var selectedKeys = selectedKeysProps !== null && selectedKeysProps !== void 0 ? selectedKeysProps : internalSelectedKeys;
+
+  // 处理搜索
+  var _useTreeSearch = useTreeSearch(treeData, setExpandedKeys),
+    searchKey = _useTreeSearch.searchKey,
+    handleSearchChange = _useTreeSearch.handleSearchChange,
+    filteredTreeData = _useTreeSearch.filteredTreeData;
+
+  // 处理勾选（使用 antd 默认逻辑）
+  var handleCheck = useTreeCheck(setCheckedKeys, onCheck, onChange);
+
+  // 清空节点 title 属性（防止悬浮显示）
+  useClearNodeTitle(filteredTreeData, cls);
+
+  // 样式对象（CSS 变量）
+  var style = useMemo(function () {
+    return {
+      "--tree-indent-unit-width": typeof indent === "number" ? "".concat(indent, "px") : undefined,
+      "--tree-switcher-width": typeof switchWidth === "number" ? "".concat(switchWidth, "px") : undefined,
+      "--tree-switcher-gap": typeof switchGap === "number" ? "".concat(switchGap, "px") : undefined
+    };
+  }, [indent, switchWidth, switchGap]);
+
+  // 使用 ref 保存最新的 onSelectPath 回调和初始化标志，避免闭包陷阱
+  var onSelectPathRef = useRef(onSelectPath);
+  var isInitializedRef = useRef(false);
+  useEffect(function () {
+    onSelectPathRef.current = onSelectPath;
+  }, [onSelectPath]);
+
+  // 处理展开事件
+  var handleExpand = useCallback(function (expandedKeys, info) {
+    var _treeConfig$onExpand;
+    setExpandedKeys(expandedKeys);
+    (_treeConfig$onExpand = treeConfig.onExpand) === null || _treeConfig$onExpand === void 0 || _treeConfig$onExpand.call(treeConfig, expandedKeys, info);
+  }, [setExpandedKeys, treeConfig]);
+
+  // 处理选中事件
+  var handleSelect = useCallback(function (selectedKeys, info) {
+    var finalSelectedKeys = selectedKeys;
+
+    // 如果不允许取消选中，且点击的是已选中的节点（info.selected 为 false 表示要取消选中）
+    // 则阻止取消，保持该节点选中
+    if (!allowDeselect && !info.selected && info.node.key) {
+      finalSelectedKeys = [info.node.key];
+    }
+
+    // 非受控模式下，更新内部状态
+    if (selectedKeysProps === undefined) {
+      setInternalSelectedKeys(finalSelectedKeys);
+    }
+    onSelect === null || onSelect === void 0 || onSelect(finalSelectedKeys, info);
+    if (!onSelectPathRef.current) return;
+
+    // 获取节点路径并调用回调
+    var path = finalSelectedKeys.length > 0 ? getNodePath(finalSelectedKeys[0], treeData) : null;
+    onSelectPathRef.current(path, finalSelectedKeys);
+  }, [onSelect, treeData, allowDeselect, selectedKeysProps]);
+
+  // 处理初始传入的 selectedKeys 和 defaultSelectedKeys
+  useEffect(function () {
+    if (!onSelectPathRef.current || !treeData.length) return;
+
+    // 受控模式：使用 selectedKeysProps
+    if (selectedKeysProps !== undefined) {
+      if (selectedKeysProps.length > 0) {
+        var _path = getNodePath(selectedKeysProps[0], treeData);
+        onSelectPathRef.current(_path, selectedKeysProps);
+        isInitializedRef.current = true;
+      } else if (isInitializedRef.current) {
+        onSelectPathRef.current(null, selectedKeysProps);
+      }
+      return;
+    }
+
+    // 非受控模式：只在初始化时使用 defaultSelectedKeys
+    if (!isInitializedRef.current && defaultSelectedKeys && defaultSelectedKeys.length > 0) {
+      var _path2 = getNodePath(defaultSelectedKeys[0], treeData);
+      onSelectPathRef.current(_path2, defaultSelectedKeys);
+      isInitializedRef.current = true;
+    }
+  }, [defaultSelectedKeys, selectedKeysProps, treeData]);
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.Tree, className, _defineProperty(_defineProperty({}, styles.hideLeafExpand, hideLeafExpand), styles.legacyHasSelectedNodeBackground, legacyHasSelector)),
+    style: style,
+    children: [/*#__PURE__*/_jsx(TitleSearchBar, {
+      titleClassName: titleClassName,
+      title: title,
+      search: search,
+      searchValue: searchKey,
+      onSearchChange: handleSearchChange,
+      searchProps: searchProps,
+      buttonGroup: buttonGroup,
+      btnPosition: btnPosition,
+      className: titleSearchBarClassName
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.treeContainer, treeContainerClassName),
+      children: filteredTreeData.length > 0 && /*#__PURE__*/_jsx(AntdTree, _objectSpread(_objectSpread(_objectSpread({
+        blockNode: true,
+        titleRender: function titleRender(node) {
+          var data = node;
+          if (_titleRender) {
+            return _titleRender(data);
+          }
+          return /*#__PURE__*/_jsx(TextEllipsis, {
+            containerStyle: {
+              display: "inline-flex"
+            },
+            children: data.title
+          });
+        }
+      }, treeConfig), {}, {
+        className: classNames(treeClassName, cls),
+        treeData: filteredTreeData,
+        onCheck: handleCheck,
+        checkedKeys: checkedKeys
+      }, expandedKeys !== undefined && {
+        expandedKeys: expandedKeys
+      }), {}, {
+        selectedKeys: selectedKeys,
+        onExpand: handleExpand,
+        onSelect: handleSelect,
+        checkStrictly: false
+      }))
+    })]
+  });
+};
+export default Tree;

package/es/components/Tree/index.module.less

@@ -0,0 +1,142 @@
+.Tree {
+  --tree-indent-unit-width: 19px;
+  --tree-switcher-width: 8px;
+  --tree-switcher-gap: 4px;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 15px;
+
+  width: 100%;
+  height: 100%;
+  min-height: 0px !important;
+
+  background: var(--cf-surface);
+
+  border-radius: 8px;
+
+  .title_search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 1.2em;
+
+    height: max-content;
+    min-height: max-content;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      word-break: keep-all;
+      white-space: nowrap;
+
+      cursor: pointer;
+    }
+
+    .search {
+      height: 32px;
+
+      .searchIcon {
+        font-size: 16px;
+      }
+    }
+
+    .buttonGroup {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+    }
+  }
+
+  .treeContainer {
+    width: 100%;
+    height: 100%;
+
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+
+    .ant-tree-treenode {
+      &:hover {
+        background: var(--cf-subtle);
+      }
+
+      &:has(> .ant-tree-node-selected) {
+        background-color: #e6f4ff;
+
+        .ant-tree-node-selected {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .ant-tree-indent-unit {
+      width: var(--tree-indent-unit-width);
+    }
+
+    .ant-tree-switcher {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      width: var(--tree-switcher-width);
+      margin-inline-start: var(--tree-switcher-gap);
+      margin-inline-end: var(--tree-switcher-gap);
+
+      &::before {
+        width: var(--tree-switcher-width);
+        height: 100%;
+      }
+
+      &:hover {
+        &::before {
+          background: transparent;
+        }
+      }
+    }
+
+    .ant-tree-node-content-wrapper {
+      display: inline-flex;
+      align-items: center;
+      column-gap: 4px;
+
+      flex: 1 1 auto;
+      min-width: 0px;
+
+      padding: 2px 0px;
+
+      .ant-tree-title {
+        display: inline-block;
+      }
+
+      &:hover {
+        background: transparent;
+      }
+
+      .ant-tree-iconEle {
+        display: inline-flex;
+        align-items: center;
+
+        width: max-content;
+      }
+    }
+  }
+
+  &.hideLeafExpand {
+    .ant-tree-switcher-noop {
+      display: none;
+    }
+  }
+
+  &.legacyHasSelectedNodeBackground {
+    .treeContainer {
+      .ant-tree-treenode.ant-tree-treenode-selected {
+        background-color: #e6f4ff;
+
+        .ant-tree-node-selected {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/es/components/Upload/_components/UploadedItem/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { UploadFile } from "antd";
+import { UploadProps } from "../..";
+interface UploadedItemProps {
+    file: UploadFile;
+    listProps?: UploadProps["listProps"];
+    en?: boolean;
+    disabled?: boolean;
+    downloading: Record<string, AbortController>;
+    setDownloading: (downloading: Record<string, AbortController>) => void;
+    onPreview?: (file: UploadFile) => void;
+    onDownload?: (file: UploadFile) => void;
+    onRemove: () => void;
+    onPreviewClick: (info: {
+        fileUrl?: string;
+        fileType?: string;
+        fileName?: string;
+    }) => void;
+}
+export declare const UploadedItem: React.FC<UploadedItemProps>;
+export {};

package/es/components/Upload/_components/UploadedItem/index.js

@@ -0,0 +1,103 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { Tooltip, Popconfirm } from "antd";
+import classNames from "classnames";
+import Button from "../../../Button";
+import { downloadFile } from "hsu-utils";
+import { deepCopy } from "hsu-utils";
+import { FilePreviewTypeArr } from "../../../FilePreview";
+import styles from "../../index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var UploadedItem = function UploadedItem(_ref) {
+  var _ref2;
+  var file = _ref.file,
+    listProps = _ref.listProps,
+    en = _ref.en,
+    disabled = _ref.disabled,
+    downloading = _ref.downloading,
+    setDownloading = _ref.setDownloading,
+    onPreview = _ref.onPreview,
+    onDownload = _ref.onDownload,
+    onRemove = _ref.onRemove,
+    onPreviewClick = _ref.onPreviewClick;
+  var name = file.name,
+    url = file.url;
+  var fileType = (_ref2 = name !== null && name !== void 0 ? name : url) === null || _ref2 === void 0 || (_ref2 = _ref2.split(".").pop()) === null || _ref2 === void 0 ? void 0 : _ref2.toLowerCase();
+  var handleDownload = function handleDownload() {
+    if (onDownload) {
+      onDownload(file);
+    } else {
+      var _listProps$itemDownlo, _listProps$itemDownlo2, _listProps$formatUrl;
+      var controller = new AbortController();
+      var signal = controller.signal;
+      setDownloading(deepCopy(_objectSpread(_objectSpread({}, downloading), {}, _defineProperty({}, file.uid, controller))));
+      downloadFile((listProps === null || listProps === void 0 || (_listProps$itemDownlo = listProps.itemDownload) === null || _listProps$itemDownlo === void 0 || (_listProps$itemDownlo2 = _listProps$itemDownlo.formatUrl) === null || _listProps$itemDownlo2 === void 0 ? void 0 : _listProps$itemDownlo2.call(_listProps$itemDownlo, file)) || (listProps === null || listProps === void 0 || (_listProps$formatUrl = listProps.formatUrl) === null || _listProps$formatUrl === void 0 ? void 0 : _listProps$formatUrl.call(listProps, file)) || url || "", name || "", signal).then(function () {
+        delete downloading[file.uid];
+        setDownloading(deepCopy(downloading));
+      });
+    }
+  };
+  var handlePreview = function handlePreview() {
+    if (onPreview) {
+      onPreview(file);
+    } else {
+      var _listProps$itemPrevie, _listProps$itemPrevie2, _listProps$formatUrl2;
+      var formatInfo = listProps === null || listProps === void 0 || (_listProps$itemPrevie = listProps.itemPreview) === null || _listProps$itemPrevie === void 0 || (_listProps$itemPrevie2 = _listProps$itemPrevie.formatInfo) === null || _listProps$itemPrevie2 === void 0 ? void 0 : _listProps$itemPrevie2.call(_listProps$itemPrevie, file);
+      onPreviewClick({
+        fileUrl: (formatInfo === null || formatInfo === void 0 ? void 0 : formatInfo.fileUrl) || (listProps === null || listProps === void 0 || (_listProps$formatUrl2 = listProps.formatUrl) === null || _listProps$formatUrl2 === void 0 ? void 0 : _listProps$formatUrl2.call(listProps, file)) || url,
+        fileType: (formatInfo === null || formatInfo === void 0 ? void 0 : formatInfo.fileType) || fileType,
+        fileName: (formatInfo === null || formatInfo === void 0 ? void 0 : formatInfo.fileName) || name
+      });
+    }
+  };
+  var handleRemove = function handleRemove() {
+    onRemove();
+    if (downloading[file.uid]) {
+      downloading[file.uid].abort();
+      delete downloading[file.uid];
+      setDownloading(deepCopy(downloading));
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.fileItem, listProps === null || listProps === void 0 ? void 0 : listProps.item),
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: name,
+      color: "#f2f4f5",
+      styles: {
+        body: {
+          color: "#131212",
+          padding: "6px 16px"
+        }
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.fileName, listProps === null || listProps === void 0 ? void 0 : listProps.itemName),
+        children: name || (url === null || url === void 0 ? void 0 : url.split("/").pop())
+      })
+    }), (fileType && FilePreviewTypeArr.includes(fileType) || onPreview) && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listProps === null || listProps === void 0 ? void 0 : listProps.itemPreview), {}, {
+      onClick: handlePreview,
+      children: en ? "Preview" : "预览"
+    })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      onClick: handleDownload,
+      disabled: !!downloading[file.uid]
+    }, listProps === null || listProps === void 0 ? void 0 : listProps.itemDownload), {}, {
+      children: en ? downloading[file.uid] ? "Downloading..." : "Download" : downloading[file.uid] ? "下载中..." : "下载"
+    })), !disabled && /*#__PURE__*/_jsx(Popconfirm, {
+      placement: "bottom",
+      title: en ? "Are you sure you want to delete?" : "确认删除?",
+      okText: en ? "Confirm" : "确认",
+      cancelText: en ? "Cancel" : "取消",
+      onConfirm: handleRemove,
+      children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        danger: true
+      }, listProps === null || listProps === void 0 ? void 0 : listProps.itemRemove), {}, {
+        children: en ? "Delete" : "删除"
+      }))
+    })]
+  });
+};

package/es/components/Upload/_components/UploadingItem/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { UploadFile } from "antd";
+import Button from "../../../Button";
+interface UploadingItemProps {
+    file: UploadFile;
+    listProps?: {
+        item?: string;
+        itemName?: string;
+        itemProgress?: {
+            hide?: boolean;
+            className?: string;
+        };
+        itemRemove?: Partial<React.ComponentProps<typeof Button>>;
+    };
+    en?: boolean;
+    onRemove: () => void;
+}
+export declare const UploadingItem: React.FC<UploadingItemProps>;
+export {};