@para-ui/core 2.2.6 → 2.2.7-beta

package/_verture/index-ee85b1cd.js

@@ -0,0 +1,1555 @@
+import { _ as _toConsumableArray } from './toConsumableArray-f8047a75.js';
+import { _ as _defineProperty } from './defineProperty-0590dc61.js';
+import { _ as _slicedToArray } from './slicedToArray-d7722f4b.js';
+import { r as regenerator } from './index-342379c6.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-55ed4bd2.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React__default, { isValidElement, cloneElement, useRef, useState, useImperativeHandle, useEffect, useMemo } from 'react';
+import RcTree from 'rc-tree';
+import clsx from 'clsx';
+import { _ as _typeof } from './typeof-498dd2b1.js';
+import LoadingOutlined from '@para-ui/icons/LoadingF';
+import FileOutlined from '@para-ui/icons/Document';
+import SolidArrowDown from '@para-ui/icons/DownTriangleF';
+import { Radio } from '../Radio/index.js';
+import ReactDOM from 'react-dom';
+import EditOutlinedIcon from '@para-ui/icons/EditFile';
+import AddOutlinedIcon from '@para-ui/icons/PlusCircle';
+import Delete from '@para-ui/icons/Delete';
+import Forbid from '@para-ui/icons/Forbid';
+import { Tooltip } from '../Tooltip/index.js';
+import { UUID, Request } from '@paraview/lib';
+import { u as useFormatMessage } from './useFormatMessage-ac9d6acf.js';
+import { s as styleInject } from './style-inject.es-300983ab.js';
+import MoreOutlinedIcon from '@para-ui/icons/MoreCircle';
+import Empty from '../Empty/index.js';
+import { Loading } from '../Loading/index.js';
+
+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; }
+
+var deepCopy = function deepCopy(target) {
+  var copyedObjs = []; //此数组解决了循环引用和相同引用的问题，它存放已经递归到的目标对象
+
+  function _deepCopy(target) {
+    if (_typeof(target) !== 'object' || !target) {
+      return target;
+    }
+
+    for (var i = 0; i < copyedObjs.length; i++) {
+      if (copyedObjs[i].target === target) {
+        return copyedObjs[i].copyTarget;
+      }
+    }
+
+    var obj = {};
+
+    if (Array.isArray(target)) {
+      obj = []; //处理target是数组的情况
+    }
+
+    copyedObjs.push({
+      target: target,
+      copyTarget: obj
+    });
+    Object.keys(target).forEach(function (key) {
+      if (obj[key]) {
+        return;
+      }
+
+      obj[key] = _deepCopy(target[key]);
+    });
+    return obj;
+  }
+
+  return _deepCopy(target);
+}; //树结构转扁平
+
+var flatten = function flatten(data) {
+  return data ? data.reduce(function (arr, _a) {
+    var _a$children = _a.children,
+        children = _a$children === void 0 ? [] : _a$children,
+        rest = __rest(_a, ["children"]);
+
+    return arr.concat([rest], flatten(children));
+  }, []) : [];
+}; //数组转树结构
+
+var convert = function convert(list) {
+  var rFiled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    key: 'key',
+    parentId: 'parentId'
+  };
+  var res = [];
+  var map = list.reduce(function (acc, v) {
+    return acc[v[rFiled.key]] = v, acc;
+  }, {});
+
+  var _iterator = _createForOfIteratorHelper(list),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var item = _step.value;
+      var parentId = item[rFiled.parentId];
+
+      if (parentId in map) {
+        var parent = map[parentId];
+        parent.children = parent.children || [];
+        parent.children.push(item);
+      } else {
+        res.push(item);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return res;
+}; //本地过滤时，转为树结构
+
+var convertByFilter = function convertByFilter(sourceList, filterList) {
+  var rFiled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    key: 'key',
+    parentId: 'parentId'
+  };
+  var obj = {};
+  var map = sourceList.reduce(function (acc, v) {
+    return acc[v[rFiled.key]] = v, acc;
+  }, {});
+  var filterMap = filterList.reduce(function (acc, v) {
+    return acc[v[rFiled.key]] = v, acc;
+  }, {});
+
+  var _iterator2 = _createForOfIteratorHelper(sourceList),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var item = _step2.value;
+      if (item[rFiled.key] in filterMap) _handleNode(item);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  function _handleNode(node) {
+    obj[node[rFiled.key]] = node;
+    var parent = map[node[rFiled.parentId]];
+    if (!parent) return;
+    obj[parent[rFiled.key]] = parent;
+    if (parent[rFiled.parentId]) _handleNode(parent);
+  }
+
+  var tempArr = Object.keys(obj).reduce(function (acc, curr) {
+    return acc.concat(obj[curr]);
+  }, []);
+  return convert(tempArr);
+}; //获得没有匹配数据的keys
+
+var getUnMatchDataOfKeys = function getUnMatchDataOfKeys(keys, oriData) {
+  var tKeys = [];
+  var flatData = flatten(oriData);
+
+  var _iterator3 = _createForOfIteratorHelper(keys),
+      _step3;
+
+  try {
+    var _loop = function _loop() {
+      var k = _step3.value;
+      var idx = flatData.findIndex(function (node) {
+        return node.key === k;
+      });
+
+      if (idx === -1) {
+        tKeys.push(k);
+      }
+    };
+
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      _loop();
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+
+  return tKeys;
+}; //获得checkedkeys
+
+var getCheckedKeys = function getCheckedKeys(cKeys) {
+  if (!Array.isArray(cKeys)) {
+    return cKeys.checked;
+  }
+
+  return cKeys;
+}; //获得halfchecked keys
+
+var getHalfCheckedKeys = function getHalfCheckedKeys(cKeys) {
+  if (!Array.isArray(cKeys)) {
+    return cKeys.halfChecked;
+  }
+
+  return [];
+};
+
+var getCollapsedHeight = function getCollapsedHeight() {
+  return {
+    height: 0,
+    opacity: 0
+  };
+};
+
+var getRealHeight = function getRealHeight(node) {
+  return {
+    height: node.scrollHeight,
+    opacity: 1
+  };
+};
+
+var getCurrentHeight = function getCurrentHeight(node) {
+  return {
+    height: node.offsetHeight
+  };
+};
+
+var skipOpacityTransition = function skipOpacityTransition(_, event) {
+  return event.propertyName === 'height';
+};
+
+var collapseMotion = {
+  motionName: 'paraui-motion-collapse',
+  onAppearStart: getCollapsedHeight,
+  onEnterStart: getCollapsedHeight,
+  onAppearActive: getRealHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+  onAppearEnd: skipOpacityTransition,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+  motionDeadline: 500
+};
+function renderSwitcherIcon(prefixCls, switcherIcon, showLine, _ref) {
+  var isLeaf = _ref.isLeaf,
+      expanded = _ref.expanded,
+      loading = _ref.loading;
+      _ref.eventKey;
+
+  if (loading) {
+    return jsx(LoadingOutlined, {
+      className: "".concat(prefixCls, "-switcher-loading-icon")
+    });
+  }
+
+  var showLeafIcon;
+
+  if (showLine && _typeof(showLine) === 'object') {
+    showLeafIcon = showLine.showLeafIcon;
+  }
+
+  if (isLeaf) {
+    if (showLine) {
+      if (_typeof(showLine) === 'object' && !showLeafIcon) {
+        return jsx("span", {
+          className: "".concat(prefixCls, "-switcher-leaf-line")
+        });
+      }
+
+      return jsx(FileOutlined, {
+        className: "".concat(prefixCls, "-switcher-line-icon")
+      });
+    }
+
+    return null;
+  }
+
+  var switcherCls = "".concat(prefixCls, "-switcher-icon");
+
+  if ( /*#__PURE__*/isValidElement(switcherIcon)) {
+    return /*#__PURE__*/cloneElement(switcherIcon, {
+      className: clsx(switcherIcon.props.className || '', switcherCls)
+    });
+  }
+
+  if (switcherIcon) {
+    return switcherIcon;
+  }
+
+  if (showLine) {
+    return expanded ? jsx(SolidArrowDown, {
+      className: "".concat(prefixCls, "-switcher-line-icon")
+    }) : jsx(SolidArrowDown, {
+      className: "".concat(prefixCls, "-switcher-line-icon")
+    });
+  }
+
+  return jsx(SolidArrowDown, {
+    className: switcherCls
+  });
+}
+function renderTreeNodeIcon(nodeProps, radioable, checkedKey, replaceFields) {
+  var _a;
+
+  if (!radioable) return null;
+  var key = replaceFields.key;
+  var isChecked = ((_a = nodeProps.data) === null || _a === void 0 ? void 0 : _a[key]) === checkedKey;
+  return jsx(Radio, {
+    className: 'paraui-tree-node-radio',
+    checked: isChecked
+  });
+}
+
+var en = {
+  loadMore: 'Load more',
+  add: 'Add',
+  edit: 'Edit',
+  disabled: 'Disabled',
+  delete: 'Delete'
+};
+
+var zh = {
+  loadMore: '加载更多',
+  add: '新增',
+  edit: '编辑',
+  disabled: '禁用',
+  delete: '删除'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.sector-container {\n  position: relative;\n  z-index: 1500;\n}\n.sector-container .sector-item-container {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 0;\n}\n.sector-container .sector-item-container .sector-item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 24px;\n  height: 24px;\n  background-color: rgb(255, 255, 255);\n  border-radius: 50%;\n  box-shadow: 4px 4px 6px rgba(70, 75, 105, 0.2), -4px -4px 6px rgba(0, 0, 0, 0.06);\n  cursor: pointer;\n  opacity: 0;\n}\n.sector-container .sector-item-container .sector-item svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.sector-container .sector-item-container .sector-item:hover {\n  color: rgb(54, 102, 214);\n}\n.sector-container .sector-item-container .sector-item:hover svg {\n  color: inherit;\n}\n.sector-container .sector-item-container .sector-item--del:hover {\n  color: rgb(235, 96, 84);\n}\n.sector-container .sector-item-container .sector-item--del:hover svg {\n  color: inherit;\n}";
+styleInject(css_248z$1);
+
+var getIconMap = function getIconMap(intl) {
+  return {
+    'add': {
+      icon: jsx(AddOutlinedIcon, {}),
+      text: intl({
+        id: 'add'
+      })
+    },
+    'edit': {
+      icon: jsx(EditOutlinedIcon, {}),
+      text: intl({
+        id: 'edit'
+      })
+    },
+    'enable': {
+      icon: jsx(Forbid, {}),
+      text: intl({
+        id: 'disabled'
+      })
+    },
+    'del': {
+      icon: jsx(Delete, {}),
+      text: intl({
+        id: 'delete'
+      })
+    }
+  };
+}; //action array
+
+
+var toActionArr = function toActionArr(actions, nodeData, IconMap) {
+  if (actions === undefined || actions === false) return [];
+
+  if (actions === true) {
+    return Object.keys(IconMap).map(function (k) {
+      return Object.assign(Object.assign({}, IconMap[k]), {
+        action: k
+      });
+    });
+  }
+
+  var arr = [];
+  Object.keys(actions).forEach(function (k) {
+    var aItem = actions[k];
+
+    if (k !== 'customizeActions') {
+      //非自定义
+      if (_typeof(aItem) === 'object') {
+        if (typeof aItem.show === 'function') {
+          if (aItem.show(nodeData)) arr.push(Object.assign(Object.assign(Object.assign({}, IconMap[k]), aItem), {
+            action: k
+          }));
+        } else {
+          arr.push(Object.assign(Object.assign(Object.assign({}, IconMap[k]), aItem), {
+            action: k
+          }));
+        }
+      } else if (typeof aItem === 'function') {
+        if (aItem(nodeData)) {
+          arr.push(Object.assign(Object.assign({}, IconMap[k]), {
+            action: k
+          }));
+        }
+      } else if (aItem) {
+        arr.push(Object.assign(Object.assign({}, IconMap[k]), {
+          action: k
+        }));
+      }
+    } else if (Array.isArray(aItem) && aItem.length) {
+      //自定义按钮
+      aItem.forEach(function (_) {
+        if (typeof _.show === 'function') {
+          if (_.show(nodeData)) {
+            arr.push(_);
+          }
+        } else arr.push(_);
+      });
+    }
+  });
+  return arr;
+}; //tree node 操作栏
+
+
+var OperateBar = function OperateBar(props) {
+  var actionsCallback = props.actionsCallback,
+      opRef = props.opRef,
+      mouseInRef = props.mouseInRef,
+      showActions = props.showActions,
+      onRemove = props.onRemove;
+  var portalRef = useRef(null); //portal
+
+  var uidRef = useRef(UUID().replace(/-/g, '')); //portal uid
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      nodeData = _useState2[0],
+      setNodeData = _useState2[1]; //节点数据
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isRender = _useState4[0],
+      setIsRender = _useState4[1]; //重新渲染
+
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasPortal = _useState6[0],
+      setHasPortal = _useState6[1]; //创建插槽portal
+
+
+  var opRefCurrent = opRef.current;
+  var intl = useFormatMessage('Tree', localeJson); //扇形位置
+
+  var getPosition = function getPosition(length, deg) {
+    var left = Math.round(Math.sin(Math.PI / 180 * deg) * length) + "px";
+    var top = -Math.round(Math.cos(Math.PI / 180 * deg) * length + 12) + "px";
+    return {
+      "left": left,
+      "top": top
+    };
+  }; //计算扇形半径
+
+
+  var calcRadius = function calcRadius(num) {
+    if (num <= 4) return 40;else if (num === 5) return 60;else if (num > 5 && num < 7) return 80;else return 100;
+  }; //更新外层容器样式
+
+
+  var updateContainerStyles = function updateContainerStyles(C, r) {
+    var _a, _b;
+
+    var _ref = ((_b = (_a = opRef.current) === null || _a === void 0 ? void 0 : _a.anchorEl) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {},
+        top = _ref.top,
+        left = _ref.left,
+        height = _ref.height;
+
+    var w = r + 24 + 12;
+    var h = r * 2 + 24 + 12;
+    top = top - h / 2 + height / 2;
+    C.style.cssText = "\n                            position: fixed;\n                            width:".concat(w, "px;\n                            height: ").concat(h, "px;\n                            top: ").concat(top, "px;\n                            left: ").concat(left, "px;\n                             ");
+  }; //计算角度
+
+
+  var getActionsAngle = function getActionsAngle(num, i) {
+    var interval = 0;
+    var deg = 0;
+
+    if (num === 4) {
+      interval = 60;
+      deg = i * interval;
+    } else if (num === 3) {
+      interval = 30;
+      deg = (2 * i + 1) * interval;
+    } else if (num === 2) {
+      interval = 60;
+      deg = (i + 1) * interval;
+    } else if (num === 1) {
+      deg = 90;
+    } else if (num === 5) {
+      interval = 45;
+      deg = i * interval;
+    } else if (num > 5 && num <= 7) {
+      interval = 30;
+      deg = i * interval;
+    } else if (num > 7) {
+      interval = 20;
+      deg = i * interval;
+    }
+
+    return deg;
+  }; //扇形展开
+
+
+  var sectorAndRotate = function sectorAndRotate() {
+    var _a;
+
+    var portal = document.getElementById(uidRef.current);
+    var container = (_a = portal === null || portal === void 0 ? void 0 : portal.getElementsByClassName('sector-item-container')) === null || _a === void 0 ? void 0 : _a[0];
+    var items = (container === null || container === void 0 ? void 0 : container.childNodes) || [];
+    var parentContainer = container === null || container === void 0 ? void 0 : container.parentNode;
+    var r = calcRadius(items.length);
+
+    if (parentContainer) {
+      updateContainerStyles(parentContainer, r);
+    }
+
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      item.style.transition = ".3s";
+      item.style.opacity = 1; //计算角度
+
+      var deg = getActionsAngle(items.length, i);
+
+      var _getPosition = getPosition(r, deg),
+          left = _getPosition.left,
+          top = _getPosition.top;
+
+      item.style.transform = "translate(".concat(left, ",").concat(top, ")");
+    }
+  }; //扇形收缩
+
+
+  var sectorAndRotateReverse = function sectorAndRotateReverse() {
+    var _a, _b;
+
+    var portal = document.getElementById(uidRef.current);
+    var container = (_a = portal === null || portal === void 0 ? void 0 : portal.getElementsByClassName('sector-item-container')) === null || _a === void 0 ? void 0 : _a[0];
+    var items = (container === null || container === void 0 ? void 0 : container.childNodes) || [];
+
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      item.style.transition = ".3s";
+      item.style.transform = "translate(0,0)";
+      item.style.opacity = 0;
+    }
+
+    (_b = portal === null || portal === void 0 ? void 0 : portal.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(portal);
+    setHasPortal(false);
+  }; //显示扇形
+
+
+  var onShowSector = function onShowSector(nodeData, isShow) {
+    if (isShow) {
+      setNodeData(nodeData);
+      sectorAndRotate();
+    } else {
+      sectorAndRotateReverse();
+    }
+  }; //鼠标进入扇形
+
+
+  var onMouseInSector = function onMouseInSector() {
+    mouseInRef.current = true;
+  }; //鼠标离开扇形
+
+
+  var onMouseLeaveSector = function onMouseLeaveSector() {
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove(opRefCurrent.anchorEl);
+  }; //操作按钮点击回调
+
+
+  var handleNodeActions = function handleNodeActions(nodeData, type, evt) {
+    evt.stopPropagation();
+    actionsCallback === null || actionsCallback === void 0 ? void 0 : actionsCallback(nodeData, type, evt);
+  }; //渲染操作栏
+
+
+  var renderOperateBar = function renderOperateBar() {
+    var actionArr = toActionArr(showActions, nodeData, getIconMap(intl));
+    if (!(actionArr === null || actionArr === void 0 ? void 0 : actionArr.length)) return null;
+    return actionArr.map(function (item, idx) {
+      var _ref2 = item !== null && item !== void 0 ? item : {},
+          action = _ref2.action,
+          text = _ref2.text,
+          icon = _ref2.icon;
+
+      return jsx(Tooltip, Object.assign({
+        title: text
+      }, {
+        children: jsx("li", Object.assign({
+          className: clsx('sector-item', {
+            'sector-item--del': action === 'del'
+          }),
+          onClick: function onClick(evt) {
+            return handleNodeActions(nodeData, action, evt);
+          }
+        }, {
+          children: icon
+        }))
+      }), idx);
+    });
+  }; //透传mouse enter 事件
+
+
+  useImperativeHandle(opRef, function () {
+    return Object.assign(Object.assign({}, opRefCurrent), {
+      uid: uidRef.current,
+      onShowSector: onShowSector
+    });
+  });
+  useEffect(function () {
+    //创建portal
+    var createPortal = function createPortal() {
+      var portal = document.getElementById(uidRef.current);
+
+      if (!portal) {
+        portal = document.createElement('div');
+        portal.id = uidRef.current;
+        portal.style.position = 'fixed';
+        portal.style.top = '-9999px';
+        portal.style.zIndex = 1500;
+        document.body.appendChild(portal);
+        setHasPortal(true);
+      }
+
+      setIsRender(true);
+      portalRef.current = portal;
+    };
+
+    if (!hasPortal) createPortal();
+  }, [hasPortal]); //销毁
+
+  useEffect(function () {
+    return function () {
+      var _a, _b;
+
+      (_b = (_a = portalRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(portalRef.current);
+      setHasPortal(false);
+    };
+  }, []);
+  return jsx(Fragment, {
+    children: isRender && /*#__PURE__*/ReactDOM.createPortal(jsx("div", Object.assign({
+      className: "sector-container",
+      onMouseLeave: onMouseLeaveSector,
+      onMouseEnter: onMouseInSector
+    }, {
+      children: jsx("ul", Object.assign({
+        className: "sector-item-container"
+      }, {
+        children: renderOperateBar()
+      }))
+    })), portalRef.current)
+  });
+};
+
+var defaultPageSize = {
+  page: 1,
+  size: 10
+}; //tree 组件
+
+var Tree = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var url = props.url,
+      ctx = props.ctx,
+      _props$params = props.params,
+      params = _props$params === void 0 ? null : _props$params,
+      _props$method = props.method,
+      method = _props$method === void 0 ? 'GET' : _props$method,
+      requestCallback = props.requestCallback,
+      refresh = props.refresh,
+      _props$replaceFields = props.replaceFields,
+      replaceFields = _props$replaceFields === void 0 ? {
+    key: 'key',
+    parentId: 'parentId',
+    children: 'children',
+    title: 'title',
+    loadKey: 'key'
+  } : _props$replaceFields,
+      originTreeData = props.treeData,
+      className = props.className,
+      showIcon = props.showIcon,
+      _icon = props.icon,
+      showLine = props.showLine,
+      _switcherIcon = props.switcherIcon,
+      blockNode = props.blockNode,
+      checkable = props.checkable,
+      selectable = props.selectable,
+      _props$radioable = props.radioable,
+      radioable = _props$radioable === void 0 ? false : _props$radioable,
+      _props$showRadio = props.showRadio,
+      showRadio = _props$showRadio === void 0 ? true : _props$showRadio,
+      _props$checkStrictly = props.checkStrictly,
+      checkStrictly = _props$checkStrictly === void 0 ? false : _props$checkStrictly,
+      actionsCallback = props.actionsCallback,
+      showActions = props.showActions,
+      checkedKeys = props.checkedKeys,
+      defaultCheckedKeys = props.defaultCheckedKeys,
+      expandedKeys = props.expandedKeys,
+      defaultExpandedKeys = props.defaultExpandedKeys,
+      onCheck = props.onCheck,
+      onExpand = props.onExpand,
+      _props$asyncLoad = props.asyncLoad,
+      asyncLoad = _props$asyncLoad === void 0 ? false : _props$asyncLoad,
+      _props$pagination = props.pagination,
+      pagination = _props$pagination === void 0 ? false : _props$pagination,
+      _props$pageSize = props.pageSize,
+      pageSize = _props$pageSize === void 0 ? defaultPageSize : _props$pageSize,
+      loadData = props.loadData,
+      _props$localFilter = props.localFilter,
+      localFilter = _props$localFilter === void 0 ? false : _props$localFilter,
+      localParams = props.localParams,
+      onFilter = props.onFilter,
+      _props$loadMoreNode = props.loadMoreNode,
+      loadMoreNode = _props$loadMoreNode === void 0 ? null : _props$loadMoreNode,
+      paramsCallback = props.paramsCallback,
+      titleRender = props.titleRender,
+      emptyProps = props.emptyProps,
+      notFoundContent = props.notFoundContent,
+      wrapperClassName = props.wrapperClassName,
+      wrapperStyle = props.wrapperStyle,
+      _props$showLoading = props.showLoading,
+      showLoading = _props$showLoading === void 0 ? true : _props$showLoading,
+      onLoadedKey = props.onLoadedKey;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      treeData = _useState2[0],
+      setTreeData = _useState2[1]; //树数据
+
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inCheckedKeys = _useState4[0],
+      setInCheckedKeys = _useState4[1]; //选中keys
+
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inExpandedKeysKeys = _useState6[0],
+      setInExpandedKeys = _useState6[1]; //展开keys
+
+
+  var opRef = useRef({}); //操作栏
+
+  var mouseInSectorRef = useRef(false); //是否鼠标进入扇形
+
+  var timeSectorRef = useRef(-1); //定时显示扇形
+
+  var nodesRef = useRef([]); //保存节点状态
+
+  var prefixCls = 'paraui-tree'; //cls 前缀
+
+  var treeMapRef = useRef({}); //tree map
+
+  var treeOriDataRef = useRef([]); //tree origin data
+
+  var unMatchKeys = getUnMatchDataOfKeys(inCheckedKeys, treeData); //没有匹配数据的keys
+
+  var nPageSize = Object.assign(Object.assign({}, defaultPageSize), pageSize);
+  var halfCheckedKeys = useRef([]); //半选keys
+
+  var intl = useFormatMessage('Tree', localeJson);
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      loading = _useState8[0],
+      setLoading = _useState8[1];
+
+  var firstRender = useRef(true); //是否第一次渲染
+  //新属性
+
+  var newProps = Object.assign(Object.assign({}, props), {
+    showLine: Boolean(showLine),
+    checkStrictly: radioable || checkStrictly,
+    showIcon: radioable || showIcon
+  }); //生成class
+
+  var makeCls = function makeCls() {
+    var _clsx;
+
+    return clsx((_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_clsx, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_clsx, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_clsx, "".concat(prefixCls, "-radioable"), radioable), _defineProperty(_clsx, "".concat(prefixCls, "-radioable-showradio"), radioable && showRadio), _clsx), className);
+  }; //格式化treeData 替换显示字段
+
+
+  var formatTreeData = function formatTreeData(treeData) {
+    function recursive(dataList) {
+      var _ref = replaceFields || {},
+          key = _ref.key,
+          title = _ref.title,
+          children = _ref.children,
+          parentId = _ref.parentId;
+
+      dataList.forEach(function (item) {
+        var _a;
+
+        if (key) item.key = item[key];
+        if (title) item.title = item[title];
+        if (children) item.children = item[children];
+        if (parentId) item.parentId = item[parentId];
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) recursive(item.children);
+      });
+    }
+
+    if (replaceFields) recursive(treeData);
+    return treeData;
+  }; //内部 tree title render
+
+
+  var internalTitleRender = function internalTitleRender(nodeData) {
+    var getTitleNode = function getTitleNode() {
+      if (typeof titleRender === 'function') {
+        if (nodeData.moreFlag) {
+          //过滤加载更多节点
+          return nodeData.title;
+        }
+
+        return titleRender(nodeData);
+      }
+
+      return nodeData.title;
+    };
+
+    return jsxs("span", Object.assign({
+      className: 'paraui-tree-title-wrapper',
+      onMouseEnter: handleTreeNodeMEnter,
+      onMouseLeave: handleTreeNodeMLeave
+    }, {
+      children: [getTitleNode(), !!showActions && jsx("div", Object.assign({
+        className: "sector-anchor",
+        onMouseEnter: function onMouseEnter(evt) {
+          return handleSectorMEnter(nodeData, evt);
+        },
+        onMouseLeave: handleSectorMLeave
+      }, {
+        children: jsx(MoreOutlinedIcon, {})
+      }))]
+    }));
+  }; //tree node mouse enter
+
+
+  var handleTreeNodeMEnter = function handleTreeNodeMEnter(evt) {
+    evt.stopPropagation();
+    clearNodesState();
+    var _currTarget = evt.currentTarget;
+
+    if (_currTarget) {
+      var cParentEl = _currTarget.closest('.paraui-tree-node-content-wrapper');
+
+      nodesRef.current.push(cParentEl);
+      showMoreActionIcon(cParentEl, true);
+    }
+  }; //tree node mouse leave
+
+
+  var handleTreeNodeMLeave = function handleTreeNodeMLeave(evt) {
+    evt.stopPropagation();
+    clearNodesState();
+    var _currTarget = evt.currentTarget;
+
+    if (_currTarget) {
+      var cParentEl = _currTarget.closest('.paraui-tree-node-content-wrapper');
+
+      showMoreActionIcon(cParentEl, false);
+    }
+  }; //节点显示更多图标
+
+
+  var showMoreActionIcon = function showMoreActionIcon(cParentEl, isShow) {
+    if (!cParentEl) return;
+
+    if (isShow) {
+      cParentEl === null || cParentEl === void 0 ? void 0 : cParentEl.classList.add('paraui-tree-node-content-wrapper--active');
+    } else {
+      cParentEl === null || cParentEl === void 0 ? void 0 : cParentEl.classList.remove('paraui-tree-node-content-wrapper--active');
+    }
+  }; //mouse enter sector
+
+
+  var handleSectorMEnter = function handleSectorMEnter(nodeData, evt) {
+    evt.stopPropagation();
+    var _currTarget = evt.currentTarget;
+    opRef.current.anchorEl = _currTarget;
+    timeSectorRef.current = setTimeout(function () {
+      clearTimeout(timeSectorRef.current);
+      showSector(_currTarget, nodeData);
+    }, 300);
+  }; //mouse sector leave
+
+
+  var handleSectorMLeave = function handleSectorMLeave(evt) {
+    evt.stopPropagation();
+    clearTimeout(timeSectorRef.current);
+    var _anchor = evt.currentTarget;
+    var timer = setTimeout(function () {
+      clearTimeout(timer);
+
+      if (!mouseInSectorRef.current) {
+        removeSector(_anchor);
+      }
+    }, 300);
+  }; //显示扇形
+
+
+  var showSector = function showSector(anchorEl, nodeData) {
+    var _a, _b;
+
+    var portalRoot = document.getElementById(opRef.current.uid);
+    anchorEl.classList.add('sector-anchor--active');
+
+    if (portalRoot) {
+      var container = portalRoot.querySelector('.sector-container');
+
+      if (container) {
+        (_b = (_a = opRef.current) === null || _a === void 0 ? void 0 : _a.onShowSector) === null || _b === void 0 ? void 0 : _b.call(_a, nodeData, true);
+      }
+    }
+  }; //移除扇形
+
+
+  var removeSector = function removeSector(anchorEl) {
+    var _a, _b;
+
+    if (anchorEl) {
+      anchorEl.classList.remove('sector-anchor--active');
+      (_b = (_a = opRef.current) === null || _a === void 0 ? void 0 : _a.onShowSector) === null || _b === void 0 ? void 0 : _b.call(_a, {}, false);
+    }
+  }; //离开扇形回调
+
+
+  var handleOnRemove = function handleOnRemove(anchorEl) {
+    if (anchorEl) {
+      var cParentEl = anchorEl.closest('.paraui-tree-node-content-wrapper');
+      showMoreActionIcon(cParentEl, false);
+      removeSector(anchorEl);
+    }
+  }; //清除节点状态
+
+
+  var clearNodesState = function clearNodesState() {
+    var _a;
+
+    if ((_a = nodesRef.current) === null || _a === void 0 ? void 0 : _a.length) {
+      nodesRef.current.forEach(function (el) {
+        var _a;
+
+        (_a = el === null || el === void 0 ? void 0 : el.classList) === null || _a === void 0 ? void 0 : _a.remove('paraui-tree-node-content-wrapper--active');
+      });
+      nodesRef.current.length = 0;
+    }
+  }; //内部check
+
+
+  var internalCheck = function internalCheck(checkedKeys, e) {
+    var _a;
+
+    var temp = [];
+    var halfChecked = [];
+
+    if (radioable) {
+      //单选
+      var node = e.node;
+      var key = (_a = replaceFields.key) !== null && _a !== void 0 ? _a : 'key';
+      if (e.checked) temp = [node[key]];
+    } else if (checkStrictly) {
+      //严格模式
+      temp = checkedKeys.checked;
+      halfChecked = checkedKeys.halfChecked;
+      halfCheckedKeys.current = halfChecked;
+    } else {
+      temp = checkedKeys;
+      halfChecked = e.halfCheckedKeys;
+    }
+
+    var mKeys = [].concat(_toConsumableArray(temp), _toConsumableArray(unMatchKeys));
+    setInCheckedKeys(mKeys);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(mKeys, e, halfChecked);
+  }; //展开节点
+
+
+  var internalExpand = function internalExpand(expandedKeys, e) {
+    setInExpandedKeys(_toConsumableArray(expandedKeys));
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expandedKeys, e);
+  }; //请求树数据
+
+
+  var requestTreeData = function requestTreeData() {
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+      var tParams, m, opts, _yield$Request, data, err;
+
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (url) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return", []);
+
+            case 2:
+              showLoading && setLoading(true);
+              tParams = (paramsCallback === null || paramsCallback === void 0 ? void 0 : paramsCallback(params)) || params;
+              m = method === null || method === void 0 ? void 0 : method.toUpperCase();
+              opts = _defineProperty({
+                url: url,
+                ctx: ctx,
+                method: m
+              }, m === 'GET' ? 'params' : 'data', tParams || {});
+              _context.next = 8;
+              return Request(opts);
+
+            case 8:
+              _yield$Request = _context.sent;
+              data = _yield$Request.data;
+              err = _yield$Request.err;
+              //分页数据格式 {list,page,size,total}，否则 []
+              showLoading && setLoading(false);
+
+              if (!err) {
+                _context.next = 14;
+                break;
+              }
+
+              return _context.abrupt("return", pagination ? {} : []);
+
+            case 14:
+              return _context.abrupt("return", pagination ? data.data || {} : data.data || []);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }; //加载更多节点数据
+
+
+  var getLoadMoreData = function getLoadMoreData() {
+    return {
+      key: String((Math.random() * 1000000 | 0) + Date.now()),
+      title: intl({
+        id: 'loadMore'
+      }),
+      checkable: false,
+      disableCheckbox: true,
+      isLeaf: true,
+      selectable: false,
+      icon: null,
+      moreFlag: true
+    };
+  }; //渲染加载更多节点
+
+
+  var renderLoadMoreNode = function renderLoadMoreNode(dataNode) {
+    return jsx("span", Object.assign({
+      className: "paraui-tree-treenode-more-wrapper",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onLoadData(dataNode);
+      }
+    }, {
+      children: loadMoreNode || dataNode.title
+    }));
+  }; //更新tree数据
+
+
+  var updateTreeData = function updateTreeData(list, key, children, moreFlag) {
+    //root节点
+    if (key === 'ROOT_KEY') {
+      list.pop(); //删除加载更多节点
+
+      return list.concat(children);
+    }
+
+    return list.map(function (node) {
+      if (node.key === key) {
+        if (moreFlag) {
+          //加载更多
+          var child = node.children || [];
+          child.pop();
+          return Object.assign(Object.assign({}, node), {
+            children: child.concat(children)
+          });
+        }
+
+        return Object.assign(Object.assign({}, node), {
+          children: children
+        });
+      }
+
+      if (node.children) {
+        return Object.assign(Object.assign({}, node), {
+          children: updateTreeData(node.children, key, children, moreFlag)
+        });
+      }
+
+      return node;
+    });
+  }; //异步数据加载 [moreFlag]:加载更多标识
+
+
+  var onLoadData = function onLoadData(dataNode) {
+    var key = dataNode.key,
+        children = dataNode.children,
+        parentId = dataNode.parentId,
+        moreFlag = dataNode.moreFlag;
+    onLoadedKey === null || onLoadedKey === void 0 ? void 0 : onLoadedKey(key, dataNode);
+    return new Promise(function (resolve) {
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
+        var _a, tKey, loadKey, loadParams, treeData, handledData, pageInfo, _treeData, _treeData$list, list, page, size, total;
+
+        return regenerator.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!children) {
+                  _context2.next = 3;
+                  break;
+                }
+
+                resolve();
+                return _context2.abrupt("return");
+
+              case 3:
+                //当前节点key
+                tKey = key; //参数动态字段
+
+                loadKey = (_a = replaceFields.loadKey) !== null && _a !== void 0 ? _a : 'key'; //加载节点时参数
+
+                loadParams = Object.assign(_defineProperty({}, loadKey, tKey), params); //是否分页
+
+                if (pagination) {
+                  if (moreFlag) {
+                    //是否加载更多
+                    tKey = parentId;
+                    treeMapRef.current[tKey].page += 1;
+                    loadParams[loadKey] = tKey;
+
+                    if (tKey === 'ROOT_KEY') {
+                      //根节点加载更多，不需要key
+                      delete loadParams[loadKey];
+                    }
+                  } //分页参数
+
+
+                  loadParams.page = treeMapRef.current[tKey].page;
+                  loadParams.size = treeMapRef.current[tKey].size;
+                }
+
+                _context2.next = 9;
+                return requestTreeData(loadParams);
+
+              case 9:
+                treeData = _context2.sent;
+                _context2.next = 12;
+                return requestCallback === null || requestCallback === void 0 ? void 0 : requestCallback(treeData);
+
+              case 12:
+                handledData = _context2.sent;
+                if (handledData) treeData = handledData;
+                pageInfo = {}; //分页信息
+
+                if (!pagination) {
+                  _context2.next = 22;
+                  break;
+                }
+
+                if (Object.keys(treeData).length) {
+                  _context2.next = 19;
+                  break;
+                }
+
+                resolve();
+                return _context2.abrupt("return");
+
+              case 19:
+                _treeData = treeData, _treeData$list = _treeData.list, list = _treeData$list === void 0 ? [] : _treeData$list, page = _treeData.page, size = _treeData.size, total = _treeData.total;
+                treeData = list;
+                pageInfo = {
+                  page: page,
+                  size: size,
+                  total: total
+                };
+
+              case 22:
+                if (treeData === null || treeData === void 0 ? void 0 : treeData.length) {
+                  treeData = formatTreeData(treeData);
+
+                  if (pagination) {
+                    //是否分页
+                    treeData = transformTreeData(treeData, pageInfo, tKey);
+                  }
+                }
+
+                if (Array.isArray(treeData)) setTreeData(function (origin) {
+                  return updateTreeData(origin, tKey, treeData, moreFlag);
+                });
+                resolve();
+
+              case 25:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+    });
+  }; //转化tree数据
+
+
+  var transformTreeData = function transformTreeData(treeData, pageInfo, parentId) {
+    var newTreeData = convert(treeData); //tree结构
+
+    var page = pageInfo.page,
+        size = pageInfo.size,
+        total = pageInfo.total; //计算分页，是否显示加载更多
+
+    if (page * size < total) {
+      var loadMoreData = getLoadMoreData();
+      loadMoreData.parentId = parentId || 'ROOT_KEY';
+      loadMoreData.title = renderLoadMoreNode(loadMoreData);
+      newTreeData.push(loadMoreData);
+    }
+
+    treeMapRef.current = _toObject(newTreeData);
+
+    function _toObject(data) {
+      var obj = treeMapRef.current;
+      if (!(data === null || data === void 0 ? void 0 : data.length)) return obj;
+      data.forEach(function (item) {
+        var tKey = item.moreFlag ? item.parentId : item.key;
+
+        if (!obj[tKey]) {
+          obj[tKey] = Object.assign(Object.assign({}, item), nPageSize);
+        }
+      });
+      return obj;
+    }
+
+    return newTreeData;
+  }; //初始化树
+
+
+  var initTree = function initTree() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee3() {
+      var tParams, treeData, pageInfo, handledData, _treeData2, _treeData2$list, list, page, size, total;
+
+      return regenerator.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              tParams = Object.assign({}, params);
+
+              if (pagination) {
+                //分页参数
+                tParams.page = nPageSize.page;
+                tParams.size = nPageSize.size;
+              }
+
+              _context3.next = 4;
+              return requestTreeData(tParams);
+
+            case 4:
+              treeData = _context3.sent;
+              pageInfo = {}; //分页信息
+              //透传数据
+
+              _context3.next = 8;
+              return requestCallback === null || requestCallback === void 0 ? void 0 : requestCallback(treeData);
+
+            case 8:
+              handledData = _context3.sent;
+              if (handledData) treeData = handledData;
+
+              if (!pagination) {
+                _context3.next = 17;
+                break;
+              }
+
+              if (Object.keys(treeData).length) {
+                _context3.next = 13;
+                break;
+              }
+
+              return _context3.abrupt("return", setTreeData([]));
+
+            case 13:
+              _treeData2 = treeData, _treeData2$list = _treeData2.list, list = _treeData2$list === void 0 ? [] : _treeData2$list, page = _treeData2.page, size = _treeData2.size, total = _treeData2.total;
+              treeData = list;
+              pageInfo = {
+                page: page,
+                size: size,
+                total: total
+              }; //clean treeMapRef
+
+              treeMapRef.current = {};
+
+            case 17:
+              if (treeData === null || treeData === void 0 ? void 0 : treeData.length) {
+                _context3.next = 19;
+                break;
+              }
+
+              return _context3.abrupt("return", setTreeData([]));
+
+            case 19:
+              treeData = formatTreeData(treeData);
+              if (localFilter) //本地过滤
+                treeOriDataRef.current = deepCopy(treeData);
+              if (pagination) //是否分页
+                treeData = transformTreeData(treeData, pageInfo);
+              setTreeData(_toConsumableArray(treeData));
+
+            case 23:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+  }; //额外的属性
+
+
+  var getAdditionProps = function getAdditionProps() {
+    var additionProps = {};
+    if (asyncLoad) //异步加载
+      additionProps.loadData = onLoadData;
+    if (loadData) additionProps.loadData = loadData;
+    additionProps.titleRender = internalTitleRender;
+    return additionProps;
+  };
+
+  useEffect(function () {
+    if (defaultCheckedKeys) {
+      //默认值checked
+      setInCheckedKeys(_toConsumableArray(defaultCheckedKeys));
+    }
+
+    if (defaultExpandedKeys) {
+      //默认值expanded
+      setInExpandedKeys(_toConsumableArray(defaultExpandedKeys));
+    }
+  }, [defaultCheckedKeys, defaultExpandedKeys]);
+  useEffect(function () {
+    if (checkedKeys) {
+      //选中keys
+      setInCheckedKeys(_toConsumableArray(getCheckedKeys(checkedKeys)));
+      halfCheckedKeys.current = getHalfCheckedKeys(checkedKeys);
+    }
+
+    if (expandedKeys) {
+      //展开keys
+      setInExpandedKeys(_toConsumableArray(expandedKeys));
+    }
+  }, [checkedKeys, expandedKeys]);
+  useEffect(function () {
+    //默认展开所有
+    function _expandAllNode(newTreeData) {
+      var keys = [];
+
+      function recursive(dataList) {
+        dataList.forEach(function (item) {
+          var _a;
+
+          if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            keys.push(item.key);
+            recursive(item.children);
+          }
+        });
+      }
+
+      if (!expandedKeys && !defaultExpandedKeys) {
+        recursive(newTreeData);
+        if (keys.length) setInExpandedKeys(keys);
+      }
+    } //tree 初始化
+
+
+    if (Array.isArray(originTreeData)) {
+      var newTreeData = formatTreeData(originTreeData); //本地过滤
+
+      if (localFilter) treeOriDataRef.current = deepCopy(newTreeData);
+
+      if (newProps.defaultExpandAll) {
+        //默认展开所有
+        _expandAllNode(newTreeData);
+      }
+
+      setTreeData(_toConsumableArray(newTreeData));
+    } else {
+      initTree();
+    }
+  }, [url, ctx, params, method, refresh, originTreeData]);
+  useEffect(function () {
+    //过滤数据
+    function _filterData(_ref2) {
+      var searchKey = _ref2.searchKey,
+          searchValue = _ref2.searchValue;
+      if (!searchKey) return;
+
+      if (searchValue === '') {
+        setTreeData(treeOriDataRef.current);
+        var tKeys = expandedKeys || defaultExpandedKeys;
+        setInExpandedKeys(_toConsumableArray(tKeys || []));
+        return;
+      }
+
+      var flatData = flatten(treeOriDataRef.current); //匹配数据
+
+      var filterTreeData = flatData.reduce(function (acc, curr) {
+        var title = String(curr[searchKey]).toLowerCase();
+        var isMatch = title.includes(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
+        return isMatch ? acc.concat(curr) : acc;
+      }, []);
+      var newTreeData = convertByFilter(deepCopy(flatData), filterTreeData);
+      setTreeData(newTreeData);
+      setInExpandedKeys(_handleExpendKey(newTreeData));
+    } //处理展开key
+
+
+    function _handleExpendKey(list) {
+      return list.reduce(function (acc, curr) {
+        return acc.concat(curr.key, _handleExpendKey(curr.children || []));
+      }, []);
+    }
+
+    if (localFilter) {
+      //开启本地过滤
+      if (onFilter) {
+        var fData = onFilter(treeOriDataRef.current);
+        if (!fData) return;
+        setTreeData(fData);
+        return;
+      }
+
+      if (localParams) _filterData(localParams);
+    }
+  }, [localFilter, localParams]); //渲染空状态
+
+  var renderEmpty = jsx("div", Object.assign({
+    className: clsx('paraui-tree paraui-tree-empty', className),
+    style: props.style
+  }, {
+    children: notFoundContent !== null && notFoundContent !== void 0 ? notFoundContent : jsx(Empty, Object.assign({
+      size: 'small'
+    }, emptyProps))
+  })); //tree memo
+
+
+  var treeMemo = useMemo(function () {
+    if (!(treeData === null || treeData === void 0 ? void 0 : treeData.length) && firstRender.current) {
+      firstRender.current = false;
+      return null;
+    } else if (!(treeData === null || treeData === void 0 ? void 0 : treeData.length)) {
+      return renderEmpty;
+    }
+
+    var tCheckedKeys = inCheckedKeys;
+
+    if (checkStrictly) {
+      tCheckedKeys = {
+        checked: inCheckedKeys,
+        halfChecked: halfCheckedKeys.current
+      };
+    }
+
+    if (props.onMounted) {
+      props.onMounted();
+    }
+
+    return jsx(RcTree, Object.assign({
+      itemHeight: 20,
+      ref: ref
+    }, newProps, {
+      prefixCls: prefixCls,
+      className: makeCls(),
+      checkable: radioable || checkable ? jsx("span", {
+        className: "".concat(prefixCls, "-checkbox-inner")
+      }) : checkable,
+      selectable: radioable ? false : selectable,
+      switcherIcon: function switcherIcon(nodeProps) {
+        return renderSwitcherIcon(prefixCls, _switcherIcon, showLine, nodeProps);
+      }
+    }, getAdditionProps(), {
+      treeData: treeData,
+      checkedKeys: tCheckedKeys,
+      expandedKeys: inExpandedKeysKeys,
+      onCheck: internalCheck,
+      onExpand: internalExpand,
+      icon: function icon(nodeProps) {
+        if (_icon) {
+          return typeof _icon === 'function' ? _icon(nodeProps) : _icon;
+        }
+
+        if (nodeProps.checkable === false) return null;
+        if (!radioable) return null;else if (!showRadio) return null;
+        return renderTreeNodeIcon(nodeProps, radioable, inCheckedKeys[0], replaceFields);
+      }
+    }));
+  }, [treeData, inCheckedKeys, inExpandedKeysKeys, newProps.selectedKeys, newProps.loadedKeys]); //OperateBar render
+
+  var renderOperateBar = function renderOperateBar() {
+    return !!showActions ? jsx(OperateBar, {
+      opRef: opRef,
+      mouseInRef: mouseInSectorRef,
+      actionsCallback: actionsCallback,
+      onRemove: handleOnRemove,
+      showActions: showActions
+    }) : null;
+  };
+
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: clsx('paraui-tree-wrapper', wrapperClassName),
+      style: wrapperStyle
+    }, {
+      children: [treeMemo, loading && jsx(Loading, {})]
+    })), renderOperateBar()]
+  });
+});
+Tree.defaultProps = {
+  checkable: false,
+  selectable: true,
+  showIcon: false,
+  motion: Object.assign(Object.assign({}, collapseMotion), {
+    motionAppear: false
+  }),
+  blockNode: false
+};
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function (s) {
+    var el = this;
+    if (!document.documentElement.contains(el)) return null;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement;
+    } while (el !== null);
+
+    return null;
+  };
+}
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/9 下午8:39\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-tree-treenode-leaf-last .paraui-tree-switcher-leaf-line::before {\n  top: auto !important;\n  bottom: auto !important;\n  height: 14px !important;\n}\n\n@keyframes paraCheckboxEffect {\n  0% {\n    transform: scale(1);\n    opacity: 0.5;\n  }\n  100% {\n    transform: scale(1.6);\n    opacity: 0;\n  }\n}\n.paraui-tree-rtl {\n  direction: rtl;\n}\n.paraui-tree-rtl .paraui-tree-node-content-wrapper[draggable=true] .paraui-tree-drop-indicator::after {\n  right: -6px;\n  left: unset;\n}\n.paraui-tree .paraui-tree-treenode-rtl {\n  direction: rtl;\n}\n.paraui-tree-rtl .paraui-tree-switcher_close .paraui-tree-switcher-icon svg {\n  transform: rotate(90deg);\n}\n.paraui-tree-show-line .paraui-tree-indent-unit::before .paraui-tree-rtl.paraui-tree-show-line .paraui-tree-indent-unit::before {\n  right: auto;\n  left: -13px;\n  border-right: none;\n  border-left: 1px solid #d9d9d9;\n}\n.paraui-tree-checkbox .paraui-tree-rtl.paraui-tree-checkbox {\n  margin: 4px 0 0 8px;\n}\n\n.paraui-tree-select-dropdown-rtl .paraui-select-tree-checkbox {\n  margin: 4px 0 0 8px;\n}\n\n.paraui-tree-checkbox {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: relative;\n  top: 0.2em;\n  line-height: 1;\n  white-space: nowrap;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-tree-checkbox-wrapper:hover .paraui-tree-checkbox-inner, .paraui-tree-checkbox:hover .paraui-tree-checkbox-inner, .paraui-tree-checkbox-input:focus + .paraui-tree-checkbox-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-tree-checkbox-checked::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 1px solid rgb(54, 102, 214);\n  border-radius: 2px;\n  visibility: hidden;\n  -webkit-animation: paraCheckboxEffect 0.36s ease-in-out;\n  animation: paraCheckboxEffect 0.36s ease-in-out;\n  -webkit-animation-fill-mode: backwards;\n  animation-fill-mode: backwards;\n  content: \"\";\n  box-sizing: border-box;\n}\n.paraui-tree-checkbox:hover::after, .paraui-tree-checkbox-wrapper:hover .paraui-tree-checkbox::after {\n  visibility: visible;\n}\n.paraui-tree-checkbox-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 16px;\n  height: 16px;\n  direction: ltr;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid #d9d9d9;\n  border-radius: 2px;\n  border-collapse: separate;\n  transition: all 0.3s;\n}\n.paraui-tree-checkbox-inner::after {\n  position: absolute;\n  top: 50%;\n  left: 21.5%;\n  display: table;\n  width: 6px;\n  height: 9px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(0) translate(-50%, -50%);\n  opacity: 0;\n  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;\n  content: \" \";\n  box-sizing: border-box;\n}\n.paraui-tree-checkbox-input {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  opacity: 0;\n}\n\n.paraui-tree-checkbox-checked .paraui-tree-checkbox-inner::after {\n  position: absolute;\n  display: table;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n  opacity: 1;\n  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n  content: \" \";\n}\n\n.paraui-tree-checkbox-checked .paraui-tree-checkbox-inner {\n  background-color: rgb(54, 102, 214);\n  border-color: rgb(54, 102, 214);\n}\n\n.paraui-tree-checkbox-disabled {\n  cursor: not-allowed;\n}\n.paraui-tree-checkbox-disabled.paraui-tree-checkbox-checked .paraui-tree-checkbox-inner::after {\n  border-color: rgba(0, 0, 0, 0.25);\n  -webkit-animation-name: none;\n  animation-name: none;\n}\n.paraui-tree-checkbox-disabled .paraui-tree-checkbox-input {\n  cursor: not-allowed;\n}\n.paraui-tree-checkbox-disabled .paraui-tree-checkbox-inner {\n  background-color: #f5f5f5;\n  border-color: #d9d9d9 !important;\n}\n.paraui-tree-checkbox-disabled .paraui-tree-checkbox-inner::after {\n  border-color: #f5f5f5;\n  border-collapse: separate;\n  -webkit-animation-name: none;\n  animation-name: none;\n}\n.paraui-tree-checkbox-disabled + span {\n  color: rgba(0, 0, 0, 0.25);\n  cursor: not-allowed;\n}\n.paraui-tree-checkbox-disabled:hover::after, .paraui-tree-checkbox-wrapper:hover .paraui-tree-checkbox-disabled::after {\n  visibility: hidden;\n}\n\n.paraui-tree-checkbox-wrapper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: inline-flex;\n  align-items: baseline;\n  line-height: unset;\n  cursor: pointer;\n}\n.paraui-tree-checkbox-wrapper.paraui-tree-checkbox-wrapper-disabled {\n  cursor: not-allowed;\n}\n.paraui-tree-checkbox-wrapper + .paraui-tree-checkbox-wrapper {\n  margin-left: 8px;\n}\n\n.paraui-tree-checkbox + span {\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.paraui-tree-checkbox-group {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: inline-block;\n}\n.paraui-tree-checkbox-group-item {\n  margin-right: 8px;\n}\n.paraui-tree-checkbox-group-item:last-child {\n  margin-right: 0;\n}\n.paraui-tree-checkbox-group-item + .paraui-tree-checkbox-group-item {\n  margin-left: 0;\n}\n\n.paraui-tree-checkbox-indeterminate .paraui-tree-checkbox-inner {\n  background-color: rgb(54, 102, 214);\n  border-color: rgb(54, 102, 214);\n}\n.paraui-tree-checkbox-indeterminate .paraui-tree-checkbox-inner::after {\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 2px;\n  background-color: rgb(255, 255, 255);\n  border: 0;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  content: \" \";\n}\n.paraui-tree-checkbox-indeterminate.paraui-tree-checkbox-disabled .paraui-tree-checkbox-inner::after {\n  background-color: rgba(0, 0, 0, 0.25);\n  border-color: rgba(0, 0, 0, 0.25);\n}\n\n.paraui-tree {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  background: rgb(255, 255, 255);\n  border-radius: 2px;\n  transition: background-color 0.3s;\n}\n.paraui-tree-focused:not(:hover):not(.paraui-tree-active-focused) {\n  background: #e6f7ff;\n}\n.paraui-tree-list-holder-inner {\n  align-items: flex-start;\n}\n.paraui-tree.paraui-tree-block-node .paraui-tree-list-holder-inner {\n  align-items: stretch;\n}\n.paraui-tree.paraui-tree-block-node .paraui-tree-list-holder-inner .paraui-tree-node-content-wrapper {\n  flex: auto;\n}\n.paraui-tree .paraui-tree-treenode {\n  display: flex;\n  align-items: flex-start;\n  outline: none;\n}\n.paraui-tree .paraui-tree-treenode-disabled .paraui-tree-node-content-wrapper {\n  color: rgba(0, 0, 0, 0.25);\n  cursor: not-allowed;\n}\n.paraui-tree .paraui-tree-treenode-disabled .paraui-tree-node-content-wrapper:hover {\n  background: transparent;\n}\n.paraui-tree .paraui-tree-treenode-active .paraui-tree-node-content-wrapper {\n  background: #f5f5f5;\n}\n.paraui-tree .paraui-tree-treenode:not(.paraui-tree .paraui-tree-treenode-disabled).filter-node .paraui-tree-title {\n  color: inherit;\n  font-weight: 500;\n}\n.paraui-tree-indent {\n  align-self: stretch;\n  white-space: nowrap;\n  user-select: none;\n}\n.paraui-tree-indent-unit {\n  display: inline-block;\n  width: 24px;\n}\n.paraui-tree-switcher {\n  position: relative;\n  flex: none;\n  align-self: stretch;\n  width: 24px;\n  margin: 0;\n  line-height: 24px;\n  text-align: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.paraui-tree-switcher .paraui-tree-switcher-icon,\n.paraui-tree-switcher .paraui-select-tree-switcher-icon {\n  display: inline-block;\n  font-size: 14px;\n  vertical-align: middle;\n  transition: transform 0.3s;\n  color: inherit;\n}\n.paraui-tree-switcher .paraui-tree-switcher-icon svg,\n.paraui-tree-switcher .paraui-select-tree-switcher-icon svg {\n  font-size: inherit;\n  color: inherit;\n  transition: transform 0.3s;\n}\n.paraui-tree-switcher-noop {\n  cursor: default;\n}\n.paraui-tree-switcher_close .paraui-tree-switcher-icon {\n  transform: rotate(-90deg);\n}\n.paraui-tree-switcher_close .paraui-tree-switcher-icon svg {\n  color: currentColor;\n  transform: rotate(-90deg);\n}\n.paraui-tree-switcher-loading-icon {\n  color: rgb(54, 102, 214);\n  will-change: transform;\n  transition: transform 0.3s ease-in-out;\n  animation: loadingCircle 1s infinite linear;\n  vertical-align: middle;\n  font-size: 14px !important;\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-tree-switcher-leaf-line {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.paraui-tree-switcher-leaf-line::before {\n  position: absolute;\n  top: 0;\n  bottom: -4px;\n  margin-left: -1px;\n  border-left: 1px solid #d9d9d9;\n  content: \" \";\n}\n.paraui-tree-switcher-leaf-line::after {\n  position: absolute;\n  width: 10px;\n  height: 14px;\n  margin-left: -1px;\n  border-bottom: 1px solid #d9d9d9;\n  content: \" \";\n}\n.paraui-tree-checkbox {\n  top: initial;\n  margin: 6px 6px 0 0;\n}\n.paraui-tree .paraui-tree-node-content-wrapper {\n  position: relative;\n  z-index: auto;\n  min-height: 24px;\n  margin: 2px 0 0 0;\n  padding: 0 6px;\n  color: inherit;\n  line-height: 24px;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;\n}\n.paraui-tree .paraui-tree-node-content-wrapper:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n}\n.paraui-tree .paraui-tree-node-content-wrapper.paraui-tree-node-selected {\n  background-color: transparent;\n  color: rgb(54, 102, 214);\n}\n.paraui-tree .paraui-tree-node-content-wrapper .paraui-tree-iconEle {\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  margin-left: -6px;\n  line-height: 24px;\n  text-align: center;\n  vertical-align: top;\n}\n.paraui-tree .paraui-tree-node-content-wrapper .paraui-tree-iconEle > svg {\n  vertical-align: -0.125em;\n  color: inherit;\n}\n.paraui-tree .paraui-tree-node-content-wrapper .paraui-tree-iconEle:empty {\n  display: none;\n}\n.paraui-tree-unselectable .paraui-tree-node-content-wrapper:hover {\n  background-color: transparent;\n}\n.paraui-tree-node-content-wrapper[draggable=true] {\n  line-height: 24px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.paraui-tree-node-content-wrapper[draggable=true] .paraui-tree-drop-indicator {\n  position: absolute;\n  z-index: 1;\n  height: 2px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 1px;\n  pointer-events: none;\n}\n.paraui-tree-node-content-wrapper[draggable=true] .paraui-tree-drop-indicator::after {\n  position: absolute;\n  top: -3px;\n  left: -6px;\n  width: 8px;\n  height: 8px;\n  background-color: transparent;\n  border: 2px solid rgb(54, 102, 214);\n  border-radius: 50%;\n  content: \"\";\n}\n.paraui-tree .paraui-tree-treenode.drop-container > [draggable] {\n  box-shadow: 0 0 0 2px rgb(54, 102, 214);\n}\n.paraui-tree-show-line .paraui-tree-indent-unit {\n  position: relative;\n  height: 100%;\n}\n.paraui-tree-show-line .paraui-tree-indent-unit::before {\n  position: absolute;\n  top: 0;\n  right: 12px;\n  bottom: -4px;\n  border-right: 1px solid #d9d9d9;\n  content: \"\";\n}\n.paraui-tree-show-line .paraui-tree-indent-unit-end::before {\n  display: none;\n}\n.paraui-tree-show-line .paraui-tree-switcher {\n  background: rgb(255, 255, 255);\n}\n.paraui-tree-show-line .paraui-tree-switcher_close svg {\n  transform: rotate(-90deg);\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.3s;\n}\n.paraui-tree-show-line .paraui-tree-switcher_open svg {\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.3s;\n}\n.paraui-tree-show-line .paraui-tree-switcher-line-icon {\n  vertical-align: -0.225em;\n  color: inherit;\n  font-size: 14px;\n}\n.paraui-tree-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-tree-node-content-wrapper:hover {\n  background-color: transparent;\n}\n.paraui-tree-node-content-wrapper .paraui-tree-treenode-more-wrapper {\n  color: rgb(54, 102, 214);\n}\n.paraui-tree .paraui-tree-node-content-wrapper--active {\n  background-color: rgba(171, 176, 185, 0.12) !important;\n  border-radius: 4px !important;\n}\n.paraui-tree .paraui-tree-node-content-wrapper--active .sector-anchor {\n  opacity: 1;\n}\n.paraui-tree-title-wrapper {\n  display: inline-flex;\n  align-items: center;\n  margin: 0 -6px;\n  padding: 0 6px;\n}\n.paraui-tree-title-wrapper .sector-anchor {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  margin: 1px 0 0 18px;\n  line-height: 14px;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.paraui-tree-title-wrapper .sector-anchor:before {\n  content: \" \";\n  position: absolute;\n  left: -9px;\n  top: 0;\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.2);\n  pointer-events: none;\n}\n.paraui-tree-title-wrapper .sector-anchor svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-tree-title-wrapper .sector-anchor--active.sector-anchor svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-tree-title-wrapper--active .sector-anchor {\n  opacity: 1;\n}\n.paraui-tree-radioable .paraui-tree-iconEle {\n  position: absolute;\n  left: -18px;\n  top: 0;\n}\n.paraui-tree-radioable .paraui-tree-checkbox {\n  display: none !important;\n}\n.paraui-tree-radioable .paraui-tree-checkbox-checked + .paraui-tree-node-content-wrapper {\n  color: rgb(54, 102, 214);\n}\n.paraui-tree-radioable .paraui-tree-node-radio {\n  width: 16px;\n  height: 16px;\n  margin-top: 4px;\n}\n.paraui-tree-radioable-showradio .paraui-tree-node-content-wrapper {\n  margin-left: 22px;\n}\n\n.paraui-motion-collapse {\n  overflow: hidden;\n  transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;\n}";
+styleInject(css_248z);
+
+export { Tree as T };