@para-ui/core 4.0.0-beta → 4.0.0-rc.1

package/OperateBtn/index.d.ts

@@ -20,7 +20,7 @@ export interface OperateBtnListProps {
     /** 图标 */
     icon?: React.ReactNode;
     /** 定位方向 */
-    placement?: "top-start" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top";
+    placement?: 'top-start' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top';
     /** 是否禁用 */
     disabled?: boolean;
     /** 设置危险按钮 */
@@ -49,7 +49,7 @@ export interface OperateBtnProps {
     /** 下拉框样式 */
     popoverClassName?: string;
     /** 定位方向 */
-    placement?: "top-start" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top";
+    placement?: 'top-start' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top';
     /** 点击是否关闭更多 */
     clickCloseMore?: boolean;
     /** 点击事件, 如果listItem里面存在onClick事件,则不触发改事件 */

package/OperateBtn/index.js

@@ -1,5 +1,5 @@
 import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
-import { r as regenerator } from '../_verture/index-d63bd287.js';
+import { r as regenerator } from '../_verture/index-232d890b.js';
 import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
@@ -9,11 +9,12 @@ import { Tooltip } from '../Tooltip/index.js';
 import { Popover } from '../Popover/index.js';
 import AutoTips from '../AutoTips/index.js';
 import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import clsx from 'clsx';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
-import '../_verture/typeof-b240b062.js';
+import '../_verture/typeof-c310ee4a.js';
 import '../_verture/typeof-adeedc13.js';
-import 'clsx';
 import '@para-ui/icons/LoadingF';
 import '@para-ui/icons/Forbid';
 import '@para-ui/icons/Down';
@@ -22,10 +23,22 @@ import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
 import '@paraview/lib';
-import '../_verture/useFormatMessage-703f8b20.js';
-import '@para-ui/core/GlobalContext';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
+import '@para-ui/core/GlobalContext';
+
+var en = {
+  more: 'more'
+};
+
+var zh = {
+  more: '更多'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/4/13 10:48 AM\n* @description 表格操作按钮\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-operate-btn {\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  align-items: center;\n}\n.paraui-v4-operate-btn > .operate-btn-line {\n  display: inline-block;\n  width: 1px;\n  background-color: rgb(213, 224, 250);\n  margin: 0 10px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large button svg {\n  font-size: 18px;\n}\n\n.paraui-v4-operate-btn-popover .operate-btn-list {\n  padding: 4px 0;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item {\n  padding: 0 10px;\n  max-width: 120px;\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  line-height: 30px;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled {\n  cursor: not-allowed;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled:hover {\n  background-color: white;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-danger {\n  color: rgb(244, 66, 66);\n}";
 styleInject(css_248z);
@@ -48,6 +61,7 @@ var OperateBtn = function OperateBtn(props) {
     loadingMapping = props.loadingMapping,
     _props$key = props.key,
     key = _props$key === void 0 ? 'key' : _props$key;
+  var intl = useFormatMessage('OperateBtn', localeJson);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     openMoreCom = _useState2[0],
@@ -132,18 +146,26 @@ var OperateBtn = function OperateBtn(props) {
   };
   // 处理handClassPopover
   var handClassPopover = function handClassPopover() {
-    var str = $prefixCls + '-operate-btn-popover';
-    if (popoverClassName) str += ' ' + popoverClassName;
+    var str = "".concat($prefixCls, "-operate-btn-popover");
+    if (popoverClassName) str += " ".concat(popoverClassName);
     return str;
   };
   var morePopoverContent = function morePopoverContent() {
     var arr = (list === null || list === void 0 ? void 0 : list.slice(showNum, list === null || list === void 0 ? void 0 : list.length)) || [];
     var handPopoverClass = function handPopoverClass(item) {
-      var str = 'operate-btn-list-item';
-      if (item.disabled) str += ' operate-btn-list-item-disabled';
-      if (item.danger) str += ' operate-btn-list-item-danger';
-      if (item.className) str += ' ' + className;
-      return str;
+      return clsx('operate-btn-list-item', item.className, {
+        'operate-btn-list-item-disabled': item.disabled,
+        'operate-btn-list-item-danger': item.danger
+      });
+    };
+    var handleBox = function handleBox(item, children, index) {
+      return jsx("div", Object.assign({
+        className: handPopoverClass(item),
+        onClick: clickItem(item, index + showNum),
+        style: style
+      }, {
+        children: children
+      }), index);
     };
     return jsx("div", Object.assign({
       className: "operate-btn-list"
@@ -154,26 +176,15 @@ var OperateBtn = function OperateBtn(props) {
             disabled: true,
             title: item.label || item.toolTipTitle
           }, {
-            children: jsx("div", Object.assign({
-              className: handPopoverClass(item),
-              onClick: clickItem(item, index + showNum),
-              style: style
-            }, {
-              children: item.label || item.toolTipTitle
-            }), index)
+            children: handleBox(item, item.label || item.toolTipTitle, index)
           }), index);
         }
-        return jsx("div", Object.assign({
-          className: handPopoverClass(item),
-          onClick: clickItem(item, index + showNum),
-          style: style
+        return handleBox(item, jsx(AutoTips, Object.assign({
+          tipMaxWidth: 'none',
+          placement: 'top-start'
         }, {
-          children: jsx(AutoTips, Object.assign({
-            tipMaxWidth: 'none'
-          }, {
-            children: item.label || item.toolTipTitle
-          }))
-        }), index);
+          children: item.label || item.toolTipTitle
+        })), index);
       })
     }));
   };
@@ -189,7 +200,7 @@ var OperateBtn = function OperateBtn(props) {
       }, {
         children: jsx(Button.IconButton, Object.assign({
           variant: 'text',
-          toolTipTitle: !openMoreCom && '更多',
+          toolTipTitle: !openMoreCom && intl('more'),
           TooltipProps: {
             placement: placement,
             arrow: false
@@ -202,14 +213,8 @@ var OperateBtn = function OperateBtn(props) {
       }))
     });
   };
-  var handClass = function handClass() {
-    var str = $prefixCls + '-operate-btn';
-    if (className) str += ' ' + className;
-    if (size) str += " ".concat($prefixCls, "-operate-btn-").concat(size);
-    return str;
-  };
   return jsxs("div", Object.assign({
-    className: handClass(),
+    className: clsx("".concat($prefixCls, "-operate-btn"), className, "".concat($prefixCls, "-operate-btn-").concat(size)),
     style: style
   }, {
     children: [list === null || list === void 0 ? void 0 : list.map(function (item, index) {

package/PageHeader/index.js

@@ -50,7 +50,7 @@ var handHref = function handHref() {
   var lastOne = !children || children.length === 0;
   if (lastOne) {
     return {
-      href: href ? href : '#' + path
+      href: href ? href : "#".concat(path)
     };
   }
   return {};
@@ -185,7 +185,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
   var handPopoverClass = function handPopoverClass() {
     var str = 'menu-item-popper';
     if (level !== 1) str += ' menu-item-popper-child';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   /**
@@ -274,7 +274,7 @@ var HorizontalMenu = function HorizontalMenu(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     childList = _useState16[0],
     setChildList = _useState16[1]; // 侧边子菜单数据
-  var _useState17 = useState(""),
+  var _useState17 = useState(''),
     _useState18 = _slicedToArray(_useState17, 2),
     selectMenuCom = _useState18[0],
     setSelectMenuCom = _useState18[1]; // 当前选中菜单id
@@ -300,9 +300,9 @@ var HorizontalMenu = function HorizontalMenu(props) {
   useEffect(function () {
     handList(list || []);
     changeSize();
-    window.addEventListener("resize", changeSize);
+    window.addEventListener('resize', changeSize);
     return function () {
-      window.removeEventListener("resize", changeSize);
+      window.removeEventListener('resize', changeSize);
       clearTimeout(timerJson.timerResize);
     };
   }, [list]);
@@ -464,7 +464,7 @@ var HorizontalMenu = function HorizontalMenu(props) {
    */
   var handClass = function handClass() {
     var str = 'horizontal-menu-list';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   /**
@@ -509,9 +509,9 @@ var HorizontalMenu = function HorizontalMenu(props) {
       return jsx(Popover, Object.assign({
         visible: openChildIndex === index,
         trigger: 'hover',
-        placement: "bottom-start",
+        placement: 'bottom-start',
         content: MenuItemPopperMemo,
-        overlayClassName: $prefixCls + '-horizontal-menu-popper',
+        overlayClassName: "".concat($prefixCls, "-horizontal-menu-popper"),
         onVisibleChange: onVisibleChange
       }, {
         children: jsxs(Ele, Object.assign({
@@ -544,9 +544,9 @@ var HorizontalMenu = function HorizontalMenu(props) {
         return jsx(Popover, Object.assign({
           visible: openChildIndex === morePos,
           trigger: 'hover',
-          placement: "bottom-start",
+          placement: 'bottom-start',
           content: MenuItemPopperMemo,
-          overlayClassName: $prefixCls + '-horizontal-menu-popper',
+          overlayClassName: "".concat($prefixCls, "-horizontal-menu-popper"),
           onVisibleChange: onVisibleChange
         }, {
           children: jsx("div", Object.assign({
@@ -586,9 +586,9 @@ var BackSelfcare = function BackSelfcare(props) {
   var handContent = function handContent() {
     return jsx(Button, Object.assign({
       startIcon: icon,
-      variant: "contained",
+      variant: 'contained',
       onClick: onClickCom,
-      size: "small"
+      size: 'small'
     }, {
       children: label
     }));
@@ -599,7 +599,7 @@ var BackSelfcare = function BackSelfcare(props) {
    */
   var handClass = function handClass() {
     var str = 'back-btn';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   return jsx(Fragment, {
@@ -623,7 +623,7 @@ var Help = function Help(props) {
    */
   var handClass = function handClass() {
     var str = 'help-btn';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   return jsx(Fragment, {
@@ -692,7 +692,7 @@ var Language = function Language(props) {
    */
   var handClass = function handClass() {
     var str = 'language';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     if (showDialog) str += ' language-select';
     return str;
   };
@@ -760,9 +760,9 @@ var Language = function Language(props) {
     return jsx(Popover, Object.assign({
       trigger: 'hover',
       visible: showDialog,
-      placement: "bottom-start",
+      placement: 'bottom-start',
       content: selectPopover(),
-      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
+      overlayClassName: "".concat($prefixCls, "-horizontal-meun-right-popover"),
       onVisibleChange: onVisibleChange
     }, {
       children: jsx("div", Object.assign({
@@ -793,7 +793,7 @@ var BtnList = function BtnList(props) {
    */
   var handClass = function handClass() {
     var str = 'btn-list';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   /**
@@ -920,10 +920,10 @@ var UserMenuChildren = function UserMenuChildren(props) {
   return jsx(Popover, Object.assign({
     visible: showDialogCom,
     trigger: 'hover',
-    placement: "left-start",
+    placement: 'left-start',
     content: handPopoverContent(),
     onVisibleChange: onVisibleChange,
-    overlayClassName: $prefixCls + '-horizontal-meun-right-popover ' + $prefixCls + '-horizontal-meun-right-popover-children'
+    overlayClassName: "".concat($prefixCls, "-horizontal-meun-right-popover ").concat($prefixCls, "-horizontal-meun-right-popover-children")
   }, {
     children: jsxs("div", Object.assign({
       className: handMenuClassItem(),
@@ -1014,7 +1014,7 @@ var User = function User(props) {
     var recurrenceFunc = function recurrenceFunc(daraChildArr, parent) {
       for (var i = 0, l = daraChildArr.length; i < l; i++) {
         var item = daraChildArr[i];
-        item._paraui_menu_id = '_paraui_menu_id_' + UUID(); // 设置唯一id
+        item._paraui_menu_id = "_paraui_menu_id_".concat(UUID()); // 设置唯一id
         json[item._paraui_menu_id] = item;
         if (parent) {
           var idList = DeepClone(idMap[parent._paraui_menu_id] || []);
@@ -1075,7 +1075,7 @@ var User = function User(props) {
     var handStyleWidth = function handStyleWidth() {
       var styleJson = {};
       if (posDom && posDom.current) {
-        styleJson.width = posDom.current.getBoundingClientRect().width + 'px';
+        styleJson.width = "".concat(posDom.current.getBoundingClientRect().width, "px");
       }
       return styleJson;
     };
@@ -1126,7 +1126,7 @@ var User = function User(props) {
    */
   var handClass = function handClass() {
     var str = 'logo';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     if (showDialog) str += ' logo-show-dialog';
     return str;
   };
@@ -1134,9 +1134,9 @@ var User = function User(props) {
     children: render ? render : jsx(Popover, Object.assign({
       trigger: 'hover',
       visible: showDialog,
-      placement: "bottom-start",
+      placement: 'bottom-start',
       content: selectPopover(),
-      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
+      overlayClassName: "".concat($prefixCls, "-horizontal-meun-right-popover"),
       onVisibleChange: onVisibleChange
     }, {
       children: jsx("div", Object.assign({
@@ -1164,7 +1164,7 @@ var HorizontalMeunRight = function HorizontalMeunRight(props) {
    */
   var handClass = function handClass() {
     var str = 'horizontal-meun-right';
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   /** 返回自助服务 */
@@ -1196,7 +1196,7 @@ var HorizontalMeunRight = function HorizontalMeunRight(props) {
   });
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-page-header {\n  width: 100%;\n  height: 100%;\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  justify-content: space-between;\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  padding: 0 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header > .page-header-left {\n  white-space: nowrap;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n  padding-right: 12px;\n}\n.paraui-v4-page-header > .menu-box {\n  width: 100%;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list {\n  width: 100%;\n  height: 100%;\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item {\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n  white-space: nowrap;\n  float: left;\n  cursor: pointer;\n  text-decoration: none;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $A5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $A5;\n  }\n\n  & > .menu-item-arrow {\n    color: $A5;\n\n    svg {\n      color: $A5;\n    }\n  }*/\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  margin-right: 4px;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  white-space: nowrap;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-arrow > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgb(92, 101, 115);\n  margin-left: 2px;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $A5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $A5;\n  }\n\n  & > .menu-item-arrow {\n    color: $A5;\n\n    svg {\n      color: $A5;\n    }\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right {\n  height: 100%;\n  display: flex;\n}\n.paraui-v4-page-header .horizontal-meun-right > .back-btn {\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0 10px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .icon {\n    & > svg {\n      color: $P1;\n    }\n  }\n\n  & > .label {\n    color: $P1;\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .icon {\n  margin-right: 4px;\n  line-height: 0;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .icon svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .label {\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language {\n  height: 100%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item {\n  display: flex;\n  padding: 0 10px;\n  cursor: pointer;\n  align-items: center;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .language-item-icon {\n    & > svg {\n      color: $P1;\n    }\n  }\n\n  & > .language-item-label {\n    color: $A5;\n  }\n\n  & > .language-item-arrow {\n    & > svg {\n      color: $A5;\n    }\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-icon {\n  line-height: 0;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  white-space: nowrap;\n  margin-left: 4px;\n  display: inline-block;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list {\n  display: flex;\n  height: 100%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item {\n  display: flex;\n  padding: 0 10px;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon {\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon:after {\n  content: \"\";\n  position: absolute;\n  top: -2px;\n  right: -1px;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .btn-list-item-icon {\n    & > svg {\n      color: $A5;\n    }\n  }\n\n  & > .btn-list-item-label {\n    color: $A5;\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  width: 100%;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo {\n  display: flex;\n  padding: 0 10px;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo.logo-show-dialog {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > img {\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  font-weight: 700;\n  white-space: nowrap;\n  margin-left: 12px;\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .arrow > svg {\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n}\n\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content {\n  color: rgb(29, 33, 38);\n  padding: 4px 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 140px;\n  height: 30px;\n  line-height: 30px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $A5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $A5;\n  }\n\n  & > .menu-item-arrow {\n    & > svg {\n      color: $A5;\n    }\n  }*/\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 4px;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgb(29, 33, 38);\n  transform: rotate(270deg);\n  position: relative;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper {\n  padding-left: 4px;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper-child {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper-child > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  border-radius: 4px;\n  background-color: white;\n}\n\n.paraui-v4-horizontal-meun-right-popover.paraui-v4-horizontal-meun-right-popover-children:after {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  top: 0;\n  right: -8px;\n  z-index: -1;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box {\n  padding: 4px 0;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item {\n  height: 30px;\n  line-height: 30px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .icon {\n    & > svg {\n      color: $A5;\n    }\n  }\n\n  & > .label {\n    color: $A5;\n  }*/\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg {\n  font-size: 18px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .label {\n  color: rgb(46, 101, 230);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-page-header {\n  width: 100%;\n  height: 100%;\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  justify-content: space-between;\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  padding: 0 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header > .page-header-left {\n  white-space: nowrap;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n  padding-right: 12px;\n}\n.paraui-v4-page-header > .menu-box {\n  width: 100%;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list {\n  width: 100%;\n  height: 100%;\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item {\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n  white-space: nowrap;\n  float: left;\n  cursor: pointer;\n  text-decoration: none;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $NA5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $NA5;\n  }\n\n  & > .menu-item-arrow {\n    color: $NA5;\n\n    svg {\n      color: $NA5;\n    }\n  }*/\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  margin-right: 4px;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  white-space: nowrap;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-arrow > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgb(92, 101, 115);\n  margin-left: 2px;\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $NA5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $NA5;\n  }\n\n  & > .menu-item-arrow {\n    color: $NA5;\n\n    svg {\n      color: $NA5;\n    }\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right {\n  height: 100%;\n  display: flex;\n}\n.paraui-v4-page-header .horizontal-meun-right > .back-btn {\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0 10px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .icon {\n    & > svg {\n      color: $NP1;\n    }\n  }\n\n  & > .label {\n    color: $NP1;\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .icon {\n  margin-right: 4px;\n  line-height: 0;\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .icon svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .label {\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language {\n  height: 100%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item {\n  display: flex;\n  padding: 0 10px;\n  cursor: pointer;\n  align-items: center;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .language-item-icon {\n    & > svg {\n      color: $NP1;\n    }\n  }\n\n  & > .language-item-label {\n    color: $NA5;\n  }\n\n  & > .language-item-arrow {\n    & > svg {\n      color: $NA5;\n    }\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-icon {\n  line-height: 0;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  white-space: nowrap;\n  margin-left: 4px;\n  display: inline-block;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list {\n  display: flex;\n  height: 100%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item {\n  display: flex;\n  padding: 0 10px;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon {\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon:after {\n  content: \"\";\n  position: absolute;\n  top: -2px;\n  right: -1px;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .btn-list-item-icon {\n    & > svg {\n      color: $NA5;\n    }\n  }\n\n  & > .btn-list-item-label {\n    color: $NA5;\n  }*/\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  position: relative;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  width: 100%;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo {\n  display: flex;\n  padding: 0 10px;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo.logo-show-dialog {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > img {\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .label {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n  font-weight: 700;\n  white-space: nowrap;\n  margin-left: 12px;\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n}\n.paraui-v4-page-header .horizontal-meun-right > .logo > .arrow > svg {\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n}\n\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content {\n  color: rgb(29, 33, 38);\n  padding: 4px 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 140px;\n  height: 30px;\n  line-height: 30px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .menu-item-icon {\n    & > svg {\n      color: $NA5;\n    }\n  }\n\n  & > .menu-item-label {\n    color: $NA5;\n  }\n\n  & > .menu-item-arrow {\n    & > svg {\n      color: $NA5;\n    }\n  }*/\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 4px;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgb(29, 33, 38);\n  transform: rotate(270deg);\n  position: relative;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper {\n  padding-left: 4px;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v4-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper-child {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: 0;\n}\n.paraui-v4-horizontal-menu-popper .menu-item-popper-child > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  border-radius: 4px;\n  background-color: white;\n}\n\n.paraui-v4-horizontal-meun-right-popover.paraui-v4-horizontal-meun-right-popover-children:after {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  top: 0;\n  right: -8px;\n  z-index: -1;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box {\n  padding: 4px 0;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item {\n  height: 30px;\n  line-height: 30px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover {\n  background-color: rgb(247, 248, 250);\n  /*& > .icon {\n    & > svg {\n      color: $NA5;\n    }\n  }\n\n  & > .label {\n    color: $NA5;\n  }*/\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg {\n  font-size: 18px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .icon > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .label {\n  color: rgb(46, 101, 230);\n}";
 styleInject(css_248z);
 
 var PageHeader = function PageHeader(props) {
@@ -1209,14 +1209,14 @@ var PageHeader = function PageHeader(props) {
     style = props.style;
   var LeftMemo = useMemo(function () {
     return leftRender && jsx("div", Object.assign({
-      className: 'page-header-left'
+      className: "page-header-left"
     }, {
       children: leftRender
     }));
   }, [leftRender]);
   var MenuMemo = useMemo(function () {
     return props.menuListProps && jsx("div", Object.assign({
-      className: 'menu-box'
+      className: "menu-box"
     }, {
       children: jsx(HorizontalMenu, Object.assign({}, menuListProps, {
         selectMenu: selectMenu,
@@ -1231,8 +1231,8 @@ var PageHeader = function PageHeader(props) {
    * 处理class
    */
   var handClass = function handClass() {
-    var str = $prefixCls + '-page-header';
-    if (className) str += ' ' + className;
+    var str = "".concat($prefixCls, "-page-header");
+    if (className) str += " ".concat(className);
     return str;
   };
   return jsxs("div", Object.assign({

package/PageHeader/interface.d.ts

@@ -5,7 +5,7 @@
  */
 import React, { ReactNode } from 'react';
 /** 菜单类型 */
-export type MenuListTypeType = 'redirect' | 'router' | "iframe" | "snack" | "snackPage";
+export type MenuListTypeType = 'redirect' | 'router' | 'iframe' | 'snack' | 'snackPage';
 /** 菜单列表项参数 */
 export interface MenuChildrenProps {
     /** 样式class */

package/Pagination/index.d.ts

@@ -3,7 +3,7 @@
  * @date 2022/12/13 2:19 PM
  * @description 分页组件
  */
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react';
 import './index.scss';
 /**
  * sizes: 总数

package/Pagination/index.js

@@ -48,7 +48,7 @@ import '../Popover/index.js';
 
 var en = {
   total: 'Total {total}',
-  barPage: 'Bar/Page',
+  barPage: ' / page',
   prevPage: 'Prev',
   nextPage: 'Next',
   jumpTo: 'Go to',
@@ -129,7 +129,7 @@ var Pagination = function Pagination(props) {
   constData.current.autoType = autoType;
   useEffect(function () {
     return function () {
-      window.removeEventListener("resize", changeSize);
+      window.removeEventListener('resize', changeSize);
       clearTimeout(constData.current.timer);
       clearTimeout(constData.current.timerClass);
       clearTimeout(constData.current.changePagination);
@@ -175,9 +175,9 @@ var Pagination = function Pagination(props) {
     if (type === 'complex' && autoType) {
       changeSize();
       // 复杂模式,且开启自适应模式
-      window.addEventListener("resize", changeSize);
+      window.addEventListener('resize', changeSize);
     } else {
-      window.removeEventListener("resize", changeSize);
+      window.removeEventListener('resize', changeSize);
       setTypeCom(type);
     }
   }, [type, autoType]);
@@ -213,7 +213,7 @@ var Pagination = function Pagination(props) {
     clearTimeout(constData.current.timerClass);
     var current = refDom.current;
     if (!current) return;
-    current.classList.add($prefixCls + '-pagination-over');
+    current.classList.add("".concat($prefixCls, "-pagination-over"));
     constData.current.timer = setTimeout(function () {
       if (!current) return;
       var skipDom = current.querySelector('.skip-page-memo');
@@ -229,7 +229,7 @@ var Pagination = function Pagination(props) {
         changeSize();
       }
       constData.current.timerClass = setTimeout(function () {
-        current.classList.remove($prefixCls + '-pagination-over');
+        current.classList.remove("".concat($prefixCls, "-pagination-over"));
       }, 200);
     }, 200);
   };
@@ -248,7 +248,7 @@ var Pagination = function Pagination(props) {
             if (pageCom === 1) return;
             num = 1;
             break;*/
-        case "prev":
+        case 'prev':
           if (pageCom === 1) return;
           num--;
           break;
@@ -256,11 +256,11 @@ var Pagination = function Pagination(props) {
             if (pageCom === totalPage) return;
             num = totalPage;
             break;*/
-        case "next":
+        case 'next':
           if (pageCom === totalPage) return;
           num++;
           break;
-        case "pagination":
+        case 'pagination':
           num = value;
           break;
       }
@@ -305,7 +305,7 @@ var Pagination = function Pagination(props) {
   };
   var formatNumber = function formatNumber(num) {
     var reg = /(?=(\B)(\d{3})+$)/g;
-    return num.toString().replace(reg, ",");
+    return num.toString().replace(reg, ',');
   };
   /* 总数量 */
   var TotalMemo = useMemo(function () {
@@ -334,7 +334,7 @@ var Pagination = function Pagination(props) {
     }, {
       children: jsx(Select, {
         className: 'page-line-select',
-        size: "large",
+        size: 'large',
         value: currentRowsPerPageCom,
         list: rowsPerPageCom,
         hideErrorDom: true,
@@ -382,7 +382,7 @@ var Pagination = function Pagination(props) {
           children: jsx(NavigateBefore, {})
         }))
       })), jsx(PaginationCom, {
-        prefixCls: $rcPrefixCls + '-pagination',
+        prefixCls: "".concat($rcPrefixCls, "-pagination"),
         current: pageCom,
         pageSize: currentRowsPerPageCom,
         total: total,
@@ -412,7 +412,7 @@ var Pagination = function Pagination(props) {
     }, {
       children: [jsx(Button, Object.assign({
         variant: "outlined",
-        size: "large",
+        size: 'large',
         startIcon: jsx(NavigateBefore, {}),
         onClick: clickPage('prev'),
         disabled: pageCom === 1
@@ -422,7 +422,7 @@ var Pagination = function Pagination(props) {
         })
       })), jsx(Button, Object.assign({
         variant: "outlined",
-        size: "large",
+        size: 'large',
         endIcon: jsx(Right, {}),
         onClick: clickPage('next'),
         disabled: pageCom === totalPage
@@ -447,7 +447,7 @@ var Pagination = function Pagination(props) {
         })
       }), jsx(TextField, {
         className: 'skip-page-text-field',
-        size: "large",
+        size: 'large',
         type: "number",
         value: skipValue || '',
         onChange: changeSkipValue,
@@ -463,12 +463,12 @@ var Pagination = function Pagination(props) {
   }, [skipValue, totalPage, language, locale, typeCom]);
   // 处理class
   var handClass = function handClass() {
-    var str = $prefixCls + '-pagination';
+    var str = "".concat($prefixCls, "-pagination");
     /*if (flippingArrow.indexOf('first') === -1 && flippingArrow.indexOf('prev') === -1)
         str += ' ' + $prefixCls + '-pagination-no-left-arrow';
     if (flippingArrow.indexOf('next') === -1 && flippingArrow.indexOf('last') === -1)
         str += ' ' + $prefixCls + '-pagination-no-right-arrow';*/
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     return str;
   };
   return jsxs("div", Object.assign({