@para-ui/core 3.0.1 → 3.0.2-beta

package/AutoBox/index.js

@@ -1,9 +1,11 @@
 import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useMemo, Fragment } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
 import { Popover } from '../Popover/index.js';
-import More from '@para-ui/icons/More';
+import { createPortal } from 'react-dom';
 import { UUID } from '@paraview/lib';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import More from '@para-ui/icons/More';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
@@ -11,7 +13,117 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-auto-box {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.paraui-auto-box > .auto-box-more {\n  display: inline-block;\n  height: 100%;\n  cursor: pointer;\n}\n\n.paraui-auto-box-popover .auto-box-popover-content {\n  display: flex;\n  flex-direction: column;\n}";
+var Protal = function Protal(props) {
+  var children = props.children,
+      className = props.className,
+      anchorEl = props.anchorEl,
+      onClose = props.onClose;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      styleCom = _useState2[0],
+      setStyleCom = _useState2[1];
+
+  var constData = useRef({
+    uuid: $prefixCls + '-protal-box-content-' + UUID()
+  });
+  var domRef = useRef();
+  var contentRef = useRef();
+  useEffect(function () {
+    handStyle();
+    window.addEventListener('click', clickFunc);
+    return function () {
+      domRef && domRef.current && domRef.current.remove();
+      window.removeEventListener('click', clickFunc);
+    };
+  }, []);
+  /**
+   * 查找元素
+   * @param el 当前元素
+   * @param selector 查找元素class
+   */
+
+  var closest = function closest(el, selector) {
+    var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+
+    while (el) {
+      if (matchesSelector.call(el, selector)) {
+        break;
+      }
+
+      el = el.parentElement;
+    }
+
+    return el;
+  };
+  /** 全局监听点击事件 */
+
+
+  var clickFunc = function clickFunc(e) {
+    if (!constData.current) return;
+    var bol = closest(e.target, '.' + constData.current.uuid); // 是否存在下拉当中
+
+    if (!bol) onClose && onClose();
+  };
+  /** 处理内容的定位样式 */
+
+
+  var handStyle = function handStyle() {
+    if (!anchorEl || !contentRef.current) return;
+    var posDomRect = anchorEl.getBoundingClientRect();
+    var contentDomRect = contentRef.current.getBoundingClientRect();
+    var json = {
+      opacity: 1,
+      left: posDomRect.left,
+      top: posDomRect.top + posDomRect.height
+    };
+    var winHeight = window.innerHeight;
+    var winWidth = window.innerWidth;
+
+    if (json.left + contentDomRect.width > winWidth) {
+      json.left = winWidth - contentDomRect.width - 8;
+      if (json.left < 0) json.left = 0;
+    }
+
+    if (json.top + contentDomRect.height > winHeight) {
+      json.top = winHeight - contentDomRect.height - 8;
+      if (json.top < 0) json.top = 0;
+    }
+
+    setStyleCom(json);
+  };
+  /** 处理className */
+
+
+  var handClass = function handClass() {
+    var str = $prefixCls + '-protal-box';
+    if (className) str += ' ' + className;
+    return str;
+  };
+
+  var handContent = function handContent() {
+    return jsxs("div", Object.assign({
+      className: handClass(),
+      ref: domRef
+    }, {
+      children: [jsx("div", {
+        className: "protal-mask"
+      }), jsx("div", Object.assign({
+        className: 'protal-content ' + constData.current.uuid,
+        style: styleCom,
+        ref: contentRef
+      }, {
+        children: children
+      }))]
+    }));
+  };
+
+  return jsx(Fragment, {
+    children: /*#__PURE__*/createPortal(handContent(), document.getElementsByTagName('body')[0])
+  });
+};
+
+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-auto-box {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.paraui-v3-auto-box > .auto-box-more {\n  display: inline-block;\n  height: 100%;\n  cursor: pointer;\n}\n\n.paraui-v3-auto-box-popover .auto-box-popover-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v3-protal-box {\n  position: fixed;\n  z-index: 1500;\n  inset: 0px;\n}\n.paraui-v3-protal-box .protal-mask {\n  z-index: -1;\n  position: fixed;\n  inset: 0px;\n  background-color: transparent;\n}\n.paraui-v3-protal-box .protal-content {\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  background-color: white;\n  outline: 0;\n  position: absolute;\n  max-width: calc(100% - 32px);\n  min-width: 16px;\n  max-height: calc(100% - 32px);\n  min-height: 16px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  opacity: 0;\n  transform: none;\n  transition: opacity 243ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 162ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
 styleInject(css_248z);
 
 var AutoBox = function AutoBox(props) {
@@ -45,15 +157,9 @@ var AutoBox = function AutoBox(props) {
       setOpenMoreCom = _useState6[1]; // 显示更多
 
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      anchorElCom = _useState8[0],
-      setAnchorElCom = _useState8[1]; // 更多定位元素
-
-
-  var _useState9 = useState({}),
-      _useState10 = _slicedToArray(_useState9, 1),
-      timer = _useState10[0];
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 1),
+      timer = _useState8[0];
 
   var posDom = useRef(); // 监听打开更多
 
@@ -61,11 +167,7 @@ var AutoBox = function AutoBox(props) {
     if (props.openMore !== undefined) {
       setOpenMoreCom(props.openMore);
     }
-  }, [props.openMore]); // 监听更多定位元素
-
-  useEffect(function () {
-    if (anchorEl) setAnchorElCom(anchorEl);
-  }, [anchorEl]);
+  }, [props.openMore]);
   useEffect(function () {
     if (props.showNum !== undefined) return;
     changeSize();
@@ -87,17 +189,17 @@ var AutoBox = function AutoBox(props) {
     } else {
       onShowMore && onShowMore(false);
     }
-  }, [list, morePos, onShowMore]); // 关闭显示更多
+  }, [list, morePos, onShowMore]);
+
+  var onVisibleChange = function onVisibleChange(bol) {
+    if (bol) return setOpenMoreCom(true);
+    closeMore();
+  }; // 关闭显示更多
+
 
   var closeMore = function closeMore() {
     setOpenMoreCom(false);
     onCloseMore && onCloseMore();
-  }; // 点击显示更多
-
-
-  var clickMore = function clickMore(e) {
-    setOpenMoreCom(true);
-    setAnchorElCom(posDom.current);
   }; // 关闭显示更多
 
 
@@ -135,7 +237,7 @@ var AutoBox = function AutoBox(props) {
 
 
   var handClass = function handClass() {
-    var str = 'auto-box paraui-auto-box';
+    var str = $prefixCls + '-auto-box';
     if (classOne) str += ' ' + classOne;
     if (className) str += ' ' + className;
     return str;
@@ -143,60 +245,70 @@ var AutoBox = function AutoBox(props) {
 
 
   var handClassPopover = function handClassPopover() {
-    var str = 'auto-box-popover paraui-auto-box-popover';
+    var str = $prefixCls + '-auto-box-popover';
     if (popoverClassName) str += ' ' + popoverClassName;
     return str;
-  };
-  /* 更多下拉 */
-
-
-  var MoreMemo = useMemo(function () {
-    return openMoreCom && jsx(Popover, Object.assign({
-      open: openMoreCom,
-      anchorEl: anchorElCom,
-      onClose: closeMore,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      className: handClassPopover()
+  }; // 处理更多内容
+
+
+  var handMoreDom = function handMoreDom() {
+    return jsx("div", Object.assign({
+      className: "auto-box-popover-content"
     }, {
-      children: jsx("div", Object.assign({
-        className: "auto-box-popover-content"
-      }, {
-        children: list && list.map(function (item, index) {
-          if (morePos !== null && morePos > index) return null;
-          return jsx(Fragment, {
-            children: item
-          }, index);
-        })
-      }))
+      children: list && list.map(function (item, index) {
+        if (morePos !== null && morePos > index) return null;
+        return jsx(Fragment$1, {
+          children: item
+        }, index);
+      })
     }));
-  }, [openMoreCom, anchorElCom, list, morePos, popoverClassName]);
+  };
+  /** 处理更多按钮 */
+
+
+  var handMoreBtn = function handMoreBtn() {
+    if (morePos !== null && list.length > morePos && !hideMore) {
+      return jsx(Popover, Object.assign({
+        open: openMoreCom,
+        content: handMoreDom(),
+        overlayClassName: handClassPopover(),
+        placement: "bottomLeft",
+        onVisibleChange: onVisibleChange
+      }, {
+        children: jsx("div", Object.assign({
+          className: "auto-box-more",
+          ref: posDom
+        }, {
+          children: moreCustomize ? moreCustomize : jsx(More, {})
+        }))
+      }));
+    }
+  };
+  /** 自定义更多按钮 */
+
+
+  var handCustomDialog = function handCustomDialog() {
+    if (anchorEl && openMoreCom) {
+      return jsx(Protal, Object.assign({
+        className: handClassPopover(),
+        anchorEl: anchorEl,
+        onClose: closeMore
+      }, {
+        children: handMoreDom()
+      }));
+    }
+  };
+
   return jsxs("div", Object.assign({
     className: handClass(),
     style: style
   }, {
     children: [list.map(function (item, index) {
       if (morePos !== null && morePos <= index) return null;
-      return jsx(Fragment, {
+      return jsx(Fragment$1, {
         children: item
       }, index);
-    }), function () {
-      if (morePos !== null && list.length > morePos && !hideMore) {
-        return jsx("div", Object.assign({
-          className: "auto-box-more",
-          ref: posDom,
-          onClick: clickMore
-        }, {
-          children: moreCustomize ? moreCustomize : jsx(More, {})
-        }));
-      }
-    }(), MoreMemo]
+    }), handMoreBtn(), handCustomDialog()]
   }));
 };
 

package/AutoBox/protal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author linhd
+ * @date 2022/8/10 10:32 AM
+ * @description 全局弹窗-自定义用的
+ */
+import { FunctionComponent, ReactNode } from 'react';
+export interface ProtalBoxProps {
+    className?: string;
+    /** 定位元素 */
+    anchorEl?: any;
+    /** 关闭事件 */
+    onClose?: () => void;
+    children?: ReactNode;
+    [name: string]: any;
+}
+export declare const Protal: FunctionComponent<ProtalBoxProps>;
+export default Protal;

package/AutoTips/index.js

@@ -2,13 +2,14 @@ import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { Tooltip } from '../Tooltip/index.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/11/1 20:28\n* @description 文字隐藏...\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-auto-tips {\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-auto-tips > .auto-tips-content {\n  display: inline;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.paraui-auto-tips-tooltip > div {\n  max-height: calc(100vh - 25px);\n  overflow: auto;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/11/1 20:28\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-auto-tips {\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-auto-tips > .auto-tips-content {\n  display: inline;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.paraui-v3-auto-tips-tooltip > div {\n  max-height: calc(100vh - 25px);\n  overflow: auto;\n}";
 styleInject(css_248z);
 
 var AutoTips = function AutoTips(props) {
@@ -53,7 +54,7 @@ var AutoTips = function AutoTips(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-auto-tips';
+    var str = $prefixCls + '-auto-tips';
     if (className) str += ' ' + className;
     return str;
   };
@@ -70,7 +71,7 @@ var AutoTips = function AutoTips(props) {
       placement: placement,
       interactive: interactive,
       boundariesElement: 'viewport',
-      className: 'paraui-auto-tips-tooltip'
+      className: $prefixCls + '-auto-tips-tooltip'
     }, {
       children: jsx("div", Object.assign({
         className: "auto-tips-content"

package/Breadcrumbs/index.js

@@ -6,6 +6,7 @@ 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 { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
@@ -13,7 +14,7 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-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.paraui-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-breadcrumbs.paraui-breadcrumbs-shrink {\n  white-space: nowrap;\n}\n.paraui-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-breadcrumbs > div svg {\n  font-size: 14px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-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-breadcrumbs > div .paraui-auto-tips {\n  line-height: 0;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips .auto-tips-content {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips span {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > .breadcrumbs-separator {\n  user-select: none;\n  margin: 0 8px;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover span {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-disabled {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-breadcrumbs > .more-breadcrumbs {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .current-breadcrumbs {\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n}\n\n.paraui-breadcrumbs-popover > .paraui-popover-content > .paraui-popover-inner {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  line-height: 0;\n  padding: 0 12px;\n}";
+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}";
 styleInject(css_248z);
 
 var Breadcrumbs = function Breadcrumbs(props) {
@@ -29,7 +30,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
       onClickItem = props.onClickItem,
       style = props.style;
 
-  var _useState = useState('breadcrumbs-' + UUID()),
+  var _useState = useState($prefixCls + '-breadcrumbs-' + UUID()),
       _useState2 = _slicedToArray(_useState, 1),
       classStr = _useState2[0];
 
@@ -113,7 +114,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
 
 
   var popoverHandClass = function popoverHandClass() {
-    var str = 'paraui-breadcrumbs-popover';
+    var str = $prefixCls + '-breadcrumbs-popover';
     if (popoverClassName) str += ' ' + popoverClassName;
     return str;
   }; // 关闭弹出菜单
@@ -125,8 +126,8 @@ var Breadcrumbs = function Breadcrumbs(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-breadcrumbs ' + classStr;
-    if (isShrink) str += ' paraui-breadcrumbs-shrink';
+    var str = $prefixCls + '-breadcrumbs ' + classStr;
+    if (isShrink) str += " ".concat($prefixCls, "-breadcrumbs-shrink");
     if (className) str += ' ' + className;
     return str;
   };
@@ -198,9 +199,11 @@ var Breadcrumbs = function Breadcrumbs(props) {
             onClick: handleClick(item),
             className: handClassItem(item, index, listCom)
           }, {
-            children: jsx(AutoTips, {
+            children: jsx(AutoTips, Object.assign({
+              className: 'breadcrumbs-auto-tips'
+            }, {
               children: item.label
-            })
+            }))
           })), showSeparator && jsx("div", Object.assign({
             className: "breadcrumbs-separator"
           }, {

package/Button/index.js

@@ -8,6 +8,7 @@ import LoadingOutlined from '@para-ui/icons/LoadingF';
 import Forbid from '@para-ui/icons/Forbid';
 import { Tooltip } from '../Tooltip/index.js';
 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';
@@ -29,7 +30,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/21 下午5:16\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n@keyframes loadingSpin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-button {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  outline: 0;\n  position: relative;\n  align-items: center;\n  user-select: none;\n  vertical-align: middle;\n  justify-content: center;\n  text-decoration: none;\n  background-color: transparent;\n  appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  padding: 0 16px;\n  line-height: 1.5715;\n  border-radius: 4px;\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  white-space: nowrap;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n  letter-spacing: 0.02857em;\n  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.paraui-button-label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n.paraui-button-icon {\n  display: inherit;\n  margin-right: 4px;\n}\n.paraui-button-icon svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-button-icon-end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n.paraui-button-icon-loading {\n  animation: loadingSpin 1s infinite linear;\n}\n.paraui-button-loading {\n  pointer-events: none;\n}\n.paraui-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-button-contained.paraui-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-contained.paraui-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-contained.paraui-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-button-contained.paraui-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n}\n.paraui-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  background-color: rgb(255, 255, 255);\n  box-shadow: none;\n}\n.paraui-button-outlined.paraui-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-outlined.paraui-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-outlined.paraui-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-button-outlined.paraui-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-text {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  color: rgb(54, 102, 214);\n  background-color: transparent;\n  border: none;\n}\n.paraui-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n  box-shadow: none;\n}\n.paraui-button-text.paraui-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-text.paraui-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: none;\n}\n.paraui-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-button-text.paraui-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-button-text.paraui-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-large {\n  height: 36px;\n}\n.paraui-button-medium {\n  height: 32px;\n}\n.paraui-button-small {\n  height: 28px;\n}\n.paraui-button--disabled {\n  display: inline-block;\n}\n\n.paraui-icon-button {\n  flex: 0 0 auto;\n  overflow: visible;\n  text-align: center;\n  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  padding: 0;\n  border-radius: 4px;\n}\n.paraui-icon-button-loading {\n  pointer-events: none;\n}\n.paraui-icon-button-loading .loading-icon {\n  display: inline-flex;\n  animation: loadingSpin 1s infinite linear;\n}\n.paraui-icon-button .paraui-icon {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-icon-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-icon-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-icon-button-contained.paraui-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-contained.paraui-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-contained.paraui-icon-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-icon-button-contained.paraui-icon-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n}\n.paraui-icon-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-icon-button-outlined.paraui-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-outlined.paraui-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-outlined.paraui-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-icon-button-outlined.paraui-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-text {\n  color: rgb(54, 102, 214);\n}\n.paraui-icon-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-icon-button-text.paraui-button-link-disabled {\n  pointer-events: none;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-icon-button-text.paraui-button-link-disabled:hover {\n  background-color: transparent;\n}\n.paraui-icon-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-icon-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-icon-button-text.paraui-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-icon-button-text.paraui-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-text.paraui-icon-button-large {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-large svg {\n  font-size: 28px;\n}\n.paraui-icon-button-text.paraui-icon-button-medium {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-medium svg {\n  font-size: 24px;\n}\n.paraui-icon-button-text.paraui-icon-button-small {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-small svg {\n  font-size: 20px;\n}\n.paraui-icon-button-large {\n  width: 36px;\n  height: 36px;\n}\n.paraui-icon-button-medium {\n  width: 32px;\n  height: 32px;\n}\n.paraui-icon-button-small {\n  width: 28px;\n  height: 28px;\n}\n\n.paraui-button-split {\n  display: inline-block;\n}\n.paraui-button-split .paraui-button-split--active {\n  color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-button-split-list {\n  padding: 8px 0;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-button-split-list ul .split-li {\n  min-width: 140px;\n  padding: 11px 12px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n}\n.paraui-button-split-list ul .split-li:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-split-list ul .split-li.split-li--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-button-split-list ul .split-li.split-li--active:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-split-list ul .split-li.split-li--disabled {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-button-split-list ul .split-li.split-li--disabled:hover {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-button-split-list ul .split-li-group:not(:first-child) {\n  position: relative;\n  margin-top: 16px;\n}\n.paraui-button-split-list ul .split-li-group:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  right: 8px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/21 下午5:16\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@keyframes buttonLoadingSpin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-v3-button {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  outline: 0;\n  position: relative;\n  align-items: center;\n  user-select: none;\n  vertical-align: middle;\n  justify-content: center;\n  text-decoration: none;\n  background-color: transparent;\n  appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  padding: 0 16px;\n  line-height: 1.5715;\n  border-radius: 4px;\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  white-space: nowrap;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n  letter-spacing: 0.02857em;\n  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.paraui-v3-button .button-label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n.paraui-v3-button .button-icon {\n  display: inherit;\n  margin-right: 4px;\n}\n.paraui-v3-button .button-icon svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-button .button-icon-end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n.paraui-v3-button .button-icon-loading {\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v3-button-loading {\n  pointer-events: none;\n}\n.paraui-v3-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-button-contained.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-contained.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-contained.paraui-v3-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-button-contained.paraui-v3-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-outlined.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-outlined.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-outlined.paraui-v3-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-button-outlined.paraui-v3-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-text {\n  color: rgb(54, 102, 214);\n  background-color: transparent;\n  border: none;\n}\n.paraui-v3-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-v3-button-text.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-text.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: none;\n}\n.paraui-v3-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-button-text.paraui-v3-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-button-text.paraui-v3-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-large {\n  height: 36px;\n}\n.paraui-v3-button-medium {\n  height: 32px;\n}\n.paraui-v3-button-small {\n  height: 28px;\n}\n.paraui-v3-button--disabled {\n  display: inline-block;\n}\n\n.paraui-v3-icon-button {\n  flex: 0 0 auto;\n  overflow: visible;\n  text-align: center;\n  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  padding: 0;\n  border-radius: 4px;\n}\n.paraui-v3-icon-button-loading {\n  pointer-events: none;\n}\n.paraui-v3-icon-button-loading .button-loading-icon {\n  display: inline-flex;\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v3-icon-button svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-icon-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-icon-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-v3-icon-button-contained.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-contained.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-contained.paraui-v3-icon-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-contained.paraui-v3-icon-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-icon-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-outlined.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-text {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-icon-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text.paraui-v3-button-link-disabled {\n  pointer-events: none;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-icon-button-text.paraui-v3-button-link-disabled:hover {\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-icon-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-large {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-large svg {\n  font-size: 28px;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-medium {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-medium svg {\n  font-size: 24px;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-small {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-small svg {\n  font-size: 20px;\n}\n.paraui-v3-icon-button-large {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-icon-button-medium {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-icon-button-small {\n  width: 28px;\n  height: 28px;\n}\n\n.paraui-v3-button-split {\n  display: inline-block;\n}\n.paraui-v3-button-split .paraui-v3-button-split--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-button-split-list {\n  padding: 8px 0;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-split-list ul .split-li {\n  min-width: 140px;\n  padding: 11px 12px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n}\n.paraui-v3-button-split-list ul .split-li:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--active:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--disabled {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-button-split-list ul .split-li.split-li--disabled:hover {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-split-list ul .split-li-group:not(:first-child) {\n  position: relative;\n  margin-top: 16px;\n}\n.paraui-v3-button-split-list ul .split-li-group:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  right: 8px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n}";
 styleInject(css_248z);
 
 function SplitButton(props) {
@@ -65,7 +66,7 @@ function SplitButton(props) {
     }
 
     setSelectedIndex(index);
-    (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('paraui-button-split--active');
+    (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove("".concat($prefixCls, "-button-split--active"));
     onClick === null || onClick === void 0 ? void 0 : onClick(opt, event);
   }; //渲染按钮列表
 
@@ -91,7 +92,7 @@ function SplitButton(props) {
     };
 
     return jsx("div", Object.assign({
-      className: 'paraui-button-split-list'
+      className: "".concat($prefixCls, "-button-split-list")
     }, {
       children: jsx("ul", {
         children: options.map(function (opt, index) {
@@ -140,7 +141,7 @@ function SplitButton(props) {
   };
 
   return jsx("div", Object.assign({
-    className: clsx('paraui-button-split', className),
+    className: clsx("".concat($prefixCls, "-button-split"), className),
     style: style
   }, {
     children: jsx(Dropdown, Object.assign({
@@ -182,19 +183,19 @@ var InternalButton = function InternalButton(props) {
   var isLinkBtn = ('href' in props); //cls
 
   var makeCls = function makeCls() {
-    return clsx('paraui-button', className, "paraui-button-".concat(variant), "paraui-button-".concat(size), hasLoading && 'paraui-button-loading', danger && !disabled && 'paraui-button-dangerous', isLinkBtn && 'paraui-button-link', isLinkBtn && disabled && 'paraui-button-link-disabled');
+    return clsx("".concat($prefixCls, "-button"), className, "".concat($prefixCls, "-button-").concat(variant), "".concat($prefixCls, "-button-").concat(size), hasLoading && "".concat($prefixCls, "-button-loading"), danger && !disabled && "".concat($prefixCls, "-button-dangerous"), isLinkBtn && "".concat($prefixCls, "-button-link"), isLinkBtn && disabled && "".concat($prefixCls, "-button-link-disabled"));
   }; //渲染按钮图标
 
 
   var renderBtnIcon = function renderBtnIcon(pos) {
     if (!hasLoading) {
       if (pos === 'start' && startIcon) return jsx("span", Object.assign({
-        className: 'paraui-button-icon'
+        className: 'button-icon'
       }, {
         children: startIcon
       }));
       if (pos === 'end' && endIcon) return jsx("span", Object.assign({
-        className: 'paraui-button-icon paraui-button-icon-end'
+        className: 'button-icon button-icon-end'
       }, {
         children: endIcon
       }));
@@ -209,7 +210,7 @@ var InternalButton = function InternalButton(props) {
     }
 
     if (pos === 'start') return jsx("span", Object.assign({
-      className: 'paraui-button-icon paraui-button-icon-loading'
+      className: 'button-icon button-icon-loading'
     }, {
       children: jsx(LoadingOutlined, {})
     }));
@@ -243,7 +244,7 @@ var InternalButton = function InternalButton(props) {
         className: makeCls()
       }, {
         children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
-          className: 'paraui-button-label'
+          className: 'button-label'
         }, {
           children: children
         })), renderBtnIcon('end')]
@@ -256,7 +257,7 @@ var InternalButton = function InternalButton(props) {
       className: makeCls()
     }, {
       children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
-        className: 'paraui-button-label'
+        className: 'button-label'
       }, {
         children: children
       })), renderBtnIcon('end')]
@@ -270,7 +271,7 @@ var InternalButton = function InternalButton(props) {
     title: generateTooltipTitle()
   }, {
     children: jsx("span", Object.assign({
-      className: 'paraui-button--disabled'
+      className: "".concat($prefixCls, "-button--disabled")
     }, {
       children: renderButton()
     }))
@@ -306,7 +307,7 @@ var IconButton = function IconButton(props) {
   var isLinkBtn = ('href' in props); //cls
 
   var makeCls = function makeCls() {
-    return clsx('paraui-button paraui-icon-button', className, "paraui-icon-button-".concat(variant), "paraui-icon-button-".concat(size), hasLoading && 'paraui-icon-button-loading', danger && !disabled && 'paraui-icon-button-dangerous', isLinkBtn && 'paraui-button-link', isLinkBtn && disabled && 'paraui-button-link-disabled');
+    return clsx("".concat($prefixCls, "-button ").concat($prefixCls, "-icon-button"), className, "".concat($prefixCls, "-icon-button-").concat(variant), "".concat($prefixCls, "-icon-button-").concat(size), hasLoading && "".concat($prefixCls, "-icon-button-loading"), danger && !disabled && "".concat($prefixCls, "-icon-button-dangerous"), isLinkBtn && "".concat($prefixCls, "-button-link"), isLinkBtn && disabled && "".concat($prefixCls, "-button-link-disabled"));
   }; //tooltip title
 
 
@@ -339,7 +340,7 @@ var IconButton = function IconButton(props) {
     }
 
     return jsx("span", Object.assign({
-      className: 'loading-icon'
+      className: 'button-loading-icon'
     }, {
       children: jsx(LoadingOutlined, {})
     }));
@@ -373,7 +374,7 @@ var IconButton = function IconButton(props) {
     title: generateTooltipTitle()
   }, {
     children: disabled ? jsx("span", Object.assign({
-      className: 'paraui-button--disabled'
+      className: "".concat($prefixCls, "-button--disabled")
     }, {
       children: renderIconButton()
     })) : renderIconButton()

package/ButtonGroup/index.js

@@ -5,6 +5,7 @@ import { Button } from '../Button/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import clsx from 'clsx';
 import Forbid from '@para-ui/icons/Forbid';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/typeof-498dd2b1.js';
 import '../_verture/slicedToArray-d7722f4b.js';
@@ -17,7 +18,7 @@ import '@para-ui/core/GlobalContext';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:39\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-button-group {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-button-group-iconSplit .paraui-icon-button:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-button-group-iconSplit.paraui-button-group-tooltip > span:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-button-group-icon {\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-button-group-icon .paraui-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-icon .paraui-icon-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-button-group-icon .paraui-icon-button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-button-group-icon .paraui-icon-button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span .paraui-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:not(:last-child) .paraui-icon-button {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:first-child .paraui-icon-button {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:last-child .paraui-icon-button {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-button-group-text .paraui-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-text .paraui-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:39\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-button-group {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-button-group-iconSplit .paraui-v3-icon-button:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-v3-button-group-iconSplit.paraui-v3-button-group-tooltip > span:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-v3-button-group-icon {\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span .paraui-v3-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:not(:last-child) .paraui-v3-icon-button {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:first-child .paraui-v3-icon-button {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:last-child .paraui-v3-icon-button {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v3-button-group-text .paraui-v3-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-text .paraui-v3-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}";
 styleInject(css_248z);
 
 var ButtonGroup = function ButtonGroup(props) {
@@ -118,7 +119,7 @@ var ButtonGroup = function ButtonGroup(props) {
   };
 
   return jsx("div", Object.assign({
-    className: clsx('paraui-button-group', "paraui-button-group-".concat(mode), className, showToolTip && 'paraui-button-group-tooltip'),
+    className: clsx("".concat($prefixCls, "-button-group"), "".concat($prefixCls, "-button-group-").concat(mode), className, showToolTip && "".concat($prefixCls, "-button-group-tooltip")),
     style: style
   }, {
     children: renderButtonGroup()