@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6

package/PageHeader/index.js

@@ -1,40 +1,36 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 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 { DeepClone, UUID } from '@paraview/lib';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Button } from '../Button/index.js';
 import AutoTips from '../AutoTips/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';
 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-adeedc13.js';
+import '../_verture/usePopupContainer-635f66f4.js';
 import '@para-ui/icons/LoadingF';
-import '../_verture/index-e9007d6a.js';
+import '../_verture/index-da9097d3.js';
 import 'rc-dropdown';
 import 'dayjs';
-import '../_verture/useFormatMessage-703f8b20.js';
+import '../_verture/useFormatMessage-eb13cf56.js';
 import '@para-ui/core/GlobalContext';
 
 /**
  * @description 处理菜单标签
  * 默认div,最后一级为a标签
  * */
-var handMenuEle = function handMenuEle(children) {
-  var Ele = 'div';
-  var lastOne = !children || children.length === 0;
+const handMenuEle = children => {
+  let Ele = 'div';
+  const lastOne = !children || children.length === 0;
   if (lastOne) {
     Ele = 'a';
   }
@@ -43,11 +39,11 @@ var handMenuEle = function handMenuEle(children) {
 /**
  * 处理菜单href地址
  * */
-var handHref = function handHref() {
-  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var path = arguments.length > 1 ? arguments[1] : undefined;
-  var href = arguments.length > 2 ? arguments[2] : undefined;
-  var lastOne = !children || children.length === 0;
+const handHref = function () {
+  let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let path = arguments.length > 1 ? arguments[1] : undefined;
+  let href = arguments.length > 2 ? arguments[2] : undefined;
+  const lastOne = !children || children.length === 0;
   if (lastOne) {
     return {
       href: href ? href : "#".concat(path)
@@ -56,35 +52,23 @@ var handHref = function handHref() {
   return {};
 };
 // 弹出菜单
-var MenuItemPopper = function MenuItemPopper(props) {
-  var idMenuLast = props.idMenuLast,
-    _props$selectMenu = props.selectMenu,
-    selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
-    onClickMenu = props.onClickMenu,
-    _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    _props$level = props.level,
-    level = _props$level === void 0 ? 1 : _props$level,
-    className = props.className;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    openChild = _useState2[0],
-    setOpenChild = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    childPos = _useState4[0],
-    setChildPos = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    childList = _useState6[0],
-    setChildList = _useState6[1];
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 1),
-    timerJson = _useState8[0];
-  useEffect(function () {
-    return function () {
+const MenuItemPopper = props => {
+  const {
+    idMenuLast,
+    selectMenu = '',
+    onClickMenu,
+    list = [],
+    onMouseEnter,
+    onMouseLeave,
+    level = 1,
+    className
+  } = props;
+  const [openChild, setOpenChild] = useState(null);
+  const [childPos, setChildPos] = useState(null);
+  const [childList, setChildList] = useState([]);
+  const [timerJson] = useState({});
+  useEffect(() => {
+    return () => {
       clearTimeout(timerJson.leaveTimer);
     };
   }, []);
@@ -94,25 +78,23 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var mouseEnterItem = function mouseEnterItem(item, index) {
-    return function (e) {
-      // 防止火狐浏览器一直重绘,死循环,不触发点击事件了
-      /*if (timerJson.lastItem && timerJson.lastItem.path === item.path) {
-          return;
-      }
-      timerJson.lastItem = item;*/
-      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);
-    };
+  const mouseEnterItem = (item, index) => e => {
+    // 防止火狐浏览器一直重绘,死循环,不触发点击事件了
+    /*if (timerJson.lastItem && timerJson.lastItem.path === item.path) {
+        return;
+    }
+    timerJson.lastItem = item;*/
+    clearTimeout(timerJson.leaveTimer);
+    timerJson.leaveTimer = setTimeout(() => {
+      let childListHand = [item];
+      if (item.children && item.children.length > 0) {
+        childListHand = item.children;
+      }
+      const target = e.target;
+      setChildPos(target);
+      setChildList(childListHand);
+      setOpenChild(index);
+    }, 50);
   };
   /**
    * 移出
@@ -120,38 +102,34 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var mouseLeaveItem = function mouseLeaveItem(item, index) {
-    return function (e) {
-      clearTimeout(timerJson.leaveTimer);
-      timerJson.leaveTimer = setTimeout(function () {
-        setOpenChild(null);
-        setChildPos(null);
-        setChildList([]);
-      });
-    };
+  const mouseLeaveItem = (item, index) => e => {
+    clearTimeout(timerJson.leaveTimer);
+    timerJson.leaveTimer = setTimeout(() => {
+      setOpenChild(null);
+      setChildPos(null);
+      setChildList([]);
+    });
   };
   /**
    * 点击菜单
    * @param item {MenuChildrenProps} 当前项参数
    * @param e 当前元素
    */
-  var clickMenu = function clickMenu(item) {
-    return function (e) {
-      e.preventDefault();
-      if (item.children && item.children.length > 0) return;
-      onClickMenu && onClickMenu(item);
-      onMouseLeave && onMouseLeave();
-    };
+  const clickMenu = item => e => {
+    e.preventDefault();
+    if (item.children && item.children.length > 0) return;
+    onClickMenu && onClickMenu(item);
+    onMouseLeave && onMouseLeave();
   };
   /**
    * 处理icon
    * @param item {MenuChildrenProps} 当前项参数
    * @return {ReactNode} 返回图标元素
    */
-  var handIcon = function handIcon(item) {
-    var icon = item.icon;
+  const handIcon = item => {
+    const icon = item.icon;
     if (icon) {
-      var iconCom = iconList[icon];
+      const iconCom = iconList[icon];
       if (iconCom) return iconCom();
       return icon;
     }
@@ -161,8 +139,8 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param item {MenuChildrenProps} 当前项参数
    * @return {ReactNode} 返回图标元素
    */
-  var handArrow = function handArrow(item) {
-    var children = item.children;
+  const handArrow = item => {
+    const children = item.children;
     if (children && children.length > 0) return jsx(Down, {});
   };
   /**
@@ -170,9 +148,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param item {MenuChildrenProps} 当前项参数
    * @return {string} 返回图标元素
    */
-  var handItemClass = function handItemClass(item) {
-    var str = 'menu-item-popper-content-item';
-    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+  const handItemClass = item => {
+    let str = 'menu-item-popper-content-item';
+    const selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
       str += ' menu-item-popper-content-item-select';
     }
@@ -182,8 +160,8 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * 处理MenuPopover样式类名
    * @return {string} class名
    */
-  var handPopoverClass = function handPopoverClass() {
-    var str = 'menu-item-popper';
+  const handPopoverClass = () => {
+    let str = 'menu-item-popper';
     if (level !== 1) str += ' menu-item-popper-child';
     if (className) str += " ".concat(className);
     return str;
@@ -194,7 +172,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 下标
    * @return {ReactNode} 节点内容
    */
-  var ChildMenu = useCallback(function (item, index) {
+  const ChildMenu = useCallback((item, index) => {
     return jsx(Fragment, {
       children: item.children && item.children.length > 0 && openChild === index && jsx(MenuItemPopper, {
         open: openChild === index,
@@ -210,14 +188,14 @@ var MenuItemPopper = function MenuItemPopper(props) {
     });
   }, [openChild, childPos, childList, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
   /** 内容 */
-  var ContentMemo = useMemo(function () {
+  const ContentMemo = useMemo(() => {
     return jsx("div", Object.assign({
       className: "menu-item-popper-content"
     }, {
-      children: list.map(function (item, index) {
-        var icon = handIcon(item);
-        var arrow = handArrow(item);
-        var Ele = handMenuEle(item.children);
+      children: list.map((item, index) => {
+        const icon = handIcon(item);
+        const arrow = handArrow(item);
+        const Ele = handMenuEle(item.children);
         return jsx("div", Object.assign({
           className: handItemClass(item),
           onMouseLeave: mouseLeaveItem(),
@@ -251,66 +229,41 @@ var MenuItemPopper = function MenuItemPopper(props) {
     children: ContentMemo
   }));
 };
-var HorizontalMenu = function HorizontalMenu(props) {
-  var list = props.list,
-    _props$selectMenu2 = props.selectMenu,
-    selectMenu = _props$selectMenu2 === void 0 ? '' : _props$selectMenu2,
-    onClickMenu = props.onClickMenu,
-    className = props.className,
-    moreCustomize = props.moreCustomize;
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    openChild = _useState10[0],
-    setOpenChild = _useState10[1]; // 侧边展开子菜单
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    openChildIndex = _useState12[0],
-    setOpenChildIndex = _useState12[1]; // 侧边菜单第几项
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    childPos = _useState14[0],
-    setChildPos = _useState14[1]; // 侧边子菜单定位
-  var _useState15 = useState([]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    childList = _useState16[0],
-    setChildList = _useState16[1]; // 侧边子菜单数据
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    selectMenuCom = _useState18[0],
-    setSelectMenuCom = _useState18[1]; // 当前选中菜单id
-  var _useState19 = useState({}),
-    _useState20 = _slicedToArray(_useState19, 2),
-    idMenuLast = _useState20[0],
-    setIdMenuLast = _useState20[1]; // 最后一级菜单所有层级id
-  var _useState21 = useState({}),
-    _useState22 = _slicedToArray(_useState21, 2),
-    menuLevelMapping = _useState22[0],
-    setMenuLevelMapping = _useState22[1]; // 菜单层级mapping
-  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 () {
+const HorizontalMenu = props => {
+  const {
+    list,
+    selectMenu = '',
+    onClickMenu,
+    className,
+    moreCustomize
+  } = props;
+  const [openChild, setOpenChild] = useState(false); // 侧边展开子菜单
+  const [openChildIndex, setOpenChildIndex] = useState(null); // 侧边菜单第几项
+  const [childPos, setChildPos] = useState(null); // 侧边子菜单定位
+  const [childList, setChildList] = useState([]); // 侧边子菜单数据
+  const [selectMenuCom, setSelectMenuCom] = useState(''); // 当前选中菜单id
+  const [idMenuLast, setIdMenuLast] = useState({}); // 最后一级菜单所有层级id
+  const [menuLevelMapping, setMenuLevelMapping] = useState({}); // 菜单层级mapping
+  const [morePos, setMorePos] = useState(null); // 超出在原始位置
+  const [timerJson] = useState({});
+  const menuRef = useRef(null);
+  useEffect(() => {
     if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
   }, [selectMenu]);
-  useEffect(function () {
+  useEffect(() => {
     handList(list || []);
     changeSize();
     window.addEventListener('resize', changeSize);
-    return function () {
+    return () => {
       window.removeEventListener('resize', changeSize);
       clearTimeout(timerJson.timerResize);
     };
   }, [list]);
   /** 改变屏幕大小 */
-  var changeSize = function changeSize() {
+  const changeSize = () => {
     clearTimeout(timerJson.timerResize);
     handleCloseMore();
-    timerJson.timerResize = setTimeout(function () {
+    timerJson.timerResize = setTimeout(() => {
       setMorePos((list || []).length);
       handMultiline();
     }, 100);
@@ -319,13 +272,13 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 不换行 计算
    * @param index 下标
    */
-  var handMultiline = function handMultiline(index) {
+  const handMultiline = index => {
     if (index === null || index === 0) return;
     if (index === undefined) index = (list || []).length;
-    var boxDom = menuRef.current;
+    const boxDom = menuRef.current;
     if (!boxDom) return;
     if (boxDom.scrollHeight > boxDom.clientHeight) {
-      var num = Number(index) - 1;
+      const num = Number(index) - 1;
       // 超出
       setMorePos(num);
       handMultiline(num);
@@ -335,26 +288,26 @@ var HorizontalMenu = function HorizontalMenu(props) {
     }
   };
   // 关闭显示更多
-  var handleCloseMore = function handleCloseMore() {
+  const handleCloseMore = () => {
     //setOpenMoreCom(false);
   };
   /**
    * 处理菜单数据
    * @param dataArr {MenuChildrenProps} 当前菜单数据
    */
-  var handList = function handList(dataArr) {
-    var idMap = {}; // 所有id,层级map
-    var idMapLast = {}; // 最后一层菜单,层级map
-    var selectMenuLevelMapping = {}; // 菜单层级mapping
-    var recurrenceFunc = function recurrenceFunc(daraChildArr, parent, level) {
-      for (var i = 0, l = daraChildArr.length; i < l; i++) {
-        var item = daraChildArr[i];
-        var path = item.path;
-        var levelCom = level === undefined ? i : level;
+  const handList = dataArr => {
+    const idMap = {}; // 所有id,层级map
+    const idMapLast = {}; // 最后一层菜单,层级map
+    const selectMenuLevelMapping = {}; // 菜单层级mapping
+    const recurrenceFunc = (daraChildArr, parent, level) => {
+      for (let i = 0, l = daraChildArr.length; i < l; i++) {
+        const item = daraChildArr[i];
+        const path = item.path;
+        const levelCom = level === undefined ? i : level;
         if (parent) {
-          var idList = DeepClone(idMap[parent.path] || []);
+          const idList = DeepClone(idMap[parent.path] || []);
           idList.push(path);
-          idMap[path] = _toConsumableArray(idList);
+          idMap[path] = [...idList];
         } else {
           // 不存在parent,第一级
           idMap[path] = [path];
@@ -380,35 +333,33 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var mouseOverFunc = function mouseOverFunc(item, index) {
-    return function (e) {
-      var childListHand = [];
-      if (item.children && item.children.length > 0) {
-        childListHand = item.children;
-      }
-      if (childListHand.length === 0) return leaveFunc();
-      setOpenChildIndex(index);
-      setChildPos(e.target);
-      setChildList(childListHand);
-      setOpenChild(true);
-    };
+  const mouseOverFunc = (item, index) => e => {
+    let childListHand = [];
+    if (item.children && item.children.length > 0) {
+      childListHand = item.children;
+    }
+    if (childListHand.length === 0) return leaveFunc();
+    setOpenChildIndex(index);
+    setChildPos(e.target);
+    setChildList(childListHand);
+    setOpenChild(true);
   };
   /** 移出事件 */
-  var leaveFunc = function leaveFunc() {
+  const leaveFunc = () => {
     setOpenChild(false);
     setChildPos(null);
     setChildList([]);
     setOpenChildIndex(null);
   };
   /** 移出子菜单 */
-  var onMouseLeaveChild = function onMouseLeaveChild() {
+  const onMouseLeaveChild = () => {
     leaveFunc();
   };
   /**
    * 点击菜单
    * @param item {MenuChildrenProps | false} 当前项参数
    */
-  var clickMenu = function clickMenu(item) {
+  const clickMenu = item => {
     onClickMenu && onClickMenu(item);
   };
   /**
@@ -416,9 +367,9 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * @param item {MenuChildrenProps} 当前项参数
    * @param index {number} 下标
    */
-  var handClassItem = function handClassItem(item, index) {
-    var str = 'horizontal-menu-list-item';
-    var selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
+  const handClassItem = (item, index) => {
+    let str = 'horizontal-menu-list-item';
+    const selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' horizontal-menu-list-item-select';
     if (openChildIndex === index) str += ' horizontal-menu-list-item-hover';
     return str;
@@ -427,10 +378,10 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 处理icon
    * @param item {MenuChildrenProps} 当前项参数
    */
-  var handIcon = function handIcon(item) {
-    var icon = item.icon;
+  const handIcon = item => {
+    const icon = item.icon;
     if (icon) {
-      var iconCom = iconList[icon];
+      const iconCom = iconList[icon];
       if (iconCom) return iconCom();
       return icon;
     }
@@ -439,12 +390,12 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 处理箭头
    * @param item {MenuChildrenProps} 当前项参数
    */
-  var handArrow = function handArrow(item) {
-    var children = item.children;
+  const handArrow = item => {
+    const children = item.children;
     if (children && children.length > 0) return jsx(Down, {});
   };
   /** 收缩弹出框菜单 */
-  var MenuItemPopperMemo = useMemo(function () {
+  const MenuItemPopperMemo = useMemo(() => {
     return jsx(Fragment, {
       children: openChild && jsx(MenuItemPopper, {
         open: openChild,
@@ -462,8 +413,8 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'horizontal-menu-list';
+  const handClass = () => {
+    let str = 'horizontal-menu-list';
     if (className) str += " ".concat(className);
     return str;
   };
@@ -471,10 +422,10 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 移入更多
    * @param e 元素
    */
-  var mouseOverFuncMore = function mouseOverFuncMore(e) {
+  const mouseOverFuncMore = e => {
     clearTimeout(timerJson.leaveTimer);
-    var childListHand = [];
-    for (var i = Number(morePos), l = (list || []).length; i < l; i++) {
+    const childListHand = [];
+    for (let i = Number(morePos), l = (list || []).length; i < l; i++) {
       childListHand.push((list || [])[i]);
     }
     setOpenChildIndex(morePos);
@@ -486,14 +437,14 @@ var HorizontalMenu = function HorizontalMenu(props) {
    * 处理class
    * @return class名
    */
-  var handClassItemMore = function handClassItemMore() {
-    var str = ' horizontal-menu-list-item';
-    var selectMenuLevel = menuLevelMapping[selectMenuCom];
+  const handClassItemMore = () => {
+    let str = ' horizontal-menu-list-item';
+    const selectMenuLevel = menuLevelMapping[selectMenuCom];
     if (morePos !== null && morePos <= selectMenuLevel) str += ' horizontal-menu-list-item-select';
     if (openChildIndex === morePos) str += ' horizontal-menu-list-item-hover';
     return str;
   };
-  var onVisibleChange = function onVisibleChange(bol) {
+  const onVisibleChange = bol => {
     if (bol) return;
     leaveFunc();
   };
@@ -501,11 +452,11 @@ var HorizontalMenu = function HorizontalMenu(props) {
     className: handClass(),
     ref: menuRef
   }, {
-    children: [(list || []).map(function (item, index) {
+    children: [(list || []).map((item, index) => {
       if (morePos !== null && morePos <= index) return null;
-      var icon = handIcon(item);
-      var arrow = handArrow(item);
-      var Ele = handMenuEle(item.children);
+      const icon = handIcon(item);
+      const arrow = handArrow(item);
+      const Ele = handMenuEle(item.children);
       return jsx(Popover, Object.assign({
         visible: openChildIndex === index,
         trigger: 'hover',
@@ -515,7 +466,7 @@ var HorizontalMenu = function HorizontalMenu(props) {
         onVisibleChange: onVisibleChange
       }, {
         children: jsxs(Ele, Object.assign({
-          onClick: function onClick(e) {
+          onClick: e => {
             e.preventDefault();
             if (!item.children || item.children.length === 0) {
               clickMenu(item);
@@ -539,7 +490,7 @@ var HorizontalMenu = function HorizontalMenu(props) {
           }))]
         }))
       }), index);
-    }), function () {
+    }), (() => {
       if (morePos !== null && (list || []).length > morePos) {
         return jsx(Popover, Object.assign({
           visible: openChildIndex === morePos,
@@ -561,29 +512,31 @@ var HorizontalMenu = function HorizontalMenu(props) {
           }))
         }));
       }
-    }()]
+    })()]
   }));
 };
 
 /* 返回自助服务 */
-var BackSelfcare = function BackSelfcare(props) {
-  var icon = props.icon,
-    label = props.label,
-    render = props.render,
-    onClick = props.onClick,
-    className = props.className;
+const BackSelfcare = props => {
+  const {
+    icon,
+    label,
+    render,
+    onClick,
+    className
+  } = props;
   /**
    * 点击按钮
    * @param e 元素
    */
-  var onClickCom = function onClickCom(e) {
+  const onClickCom = e => {
     onClick && onClick(e);
   };
   /**
    * 处理内容
    * @return {ReactNode}
    */
-  var handContent = function handContent() {
+  const handContent = () => {
     return jsx(Button, Object.assign({
       startIcon: icon,
       variant: 'contained',
@@ -597,8 +550,8 @@ var BackSelfcare = function BackSelfcare(props) {
    * 处理class
    * @return {string} class名
    */
-  var handClass = function handClass() {
-    var str = 'back-btn';
+  const handClass = () => {
+    let str = 'back-btn';
     if (className) str += " ".concat(className);
     return str;
   };
@@ -611,18 +564,20 @@ 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;
+const Help = props => {
+  const {
+    icon,
+    label,
+    render,
+    onClick,
+    className
+  } = props;
   /**
    * 处理class
    * @return {string} class名
    */
-  var handClass = function handClass() {
-    var str = 'help-btn';
+  const handClass = () => {
+    let str = 'help-btn';
     if (className) str += " ".concat(className);
     return str;
   };
@@ -644,34 +599,25 @@ var Help = function Help(props) {
   });
 };
 /* 国际化 */
-var Language = function Language(props) {
-  var _props$language = props.language,
-    language = _props$language === void 0 ? [] : _props$language,
-    _props$selectLang = props.selectLang,
-    selectLang = _props$selectLang === void 0 ? '' : _props$selectLang,
-    onClick = props.onClick,
-    className = props.className,
-    render = props.render;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    langJson = _useState2[0],
-    setLangJson = _useState2[1]; // 国际化
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectItem = _useState4[0],
-    setSelectItem = _useState4[1]; // 选中对象
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showDialog = _useState6[0],
-    setShowDialog = _useState6[1]; // 显示弹出菜单
-  useEffect(function () {
-    var item = langJson[selectLang] || {};
+const Language = props => {
+  const {
+    language = [],
+    selectLang = '',
+    onClick,
+    className,
+    render
+  } = props;
+  const [langJson, setLangJson] = useState({}); // 国际化
+  const [selectItem, setSelectItem] = useState({}); // 选中对象
+  const [showDialog, setShowDialog] = useState(false); // 显示弹出菜单
+  useEffect(() => {
+    const item = langJson[selectLang] || {};
     setSelectItem(item);
   }, [selectLang, langJson]);
-  useEffect(function () {
-    var json = {};
-    for (var i = 0, l = language.length; i < l; i++) {
-      var item = language[i];
+  useEffect(() => {
+    const json = {};
+    for (let i = 0, l = language.length; i < l; i++) {
+      const item = language[i];
       if (item.value) json[item.value] = item;
     }
     setLangJson(json);
@@ -680,18 +626,16 @@ var Language = function Language(props) {
    * 点击语言下拉
    * @param item {LanguageItemProps} 当前项参数
    */
-  var clickLangItem = function clickLangItem(item) {
-    return function () {
-      onClick && onClick(item.value, item);
-      setShowDialog(false);
-    };
+  const clickLangItem = item => () => {
+    onClick && onClick(item.value, item);
+    setShowDialog(false);
   };
   /**
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'language';
+  const handClass = () => {
+    let str = 'language';
     if (className) str += " ".concat(className);
     if (showDialog) str += ' language-select';
     return str;
@@ -700,27 +644,27 @@ var Language = function Language(props) {
    * 是否显示
    * @param bol
    */
-  var onVisibleChange = function onVisibleChange(bol) {
+  const onVisibleChange = bol => {
     setShowDialog(bol);
   };
   /**
    * 下拉内容
    * */
-  var selectPopover = function selectPopover() {
+  const selectPopover = () => {
     /**
      * 处理每一项className
      * @param item {LanguageItemProps} 详情
      * @return class名
      */
-    var handMenuClassItem = function handMenuClassItem(item) {
-      var str = 'menu-popover-item';
+    const handMenuClassItem = item => {
+      let str = 'menu-popover-item';
       if (item.value === selectItem.value) str += ' menu-popover-item-select';
       return str;
     };
     return jsx("div", Object.assign({
       className: "menu-popover-box"
     }, {
-      children: language.map(function (item, index) {
+      children: language.map((item, index) => {
         return jsxs("div", Object.assign({
           className: handMenuClassItem(item),
           onClick: clickLangItem(item)
@@ -742,9 +686,9 @@ var Language = function Language(props) {
     }));
   };
   /** 内容 */
-  var itemLanguage = function itemLanguage() {
+  const itemLanguage = () => {
     /** 处理显示的内容 */
-    var handContent = function handContent() {
+    const handContent = () => {
       return jsxs(Fragment, {
         children: [selectItem.icon && jsx("span", Object.assign({
           className: "language-item-icon"
@@ -781,18 +725,19 @@ var Language = function Language(props) {
   });
 };
 /* 按钮组 */
-var BtnList = function BtnList(props) {
-  var _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    render = props.render,
-    className = props.className,
-    onClick = props.onClick;
+const BtnList = props => {
+  const {
+    list = [],
+    render,
+    className,
+    onClick
+  } = props;
   /**
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'btn-list';
+  const handClass = () => {
+    let str = 'btn-list';
     if (className) str += " ".concat(className);
     return str;
   };
@@ -801,19 +746,17 @@ var BtnList = function BtnList(props) {
    * @param item {BtnListItemProps} 详情
    * @param e 元素
    */
-  var clickItem = function clickItem(item) {
-    return function (e) {
-      onClick && onClick(item, e);
-    };
+  const clickItem = item => e => {
+    onClick && onClick(item, e);
   };
   /** 内容 */
-  var ContentMemo = useMemo(function () {
+  const ContentMemo = useMemo(() => {
     /**
      * 处理显示的内容
      * @param item {BtnListItemProps} 详情
      * @return {ReactNode}
      */
-    var handContent = function handContent(item) {
+    const handContent = item => {
       return jsxs(Fragment, {
         children: [item.icon && jsx("span", Object.assign({
           className: "btn-list-item-icon"
@@ -827,8 +770,8 @@ var BtnList = function BtnList(props) {
       });
     };
     return jsx(Fragment, {
-      children: list.map(function (item, index) {
-        var str = 'btn-list-item';
+      children: list.map((item, index) => {
+        let str = 'btn-list-item';
         if (item.sign) str += ' btn-list-item-sign';
         return jsx("div", Object.assign({
           className: str,
@@ -847,40 +790,36 @@ 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 () {
+const UserMenuChildren = props => {
+  const {
+    item,
+    selectValue,
+    selectId,
+    clickUserItem,
+    hoverId,
+    showDialog,
+    idMapLast,
+    onMouseEnter,
+    onMouseLeave
+  } = props;
+  const [showDialogCom, setShowDialogCom] = useState(false); // 显示弹出菜单
+  const [hoverIdCom, setHoverIdCom] = useState(''); // hover
+  useEffect(() => {
     if (showDialog === false) setShowDialogCom(false);
-    return function () {
+    return () => {
       setHoverIdCom('');
     };
   }, [showDialog]);
-  var onMouseEnterChildCom = function onMouseEnterChildCom(item) {
+  const onMouseEnterChildCom = item => {
     setHoverIdCom(item._paraui_menu_id);
   };
-  var onMouseLeaveChildCom = function onMouseLeaveChildCom() {};
+  const onMouseLeaveChildCom = () => {};
   /**
    * 处理每一项className
    * @return class名
    */
-  var handMenuClassItem = function handMenuClassItem() {
-    var str = 'menu-popover-item';
+  const handMenuClassItem = () => {
+    let 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';
@@ -890,19 +829,17 @@ var UserMenuChildren = function UserMenuChildren(props) {
   /**
    * 处理popover内容
    * */
-  var handPopoverContent = function handPopoverContent() {
+  const 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) {
+        children: item.children && item.children.map((item, index) => {
           return jsx(UserMenuChildren, {
             item: item,
             selectValue: selectValue,
             clickUserItem: clickUserItem,
-            onMouseEnter: function onMouseEnter() {
-              return onMouseEnterChildCom(item);
-            },
+            onMouseEnter: () => onMouseEnterChildCom(item),
             onMouseLeave: onMouseLeaveChildCom,
             hoverId: hoverIdCom,
             showDialog: showDialog,
@@ -917,7 +854,7 @@ var UserMenuChildren = function UserMenuChildren(props) {
    * 是否显示
    * @param bol
    */
-  var onVisibleChange = function onVisibleChange(bol) {
+  const onVisibleChange = bol => {
     setShowDialogCom(bol);
     if (!bol) setHoverIdCom('');
   };
@@ -957,55 +894,40 @@ var UserMenuChildren = function UserMenuChildren(props) {
   }));
 };
 /* 用户 */
-var User = function User(props) {
-  var img = props.img,
-    imgRender = props.imgRender,
-    label = props.label,
-    render = props.render,
-    className = props.className,
-    list = props.list,
-    onClick = props.onClick,
-    onClickMenu = props.onClickMenu,
-    selectValue = props.selectValue;
-  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({
+const User = props => {
+  const {
+    img,
+    imgRender,
+    label,
+    render,
+    className,
+    list,
+    onClick,
+    onClickMenu,
+    selectValue
+  } = props;
+  const [listCom, setListCom] = useState([]);
+  const [selectId, setSelectId] = useState(''); // 选中id
+  const [showDialog, setShowDialog] = useState(false); // 显示弹出菜单
+  const [hoverId, setHoverId] = useState(''); // hover
+  const [idMapLastCom, setIdMapLastCom] = useState({}); // idMap
+  const [timerJson] = useState({});
+  const posDom = useRef();
+  const constData = useRef({
     listJson: {}
   });
-  useEffect(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       clearTimeout(timerJson.timer);
     };
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     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]];
+  useEffect(() => {
+    const keys = Object.keys(constData.current.listJson);
+    for (let i = 0, l = keys.length; i < l; i++) {
+      const item = constData.current.listJson[keys[i]];
       if (item.value === selectValue) {
         setSelectId(item._paraui_menu_id);
         break;
@@ -1013,19 +935,19 @@ var User = function User(props) {
     }
   }, [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];
+  const handList = () => {
+    const json = {};
+    const idMap = {}; // 所有id,层级map
+    const idMapLast = {}; // 最后一层菜单,层级map
+    const recurrenceFunc = (daraChildArr, parent) => {
+      for (let i = 0, l = daraChildArr.length; i < l; i++) {
+        const item = daraChildArr[i];
         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] || []);
+          const idList = DeepClone(idMap[parent._paraui_menu_id] || []);
           idList.push(item._paraui_menu_id);
-          idMap[item._paraui_menu_id] = _toConsumableArray(idList);
+          idMap[item._paraui_menu_id] = [...idList];
         } else {
           // 不存在parent,第一级
           idMap[item._paraui_menu_id] = [item._paraui_menu_id];
@@ -1041,47 +963,45 @@ var User = function User(props) {
     };
     recurrenceFunc(list || []);
     constData.current.listJson = json;
-    setListCom(_toConsumableArray(list || []));
+    setListCom([...(list || [])]);
     setIdMapLastCom(idMapLast);
   };
   /**
    * 点击
    * @param e 元素
    */
-  var onClickCom = function onClickCom(e) {
+  const onClickCom = e => {
     onClick && onClick(e);
   };
   /**
    * 点击语言下拉
    * @param item {UserListProps} 当前项参数
    */
-  var clickUserItem = function clickUserItem(item) {
-    return function () {
-      if (item.children && item.children.length > 0) return;
-      onClickMenu && onClickMenu(item.value, item);
-      setShowDialog(false);
-      setHoverId('');
-    };
+  const clickUserItem = item => () => {
+    if (item.children && item.children.length > 0) return;
+    onClickMenu && onClickMenu(item.value, item);
+    setShowDialog(false);
+    setHoverId('');
   };
-  var onMouseEnterChild = function onMouseEnterChild(item) {
+  const onMouseEnterChild = item => {
     setHoverId(item._paraui_menu_id);
   };
-  var onMouseLeaveChild = function onMouseLeaveChild() {};
+  const onMouseLeaveChild = () => {};
   /**
    * 是否显示
    * @param bol
    */
-  var onVisibleChange = function onVisibleChange(bol) {
+  const onVisibleChange = bol => {
     setShowDialog(bol);
     if (!bol) setHoverId('');
   };
   /**
    * 下拉内容
    * */
-  var selectPopover = function selectPopover() {
+  const selectPopover = () => {
     if (listCom.length === 0) return null;
-    var handStyleWidth = function handStyleWidth() {
-      var styleJson = {};
+    const handStyleWidth = () => {
+      const styleJson = {};
       if (posDom && posDom.current) {
         styleJson.minWidth = "".concat(posDom.current.getBoundingClientRect().width, "px");
       }
@@ -1091,14 +1011,12 @@ var User = function User(props) {
       className: "menu-popover-box",
       style: handStyleWidth()
     }, {
-      children: listCom && listCom.map(function (item, index) {
+      children: listCom && listCom.map((item, index) => {
         return jsx(UserMenuChildren, {
           item: item,
           selectValue: selectValue,
           clickUserItem: clickUserItem,
-          onMouseEnter: function onMouseEnter() {
-            return onMouseEnterChild(item);
-          },
+          onMouseEnter: () => onMouseEnterChild(item),
           onMouseLeave: onMouseLeaveChild,
           hoverId: hoverId,
           showDialog: showDialog,
@@ -1112,7 +1030,7 @@ var User = function User(props) {
    * 处理内容
    * @return {ReactNode}
    */
-  var handContent = function handContent() {
+  const handContent = () => {
     return jsxs(Fragment, {
       children: [imgRender ? imgRender : img && jsx("img", {
         src: img,
@@ -1135,8 +1053,8 @@ var User = function User(props) {
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'logo';
+  const handClass = () => {
+    let str = 'logo';
     if (className) str += " ".concat(className);
     if (showDialog) str += ' logo-show-dialog';
     return str;
@@ -1160,42 +1078,43 @@ var User = function User(props) {
     }))
   });
 };
-var HorizontalMeunRight = function HorizontalMeunRight(props) {
-  var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    backSelfcareProps = props.backSelfcareProps,
-    languageProps = props.languageProps,
-    btnListProps = props.btnListProps,
-    userProps = props.userProps,
-    helpProps = props.helpProps,
-    render = props.render;
+const HorizontalMeunRight = props => {
+  const {
+    className = '',
+    backSelfcareProps,
+    languageProps,
+    btnListProps,
+    userProps,
+    helpProps,
+    render
+  } = props;
   /**
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'horizontal-meun-right';
+  const handClass = () => {
+    let str = 'horizontal-meun-right';
     if (className) str += " ".concat(className);
     return str;
   };
   /** 返回自助服务 */
-  var BackSelfcareMemo = useMemo(function () {
+  const BackSelfcareMemo = useMemo(() => {
     return backSelfcareProps && jsx(BackSelfcare, Object.assign({}, backSelfcareProps));
   }, [backSelfcareProps]);
   /** 帮助 */
-  var HelpMemo = useMemo(function () {
+  const HelpMemo = useMemo(() => {
     return helpProps && jsx(Help, Object.assign({}, helpProps));
   }, [helpProps]);
   /** language */
-  var LanguageMemo = useMemo(function () {
+  const LanguageMemo = useMemo(() => {
     return languageProps && jsx(Language, Object.assign({}, languageProps));
   }, [languageProps]);
   /** 按钮组 */
-  var BtnListMemo = useMemo(function () {
+  const BtnListMemo = useMemo(() => {
     return btnListProps && jsx(BtnList, Object.assign({}, btnListProps));
   }, [btnListProps]);
   /** UserMemo */
-  var UserMemo = useMemo(function () {
+  const UserMemo = useMemo(() => {
     return userProps && jsx(User, Object.assign({}, userProps));
   }, [userProps]);
   return jsx(Fragment, {
@@ -1207,25 +1126,27 @@ 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: $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(29, 33, 38);\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .label {\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\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(29, 33, 38);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  white-space: nowrap;\n  margin-left: 4px;\n  display: inline-block;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select {\n  /*& .language-item {\n    & > .language-item-icon {\n      & > svg {\n        color: $NP1;\n      }\n    }\n\n    & > .language-item-label {\n      color: $NP1;\n    }\n  }*/\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(29, 33, 38);\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(29, 33, 38);\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(29, 33, 38);\n  font-weight: 700;\n  white-space: nowrap;\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(29, 33, 38);\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(92, 101, 115);\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(92, 101, 115);\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 > .icon-right {\n  margin-left: 10px;\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: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\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(29, 33, 38);\n}\n.paraui-v4-page-header .horizontal-meun-right > .help-btn > .label {\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\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(29, 33, 38);\n}\n.paraui-v4-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  white-space: nowrap;\n  margin-left: 4px;\n  display: inline-block;\n}\n.paraui-v4-page-header .horizontal-meun-right > .language.language-select {\n  /*& .language-item {\n    & > .language-item-icon {\n      & > svg {\n        color: $NP1;\n      }\n    }\n\n    & > .language-item-label {\n      color: $NP1;\n    }\n  }*/\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(29, 33, 38);\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(29, 33, 38);\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(29, 33, 38);\n  font-weight: 700;\n  white-space: nowrap;\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(29, 33, 38);\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(92, 101, 115);\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: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 4px;\n  background-color: white;\n  border: 1px solid rgba(212, 218, 227, 0.4);\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(92, 101, 115);\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 > .icon-right {\n  margin-left: 10px;\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) {
-  var leftRender = props.leftRender,
-    menuListProps = props.menuListProps,
-    footerProps = props.footerProps,
-    selectMenu = props.selectMenu,
-    onClickMenu = props.onClickMenu,
-    className = props.className,
-    style = props.style;
-  var LeftMemo = useMemo(function () {
+const PageHeader = props => {
+  const {
+    leftRender,
+    menuListProps,
+    footerProps,
+    selectMenu,
+    onClickMenu,
+    className,
+    style
+  } = props;
+  const LeftMemo = useMemo(() => {
     return leftRender && jsx("div", Object.assign({
       className: "page-header-left"
     }, {
       children: leftRender
     }));
   }, [leftRender]);
-  var MenuMemo = useMemo(function () {
+  const MenuMemo = useMemo(() => {
     return props.menuListProps && jsx("div", Object.assign({
       className: "menu-box"
     }, {
@@ -1235,14 +1156,14 @@ var PageHeader = function PageHeader(props) {
       }))
     }));
   }, [menuListProps, selectMenu, onClickMenu]);
-  var FooterMemo = useMemo(function () {
+  const FooterMemo = useMemo(() => {
     return props.footerProps && jsx(HorizontalMeunRight, Object.assign({}, footerProps));
   }, [footerProps]);
   /**
    * 处理class
    */
-  var handClass = function handClass() {
-    var str = "".concat($prefixCls, "-page-header");
+  const handClass = () => {
+    let str = "".concat($prefixCls, "-page-header");
     if (className) str += " ".concat(className);
     return str;
   };