@para-ui/core 3.0.53 → 3.0.55

package/PageHeader/index.js

@@ -1,1050 +0,0 @@
-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 { 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 { Button } from '../Button/index.js';
-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 '../_verture/usePopupContainer-87febeb9.js';
-import '../_verture/typeof-498dd2b1.js';
-import '@para-ui/icons/LoadingF';
-import '@para-ui/icons/Forbid';
-import '../_verture/index-77f9e0fb.js';
-import 'rc-dropdown';
-import 'dayjs';
-import '../_verture/useFormatMessage-703f8b20.js';
-import '@para-ui/core/GlobalContext';
-
-/**
- * @description 处理菜单标签
- * 默认div,最后一级为a标签
- * */
-var handMenuEle = function handMenuEle(children) {
-  var Ele = 'div';
-  var lastOne = !children || children.length === 0;
-  if (lastOne) {
-    Ele = 'a';
-  }
-  return Ele;
-};
-/**
- * 处理菜单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;
-  if (lastOne) {
-    return {
-      href: href ? href : '#' + path
-    };
-  }
-  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 () {
-      clearTimeout(timerJson.leaveTimer);
-    };
-  }, []);
-  /**
-   * 移入
-   * @param item {MenuChildrenProps} 移入当前项参数
-   * @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;*/
-      (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);
-    };
-  };
-  /**
-   * 移出
-   * @param item {MenuChildrenProps} 移出当前项参数
-   * @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([]);
-      });
-    };
-  };
-  /**
-   * 点击菜单
-   * @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();
-    };
-  };
-  /**
-   * 处理icon
-   * @param item {MenuChildrenProps} 当前项参数
-   * @return {ReactNode} 返回图标元素
-   */
-  var handIcon = function handIcon(item) {
-    var icon = item.icon;
-    if (icon) {
-      var iconCom = iconList[icon];
-      if (iconCom) return iconCom();
-      return icon;
-    }
-  };
-  /**
-   * 处理箭头
-   * @param item {MenuChildrenProps} 当前项参数
-   * @return {ReactNode} 返回图标元素
-   */
-  var handArrow = function handArrow(item) {
-    var children = item.children;
-    if (children && children.length > 0) return jsx(Down, {});
-  };
-  /**
-   * 处理子菜单项class
-   * @param item {MenuChildrenProps} 当前项参数
-   * @return {string} 返回图标元素
-   */
-  var handItemClass = function handItemClass(item) {
-    var str = 'menu-item-popper-content-item';
-    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
-    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
-      str += ' menu-item-popper-content-item-select';
-    }
-    return str;
-  };
-  /**
-   * 处理MenuPopover样式类名
-   * @return {string} class名
-   */
-  var handPopoverClass = function handPopoverClass() {
-    var str = 'menu-item-popper';
-    if (level !== 1) str += ' menu-item-popper-child';
-    if (className) str += ' ' + className;
-    return str;
-  };
-  /**
-   * 子菜单
-   * @param item {MenuChildrenProps} 当前项参数
-   * @param index {number} 下标
-   * @return {ReactNode} 节点内容
-   */
-  var ChildMenu = useCallback(function (item, index) {
-    return jsx(Fragment, {
-      children: item.children && item.children.length > 0 && openChild === index && jsx(MenuItemPopper, {
-        open: openChild === index,
-        anchorEl: childPos,
-        list: childList,
-        idMenuLast: idMenuLast,
-        selectMenu: selectMenu,
-        onClickMenu: onClickMenu,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        level: level + 1
-      })
-    });
-  }, [openChild, childPos, childList, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
-  /** 内容 */
-  var ContentMemo = useMemo(function () {
-    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);
-        return jsx("div", Object.assign({
-          className: handItemClass(item),
-          onMouseLeave: MouseLeaveItem(),
-          onMouseEnter: mouseEnterItem(item, index)
-        }, {
-          children: jsxs(Ele, Object.assign({
-            className: "menu-item-popper-content-item-content",
-            onClick: clickMenu(item)
-          }, handHref(item.children, item.path, item.href), {
-            children: [icon && jsx("span", Object.assign({
-              className: "menu-item-icon"
-            }, {
-              children: icon
-            })), jsx("span", Object.assign({
-              className: "menu-item-label"
-            }, {
-              children: item.label
-            })), arrow && jsx("span", Object.assign({
-              className: "menu-item-arrow"
-            }, {
-              children: arrow
-            })), ChildMenu(item, index)]
-          }))
-        }), index);
-      })
-    }));
-  }, [list, onClickMenu, openChild, childPos, childList, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
-  return jsx("div", Object.assign({
-    className: handPopoverClass()
-  }, {
-    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('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];
-  useEffect(function () {
-    if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
-  }, [selectMenu]);
-  useEffect(function () {
-    handList(list || []);
-    changeSize();
-    window.addEventListener("resize", changeSize);
-    return function () {
-      window.removeEventListener("resize", changeSize);
-      clearTimeout(timerJson.timerResize);
-    };
-  }, [list]);
-  /** 改变屏幕大小 */
-  var changeSize = function changeSize() {
-    clearTimeout(timerJson.timerResize);
-    handleCloseMore();
-    timerJson.timerResize = setTimeout(function () {
-      setMorePos((list || []).length);
-      handMultiline();
-    }, 100);
-  };
-  /**
-   * 不换行 计算
-   * @param index 下标
-   */
-  var handMultiline = function handMultiline(index) {
-    if (index === null || index === 0) return;
-    if (index === undefined) index = (list || []).length;
-    var boxDom = document.querySelector('.' + classOne);
-    if (!boxDom) return;
-    if (boxDom.scrollHeight > boxDom.clientHeight) {
-      var num = Number(index) - 1;
-      // 超出
-      setMorePos(num);
-      handMultiline(num);
-    } else {
-      // 一行
-      if ((list || []).length <= index) handleCloseMore();
-    }
-  };
-  // 关闭显示更多
-  var handleCloseMore = function 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;
-        if (parent) {
-          var idList = DeepClone(idMap[parent.path] || []);
-          idList.push(path);
-          idMap[path] = _toConsumableArray(idList);
-        } else {
-          // 不存在parent,第一级
-          idMap[path] = [path];
-        }
-        if (item.children && item.children.length > 0) {
-          recurrenceFunc(item.children, item, levelCom);
-        } else {
-          // 不存在children,为点击菜单选项
-          idMapLast[path] = idMap[path];
-          selectMenuLevelMapping[path] = levelCom;
-        }
-      }
-    };
-    recurrenceFunc(dataArr);
-    //setJsonMenu(json);
-    setMenuLevelMapping(selectMenuLevelMapping);
-    setIdMenuLast(idMapLast);
-    //console.log(idMapLast, selectMenuLevelMapping)
-  };
-  /**
-   * 鼠标移入
-   * @param item {MenuChildrenProps} 移入当前项参数
-   * @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);
-    };
-  };
-  /** 移出事件 */
-  var leaveFunc = function leaveFunc() {
-    setOpenChild(false);
-    setChildPos(null);
-    setChildList([]);
-    setOpenChildIndex(null);
-  };
-  /** 移出子菜单 */
-  var onMouseLeaveChild = function onMouseLeaveChild() {
-    leaveFunc();
-  };
-  /**
-   * 点击菜单
-   * @param item {MenuChildrenProps | false} 当前项参数
-   */
-  var clickMenu = function clickMenu(item) {
-    onClickMenu && onClickMenu(item);
-  };
-  /**
-   * 处理classItem
-   * @param item {MenuChildrenProps} 当前项参数
-   * @param index {number} 下标
-   */
-  var handClassItem = function handClassItem(item, index) {
-    var str = 'horizontal-menu-list-item';
-    var 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;
-  };
-  /**
-   * 处理icon
-   * @param item {MenuChildrenProps} 当前项参数
-   */
-  var handIcon = function handIcon(item) {
-    var icon = item.icon;
-    if (icon) {
-      var iconCom = iconList[icon];
-      if (iconCom) return iconCom();
-      return icon;
-    }
-  };
-  /**
-   * 处理箭头
-   * @param item {MenuChildrenProps} 当前项参数
-   */
-  var handArrow = function handArrow(item) {
-    var children = item.children;
-    if (children && children.length > 0) return jsx(Down, {});
-  };
-  /** 收缩弹出框菜单 */
-  var MenuItemPopperMemo = useMemo(function () {
-    return jsx(Fragment, {
-      children: openChild && jsx(MenuItemPopper, {
-        open: openChild,
-        anchorEl: childPos,
-        list: childList,
-        idMenuLast: idMenuLast,
-        selectMenu: selectMenuCom,
-        onClickMenu: clickMenu,
-        onMouseLeave: onMouseLeaveChild,
-        level: 1
-      })
-    });
-  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson]);
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClass = function handClass() {
-    var str = 'horizontal-menu-list';
-    if (className) str += ' ' + className;
-    if (classOne) str += ' ' + classOne;
-    return str;
-  };
-  /**
-   * 移入更多
-   * @param e 元素
-   */
-  var mouseOverFuncMore = function mouseOverFuncMore(e) {
-    clearTimeout(timerJson.leaveTimer);
-    var childListHand = [];
-    for (var i = Number(morePos), l = (list || []).length; i < l; i++) {
-      childListHand.push((list || [])[i]);
-    }
-    setOpenChildIndex(morePos);
-    setChildPos(e.target);
-    setChildList(childListHand);
-    setOpenChild(true);
-  };
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClassItemMore = function handClassItemMore() {
-    var str = ' horizontal-menu-list-item';
-    var 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) {
-    if (bol) return;
-    leaveFunc();
-  };
-  return jsxs("div", Object.assign({
-    className: handClass()
-  }, {
-    children: [(list || []).map(function (item, index) {
-      if (morePos !== null && morePos <= index) return null;
-      var icon = handIcon(item);
-      var arrow = handArrow(item);
-      var Ele = handMenuEle(item.children);
-      return jsx(Popover, Object.assign({
-        visible: openChildIndex === index,
-        trigger: 'hover',
-        placement: "bottom-start",
-        content: MenuItemPopperMemo,
-        overlayClassName: $prefixCls + '-horizontal-menu-popper',
-        onVisibleChange: onVisibleChange
-      }, {
-        children: jsxs(Ele, Object.assign({
-          onClick: function onClick(e) {
-            e.preventDefault();
-            if (!item.children || item.children.length === 0) {
-              clickMenu(item);
-            }
-          },
-          onMouseEnter: mouseOverFunc(item, index),
-          className: handClassItem(item, index)
-        }, handHref(item.children, item.path, item.href), {
-          children: [icon && jsx("span", Object.assign({
-            className: "menu-item-icon"
-          }, {
-            children: icon
-          })), jsx("span", Object.assign({
-            className: "menu-item-label"
-          }, {
-            children: item.label
-          })), arrow && jsx("span", Object.assign({
-            className: "menu-item-arrow"
-          }, {
-            children: arrow
-          }))]
-        }))
-      }), index);
-    }), function () {
-      if (morePos !== null && (list || []).length > morePos) {
-        return jsx(Popover, Object.assign({
-          visible: openChildIndex === morePos,
-          trigger: 'hover',
-          placement: "bottom-start",
-          content: MenuItemPopperMemo,
-          overlayClassName: $prefixCls + '-horizontal-menu-popper',
-          onVisibleChange: onVisibleChange
-        }, {
-          children: jsx("div", Object.assign({
-            onMouseEnter: mouseOverFuncMore,
-            className: handClassItemMore()
-          }, {
-            children: moreCustomize ? moreCustomize : jsx("span", Object.assign({
-              className: "menu-item-icon"
-            }, {
-              children: jsx(More, {})
-            }))
-          }))
-        }));
-      }
-    }()]
-  }));
-};
-
-/* 返回自助服务 */
-var BackSelfcare = function BackSelfcare(props) {
-  var icon = props.icon,
-    label = props.label,
-    render = props.render,
-    onClick = props.onClick,
-    className = props.className;
-  /**
-   * 点击按钮
-   * @param e 元素
-   */
-  var onClickCom = function onClickCom(e) {
-    onClick && onClick(e);
-  };
-  /**
-   * 处理内容
-   * @return {ReactNode}
-   */
-  var handContent = function handContent() {
-    return jsx(Button, Object.assign({
-      startIcon: icon,
-      variant: "contained",
-      onClick: onClickCom
-    }, {
-      children: label
-    }));
-  };
-  /**
-   * 处理class
-   * @return {string} class名
-   */
-  var handClass = function handClass() {
-    var str = 'back-btn';
-    if (className) str += ' ' + className;
-    return str;
-  };
-  return jsx(Fragment, {
-    children: render ? render : jsx("div", Object.assign({
-      className: handClass()
-    }, {
-      children: handContent()
-    }))
-  });
-};
-/* 国际化 */
-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] || {};
-    setSelectItem(item);
-  }, [selectLang, langJson]);
-  useEffect(function () {
-    var json = {};
-    for (var i = 0, l = language.length; i < l; i++) {
-      var item = language[i];
-      if (item.value) json[item.value] = item;
-    }
-    setLangJson(json);
-  }, [language]);
-  /**
-   * 点击语言下拉
-   * @param item {LanguageItemProps} 当前项参数
-   */
-  var clickLangItem = function clickLangItem(item) {
-    return function () {
-      onClick && onClick(item.value, item);
-      setShowDialog(false);
-    };
-  };
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClass = function handClass() {
-    var str = 'language';
-    if (className) str += ' ' + className;
-    if (showDialog) str += ' language-select';
-    return str;
-  };
-  /**
-   * 是否显示
-   * @param bol
-   */
-  var onVisibleChange = function onVisibleChange(bol) {
-    setShowDialog(bol);
-  };
-  /**
-   * 下拉内容
-   * */
-  var selectPopover = function selectPopover() {
-    /**
-     * 处理每一项className
-     * @param item {LanguageItemProps} 详情
-     * @return class名
-     */
-    var handMenuClassItem = function handMenuClassItem(item) {
-      var 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) {
-        return jsxs("div", Object.assign({
-          className: handMenuClassItem(item),
-          onClick: clickLangItem(item)
-        }, {
-          children: [item.icon && jsx("span", Object.assign({
-            className: "icon"
-          }, {
-            children: item.icon
-          })), item.label && jsx("span", Object.assign({
-            className: "label",
-            style: {
-              marginLeft: '5px'
-            }
-          }, {
-            children: item.label
-          }))]
-        }), index);
-      })
-    }));
-  };
-  /** 内容 */
-  var itemLanguage = function itemLanguage() {
-    /** 处理显示的内容 */
-    var handContent = function handContent() {
-      return jsxs(Fragment, {
-        children: [selectItem.icon && jsx("span", Object.assign({
-          className: "language-item-icon"
-        }, {
-          children: selectItem.icon
-        })), selectItem.label && jsx("span", Object.assign({
-          className: "language-item-label"
-        }, {
-          children: selectItem.label
-        }))]
-      });
-    };
-    return jsx(Popover, Object.assign({
-      trigger: 'hover',
-      visible: showDialog,
-      placement: "bottom-start",
-      content: selectPopover(),
-      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
-      onVisibleChange: onVisibleChange
-    }, {
-      children: jsx("div", Object.assign({
-        className: "language-item"
-      }, {
-        children: handContent()
-      }))
-    }));
-  };
-  return jsx(Fragment, {
-    children: render ? render : jsx("div", Object.assign({
-      className: handClass()
-    }, {
-      children: itemLanguage()
-    }))
-  });
-};
-/* 按钮组 */
-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;
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClass = function handClass() {
-    var str = 'btn-list';
-    if (className) str += ' ' + className;
-    return str;
-  };
-  /**
-   * 点击按钮
-   * @param item {BtnListItemProps} 详情
-   * @param e 元素
-   */
-  var clickItem = function clickItem(item) {
-    return function (e) {
-      onClick && onClick(item, e);
-    };
-  };
-  /** 内容 */
-  var ContentMemo = useMemo(function () {
-    /**
-     * 处理显示的内容
-     * @param item {BtnListItemProps} 详情
-     * @return {ReactNode}
-     */
-    var handContent = function handContent(item) {
-      return jsxs(Fragment, {
-        children: [item.icon && jsx("span", Object.assign({
-          className: "btn-list-item-icon"
-        }, {
-          children: item.icon
-        })), item.label && jsx("span", Object.assign({
-          className: "btn-list-item-label"
-        }, {
-          children: item.label
-        }))]
-      });
-    };
-    return jsx(Fragment, {
-      children: list.map(function (item, index) {
-        var str = 'btn-list-item';
-        if (item.sign) str += ' btn-list-item-sign';
-        return jsx("div", Object.assign({
-          className: str,
-          onClick: clickItem(item)
-        }, {
-          children: handContent(item)
-        }), index);
-      })
-    });
-  }, [list]);
-  return jsx(Fragment, {
-    children: render ? render : jsx("div", Object.assign({
-      className: handClass()
-    }, {
-      children: ContentMemo
-    }))
-  });
-};
-/* 用户 */
-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 _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showDialog = _useState8[0],
-    setShowDialog = _useState8[1]; // 显示弹出菜单
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 1),
-    timerJson = _useState10[0];
-  var posDom = useRef();
-  useEffect(function () {
-    return function () {
-      clearTimeout(timerJson.timer);
-    };
-  }, []);
-  /**
-   * 点击
-   * @param e 元素
-   */
-  var onClickCom = function onClickCom(e) {
-    onClick && onClick(e);
-  };
-  /**
-   * 点击语言下拉
-   * @param item {UserListProps} 当前项参数
-   */
-  var clickUserItem = function clickUserItem(item) {
-    return function () {
-      onClickMenu && onClickMenu(item.value, item);
-      setShowDialog(false);
-    };
-  };
-  /**
-   * 是否显示
-   * @param bol
-   */
-  var onVisibleChange = function onVisibleChange(bol) {
-    setShowDialog(bol);
-  };
-  /**
-   * 下拉内容
-   * */
-  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;
-    };
-    var handStyleWidth = function handStyleWidth() {
-      var styleJson = {};
-      if (posDom && posDom.current) {
-        styleJson.width = posDom.current.getBoundingClientRect().width + 'px';
-      }
-      return styleJson;
-    };
-    return jsx("div", Object.assign({
-      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);
-      })
-    }));
-  };
-  /**
-   * 处理内容
-   * @return {ReactNode}
-   */
-  var handContent = function handContent() {
-    return jsxs(Fragment, {
-      children: [imgRender ? imgRender : img && jsx("img", {
-        src: img,
-        alt: ""
-      }), label && jsx("span", Object.assign({
-        className: "label"
-      }, {
-        children: label
-      })), list && list.length > 0 && jsx("span", Object.assign({
-        className: "arrow"
-      }, {
-        children: jsx(Down, {})
-      }))]
-    });
-  };
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClass = function handClass() {
-    var str = 'logo';
-    if (className) str += ' ' + className;
-    if (showDialog) str += ' logo-show-dialog';
-    return str;
-  };
-  return jsx(Fragment, {
-    children: render ? render : jsx(Popover, Object.assign({
-      trigger: 'hover',
-      visible: showDialog,
-      placement: "bottom-start",
-      content: selectPopover(),
-      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
-      onVisibleChange: onVisibleChange
-    }, {
-      children: jsx("div", Object.assign({
-        className: handClass(),
-        onClick: onClickCom,
-        ref: posDom
-      }, {
-        children: handContent()
-      }))
-    }))
-  });
-};
-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,
-    render = props.render;
-  /**
-   * 处理class
-   * @return class名
-   */
-  var handClass = function handClass() {
-    var str = 'horizontal-meun-right';
-    if (className) str += ' ' + className;
-    return str;
-  };
-  /** 返回自助服务 */
-  var BackSelfcareMemo = useMemo(function () {
-    return backSelfcareProps && jsx(BackSelfcare, Object.assign({}, backSelfcareProps));
-  }, [backSelfcareProps]);
-  /** language */
-  var LanguageMemo = useMemo(function () {
-    return languageProps && jsx(Language, Object.assign({}, languageProps));
-  }, [languageProps]);
-  /** 按钮组 */
-  var BtnListMemo = useMemo(function () {
-    return btnListProps && jsx(BtnList, Object.assign({}, btnListProps));
-  }, [btnListProps]);
-  /** UserMemo */
-  var UserMemo = useMemo(function () {
-    return userProps && jsx(User, Object.assign({}, userProps));
-  }, [userProps]);
-  return jsx(Fragment, {
-    children: render ? render : jsxs("div", Object.assign({
-      className: handClass()
-    }, {
-      children: [BackSelfcareMemo, 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}";
-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 () {
-    return leftRender && jsx("div", Object.assign({
-      className: 'page-header-left'
-    }, {
-      children: leftRender
-    }));
-  }, [leftRender]);
-  var MenuMemo = useMemo(function () {
-    return props.menuListProps && jsx("div", Object.assign({
-      className: 'menu-box'
-    }, {
-      children: jsx(HorizontalMenu, Object.assign({}, menuListProps, {
-        selectMenu: selectMenu,
-        onClickMenu: onClickMenu
-      }))
-    }));
-  }, [menuListProps, selectMenu, onClickMenu]);
-  var FooterMemo = useMemo(function () {
-    return props.footerProps && jsx(HorizontalMeunRight, Object.assign({}, footerProps));
-  }, [footerProps]);
-  /**
-   * 处理class
-   */
-  var handClass = function handClass() {
-    var str = $prefixCls + '-page-header';
-    if (className) str += ' ' + className;
-    return str;
-  };
-  return jsxs("div", Object.assign({
-    className: handClass(),
-    style: style
-  }, {
-    children: [LeftMemo, MenuMemo, FooterMemo]
-  }));
-};
-
-export { PageHeader, PageHeader as default };