@para-ui/core 2.2.9 → 3.0.1

package/PageHeader/index.js

@@ -1,14 +1,1170 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("@material-ui/core"),require("@para-ui/icons/Down"),require("@para-ui/icons"),require("@para-ui/icons/More"),require("@paraview/lib"),require("clsx"),require("@para-ui/icons/LoadingF"),require("@para-ui/icons/Forbid"),require("@para-ui/core/GlobalContext")):"function"==typeof define&&define.amd?define(["react","react-dom","@material-ui/core","@para-ui/icons/Down","@para-ui/icons","@para-ui/icons/More","@paraview/lib","clsx","@para-ui/icons/LoadingF","@para-ui/icons/Forbid","@para-ui/core/GlobalContext"],t):"object"==typeof exports?exports.ParaUI=t(require("react"),require("react-dom"),require("@material-ui/core"),require("@para-ui/icons/Down"),require("@para-ui/icons"),require("@para-ui/icons/More"),require("@paraview/lib"),require("clsx"),require("@para-ui/icons/LoadingF"),require("@para-ui/icons/Forbid"),require("@para-ui/core/GlobalContext")):e.ParaUI=t(e.react,e["react-dom"],e["@material-ui/core"],e["@para-ui/icons/Down"],e["@para-ui/icons"],e["@para-ui/icons/More"],e["@paraview/lib"],e.clsx,e["@para-ui/icons/LoadingF"],e["@para-ui/icons/Forbid"],e["@para-ui/core/GlobalContext"])}(self,(function(e,t,n,o,i,r,a,p,u,l,c){return function(){var s={8313:function(e,t,n){(t=n(3645)(!1)).push([e.id,'@keyframes loadingSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.paraui-button{min-width:auto;padding:0 16px;line-height:0;text-transform:none;border-radius:4px;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;font-weight:400;white-space:nowrap}.paraui-button-label{height:100%}.paraui-button-loading{pointer-events:none}.paraui-button-contained{color:#fff;background-color:#3666d6;box-shadow:none}.paraui-button-contained:hover{background-color:rgba(54,102,214,.8);box-shadow:none}.paraui-button-contained[disabled]{color:rgba(46,55,67,.4);background-color:rgba(171,176,185,.12);border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-button-contained[disabled]:hover{background-color:rgba(171,176,185,.12)}.paraui-button-contained .btn-icon{display:inline-flex;color:inherit}.paraui-button-contained .btn-icon svg{color:inherit;font-size:16px}.paraui-button-contained .btn-icon.start-icon{margin-left:3px}.paraui-button-contained .btn-icon.end-icon{margin-right:3px}.paraui-button-contained .btn-icon.loading-icon{margin-left:3px;animation:loadingSpin 1s infinite linear}.paraui-button-contained.paraui-button-dangerous{background-color:#eb6054}.paraui-button-contained.paraui-button-dangerous:hover{background-color:rgba(235,96,84,.8)}.paraui-button-outlined{color:rgba(46,55,67,.7);background-color:#fff;border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-button-outlined:hover{color:#3666d6;border-color:rgba(54,102,214,.2);background-color:#fff;box-shadow:none}.paraui-button-outlined[disabled]{color:rgba(46,55,67,.4);background-color:rgba(171,176,185,.12);border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-button-outlined[disabled]:hover{background-color:rgba(171,176,185,.12)}.paraui-button-outlined .btn-icon{display:inline-flex;color:inherit}.paraui-button-outlined .btn-icon svg{color:inherit;font-size:16px}.paraui-button-outlined .btn-icon.start-icon{margin-left:3px}.paraui-button-outlined .btn-icon.end-icon{margin-right:3px}.paraui-button-outlined .btn-icon.loading-icon{margin-left:3px;animation:loadingSpin 1s infinite linear}.paraui-button-outlined.paraui-button-dangerous{color:#eb6054;border-color:#eb6054}.paraui-button-outlined.paraui-button-dangerous:hover{color:rgba(235,96,84,.8);border-color:rgba(235,96,84,.8)}.paraui-button-text{color:rgba(46,55,67,.7);background-color:#fff;border:1px solid rgba(171,176,185,.4);box-shadow:none;color:#3666d6;background-color:rgba(0,0,0,0);border:none}.paraui-button-text:hover{color:rgba(54,102,214,.8);background-color:rgba(0,0,0,0);box-shadow:none}.paraui-button-text[disabled]{color:rgba(46,55,67,.4);background-color:rgba(0,0,0,0);border:none}.paraui-button-text[disabled]:hover{background-color:rgba(0,0,0,0)}.paraui-button-text .btn-icon{display:inline-flex;color:inherit}.paraui-button-text .btn-icon svg{color:inherit;font-size:16px}.paraui-button-text .btn-icon.start-icon{margin-left:3px}.paraui-button-text .btn-icon.end-icon{margin-right:3px}.paraui-button-text .btn-icon.loading-icon{margin-left:3px;animation:loadingSpin 1s infinite linear}.paraui-button-text.paraui-button-dangerous{color:#eb6054}.paraui-button-text.paraui-button-dangerous:hover{color:rgba(235,96,84,.8)}.paraui-button-large{height:36px}.paraui-button-medium{height:32px}.paraui-button-small{height:28px}.paraui-button--disabled{display:inline-block}.paraui-icon-button{padding:0;border-radius:4px}.paraui-icon-button-loading{pointer-events:none}.paraui-icon-button-loading .loading-icon{display:inline-flex;animation:loadingSpin 1s infinite linear}.paraui-icon-button-contained{color:#fff;background-color:#3666d6;box-shadow:none}.paraui-icon-button-contained:hover{background-color:rgba(54,102,214,.8);box-shadow:none}.paraui-icon-button-contained[disabled]{color:rgba(46,55,67,.4);background-color:rgba(171,176,185,.12);border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-icon-button-contained[disabled]:hover{background-color:rgba(171,176,185,.12)}.paraui-icon-button-contained svg{color:inherit;font-size:16px}.paraui-icon-button-contained.paraui-icon-button-dangerous{background-color:#eb6054}.paraui-icon-button-contained.paraui-icon-button-dangerous:hover{background-color:rgba(235,96,84,.8)}.paraui-icon-button-outlined{color:rgba(46,55,67,.7);background-color:#fff;border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-icon-button-outlined:hover{color:#3666d6;border-color:rgba(54,102,214,.2);box-shadow:none;background-color:#fff}.paraui-icon-button-outlined[disabled]{color:rgba(46,55,67,.4);background-color:rgba(171,176,185,.12);border:1px solid rgba(171,176,185,.4);box-shadow:none}.paraui-icon-button-outlined[disabled]:hover{background-color:rgba(171,176,185,.12)}.paraui-icon-button-outlined svg{color:inherit;font-size:16px}.paraui-icon-button-outlined.paraui-icon-button-dangerous{color:#eb6054;border-color:#eb6054}.paraui-icon-button-outlined.paraui-icon-button-dangerous:hover{color:rgba(235,96,84,.8);border-color:rgba(235,96,84,.8)}.paraui-icon-button-text{color:#3666d6}.paraui-icon-button-text:hover{color:rgba(54,102,214,.8);background-color:rgba(0,0,0,0)}.paraui-icon-button-text[disabled]{color:rgba(46,55,67,.4)}.paraui-icon-button-text[disabled]:hover{background-color:rgba(0,0,0,0)}.paraui-icon-button-text svg{color:inherit}.paraui-icon-button-text.paraui-icon-button-dangerous{color:#eb6054}.paraui-icon-button-text.paraui-icon-button-dangerous:hover{color:rgba(235,96,84,.8)}.paraui-icon-button-text.paraui-icon-button-large{width:auto;height:auto}.paraui-icon-button-text.paraui-icon-button-large svg{font-size:28px}.paraui-icon-button-text.paraui-icon-button-medium{width:auto;height:auto}.paraui-icon-button-text.paraui-icon-button-medium svg{font-size:24px}.paraui-icon-button-text.paraui-icon-button-small{width:auto;height:auto}.paraui-icon-button-text.paraui-icon-button-small svg{font-size:20px}.paraui-icon-button-large{width:36px;height:36px}.paraui-icon-button-medium{width:32px;height:32px}.paraui-icon-button-small{width:28px;height:28px}.paraui-button-split{display:inline-block}.paraui-button-split .paraui-button-split--active{color:#3666d6;box-shadow:none}.paraui-button-split-list{padding:8px 0;margin:8px 0;border-radius:4px;box-shadow:0px 2px 8px 0px rgba(171,176,185,.4);background-color:#fff}.paraui-button-split-list ul .split-li{min-width:140px;padding:11px 12px;color:#2e3743;font-size:14px;line-height:1;cursor:pointer;transition:background-color .3s,color .3s}.paraui-button-split-list ul .split-li:hover{background-color:rgba(171,176,185,.12)}.paraui-button-split-list ul .split-li.split-li--active{color:#3666d6}.paraui-button-split-list ul .split-li.split-li--active:hover{background-color:rgba(171,176,185,.12)}.paraui-button-split-list ul .split-li.split-li--disabled{color:rgba(46,55,67,.4);cursor:not-allowed}.paraui-button-split-list ul .split-li.split-li--disabled:hover{background-color:#fff}.paraui-button-split-list ul .split-li-group:not(:first-child){position:relative;margin-top:16px}.paraui-button-split-list ul .split-li-group:not(:first-child):before{content:"";position:absolute;top:-8px;left:8px;right:8px;border-top:1px solid rgba(171,176,185,.2)}',""]),e.exports=t},1027:function(e,t,n){(t=n(3645)(!1)).push([e.id,'.paraui-page-header{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;font-weight:400;display:flex;justify-content:space-between;box-shadow:0px 2px 8px 0px rgba(171,176,185,.4);padding:0 16px;color:rgba(46,55,67,.7)}.paraui-page-header>.paraui-page-header-left{white-space:nowrap;display:flex;justify-content:left;align-items:center}.paraui-page-header>.menu-box{width:100%}.paraui-page-header>.menu-box>.horizontal-menu-list{width:100%;height:100%;line-height:0;overflow:hidden}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item{padding:0 20px;height:100%;display:flex;align-items:center;position:relative;white-space:nowrap;float:left;cursor:pointer}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item:after{position:absolute;left:0;top:0;content:"";z-index:1}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item:hover{background-color:rgba(171,176,185,.12)}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item:hover>.menu-item-icon>svg{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item:hover>.menu-item-label{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item:hover>.menu-item-arrow{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item>.menu-item-icon>svg{font-size:18px;color:rgba(46,55,67,.7);margin-right:5px}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item>.menu-item-label{font-size:14px;color:rgba(46,55,67,.7);white-space:nowrap}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item>.menu-item-arrow>svg{font-size:18px;transition:all .3s;color:rgba(46,55,67,.7);margin-left:2px}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-select>.menu-item-icon>svg{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-select>.menu-item-label{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-select>.menu-item-arrow{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-hover{background-color:rgba(171,176,185,.12)}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-hover>.menu-item-icon>svg{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-hover>.menu-item-label{color:#3666d6}.paraui-page-header>.menu-box>.horizontal-menu-list>.horizontal-menu-list-item.horizontal-menu-list-item-hover>.menu-item-arrow{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right{height:100%;display:flex}.paraui-page-header .paraui-horizontal-meun-right>.back-btn{padding:0 12px;height:100%;display:flex;align-items:center}.paraui-page-header .paraui-horizontal-meun-right>.back-btn>button{width:100%;white-space:nowrap;padding:0 10px 0 14px;line-height:14px;font-size:14px}.paraui-page-header .paraui-horizontal-meun-right>.back-btn>button svg{color:#fff}.paraui-page-header .paraui-horizontal-meun-right>.language{height:100%}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item{display:flex;padding:0 12px;cursor:pointer;align-items:center;height:100%;position:relative}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item:hover{background-color:rgba(171,176,185,.12)}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item:hover>.language-item-icon>svg{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item:hover>.language-item-label{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item:hover>.language-item-arrow>svg{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item>.language-item-icon{display:flex;align-items:center}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item>.language-item-icon>svg{font-size:18px;color:rgba(46,55,67,.7)}.paraui-page-header .paraui-horizontal-meun-right>.language .language-item>.language-item-label{font-size:14px;line-height:14px;color:rgba(46,55,67,.7);white-space:nowrap;margin-left:5px;display:inline-block}.paraui-page-header .paraui-horizontal-meun-right>.language.language-select .language-item>.language-item-icon>svg{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.language.language-select .language-item>.language-item-label{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.btn-list{display:flex;height:100%}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item{display:flex;padding:0 12px;cursor:pointer;align-items:center}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item.btn-list-item-sign>.btn-list-item-icon{position:relative}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item.btn-list-item-sign>.btn-list-item-icon:after{content:"";position:absolute;top:0;right:0;width:4px;height:4px;border-radius:50%;background-color:#eb6054}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item:hover{background-color:rgba(171,176,185,.12)}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item:hover>.btn-list-item-icon>svg{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item:hover>.btn-list-item-label{color:#3666d6}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item>.btn-list-item-icon{display:flex;justify-content:center;align-items:center}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item>.btn-list-item-icon>svg{font-size:18px;color:rgba(46,55,67,.7);position:relative}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item>.btn-list-item-icon>svg:after{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.paraui-page-header .paraui-horizontal-meun-right>.btn-list>.btn-list-item>.btn-list-item-label{font-size:14px;line-height:14px;color:rgba(46,55,67,.7);width:100%;white-space:nowrap;margin-left:5px}.paraui-page-header .paraui-horizontal-meun-right>.logo{display:flex;padding:0 12px;align-items:center;height:100%;cursor:pointer}.paraui-page-header .paraui-horizontal-meun-right>.logo.logo-show-dialog{background-color:rgba(171,176,185,.12)}.paraui-page-header .paraui-horizontal-meun-right>.logo:hover{background-color:rgba(171,176,185,.12)}.paraui-page-header .paraui-horizontal-meun-right>.logo>img{height:36px;width:36px;border-radius:50%}.paraui-page-header .paraui-horizontal-meun-right>.logo>.label{font-size:14px;line-height:14px;color:rgba(46,55,67,.7);font-weight:700;white-space:nowrap;margin-left:12px;max-width:160px;text-overflow:ellipsis;overflow:hidden}.paraui-page-header .paraui-horizontal-meun-right>.logo>.arrow{display:flex;justify-content:center;align-items:center;margin-left:5px;color:rgba(46,55,67,.7);font-size:18px}.paraui-page-header .paraui-horizontal-meun-right>.logo>.arrow>svg{color:rgba(46,55,67,.7);font-size:18px}.paraui-horizontal-menu-popper{padding-top:8px}.paraui-horizontal-menu-popper>.menu-item-popper-content>.menu-item-popper-content-item:first-child:after{width:100%;height:100%;content:"";position:absolute;left:0;top:-5px;z-index:-1}.paraui-horizontal-menu-popper .menu-item-popper,.paraui-horizontal-menu-popper.menu-item-popper{z-index:10}.paraui-horizontal-menu-popper .menu-item-popper>.menu-item-popper-content,.paraui-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content{box-shadow:0px 2px 8px 0px rgba(171,176,185,.4);border-radius:4px;background-color:#fff;color:rgba(46,55,67,.7)}.paraui-horizontal-menu-popper .menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item,.paraui-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item{position:relative}.paraui-horizontal-menu-popper .menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content,.paraui-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content{width:140px;height:40px;line-height:40px;padding:0 10px;display:flex;cursor:pointer;align-items:center}.paraui-horizontal-menu-popper .menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content:hover,.paraui-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content:hover{background-color:rgba(171,176,185,.12)}.paraui-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-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{color:#3666d6}.paraui-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-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{color:#3666d6}.paraui-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-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{color:#3666d6}.paraui-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-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content>.menu-item-icon{display:flex;justify-content:center;align-items:center;margin-right:5px}.paraui-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-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{font-size:20px;color:rgba(46,55,67,.7)}.paraui-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-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{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.paraui-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-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content>.menu-item-label{font-size:14px;color:rgba(46,55,67,.7);width:100%;white-space:nowrap;text-align:left}.paraui-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-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content>.menu-item-arrow{display:flex;justify-content:center;align-items:center}.paraui-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-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{font-size:20px;transition:all .3s;color:rgba(46,55,67,.7);transform:rotate(270deg);position:relative}.paraui-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-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{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.paraui-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-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{opacity:0}.paraui-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-horizontal-menu-popper.menu-item-popper>.menu-item-popper-content>.menu-item-popper-content-item>.menu-item-popper-content-item-content>.menu-item-popper{padding-left:5px}.paraui-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-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{color:#3666d6}.paraui-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-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{color:#3666d6}.paraui-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-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{color:#3666d6}.paraui-horizontal-menu-popper .menu-item-popper{position:absolute;transform:none !important;left:100% !important;top:0}.paraui-horizontal-meun-right-popover{padding-top:5px;z-index:10}.paraui-horizontal-meun-right-popover>.menu-popover-box{box-shadow:0px 2px 8px 0px rgba(171,176,185,.4);border-radius:4px;background-color:#fff;color:rgba(46,55,67,.7)}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item{height:36px;line-height:36px;padding:0 10px;display:flex;cursor:pointer;align-items:center}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item:hover{background-color:rgba(171,176,185,.12)}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item:hover>.icon>svg{color:#3666d6}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item:hover>.label{color:#3666d6}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item>.icon{display:flex;justify-content:center;align-items:center}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item>.icon>svg{font-size:18px;color:rgba(46,55,67,.7)}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item>.icon>svg:after{position:absolute;left:0;top:0;width:100%;height:100%;content:"";z-index:1}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item>.label{font-size:14px;color:rgba(46,55,67,.7);width:100%;white-space:nowrap;text-align:left}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item.menu-popover-item-select>.icon>svg{color:#3666d6}.paraui-horizontal-meun-right-popover>.menu-popover-box>.menu-popover-item.menu-popover-item-select>.label{color:#3666d6}',""]),e.exports=t},9929:function(e,t,n){(t=n(3645)(!1)).push([e.id,".paraui-tooltip>div{padding-left:12px;padding-right:12px;font-size:14px;font-weight:400;color:#fff;background-color:rgba(46,55,67,.7)}.paraui-tooltip-left-right>div{margin:0 8px}.paraui-tooltip-top-bottom>div{margin:8px 0}",""]),e.exports=t},3645:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=(a=o,p=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(p),"/*# ".concat(u," */")),r=o.sources.map((function(e){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(e," */")}));return[n].concat(r).concat([i]).join("\n")}var a,p,u;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(o)for(var r=0;r<this.length;r++){var a=this[r][0];null!=a&&(i[a]=!0)}for(var p=0;p<e.length;p++){var u=[].concat(e[p]);o&&i[u[0]]||(n&&(u[2]?u[2]="".concat(n," and ").concat(u[2]):u[2]=n),t.push(u))}},t}},7418:function(e){"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,r){for(var a,p,u=i(e),l=1;l<arguments.length;l++){for(var c in a=Object(arguments[l]))n.call(a,c)&&(u[c]=a[c]);if(t){p=t(a);for(var s=0;s<p.length;s++)o.call(a,p[s])&&(u[p[s]]=a[p[s]])}}return u}},5251:function(e,t,n){"use strict";
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */n(7418);var o=n(8156),i=60103;if(t.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var r=Symbol.for;i=r("react.element"),t.Fragment=r("react.fragment")}var a=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p=Object.prototype.hasOwnProperty,u={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var o,r={},l=null,c=null;for(o in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)p.call(t,o)&&!u.hasOwnProperty(o)&&(r[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===r[o]&&(r[o]=t[o]);return{$$typeof:i,type:e,key:l,ref:c,props:r,_owner:a.current}}t.jsx=l,t.jsxs=l},5893:function(e,t,n){"use strict";e.exports=n(5251)},5822:function(e,t,n){var o=n(3379),i=n(8313);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.id,i,""]]);var r={insert:("body","body"),singleton:!1};o(i,r);e.exports=i.locals||{}},1132:function(e,t,n){var o=n(3379),i=n(1027);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.id,i,""]]);var r={insert:("body","body"),singleton:!1};o(i,r);e.exports=i.locals||{}},2310:function(e,t,n){var o=n(3379),i=n(9929);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.id,i,""]]);var r={insert:("body","body"),singleton:!1};o(i,r);e.exports=i.locals||{}},3379:function(e,t,n){"use strict";var o,i=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},r=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function p(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function u(e,t){for(var n={},o=[],i=0;i<e.length;i++){var r=e[i],u=t.base?r[0]+t.base:r[0],l=n[u]||0,c="".concat(u," ").concat(l);n[u]=l+1;var s=p(c),m={css:r[1],media:r[2],sourceMap:r[3]};-1!==s?(a[s].references++,a[s].updater(m)):a.push({identifier:c,updater:b(m,t),references:1}),o.push(c)}return o}function l(e){var t=document.createElement("style"),o=e.attributes||{};if(void 0===o.nonce){var i=n.nc;i&&(o.nonce=i)}if(Object.keys(o).forEach((function(e){t.setAttribute(e,o[e])})),"function"==typeof e.insert)e.insert(t);else{var a=r(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var c,s=(c=[],function(e,t){return c[e]=t,c.filter(Boolean).join("\n")});function m(e,t,n,o){var i=n?"":o.media?"@media ".concat(o.media," {").concat(o.css,"}"):o.css;if(e.styleSheet)e.styleSheet.cssText=s(t,i);else{var r=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(r,a[t]):e.appendChild(r)}}function d(e,t,n){var o=n.css,i=n.media,r=n.sourceMap;if(i?e.setAttribute("media",i):e.removeAttribute("media"),r&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}var h=null,g=0;function b(e,t){var n,o,i;if(t.singleton){var r=g++;n=h||(h=l(t)),o=m.bind(null,n,r,!1),i=m.bind(null,n,r,!0)}else n=l(t),o=d.bind(null,n,t),i=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else i()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=i());var n=u(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var o=0;o<n.length;o++){var i=p(n[o]);a[i].references--}for(var r=u(e,t),l=0;l<n.length;l++){var c=p(n[l]);0===a[c].references&&(a[c].updater(),a.splice(c,1))}n=r}}}},7896:function(e,t,n){"use strict";n.d(t,{default:function(){return y}});var o=n(5893),i=n(8156),r=n(670),a=n(5744),p=n.n(a),u=n(2788),l=n.n(u),c=n(3835),s=n.n(c),m=n(7371),d=n(2396),h=n.n(d),g=n(3054),b={zh:{moreActions:"更多操作"},en:{moreActions:"More actions"}},f=function(){return f=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},f.apply(this,arguments)};n(5822);var v=function(){return v=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},v.apply(this,arguments)},x=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n},z=function(e){var t=e.variant,n=void 0===t?"contained":t,a=e.size,u=void 0===a?"large":a,c=e.className,d=e.disabled,h=void 0!==d&&d,g=e.children,b=e.startIcon,f=e.endIcon,z=e.loading,y=void 0!==z&&z,j=e.toolTipTitle,w=void 0===j?"":j,N=e.TooltipProps,k=e.danger,S=void 0!==k&&k,M=x(e,["variant","size","className","disabled","children","startIcon","endIcon","loading","toolTipTitle","TooltipProps","danger"]),O=(0,i.useState)(!1),T=O[0],P=O[1],C=function(e){if(!T)return"start"===e&&b?(0,o.jsx)("span",v({className:p()("btn-icon","start-icon")},{children:b})):"end"===e&&f?(0,o.jsx)("span",v({className:p()("btn-icon","end-icon")},{children:f})):null;if("object"==typeof y){var t=y.delay||0;setTimeout((function(){return P(!1)}),t)}return"start"===e?(0,o.jsx)("span",v({className:"btn-icon loading-icon"},{children:(0,o.jsx)(l(),{})})):null},E=(0,o.jsx)(r.Button,v({},M,{color:"default",variant:"contained",disabled:h,disableRipple:!0,disableElevation:!0,className:p()("paraui-button",c,"paraui-button-".concat(n),"paraui-button-".concat(u),T&&"paraui-button-loading",S&&!h&&"paraui-button-dangerous"),classes:{label:"paraui-button-label"},startIcon:C("start"),endIcon:C("end")},{children:g}));return(0,i.useEffect)((function(){P(!!y)}),[y]),h&&w?(0,o.jsx)(m.default,v({},N,{title:function(){if(h&&w){return(0,o.jsxs)("span",{children:[(0,o.jsx)(s(),{style:{marginRight:"4px",fontSize:"11px",color:"inherit"}}),w]})}return w}()},{children:(0,o.jsx)("span",v({className:"paraui-button--disabled"},{children:E}))})):E};z.IconButton=function(e){var t=e.variant,n=void 0===t?"contained":t,a=e.size,u=void 0===a?"large":a,c=e.toolTipTitle,d=void 0===c?"":c,h=e.children,g=e.className,b=e.disabled,f=void 0!==b&&b,z=e.loading,y=void 0!==z&&z,j=e.TooltipProps,w=e.danger,N=void 0!==w&&w,k=x(e,["variant","size","toolTipTitle","children","className","disabled","loading","TooltipProps","danger"]),S=(0,i.useState)(!1),M=S[0],O=S[1],T=(0,o.jsx)(r.IconButton,v({},k,{disabled:f,disableRipple:!0,className:p()("paraui-icon-button",g,"paraui-icon-button-".concat(n),"paraui-icon-button-".concat(u),M&&"paraui-icon-button-loading",N&&!f&&"paraui-icon-button-dangerous")},{children:function(){if(!M)return h;if("object"==typeof y){var e=y.delay||0;setTimeout((function(){return O(!1)}),e)}return(0,o.jsx)("span",v({className:"loading-icon"},{children:(0,o.jsx)(l(),{})}))}()}));return(0,i.useEffect)((function(){O(!!y)}),[y]),d?(0,o.jsx)(m.default,v({},j,{title:function(){if(f&&d){return(0,o.jsxs)("span",{children:[(0,o.jsx)(s(),{style:{marginRight:"4px",fontSize:"11px",color:"inherit"}}),d]})}return d}()},{children:f?(0,o.jsx)("span",v({className:"paraui-button--disabled"},{children:T})):T}),+M):T},z.SplitButton=function(e){var t=e.buttonText,n=e.options,a=void 0===n?[]:n,u=e.className,l=e.popperClassName,c=e.style,s=e.popperStyle,m=e.disabled,d=void 0!==m&&m,v=e.onClick,x=e.optionRender,z=e.placement,j=void 0===z?"bottom-end":z,w=e.buttonProps,N=e.iconButton,k=void 0!==N&&N,S=(0,g.Z)("Button",b),M=(0,i.useState)(!1),O=M[0],T=M[1],P=(0,i.useRef)(null),C=(0,i.useRef)(),E=(0,i.useRef)(),L=(0,i.useState)(),F=L[0],_=L[1],I=function(e,t,n){var o;e.disabled?n.stopPropagation():(_(t),T(!1),null===(o=C.current)||void 0===o||o.classList.remove("paraui-button-split--active"),null==v||v(e,n))},R=function(e){e.stopPropagation(),q();var t=e.currentTarget;E.current=window.setTimeout((function(){C.current=t,t.classList.add("paraui-button-split--active"),T(!0)}),150)},q=function(){E.current&&(clearTimeout(E.current),E.current=null)},B=function(e){var t,n;(null===(t=P.current)||void 0===t?void 0:t.contains(e.target))||(T(!1),null===(n=C.current)||void 0===n||n.classList.remove("paraui-button-split--active"))},A=function(){return(0,o.jsx)("div",f({className:"paraui-button-split-list"},{children:(0,o.jsx)("ul",{children:a.map((function(e,t){return Array.isArray(e)?function(e,t){return(0,o.jsx)("li",f({className:"split-li-group"},{children:e.map((function(e,n){var i="".concat(t,"-").concat(n);return(0,o.jsx)("div",f({className:p()("split-li",i===F&&"split-li--active",e.disabled&&"split-li--disabled"),onClick:function(t){return I(e,i,t)}},{children:(null==x?void 0:x(e))||e.label}),i)}))}),t)}(e,t):(0,o.jsx)("li",f({className:p()("split-li",t===F&&"split-li--active",e.disabled&&"split-li--disabled"),onClick:function(n){return I(e,t,n)}},{children:(null==x?void 0:x(e))||e.label}),t)}))})}))};return(0,o.jsxs)("div",f({className:p()("paraui-button-split",u),ref:P,style:c,onMouseLeave:function(e){var t;e.stopPropagation(),q(),null===(t=e.currentTarget.firstElementChild)||void 0===t||t.classList.remove("paraui-button-split--active"),T(!1)}},{children:[k?(0,o.jsx)(y.IconButton,f({variant:"text",size:"small",disabled:d},w,{onMouseEnter:R},{children:null!=t?t:S({id:"moreActions"})})):(0,o.jsx)(y,f({variant:"outlined",size:"large",startIcon:(0,o.jsx)(h(),{}),disabled:d},w,{onMouseEnter:R},{children:null!=t?t:S({id:"moreActions"})})),(0,o.jsx)(r.Popper,f({open:O,anchorEl:P.current,transition:!0,placement:j,style:f({zIndex:1500},s),className:p()("paraui-button-split-popper",l)},{children:function(e){var t=e.TransitionProps;e.placement;return(0,o.jsx)(r.Grow,f({},t,{children:(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(r.ClickAwayListener,f({onClickAway:B},{children:A()}))})}))}}))]}))};var y=z},3054:function(e,t,n){"use strict";var o=n(8156),i=n.n(o),r=n(5395),a=n.n(r);t.Z=function(e,t){var n=i().useContext(a()).intlFormat;return t.zh_CN=t.zh,t.en_US=t.en,n&&n(e,t)}},7371:function(e,t,n){"use strict";var o=n(5893),i=n(670),r=n(5744),a=n.n(r),p=(n(2310),function(){return p=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},p.apply(this,arguments)}),u=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};t.default=function(e){var t,n=e.placement,r=void 0===n?"top-start":n,l=e.className,c=e.arrow,s=void 0===c||c,m=e.PopperProps,d=e.boundariesElement,h=void 0===d?"scrollParent":d,g=u(e,["placement","className","arrow","PopperProps","boundariesElement"]),b=p(p({},e.classes),{popper:a()("paraui-tooltip",l,null===(t=e.classes)||void 0===t?void 0:t.popper,{"paraui-tooltip-left-right":(null==r?void 0:r.includes("left"))||(null==r?void 0:r.includes("right")),"paraui-tooltip-top-bottom":(null==r?void 0:r.includes("top"))||(null==r?void 0:r.includes("bottom"))})});return(0,o.jsx)(i.Tooltip,p({},g,{enterTouchDelay:0,arrow:s,placement:r,classes:b,PopperProps:p(p({},m),{modifiers:{preventOverflow:{boundariesElement:h}}})}))}},670:function(e){"use strict";e.exports=n},5395:function(e){"use strict";e.exports=c},1197:function(e){"use strict";e.exports=i},2396:function(e){"use strict";e.exports=o},3835:function(e){"use strict";e.exports=l},2788:function(e){"use strict";e.exports=u},7037:function(e){"use strict";e.exports=r},8543:function(e){"use strict";e.exports=a},5744:function(e){"use strict";e.exports=p},8156:function(t){"use strict";t.exports=e},7111:function(e){"use strict";e.exports=t}},m={};function d(e){var t=m[e];if(void 0!==t)return t.exports;var n=m[e]={id:e,exports:{}};return s[e](n,n.exports,d),n.exports}d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,{a:t}),t},d.d=function(e,t){for(var n in t)d.o(t,n)&&!d.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.nc=void 0;var h={};return function(){"use strict";d.r(h),d.d(h,{PageHeader:function(){return N},default:function(){return k}});var e=d(5893),t=d(8156),n=d(7111),o=d(670),i=d(2396),r=d.n(i),a=d(1197),p=d(7037),u=d.n(p),l=d(8543),c=function(){return c=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},c.apply(this,arguments)},s=function(e,t,n){if(n||2===arguments.length)for(var o,i=0,r=t.length;i<r;i++)!o&&i in t||(o||(o=Array.prototype.slice.call(t,0,i)),o[i]=t[i]);return e.concat(o||Array.prototype.slice.call(t))},m=function(i){var p=i.open,u=void 0!==p&&p,l=i.anchorEl,s=i.idMenuLast,d=i.selectMenu,h=void 0===d?"":d,g=i.onClickMenu,b=i.list,f=void 0===b?[]:b,v=i.onMouseEnter,x=i.onMouseLeave,z=i.level,y=void 0===z?1:z,j=i.className,w=(0,t.useState)(null),N=w[0],k=w[1],S=(0,t.useState)(null),M=S[0],O=S[1],T=(0,t.useState)([]),P=T[0],C=T[1],E=(0,t.useState)({})[0];(0,t.useEffect)((function(){return function(){clearTimeout(E.leaveTimer)}}),[]);var L=function(e,t){return function(n){var o;E.lastItem&&E.lastItem.path===e.path||(E.lastItem=e,o=n,clearTimeout(E.leaveTimer),E.leaveTimer=setTimeout((function(){1===y&&v&&v();var n=[e];e.children&&e.children.length>0&&(n=e.children);var i=o.target;O(i),C(n),k(t)}),50))}},F=function(e){return function(t){e.children&&e.children.length>0||(g&&g(e),x&&x())}},_=function(e){var t="menu-item-popper-content-item",n=s&&s[h];return n&&-1!==n.indexOf(e.path)&&(t+=" menu-item-popper-content-item-select"),t},I=function(){var e="menu-item-popper";return j&&(e+=" "+j),e},R=(0,t.useCallback)((function(t,n){return(0,e.jsx)(e.Fragment,{children:t.children&&t.children.length>0&&N===n&&(0,e.jsx)(m,{open:N===n,anchorEl:M,list:P,idMenuLast:s,selectMenu:h,onClickMenu:g,onMouseEnter:v,onMouseLeave:x,level:y+1})})}),[N,M,P,s,h,g,v,x,y]),q=(0,t.useMemo)((function(){return(0,e.jsx)("div",c({className:"menu-item-popper-content"},{children:f.map((function(t,n){var o=function(e){var t=e.icon;if(t){var n=a[t];return n?n():t}}(t),i=function(t){var n=t.children;if(n&&n.length>0)return(0,e.jsx)(r(),{})}(t);return(0,e.jsx)("div",c({className:_(t),onMouseLeave:function(e){clearTimeout(E.leaveTimer),E.leaveTimer=setTimeout((function(){1===y&&x&&x(),k(null),O(null),C([])}))},onMouseEnter:L(t,n)},{children:(0,e.jsxs)("div",c({className:"menu-item-popper-content-item-content",onClick:F(t)},{children:[o&&(0,e.jsx)("span",c({className:"menu-item-icon"},{children:o})),(0,e.jsx)("span",c({className:"menu-item-label"},{children:t.label})),i&&(0,e.jsx)("span",c({className:"menu-item-arrow"},{children:i})),R(t,n)]}))}),n)}))}))}),[f,g,N,M,P,s,h,g,v,x,y]),B=function(){return 1!==y?(0,e.jsx)("div",c({className:I()},{children:q})):(0,e.jsx)(o.Popper,c({open:u,anchorEl:l,disablePortal:!0,placement:"bottom-start",className:I()},{children:q}))};return(0,e.jsx)(e.Fragment,{children:1===y?(0,n.createPortal)((0,e.jsx)(B,{}),document.getElementsByTagName("body")[0]):(0,e.jsx)(B,{})})},g=function(n){var o=n.list,i=void 0===o?[]:o,p=n.selectMenu,d=void 0===p?"":p,h=n.onClickMenu,g=n.className,b=n.moreCustomize,f=(0,t.useState)(!1),v=f[0],x=f[1],z=(0,t.useState)(null),y=z[0],j=z[1],w=(0,t.useState)(null),N=w[0],k=w[1],S=(0,t.useState)([]),M=S[0],O=S[1],T=(0,t.useState)(""),P=T[0],C=T[1],E=(0,t.useState)({}),L=E[0],F=E[1],_=(0,t.useState)({}),I=_[0],R=_[1],q=(0,t.useState)("horizontal-menu-list-"+(0,l.UUID)())[0],B=(0,t.useState)(null),A=B[0],H=B[1],U=(0,t.useState)({})[0];(0,t.useEffect)((function(){d!==P&&C(d)}),[d]),(0,t.useEffect)((function(){return W(i),G(),window.addEventListener("resize",G),function(){window.removeEventListener("resize",G),clearTimeout(U.timerResize),clearTimeout(U.leaveTimer)}}),[i]);var D,G=function(){clearTimeout(U.timerResize),J(),U.timerResize=setTimeout((function(){H(i.length),Y()}),100)},Y=function(e){if(null!==e&&0!==e){void 0===e&&(e=i.length);var t=document.querySelector("."+q);if(t)if(t.scrollHeight>t.clientHeight){var n=Number(e)-1;H(n),Y(n)}else i.length<=e&&J()}},J=function(){},W=function(e){var t={},n={},o={},i={},r=function(e,a,p){for(var u=0,c=e.length;u<c;u++){var m=e[u],d=m.path;t[d]=m;var h=void 0===p?u:p;if(a){var g=(0,l.DeepClone)(n[a.path]||[]);g.push(d),n[d]=s([],g,!0)}else n[d]=[d];m.children&&m.children.length>0?r(m.children,m,h):(o[d]=n[d],i[d]=h)}};r(e),R(i),F(o)},K=function(e,t){return function(n){clearTimeout(U.leaveTimer);var o=[];e.children&&e.children.length>0&&(o=e.children),j(t),k(n.target),O(o),x(!0)}},Q=function(){x(!1),k(null),O([]),j(null)},Z=function(){clearTimeout(U.leaveTimer)},$=function(){Q()},V=function(e){h&&h(e)},X=function(e,t){var n=" horizontal-menu-list-item",o=L[P];return o&&-1!==o.indexOf(e.path)&&(n+=" horizontal-menu-list-item-select"),y===t&&(n+=" horizontal-menu-list-item-hover"),n},ee=(0,t.useMemo)((function(){return(0,e.jsx)(e.Fragment,{children:v&&(0,e.jsx)(m,{open:v,anchorEl:N,list:M,idMenuLast:L,selectMenu:P,onClickMenu:V,onMouseEnter:Z,onMouseLeave:$,className:"paraui-horizontal-menu-popper",level:1})})}),[v,N,M,L,P,h,U]),te=function(e){clearTimeout(U.leaveTimer);for(var t=[],n=Number(A),o=i.length;n<o;n++)t.push(i[n]);j(A),k(e.target),O(t),x(!0)},ne=function(){clearTimeout(U.leaveTimer),U.leaveTimer=setTimeout((function(){Q()}),100)},oe=function(){var e=" horizontal-menu-list-item",t=I[P];return null!==A&&A<=t&&(e+=" horizontal-menu-list-item-select"),y===A&&(e+=" horizontal-menu-list-item-hover"),e};return(0,e.jsxs)("div",c({className:(D="horizontal-menu-list",g&&(D+=" "+g),q&&(D+=" "+q),D)},{children:[i.map((function(t,n){if(null!==A&&A<=n)return null;var o=function(e){var t=e.icon;if(t){var n=a[t];return n?n():t}}(t),i=function(t){var n=t.children;if(n&&n.length>0)return(0,e.jsx)(r(),{})}(t);return(0,e.jsxs)("div",c({onClick:function(){V(t)},onMouseEnter:K(t,n),onMouseLeave:function(e){clearTimeout(U.leaveTimer),U.leaveTimer=setTimeout((function(){Q()}),100)},className:X(t,n)},{children:[o&&(0,e.jsx)("span",c({className:"menu-item-icon"},{children:o})),(0,e.jsx)("span",c({className:"menu-item-label"},{children:t.label})),i&&(0,e.jsx)("span",c({className:"menu-item-arrow"},{children:i}))]}),n)})),function(){if(null!==A&&i.length>A)return(0,e.jsx)("div",c({onMouseEnter:te,onMouseLeave:ne,className:oe()},{children:b||(0,e.jsx)("span",c({className:"menu-item-icon"},{children:(0,e.jsx)(u(),{})}))}))}(),ee]}))},b=d(7896),f=function(){return f=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},f.apply(this,arguments)},v=function(t){var n,o=t.icon,i=t.label,r=t.render,a=t.onClick,p=t.className,u=function(e){a&&a(e)};return(0,e.jsx)(e.Fragment,{children:r||(0,e.jsx)("div",f({className:(n="back-btn",p&&(n+=" "+p),n)},{children:(0,e.jsx)(b.default,f({startIcon:o,variant:"contained",onClick:u},{children:i}))}))})},x=function(i){var r=i.language,a=void 0===r?[]:r,p=i.selectLang,u=void 0===p?"":p,l=i.onClick,c=i.className,s=i.render,m=(0,t.useState)({}),d=m[0],h=m[1],g=(0,t.useState)({}),b=g[0],v=g[1],x=(0,t.useState)(!1),z=x[0],y=x[1],j=(0,t.useState)(null),w=j[0],N=j[1],k=(0,t.useState)({})[0];(0,t.useEffect)((function(){var e=d[u]||{};v(e)}),[u,d]),(0,t.useEffect)((function(){for(var e={},t=0,n=a.length;t<n;t++){var o=a[t];o.value&&(e[o.value]=o)}h(e)}),[a]);var S,M=function(e){return function(){l&&l(e.value,e),y(!1)}},O=function(e){k.timer=setTimeout((function(){y(!1),N(null)}),100)},T=function(e){return function(t){clearTimeout(k.timer),y(!0),e&&N(t.target)}},P=(0,t.useMemo)((function(){return(0,e.jsx)("div",f({className:"language-item",onMouseLeave:O,onMouseEnter:T(!0)},{children:(0,e.jsxs)(e.Fragment,{children:[b.icon&&(0,e.jsx)("span",f({className:"language-item-icon"},{children:b.icon})),b.label&&(0,e.jsx)("span",f({className:"language-item-label"},{children:b.label}))]})}))}),[b,a,k]),C=(0,t.useMemo)((function(){var t=function(e){var t="menu-popover-item";return e.value===b.value&&(t+=" menu-popover-item-select"),t};return(0,n.createPortal)((0,e.jsx)((function(){return(0,e.jsx)(o.Popper,f({open:z,anchorEl:w,disablePortal:!0,placement:"bottom-end",onMouseLeave:O,onMouseEnter:T(!1),className:"paraui-horizontal-meun-right-popover menu-popover"},{children:(0,e.jsx)("div",f({className:"menu-popover-box"},{children:a.map((function(n,o){return(0,e.jsxs)("div",f({className:t(n),onClick:M(n)},{children:[n.icon&&(0,e.jsx)("span",f({className:"icon"},{children:n.icon})),n.label&&(0,e.jsx)("span",f({className:"label",style:{marginLeft:"5px"}},{children:n.label}))]}),o)}))}))}))}),{}),document.getElementsByTagName("body")[0])}),[a,b,z,w,k,l]);return(0,e.jsx)(e.Fragment,{children:s||(0,e.jsxs)("div",f({className:(S="language",c&&(S+=" "+c),z&&(S+=" language-select"),S)},{children:[P,z&&C]}))})},z=function(n){var o,i=n.list,r=void 0===i?[]:i,a=n.render,p=n.className,u=n.onClick,l=function(e){return function(t){u&&u(e,t)}},c=(0,t.useMemo)((function(){var t=function(t){return(0,e.jsxs)(e.Fragment,{children:[t.icon&&(0,e.jsx)("span",f({className:"btn-list-item-icon"},{children:t.icon})),t.label&&(0,e.jsx)("span",f({className:"btn-list-item-label"},{children:t.label}))]})};return(0,e.jsx)(e.Fragment,{children:r.map((function(n,o){var i="btn-list-item";return n.sign&&(i+=" btn-list-item-sign"),(0,e.jsx)("div",f({className:i,onClick:l(n)},{children:t(n)}),o)}))})}),[r]);return(0,e.jsx)(e.Fragment,{children:a||(0,e.jsx)("div",f({className:(o="btn-list",p&&(o+=" "+p),o)},{children:c}))})},y=function(i){var a=i.img,p=i.imgRender,u=i.label,l=i.render,c=i.className,s=i.list,m=i.onClick,d=i.onClickMenu,h=i.selectValue,g=(0,t.useState)(!1),b=g[0],v=g[1],x=(0,t.useState)(null),z=x[0],y=x[1],j=(0,t.useState)({})[0],w=(0,t.useRef)();(0,t.useEffect)((function(){return function(){clearTimeout(j.timer)}}),[]);var N,k=function(e){return function(){d&&d(e.value,e),v(!1)}},S=function(e){j.timer=setTimeout((function(){v(!1),y(null)}),100)},M=function(e){return function(t){clearTimeout(j.timer),v(!0),e&&y(w.current)}},O=(0,t.useMemo)((function(){var t=function(e){var t="menu-popover-item";return e.value===h&&(t+=" menu-popover-item-select"),t};return(0,n.createPortal)((0,e.jsx)((function(){var n;return(0,e.jsx)(o.Popper,f({open:b,anchorEl:z,disablePortal:!0,placement:"bottom-end",onMouseLeave:S,onMouseEnter:M(!1),className:"paraui-horizontal-meun-right-popover menu-popover"},{children:(0,e.jsx)("div",f({className:"menu-popover-box",style:(n={},z&&(n.width=z.getBoundingClientRect().width+"px"),n)},{children:s&&s.map((function(n,o){return(0,e.jsxs)("div",f({className:t(n),onClick:k(n)},{children:[n.icon&&(0,e.jsx)("span",f({className:"icon",style:{marginRight:"5px"}},{children:n.icon})),n.label&&(0,e.jsx)("span",f({className:"label"},{children:n.label}))]}),o)}))}))}))}),{}),document.getElementsByTagName("body")[0])}),[s,h,b,z,j]);return(0,e.jsxs)("div",f({className:(N="logo",c&&(N+=" "+c),b&&(N+=" logo-show-dialog"),N),onClick:function(e){m&&m(e)},onMouseLeave:S,onMouseEnter:M(!0),ref:w},{children:[l||(0,e.jsxs)(e.Fragment,{children:[p||a&&(0,e.jsx)("img",{src:a,alt:""}),u&&(0,e.jsx)("span",f({className:"label"},{children:u})),s&&s.length>0&&(0,e.jsx)("span",f({className:"arrow"},{children:(0,e.jsx)(r(),{})}))]}),b&&O]}))},j=function(n){var o,i=n.className,r=void 0===i?"":i,a=n.backSelfcareProps,p=n.languageProps,u=n.btnListProps,l=n.userProps,c=n.render,s=(0,t.useMemo)((function(){return a&&(0,e.jsx)(v,f({},a))}),[a]),m=(0,t.useMemo)((function(){return p&&(0,e.jsx)(x,f({},p))}),[p]),d=(0,t.useMemo)((function(){return u&&(0,e.jsx)(z,f({},u))}),[u]),h=(0,t.useMemo)((function(){return l&&(0,e.jsx)(y,f({},l))}),[l]);return(0,e.jsx)(e.Fragment,{children:c||(0,e.jsxs)("div",f({className:(o="paraui-horizontal-meun-right",r&&(o+=" "+r),o)},{children:[s,m,d,h]}))})},w=(d(1132),function(){return w=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},w.apply(this,arguments)}),N=function(n){var o,i=n.leftRender,r=n.menuListProps,a=n.footerProps,p=n.selectMenu,u=n.onClickMenu,l=n.className,c=n.style,s=(0,t.useMemo)((function(){return i&&(0,e.jsx)("div",w({className:"paraui-page-header-left"},{children:i}))}),[i]),m=(0,t.useMemo)((function(){return n.menuListProps&&(0,e.jsx)("div",w({className:"menu-box"},{children:(0,e.jsx)(g,w({},r,{selectMenu:p,onClickMenu:u}))}))}),[r,p,u]),d=(0,t.useMemo)((function(){return n.footerProps&&(0,e.jsx)(j,w({},a))}),[a]);return(0,e.jsxs)("div",w({className:(o="paraui-page-header",l&&(o+=" "+l),o),style:c},{children:[s,m,d]}))},k=N}(),h}()}));
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.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 { Button } from '../Button/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import 'clsx';
+import '../_verture/typeof-498dd2b1.js';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Dropdown/index.js';
+import 'rc-dropdown';
+import '../_verture/useFormatMessage-ac9d6acf.js';
+import '@para-ui/core/GlobalContext';
+
+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) {
+      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);
+        return jsx("div", Object.assign({
+          className: handItemClass(item),
+          onMouseLeave: MouseLeaveItem(),
+          onMouseEnter: mouseEnterItem(item, index)
+        }, {
+          children: jsxs("div", Object.assign({
+            className: "menu-item-popper-content-item-content",
+            onClick: clickMenu(item)
+          }, {
+            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 _props$list2 = props.list,
+      list = _props$list2 === void 0 ? [] : _props$list2,
+      _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);
+      return jsx(Popover, Object.assign({
+        visible: openChildIndex === index,
+        trigger: 'hover',
+        placement: "bottom-start",
+        content: MenuItemPopperMemo,
+        overlayClassName: 'paraui-horizontal-menu-popper',
+        onVisibleChange: onVisibleChange
+      }, {
+        children: jsxs("div", Object.assign({
+          onClick: function onClick() {
+            clickMenu(item);
+          },
+          onMouseEnter: mouseOverFunc(item, index),
+          className: handClassItem(item, index)
+        }, {
+          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: 'paraui-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: 'paraui-horizontal-meun-right-popover menu-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: 'paraui-horizontal-meun-right-popover menu-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 = 'paraui-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-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-page-header > .paraui-page-header-left {\n  white-space: nowrap;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n}\n.paraui-page-header > .menu-box {\n  width: 100%;\n}\n.paraui-page-header > .menu-box > .horizontal-menu-list {\n  width: 100%;\n  height: 100%;\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-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}\n.paraui-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-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-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-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-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-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-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-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-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-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-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-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-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-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-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-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-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-page-header .paraui-horizontal-meun-right {\n  height: 100%;\n  display: flex;\n}\n.paraui-page-header .paraui-horizontal-meun-right > .back-btn {\n  padding: 0 12px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .back-btn > button svg {\n  color: white;\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language {\n  height: 100%;\n}\n.paraui-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .language .language-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language .language-item:hover > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language .language-item:hover > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language .language-item:hover > .language-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language .language-item > .language-item-icon {\n  display: flex;\n  align-items: center;\n}\n.paraui-page-header .paraui-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-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .language.language-select .language-item > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .language.language-select .language-item > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .btn-list {\n  display: flex;\n  height: 100%;\n}\n.paraui-page-header .paraui-horizontal-meun-right > .btn-list > .btn-list-item {\n  display: flex;\n  padding: 0 12px;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-page-header .paraui-horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon {\n  position: relative;\n}\n.paraui-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .btn-list > .btn-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-page-header .paraui-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-page-header .paraui-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-page-header .paraui-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-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .logo {\n  display: flex;\n  padding: 0 12px;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n}\n.paraui-page-header .paraui-horizontal-meun-right > .logo.logo-show-dialog {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .logo:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-page-header .paraui-horizontal-meun-right > .logo > img {\n  height: 36px;\n  width: 36px;\n  border-radius: 50%;\n}\n.paraui-page-header .paraui-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-page-header .paraui-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-page-header .paraui-horizontal-meun-right > .logo > .arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 18px;\n}\n\n.paraui-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content, .paraui-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-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}\n.paraui-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-horizontal-menu-popper .menu-item-popper-child {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: 0;\n}\n.paraui-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-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-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .label {\n  color: rgb(54, 102, 214);\n}\n.paraui-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-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-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-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-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-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: 'paraui-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 = 'paraui-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 };