@para-ui/core 3.0.86 → 4.0.0-alpha

package/PageHeader/index.js

@@ -1,14 +1,15 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { Popover } from '../Popover/index.js';
 import Down from '@para-ui/icons/Down';
 import * as iconList from '@para-ui/icons';
 import More from '@para-ui/icons/More';
-import { UUID, DeepClone } from '@paraview/lib';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { DeepClone, UUID } from '@paraview/lib';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { Button } from '../Button/index.js';
+import Right from '@para-ui/icons/Right';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
@@ -16,15 +17,16 @@ import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
+import '@para-ui/icons/Forbid';
 import '../_verture/usePopupContainer-87febeb9.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-adeedc13.js';
 import '@para-ui/icons/LoadingF';
-import '@para-ui/icons/Forbid';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import 'dayjs';
 import '../_verture/useFormatMessage-703f8b20.js';
 import '@para-ui/core/GlobalContext';
+import '../AutoTips/index.js';
 
 /**
  * @description 处理菜单标签
@@ -99,19 +101,17 @@ var MenuItemPopper = function MenuItemPopper(props) {
           return;
       }
       timerJson.lastItem = item;*/
-      (function (event) {
-        clearTimeout(timerJson.leaveTimer);
-        timerJson.leaveTimer = setTimeout(function () {
-          var childListHand = [item];
-          if (item.children && item.children.length > 0) {
-            childListHand = item.children;
-          }
-          var target = event.target;
-          setChildPos(target);
-          setChildList(childListHand);
-          setOpenChild(index);
-        }, 50);
-      })(e);
+      clearTimeout(timerJson.leaveTimer);
+      timerJson.leaveTimer = setTimeout(function () {
+        var childListHand = [item];
+        if (item.children && item.children.length > 0) {
+          childListHand = item.children;
+        }
+        var target = e.target;
+        setChildPos(target);
+        setChildList(childListHand);
+        setOpenChild(index);
+      }, 50);
     };
   };
   /**
@@ -120,7 +120,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var MouseLeaveItem = function MouseLeaveItem(item, index) {
+  var mouseLeaveItem = function mouseLeaveItem(item, index) {
     return function (e) {
       clearTimeout(timerJson.leaveTimer);
       timerJson.leaveTimer = setTimeout(function () {
@@ -220,7 +220,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
         var Ele = handMenuEle(item.children);
         return jsx("div", Object.assign({
           className: handItemClass(item),
-          onMouseLeave: MouseLeaveItem(),
+          onMouseLeave: mouseLeaveItem(),
           onMouseEnter: mouseEnterItem(item, index)
         }, {
           children: jsxs(Ele, Object.assign({
@@ -286,16 +286,14 @@ var HorizontalMenu = function HorizontalMenu(props) {
     _useState22 = _slicedToArray(_useState21, 2),
     menuLevelMapping = _useState22[0],
     setMenuLevelMapping = _useState22[1]; // 菜单层级mapping
-  var _useState23 = useState('horizontal-menu-list-' + UUID()),
-    _useState24 = _slicedToArray(_useState23, 1),
-    classOne = _useState24[0]; // 唯一class
-  var _useState25 = useState(null),
-    _useState26 = _slicedToArray(_useState25, 2),
-    morePos = _useState26[0],
-    setMorePos = _useState26[1]; // 超出在原始位置
-  var _useState27 = useState({}),
-    _useState28 = _slicedToArray(_useState27, 1),
-    timerJson = _useState28[0];
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    morePos = _useState24[0],
+    setMorePos = _useState24[1]; // 超出在原始位置
+  var _useState25 = useState({}),
+    _useState26 = _slicedToArray(_useState25, 1),
+    timerJson = _useState26[0];
+  var menuRef = useRef(null);
   useEffect(function () {
     if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
   }, [selectMenu]);
@@ -324,7 +322,7 @@ var HorizontalMenu = function HorizontalMenu(props) {
   var handMultiline = function handMultiline(index) {
     if (index === null || index === 0) return;
     if (index === undefined) index = (list || []).length;
-    var boxDom = document.querySelector('.' + classOne);
+    var boxDom = menuRef.current;
     if (!boxDom) return;
     if (boxDom.scrollHeight > boxDom.clientHeight) {
       var num = Number(index) - 1;
@@ -467,7 +465,6 @@ var HorizontalMenu = function HorizontalMenu(props) {
   var handClass = function handClass() {
     var str = 'horizontal-menu-list';
     if (className) str += ' ' + className;
-    if (classOne) str += ' ' + classOne;
     return str;
   };
   /**
@@ -501,7 +498,8 @@ var HorizontalMenu = function HorizontalMenu(props) {
     leaveFunc();
   };
   return jsxs("div", Object.assign({
-    className: handClass()
+    className: handClass(),
+    ref: menuRef
   }, {
     children: [(list || []).map(function (item, index) {
       if (morePos !== null && morePos <= index) return null;
@@ -589,7 +587,8 @@ var BackSelfcare = function BackSelfcare(props) {
     return jsx(Button, Object.assign({
       startIcon: icon,
       variant: "contained",
-      onClick: onClickCom
+      onClick: onClickCom,
+      size: "small"
     }, {
       children: label
     }));
@@ -611,6 +610,39 @@ var BackSelfcare = function BackSelfcare(props) {
     }))
   });
 };
+/** 帮助 */
+var Help = function Help(props) {
+  var icon = props.icon,
+    label = props.label,
+    render = props.render,
+    onClick = props.onClick,
+    className = props.className;
+  /**
+   * 处理class
+   * @return {string} class名
+   */
+  var handClass = function handClass() {
+    var str = 'help-btn';
+    if (className) str += ' ' + className;
+    return str;
+  };
+  return jsx(Fragment, {
+    children: render ? render : jsxs("div", Object.assign({
+      className: handClass(),
+      onClick: onClick
+    }, {
+      children: [icon && jsx("span", Object.assign({
+        className: "icon"
+      }, {
+        children: icon
+      })), label && jsx("span", Object.assign({
+        className: "label"
+      }, {
+        children: label
+      }))]
+    }))
+  });
+};
 /* 国际化 */
 var Language = function Language(props) {
   var _props$language = props.language,
@@ -815,6 +847,109 @@ var BtnList = function BtnList(props) {
     }))
   });
 };
+var UserMenuChildren = function UserMenuChildren(props) {
+  var item = props.item,
+    selectValue = props.selectValue,
+    selectId = props.selectId,
+    clickUserItem = props.clickUserItem,
+    hoverId = props.hoverId,
+    showDialog = props.showDialog,
+    idMapLast = props.idMapLast,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showDialogCom = _useState8[0],
+    setShowDialogCom = _useState8[1]; // 显示弹出菜单
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hoverIdCom = _useState10[0],
+    setHoverIdCom = _useState10[1]; // hover
+  useEffect(function () {
+    if (showDialog === false) setShowDialogCom(false);
+  }, [showDialog]);
+  var onMouseEnterChildCom = function onMouseEnterChildCom(item) {
+    setHoverIdCom(item._paraui_menu_id);
+  };
+  var onMouseLeaveChildCom = function onMouseLeaveChildCom() {};
+  /**
+   * 处理每一项className
+   * @return class名
+   */
+  var handMenuClassItem = function handMenuClassItem() {
+    var str = 'menu-popover-item';
+    //if (item.value === selectValue) str += ' menu-popover-item-select';
+    if (hoverId === item._paraui_menu_id) str += ' menu-popover-item-hover';
+    if (idMapLast[hoverId] && idMapLast[hoverId].indexOf(item._paraui_menu_id) !== -1) str += ' menu-popover-item-hover';
+    if (idMapLast[selectId] && idMapLast[selectId].indexOf(item._paraui_menu_id) !== -1) str += ' menu-popover-item-select';
+    return str;
+  };
+  /**
+   * 处理popover内容
+   * */
+  var handPopoverContent = function handPopoverContent() {
+    if (item.children && item.children.length > 0) {
+      return jsx("div", Object.assign({
+        className: "menu-popover-box"
+      }, {
+        children: item.children && item.children.map(function (item, index) {
+          return jsx(UserMenuChildren, {
+            item: item,
+            selectValue: selectValue,
+            clickUserItem: clickUserItem,
+            onMouseEnter: function onMouseEnter() {
+              return onMouseEnterChildCom(item);
+            },
+            onMouseLeave: onMouseLeaveChildCom,
+            hoverId: hoverIdCom,
+            showDialog: showDialog,
+            selectId: selectId,
+            idMapLast: idMapLast
+          }, index);
+        })
+      }));
+    }
+  };
+  /**
+   * 是否显示
+   * @param bol
+   */
+  var onVisibleChange = function onVisibleChange(bol) {
+    setShowDialogCom(bol);
+  };
+  return jsx(Popover, Object.assign({
+    visible: showDialogCom,
+    trigger: 'hover',
+    placement: "left-start",
+    content: handPopoverContent(),
+    onVisibleChange: onVisibleChange,
+    overlayClassName: $prefixCls + '-horizontal-meun-right-popover ' + $prefixCls + '-horizontal-meun-right-popover-children'
+  }, {
+    children: jsxs("div", Object.assign({
+      className: handMenuClassItem(),
+      onClick: clickUserItem(item),
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, {
+      children: [item.icon && jsx("span", Object.assign({
+        className: "icon",
+        style: {
+          marginRight: '5px'
+        }
+      }, {
+        children: item.icon
+      })), item.label && jsx("span", Object.assign({
+        className: "label"
+      }, {
+        children: item.label
+      })), item.children && item.children.length > 0 && jsx("span", Object.assign({
+        className: "icon icon-right"
+      }, {
+        children: jsx(Right, {})
+      }))]
+    }))
+  }));
+};
 /* 用户 */
 var User = function User(props) {
   var img = props.img,
@@ -826,19 +961,83 @@ var User = function User(props) {
     onClick = props.onClick,
     onClickMenu = props.onClickMenu,
     selectValue = props.selectValue;
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showDialog = _useState8[0],
-    setShowDialog = _useState8[1]; // 显示弹出菜单
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 1),
-    timerJson = _useState10[0];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    listCom = _useState12[0],
+    setListCom = _useState12[1];
+  var _useState13 = useState(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectId = _useState14[0],
+    setSelectId = _useState14[1]; // 选中id
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showDialog = _useState16[0],
+    setShowDialog = _useState16[1]; // 显示弹出菜单
+  var _useState17 = useState(''),
+    _useState18 = _slicedToArray(_useState17, 2),
+    hoverId = _useState18[0],
+    setHoverId = _useState18[1]; // hover
+  var _useState19 = useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    idMapLastCom = _useState20[0],
+    setIdMapLastCom = _useState20[1]; // idMap
+  var _useState21 = useState({}),
+    _useState22 = _slicedToArray(_useState21, 1),
+    timerJson = _useState22[0];
   var posDom = useRef();
+  var constData = useRef({
+    listJson: {}
+  });
   useEffect(function () {
     return function () {
       clearTimeout(timerJson.timer);
     };
   }, []);
+  useEffect(function () {
+    handList();
+  }, [list]);
+  useEffect(function () {
+    var keys = Object.keys(constData.current.listJson);
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var item = constData.current.listJson[keys[i]];
+      if (item.value === selectValue) {
+        setSelectId(item._paraui_menu_id);
+        break;
+      }
+    }
+  }, [selectValue, list]);
+  /** 处理list */
+  var handList = function handList() {
+    var json = {};
+    var idMap = {}; // 所有id,层级map
+    var idMapLast = {}; // 最后一层菜单,层级map
+    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
+        json[item._paraui_menu_id] = item;
+        if (parent) {
+          var idList = DeepClone(idMap[parent._paraui_menu_id] || []);
+          idList.push(item._paraui_menu_id);
+          idMap[item._paraui_menu_id] = _toConsumableArray(idList);
+        } else {
+          // 不存在parent,第一级
+          idMap[item._paraui_menu_id] = [item._paraui_menu_id];
+          item._paraui_menu_first = true;
+        }
+        if (item.children && item.children.length > 0) {
+          recurrenceFunc(item.children, item);
+        } else {
+          // 不存在children,为点击菜单选项
+          idMapLast[item._paraui_menu_id] = idMap[item._paraui_menu_id];
+        }
+      }
+    };
+    recurrenceFunc(list || []);
+    constData.current.listJson = json;
+    setListCom(_toConsumableArray(list || []));
+    setIdMapLastCom(idMapLast);
+  };
   /**
    * 点击
    * @param e 元素
@@ -852,10 +1051,15 @@ var User = function User(props) {
    */
   var clickUserItem = function clickUserItem(item) {
     return function () {
+      if (item.children && item.children.length > 0) return;
       onClickMenu && onClickMenu(item.value, item);
       setShowDialog(false);
     };
   };
+  var onMouseEnterChild = function onMouseEnterChild(item) {
+    setHoverId(item._paraui_menu_id);
+  };
+  var onMouseLeaveChild = function onMouseLeaveChild() {};
   /**
    * 是否显示
    * @param bol
@@ -867,16 +1071,7 @@ var User = function User(props) {
    * 下拉内容
    * */
   var selectPopover = function selectPopover() {
-    /**
-     * 处理每一项className
-     * @param item {LanguageItemProps} 详情
-     * @return class名
-     */
-    var handMenuClassItem = function handMenuClassItem(item) {
-      var str = 'menu-popover-item';
-      if (item.value === selectValue) str += ' menu-popover-item-select';
-      return str;
-    };
+    if (listCom.length === 0) return null;
     var handStyleWidth = function handStyleWidth() {
       var styleJson = {};
       if (posDom && posDom.current) {
@@ -888,24 +1083,20 @@ var User = function User(props) {
       className: "menu-popover-box",
       style: handStyleWidth()
     }, {
-      children: list && list.map(function (item, index) {
-        return jsxs("div", Object.assign({
-          className: handMenuClassItem(item),
-          onClick: clickUserItem(item)
-        }, {
-          children: [item.icon && jsx("span", Object.assign({
-            className: "icon",
-            style: {
-              marginRight: '5px'
-            }
-          }, {
-            children: item.icon
-          })), item.label && jsx("span", Object.assign({
-            className: "label"
-          }, {
-            children: item.label
-          }))]
-        }), index);
+      children: listCom && listCom.map(function (item, index) {
+        return jsx(UserMenuChildren, {
+          item: item,
+          selectValue: selectValue,
+          clickUserItem: clickUserItem,
+          onMouseEnter: function onMouseEnter() {
+            return onMouseEnterChild(item);
+          },
+          onMouseLeave: onMouseLeaveChild,
+          hoverId: hoverId,
+          showDialog: showDialog,
+          selectId: selectId,
+          idMapLast: idMapLastCom
+        }, index);
       })
     }));
   };
@@ -965,6 +1156,7 @@ var HorizontalMeunRight = function HorizontalMeunRight(props) {
     languageProps = props.languageProps,
     btnListProps = props.btnListProps,
     userProps = props.userProps,
+    helpProps = props.helpProps,
     render = props.render;
   /**
    * 处理class
@@ -979,6 +1171,10 @@ var HorizontalMeunRight = function HorizontalMeunRight(props) {
   var BackSelfcareMemo = useMemo(function () {
     return backSelfcareProps && jsx(BackSelfcare, Object.assign({}, backSelfcareProps));
   }, [backSelfcareProps]);
+  /** 帮助 */
+  var HelpMemo = useMemo(function () {
+    return helpProps && jsx(Help, Object.assign({}, helpProps));
+  }, [helpProps]);
   /** language */
   var LanguageMemo = useMemo(function () {
     return languageProps && jsx(Language, Object.assign({}, languageProps));
@@ -995,12 +1191,12 @@ var HorizontalMeunRight = function HorizontalMeunRight(props) {
     children: render ? render : jsxs("div", Object.assign({
       className: handClass()
     }, {
-      children: [BackSelfcareMemo, LanguageMemo, BtnListMemo, UserMemo]
+      children: [BackSelfcareMemo, HelpMemo, LanguageMemo, BtnListMemo, UserMemo]
     }))
   });
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-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 rgba(171, 176, 185, 0.4);\n  padding: 0 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-page-header > .page-header-left {\n  white-space: nowrap;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n}\n.paraui-v3-page-header > .menu-box {\n  width: 100%;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list {\n  width: 100%;\n  height: 100%;\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item {\n  padding: 0 20px;\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-v3-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-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n  margin-right: 5px;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  white-space: nowrap;\n}\n.paraui-v3-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: rgba(46, 55, 67, 0.7);\n  margin-left: 2px;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right {\n  height: 100%;\n  display: flex;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn {\n  padding: 0 12px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn > button {\n  width: 100%;\n  white-space: nowrap;\n  padding: 0 10px 0 14px;\n  line-height: 14px;\n  font-size: 14px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn > button svg {\n  color: white;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language {\n  height: 100%;\n  margin-right: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item {\n  display: flex;\n  padding: 0 12px;\n  cursor: pointer;\n  align-items: center;\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-icon {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  line-height: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  white-space: nowrap;\n  margin-left: 5px;\n  display: inline-block;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list {\n  display: flex;\n  height: 100%;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item {\n  display: flex;\n  padding: 0 12px;\n  cursor: pointer;\n  align-items: center;\n  margin-right: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon {\n  position: relative;\n}\n.paraui-v3-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: 0;\n  right: 0;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n  position: relative;\n}\n.paraui-v3-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-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-label {\n  font-size: 14px;\n  line-height: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  margin-left: 5px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo {\n  display: flex;\n  padding: 0 12px;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n  margin-left: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo.logo-show-dialog {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > img {\n  height: 36px;\n  width: 36px;\n  border-radius: 50%;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > .label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\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-v3-page-header .horizontal-meun-right > .logo > .arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 5px;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 18px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > .arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 18px;\n}\n\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-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: 40px;\n  line-height: 40px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-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: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-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: 5px;\n}\n.paraui-v3-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-v3-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: 20px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-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-v3-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-v3-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-v3-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: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v3-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-v3-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-v3-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-v3-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: 20px;\n  transition: all 0.3s;\n  color: rgba(46, 55, 67, 0.7);\n  transform: rotate(270deg);\n  position: relative;\n}\n.paraui-v3-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-v3-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-v3-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-v3-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-v3-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-v3-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: 5px;\n}\n.paraui-v3-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-v3-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(54, 102, 214);\n}\n.paraui-v3-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-v3-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(54, 102, 214);\n}\n.paraui-v3-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-v3-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(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper-child {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: 0;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper-child > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: white;\n}\n\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item {\n  height: 36px;\n  line-height: 36px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-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-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .label {\n  color: rgb(54, 102, 214);\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: $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}";
 styleInject(css_248z);
 
 var PageHeader = function PageHeader(props) {

package/PageHeader/interface.d.ts

@@ -81,6 +81,19 @@ export interface BackSelfcareProps {
     /** 点击事件 */
     onClick?: (e: any) => void;
 }
+/** 帮助 */
+export interface HelpProps {
+    /** 图标 */
+    icon?: ReactNode;
+    /** 标题 */
+    label?: ReactNode;
+    /** 自定义 */
+    render?: ReactNode;
+    /** 样式class */
+    className?: string;
+    /** 点击事件 */
+    onClick?: (e: any) => void;
+}
 /** 按钮listItem */
 export interface BtnListItemProps {
     /** 图标 */
@@ -112,6 +125,8 @@ export interface UserListProps {
     label?: ReactNode;
     /** 值 */
     value?: string;
+    /** 子菜单 */
+    children?: UserListProps[];
     [name: string]: any;
 }
 /** 用户信息 */
@@ -147,6 +162,8 @@ export interface FooterProps {
     btnListProps?: BtnListProps;
     /** 用户参数 */
     userProps?: UserProps;
+    /** 帮助 */
+    helpProps?: HelpProps;
     /** 自定义 */
     render?: ReactNode;
 }

package/Pagination/index.d.ts

@@ -7,13 +7,12 @@ import React, { FunctionComponent } from "react";
 import './index.scss';
 /**
  * sizes: 总数
- * currentPage：当前第...页
  * pageRow：每页行数
  * pager: 切换页数
  * jumper： 跳转到
  * */
-export type PaginationLayout = 'sizes' | 'currentPage' | 'pageRow' | 'pager' | 'jumper';
-export type PaginationFlippingArrow = 'first' | 'prev' | 'next' | 'last';
+export type PaginationLayout = 'sizes' | 'pageRow' | 'pager' | 'jumper';
+export type PaginationFlippingArrow = 'prev' | 'next';
 export interface PaginationProps {
     /** class名称 */
     className?: string;
@@ -21,6 +20,8 @@ export interface PaginationProps {
     style?: React.CSSProperties;
     /** 模式 */
     type?: 'simple' | 'complex' | PaginationLayout[];
+    /** 分页模式 按钮/数字 */
+    pagerType?: 'btn' | 'num';
     /** 方向键layout，默认全有 */
     flippingArrow?: PaginationFlippingArrow[];
     /** 自适应模式 只有type=complex生效，默认true */