@para-ui/core 3.0.2-beta → 3.0.4

package/Breadcrumbs/index.d.ts

@@ -29,11 +29,25 @@ export interface BreadcrumbsProps {
     popoverClassName?: string;
     /** 是否收缩 */
     isShrink?: boolean;
+    /** 最后最少显示数 */
+    minNum?: number;
+    /** 是否显示返回 */
+    isBack?: boolean;
+    /** 自定义返回内容 */
+    backRender?: ReactNode;
+    /** 弹窗方式 */
+    trigger?: 'hover' | 'click';
+    /** 弹窗方向 */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     /**
      * 点击菜单
      * @param ops 当前点击菜单数据
      */
     onClickItem?: (ops: listOptions) => void;
+    /**
+     * 点击返回
+     * */
+    onBack?: () => void;
 }
 export declare const Breadcrumbs: FunctionComponent<BreadcrumbsProps>;
 export default Breadcrumbs;

package/Breadcrumbs/index.js

@@ -1,25 +1,40 @@
 import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.js';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment } from 'react';
 import { Popover } from '../Popover/index.js';
 import AutoTips from '../AutoTips/index.js';
 import More from '@para-ui/icons/More';
-import { UUID } from '@paraview/lib';
+import Return from '@para-ui/icons/Return';
 import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
+import '@para-ui/core/GlobalContext';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n * @author linhd\n * @date 2021年10月25日 14:58:12\n * @description 面包屑\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-breadcrumbs {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 0;\n  height: 17px;\n}\n.paraui-v3-breadcrumbs.paraui-v3-breadcrumbs-shrink {\n  white-space: nowrap;\n}\n.paraui-v3-breadcrumbs > div {\n  display: inline-block;\n  line-height: 17px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div svg {\n  font-size: 14px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div span {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips {\n  line-height: 0;\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips .auto-tips-content {\n  line-height: 17px;\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips span {\n  line-height: 17px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-separator {\n  user-select: none;\n  margin: 0 8px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-disabled {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .more-breadcrumbs {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .current-breadcrumbs {\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n}\n\n.paraui-v3-breadcrumbs-popover > .component-popover-content > .component-popover-inner {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  line-height: 0;\n  padding: 0 12px;\n}";
+var en = {
+  back: 'Back'
+};
+
+var zh = {
+  back: '返回'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n * @author linhd\n * @date 2021年10月25日 14:58:12\n * @description 面包屑\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-breadcrumbs {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item {\n  padding: 0 4px;\n  border-radius: 2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content {\n  white-space: nowrap;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n  vertical-align: -2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click .breadcrumbs-item-content {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 4px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .separator {\n  color: rgba(171, 176, 185, 0.4);\n  margin: 0 4px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .line {\n  display: inline-block;\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.2);\n  margin: 0 8px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  height: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  padding: 0 4px;\n  border-radius: 2px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content span {\n  white-space: nowrap;\n}\n.paraui-v3-breadcrumbs.paraui-v3-breadcrumbs-calculation {\n  overflow: hidden;\n  opacity: 0;\n}\n\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content {\n  padding: 8px 0;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  height: 36px;\n  line-height: 36px;\n  padding: 0 12px;\n  color: rgb(46, 55, 67);\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item svg {\n  color: rgb(46, 55, 67);\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled {\n  cursor: not-allowed;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled svg {\n  color: rgba(46, 55, 67, 0.4);\n}";
 styleInject(css_248z);
 
 var Breadcrumbs = function Breadcrumbs(props) {
   var _props$maxWidth = props.maxWidth,
-      maxWidth = _props$maxWidth === void 0 ? '' : _props$maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? '160px' : _props$maxWidth,
       className = props.className,
       list = props.list,
       _props$separator = props.separator,
@@ -27,89 +42,153 @@ var Breadcrumbs = function Breadcrumbs(props) {
       popoverClassName = props.popoverClassName,
       _props$isShrink = props.isShrink,
       isShrink = _props$isShrink === void 0 ? true : _props$isShrink,
+      _props$isBack = props.isBack,
+      isBack = _props$isBack === void 0 ? false : _props$isBack,
+      _props$minNum = props.minNum,
+      minNum = _props$minNum === void 0 ? 2 : _props$minNum,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
+      backRender = props.backRender,
       onClickItem = props.onClickItem,
+      onBack = props.onBack,
       style = props.style;
+  var intl = useFormatMessage('Breadcrumbs', localeJson);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMore = _useState2[0],
+      setShowMore = _useState2[1]; // 是否显示更多按钮
 
-  var _useState = useState($prefixCls + '-breadcrumbs-' + UUID()),
-      _useState2 = _slicedToArray(_useState, 1),
-      classStr = _useState2[0];
 
   var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      listCom = _useState4[0],
-      setListCom = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      oneNum = _useState6[0],
-      setOneNum = _useState6[1];
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      open = _useState8[0],
-      setOpen = _useState8[1];
+      hideArr = _useState4[0],
+      setHideArr = _useState4[1]; // 是否隐藏面包屑
 
-  var _useState9 = useState({}),
-      _useState10 = _slicedToArray(_useState9, 1),
-      constData = _useState10[0];
 
-  var ref = useRef();
+  var boxRef = useRef();
+  var constData = useRef({
+    minNum: minNum,
+    isBack: isBack,
+    isShrink: isShrink,
+    timer: null,
+    showMore: false,
+    hideArr: [],
+    hidePos: 0
+  });
+  constData.current.isBack = isBack;
+  constData.current.showMore = showMore;
+  constData.current.isShrink = isShrink;
+  constData.current.minNum = minNum;
   useEffect(function () {
-    setTimeout(function () {
-      var dom = document.querySelector('.' + classStr);
-      if (dom) setOneNum(dom.offsetWidth);
-    });
-    setListCom(_toConsumableArray(list));
-  }, [list]);
+    window.addEventListener("resize", winResize);
+    return function () {
+      clearTimeout(constData.current.timer);
+      window.removeEventListener("resize", winResize);
+    };
+  }, []);
   useEffect(function () {
-    if (isShrink) {
-      setTimeout(function () {
-        changeSize();
-      });
-      window.addEventListener("resize", changeSize);
-    } else window.removeEventListener("resize", changeSize);
+    var arr = new Array(props.list.length).fill(false);
+    constData.current.hideArr = arr;
+    setHideArr(arr);
+    changeSize();
+  }, [list]);
+  /** 点击面包屑 */
 
+  var clickItem = function clickItem(item, index) {
     return function () {
-      window.removeEventListener("resize", changeSize);
+      if (props.list.length - 1 === index || item.disabled) return;
+      onClickItem && onClickItem(item);
     };
-  }, [listCom, oneNum, isShrink]);
-
-  var changeSize = function changeSize() {
-    if (list.length <= 2 || oneNum === 0) return;
-    var refDom = document.querySelector('.' + classStr);
-
-    if (refDom && oneNum) {
-      if (refDom.parentNode && refDom.parentNode.offsetWidth >= oneNum) {
-        if (!constData.scroll) return;
-        constData.scroll = false;
-        setListCom(_toConsumableArray(list));
-        setOpen(false);
-      } else {
-        if (constData.scroll) return;
-        constData.scroll = true; // 滚动
-
-        var arr = [];
-        arr.push(list[0]);
-        arr.push({
-          more: 'more-breadcrumbs'
-        });
-        arr.push(list[list.length - 1]);
-        setListCom([].concat(arr));
-      }
+  };
+  /** 点击返回, 又返回执行返回事件,否则默认返回上级 */
+
+
+  var clickBack = function clickBack() {
+    if (onBack) return onBack();
+    if (props.list.length < 2) return;
+    var item = props.list[props.list.length - 2];
+    clickItem(item, props.list.length - 2)();
+  };
+  /** 改变屏幕 */
+
+
+  var winResize = function winResize() {
+    changeSize();
+  };
+  /** 去除遮罩 */
+
+
+  var hideMask = function hideMask() {
+    boxRef.current.classList.remove($prefixCls + '-breadcrumbs-calculation');
+  };
+
+  var changeSize = function changeSize(bol) {
+    if (!constData.current.isShrink) return hideMask(); // 不自动计算
+
+    clearTimeout(constData.current.timer); // 恢复初始状态
+
+    if (!bol) {
+      constData.current.hidePos = 0;
+      constData.current.showMore = false;
+      var arr = new Array(props.list.length).fill(false);
+      constData.current.hideArr = arr;
+      setHideArr(arr);
+      setShowMore(false);
     }
-  }; // 点击菜单
 
+    console.log(props.list, props.list.length);
+    if (props.list.length <= constData.current.minNum + 1) return hideMask(); // 面包屑数组长度必须大于最少显示数
 
-  var handleClick = function handleClick(item) {
-    return function () {
-      if (item.disabled) return;
+    if (constData.current.hidePos === props.list.length - constData.current.minNum - 1) return hideMask(); // 隐藏到最小显示数,停止
+
+    boxRef.current.classList.add($prefixCls + '-breadcrumbs-calculation');
+    constData.current.timer = setTimeout(function () {
+      var boxWidth = boxRef.current.clientWidth;
+      var listWidth = boxRef.current.querySelector('.breadcrumbs-list').clientWidth;
+      var backWidth = constData.current.isBack ? boxRef.current.querySelector('.breadcrumbs-back').clientWidth : 0;
 
-      if (item.more === 'more-breadcrumbs') {
-        setOpen(true);
+      if (boxWidth > listWidth + backWidth) {
+        // 没有超出
+        hideMask();
       } else {
-        if (onClickItem) onClickItem(item);
+        constData.current.hidePos += 1;
+        constData.current.hideArr[constData.current.hidePos] = true;
+        setHideArr(_toConsumableArray(constData.current.hideArr));
+        setShowMore(true);
+        changeSize(true);
+        /*// 超出
+        if (constData.current.showMore) {
+            // 超出情况下,在超出,继续减一个面包屑
+        } else {
+            // 没有超出-> 变超出
+        }*/
       }
-    };
+    }, 50);
+  };
+  /** 处理弹窗内容 */
+
+
+  var handContent = function handContent() {
+    return jsx("div", Object.assign({
+      className: "breadcrumbs-popover-content"
+    }, {
+      children: list.map(function (item, index) {
+        if (!hideArr[index]) return null;
+        var str = 'breadcrumbs-popover-content-item';
+        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-popover-content-item-click';
+        if (index === list.length - 1) str += ' breadcrumbs-popover-content-item-current';
+        if (item.disabled) str += ' breadcrumbs-popover-content-item-disabled';
+        return jsx("div", Object.assign({
+          className: str,
+          onClick: clickItem(item, index)
+        }, {
+          children: item.label
+        }), index);
+      })
+    }));
   }; // 处理弹出框className
 
 
@@ -117,114 +196,89 @@ var Breadcrumbs = function Breadcrumbs(props) {
     var str = $prefixCls + '-breadcrumbs-popover';
     if (popoverClassName) str += ' ' + popoverClassName;
     return str;
-  }; // 关闭弹出菜单
-
-
-  var handleClose = function handleClose(bol) {
-    if (!bol) setOpen(false);
   }; // 处理className
 
 
   var handClass = function handClass() {
-    var str = $prefixCls + '-breadcrumbs ' + classStr;
+    var str = $prefixCls + '-breadcrumbs';
     if (isShrink) str += " ".concat($prefixCls, "-breadcrumbs-shrink");
     if (className) str += ' ' + className;
     return str;
   };
 
-  var handClassItem = function handClassItem(item, index, arr) {
-    var str = ' breadcrumbs-item';
-    if (index === arr.length - 1) str += ' current-breadcrumbs';
-    if (!item.disabled) str += ' breadcrumbs-item-click';else str += ' breadcrumbs-item-disabled';
-    return str;
-  };
-
-  var popoverContent = function popoverContent() {
-    return jsx("div", Object.assign({
-      className: handClass()
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style,
+    ref: boxRef
+  }, {
+    children: [jsx("ul", Object.assign({
+      className: "breadcrumbs-list"
     }, {
       children: list.map(function (item, index) {
-        var showSeparator = list.length - 1 !== index;
-        return jsxs(Fragment$1, {
-          children: [jsx("div", Object.assign({
-            onClick: handleClick(item),
-            className: handClassItem(item, index, list)
+        if (hideArr[index]) return;
+        var str = 'breadcrumbs-item';
+        if (index === list.length - 1) str += ' breadcrumbs-item-current';
+        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-item-click';
+        if (item.disabled) str += ' breadcrumbs-item-disabled';
+        return jsxs(Fragment, {
+          children: [jsx("li", Object.assign({
+            className: str,
+            style: {
+              maxWidth: item.maxWidth || maxWidth
+            },
+            onClick: clickItem(item, index)
           }, {
-            children: item.label
-          })), showSeparator && jsx("div", Object.assign({
-            className: "breadcrumbs-separator"
+            children: jsx(AutoTips, {
+              children: jsx("span", Object.assign({
+                className: 'breadcrumbs-item-content'
+              }, {
+                children: item.label
+              }))
+            })
+          })), index !== list.length - 1 && jsx("li", Object.assign({
+            className: 'separator'
           }, {
             children: separator
-          }))]
-        }, index);
-      })
-    }));
-  };
-
-  var handStyle = function handStyle(item) {
-    var obj = {};
-    if (maxWidth) obj.maxWidth = maxWidth;
-    if (item.maxWidth) obj.maxWidth = item.maxWidth;
-    return obj;
-  };
-
-  var handContent = function handContent() {
-    return jsx("div", Object.assign({
-      className: handClass(),
-      style: style,
-      ref: ref
-    }, {
-      children: listCom.map(function (item, index) {
-        var showSeparator = listCom.length - 1 !== index;
-
-        if (item.more === 'more-breadcrumbs') {
-          // 更多
-          return jsxs(Fragment$1, {
-            children: [jsx("div", Object.assign({
-              onClick: handleClick(item),
-              className: "more-breadcrumbs"
+          })), showMore && index === 0 && jsxs(Fragment$1, {
+            children: [jsx(Popover, Object.assign({
+              content: handContent(),
+              overlayClassName: popoverHandClass(),
+              trigger: trigger,
+              placement: placement,
+              destroyTooltipOnHide: true
             }, {
-              children: jsx(More, {})
-            })), showSeparator && jsx("div", Object.assign({
-              className: "breadcrumbs-separator"
+              children: jsx("li", Object.assign({
+                className: 'breadcrumbs-item-more'
+              }, {
+                children: jsx(More, {})
+              }))
+            })), !hideArr[list.length - 1] && jsx("li", Object.assign({
+              className: 'separator'
             }, {
               children: separator
             }))]
-          }, index);
-        }
-
-        return jsxs(Fragment$1, {
-          children: [jsx("div", Object.assign({
-            style: handStyle(item),
-            onClick: handleClick(item),
-            className: handClassItem(item, index, listCom)
-          }, {
-            children: jsx(AutoTips, Object.assign({
-              className: 'breadcrumbs-auto-tips'
-            }, {
-              children: item.label
-            }))
-          })), showSeparator && jsx("div", Object.assign({
-            className: "breadcrumbs-separator"
-          }, {
-            children: separator
-          }))]
+          })]
         }, index);
       })
-    }));
-  };
-
-  return jsx(Fragment, {
-    children: isShrink ? jsx(Popover, Object.assign({
-      placement: 'bottom-start',
-      visible: open,
-      content: popoverContent(),
-      onVisibleChange: handleClose,
-      overlayClassName: popoverHandClass()
+    })), isBack && jsxs("div", Object.assign({
+      className: 'breadcrumbs-back'
     }, {
-      children: handContent()
-    })) : handContent()
-  });
+      children: [jsx("span", {
+        className: 'line'
+      }), jsx("div", Object.assign({
+        className: 'breadcrumbs-back-content',
+        onClick: clickBack
+      }, {
+        children: backRender ? backRender : jsxs(Fragment$1, {
+          children: [jsx(Return, {}), jsx("span", {
+            children: intl({
+              id: 'back'
+            })
+          })]
+        })
+      }))]
+    }))]
+  }));
 };
 
 export { Breadcrumbs, Breadcrumbs as default };

package/Breadcrumbs/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    back: string;
+};
+export default _default;

package/Breadcrumbs/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        back: string;
+    };
+    en: {
+        back: string;
+    };
+};
+export default _default;

package/Breadcrumbs/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    back: string;
+};
+export default _default;

package/Button/index.js

@@ -11,7 +11,7 @@ import Down from '@para-ui/icons/Down';
 import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import { Dropdown } from '../Dropdown/index.js';
-import { u as useFormatMessage } from '../_verture/useFormatMessage-ac9d6acf.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'rc-dropdown';
@@ -267,7 +267,10 @@ var InternalButton = function InternalButton(props) {
   useEffect(function () {
     setHasLoading(!!loading);
   }, [loading]);
-  return disabled && toolTipTitle ? jsx(Tooltip, Object.assign({}, TooltipProps, {
+  return disabled && toolTipTitle ? jsx(Tooltip, Object.assign({
+    arrow: false,
+    placement: 'bottom'
+  }, TooltipProps, {
     title: generateTooltipTitle()
   }, {
     children: jsx("span", Object.assign({
@@ -370,7 +373,10 @@ var IconButton = function IconButton(props) {
   useEffect(function () {
     setHasLoading(!!loading);
   }, [loading]);
-  return !!toolTipTitle ? jsx(Tooltip, Object.assign({}, TooltipProps, {
+  return !!toolTipTitle ? jsx(Tooltip, Object.assign({
+    arrow: false,
+    placement: 'bottom'
+  }, TooltipProps, {
     title: generateTooltipTitle()
   }, {
     children: disabled ? jsx("span", Object.assign({

package/ButtonGroup/index.js

@@ -13,7 +13,7 @@ import '@para-ui/icons/LoadingF';
 import '@para-ui/icons/Down';
 import '../Dropdown/index.js';
 import 'rc-dropdown';
-import '../_verture/useFormatMessage-ac9d6acf.js';
+import '../_verture/useFormatMessage-f4452258.js';
 import '@para-ui/core/GlobalContext';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';

package/Cascader/index.js

@@ -7,7 +7,7 @@ import { useState, useCallback } from 'react';
 import RcCascader from 'rc-cascader';
 import Right from '@para-ui/icons/Right';
 import LoadingIcon from '@para-ui/icons/Loading';
-import { u as useFormatMessage } from '../_verture/useFormatMessage-ac9d6acf.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '@para-ui/core/GlobalContext';

package/Checkbox/index.js

@@ -12,7 +12,7 @@ import 'rc-tooltip/lib/placements';
 import 'clsx';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-checkbox {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: flex-start;\n  line-height: 16px;\n}\n.paraui-v3-checkbox:hover > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-help {\n  padding: 0 8px;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-box > .checkbox-box-inner {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox > .checkbox-box {\n  position: relative;\n}\n.paraui-v3-checkbox > .checkbox-box > 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  opacity: 0;\n  cursor: pointer;\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  border-radius: 2px;\n  background-color: white;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner:after {\n  position: absolute;\n  display: table;\n  content: \" \";\n}\n.paraui-v3-checkbox > .checkbox-label {\n  color: rgb(46, 55, 67);\n  padding: 0 8px;\n  margin: 0;\n  display: inline-flex;\n  align-items: flex-start;\n}\n.paraui-v3-checkbox > .checkbox-label > .checkbox-help > svg {\n  top: 0;\n}\n.paraui-v3-checkbox .checkbox-label {\n  line-height: 16px;\n}\n.paraui-v3-checkbox > .checkbox-help {\n  padding: 0 8px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-checkbox > .checkbox-help > .checkbox-label {\n  color: rgb(46, 55, 67);\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border: 1px solid white;\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > input {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-checked > .checkbox-box > .checkbox-box-inner:after {\n  border-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box {\n  top: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box > .checkbox-box-inner {\n  width: 14px;\n  height: 14px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 4px;\n  height: 7px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-checkbox {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: flex-start;\n  line-height: 16px;\n}\n.paraui-v3-checkbox:hover > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-help {\n  padding: 0 8px;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-box > .checkbox-box-inner {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox > .checkbox-box {\n  position: relative;\n}\n.paraui-v3-checkbox > .checkbox-box > 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  opacity: 0;\n  cursor: pointer;\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  border-radius: 2px;\n  background-color: white;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner:after {\n  position: absolute;\n  display: table;\n  content: \" \";\n}\n.paraui-v3-checkbox > .checkbox-label {\n  color: rgb(46, 55, 67);\n  padding: 0 8px;\n  margin: 0;\n  display: inline-flex;\n  align-items: flex-start;\n}\n.paraui-v3-checkbox > .checkbox-label > .checkbox-help > svg {\n  top: 0;\n}\n.paraui-v3-checkbox .checkbox-label {\n  line-height: 16px;\n}\n.paraui-v3-checkbox > .checkbox-help {\n  padding: 0 8px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-checkbox > .checkbox-help > .checkbox-label {\n  color: rgb(46, 55, 67);\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border: 1px solid white;\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > input {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box {\n  top: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box > .checkbox-box-inner {\n  width: 14px;\n  height: 14px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 4px;\n  height: 7px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}";
 styleInject(css_248z);
 
 var Checkbox = function Checkbox(props) {