@para-ui/core 3.0.55 → 3.0.56

package/PageHeader/index.js

@@ -0,0 +1,1050 @@
+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 };