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

package/Menu/index.js

@@ -1,38 +1,36 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo, createElement, useRef } from 'react';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
 import { createPortal } from 'react-dom';
 import CollapseBox from '../CollapseBox/index.js';
 import Down from '@para-ui/icons/Down';
 import * as iconList from '@para-ui/icons';
 import { UUID, DeepClone } from '@paraview/lib';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import MenuMoreLine from '@para-ui/icons/IndentRightFill';
 import MenuLessLine from '@para-ui/icons/IndentLeftFill';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import 'react-transition-group';
-import '../_verture/util-7e1fb1e2.js';
+import '../_verture/util-82646c4f.js';
 
-var Logo = function Logo(props) {
-  var _props$expansion = props.expansion,
-    expansion = _props$expansion === void 0 ? true : _props$expansion,
-    render = props.render,
-    className = props.className;
+const Logo = props => {
+  const {
+    expansion = true,
+    render,
+    className
+  } = props;
   /**
    * 处理内容
    * @return {ReactNode}
    */
-  var handContent = function handContent() {
+  const handContent = () => {
     if (render) return render;
   };
   /**
    * 处理className
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'menu-logo';
+  const handClass = () => {
+    let str = 'menu-logo';
     if (className) str += " ".concat(className);
     if (!expansion) str += ' menu-logo-shrink';
     return str;
@@ -48,9 +46,9 @@ var Logo = function Logo(props) {
  * @description 处理菜单标签
  * 默认div,最后一级为a标签
  * */
-var handMenuEle = function handMenuEle(children) {
-  var Ele = 'div';
-  var lastOne = !children || children.length === 0;
+const handMenuEle = children => {
+  let Ele = 'div';
+  const lastOne = !children || children.length === 0;
   if (lastOne) {
     Ele = 'a';
   }
@@ -59,11 +57,11 @@ var handMenuEle = function handMenuEle(children) {
 /**
  * 处理菜单href地址
  * */
-var handHref = function handHref() {
-  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var path = arguments.length > 1 ? arguments[1] : undefined;
-  var href = arguments.length > 2 ? arguments[2] : undefined;
-  var lastOne = !children || children.length === 0;
+const handHref = function () {
+  let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let path = arguments.length > 1 ? arguments[1] : undefined;
+  let href = arguments.length > 2 ? arguments[2] : undefined;
+  const lastOne = !children || children.length === 0;
   if (lastOne) {
     return {
       href: href ? href : "#".concat(path)
@@ -72,29 +70,25 @@ var handHref = function handHref() {
   return {};
 };
 // 下拉展开
-var VerticalMenuListItem = function VerticalMenuListItem(props) {
-  var label = props.label;
-    props.type;
-    var path = props.path,
-    href = props.href,
-    icon = props.icon,
-    children = props.children,
-    className = props.className,
-    _props$level = props.level,
-    level = _props$level === void 0 ? 1 : _props$level,
-    badge = props.badge,
-    _props$selectMenu = props.selectMenu,
-    selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
-    idMenuLast = props.idMenuLast,
-    onClickMenu = props.onClickMenu,
-    _props$shrinkOthers = props.shrinkOthers,
-    shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    openCom = _useState2[0],
-    setOpenCom = _useState2[1];
-  useEffect(function () {
-    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+const VerticalMenuListItem = props => {
+  const {
+    label,
+    type = 'router',
+    path,
+    href,
+    icon,
+    children,
+    className,
+    level = 1,
+    badge,
+    selectMenu = '',
+    idMenuLast,
+    onClickMenu,
+    shrinkOthers = true
+  } = props;
+  const [openCom, setOpenCom] = useState(false);
+  useEffect(() => {
+    const selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast && selectMenuLast.indexOf(path) !== -1 && selectMenuLast.length > 1) {
       setOpenCom(true);
     } else {
@@ -103,7 +97,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
     }
   }, [idMenuLast, selectMenu, path]);
   /** 点击菜单 */
-  var clickMenu = function clickMenu(e) {
+  const clickMenu = e => {
     if (children && children.length > 0) {
       onClickMenu && onClickMenu(false);
       return setOpenCom(!openCom);
@@ -115,9 +109,9 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
    * 处理图标
    * @return {ReactNode}
    */
-  var handIcon = function handIcon() {
+  const handIcon = () => {
     if (icon) {
-      var iconCom = iconList[icon];
+      const iconCom = iconList[icon];
       if (iconCom) return jsx("span", Object.assign({
         className: "menu-item-icon"
       }, {
@@ -135,7 +129,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
    * 处理箭头
    * @return {ReactNode}
    */
-  var handArrow = function handArrow() {
+  const handArrow = () => {
     if (children && children.length > 0) return jsx(Down, {});
     return jsx(Down, {
       className: "opacity-pos-svg"
@@ -144,7 +138,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
   /**
    * 处理数量
    * */
-  var handBadge = function handBadge() {
+  const handBadge = () => {
     if (badge !== undefined) {
       return jsx("div", Object.assign({
         className: 'menu-item-badge'
@@ -159,33 +153,31 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = 'vertical-menu-list-item';
+  const handClass = () => {
+    let str = 'vertical-menu-list-item';
     if (openCom) str += ' vertical-menu-list-item-open';
     if (className) str += " ".concat(className);
-    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+    const selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast) {
-      var index = selectMenuLast.indexOf(path);
+      const index = selectMenuLast.indexOf(path);
       if (index !== -1) {
         str += ' vertical-menu-list-item-select'; // 选中
         if (index === selectMenuLast.length - 1) {
           str += ' vertical-menu-list-item-select-last'; // 最后一项
         }
-
         if (!openCom) {
           // 收起且选中
           str += ' vertical-menu-list-item-select-retract'; // 选中收起转态
         }
       }
     }
-
     return str;
   };
   /**
    * 处理样式
    */
-  var handStyle = function handStyle() {
-    var json = {
+  const handStyle = () => {
+    const json = {
       paddingRight: '12px',
       paddingLeft: '0px'
     };
@@ -195,8 +187,8 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
     return json;
   };
   // itemMemo
-  var ItemMemo = useMemo(function () {
-    var Ele = handMenuEle(children);
+  const ItemMemo = useMemo(() => {
+    const Ele = handMenuEle(children);
     return jsxs(Ele, Object.assign({
       onClick: clickMenu,
       className: "vertical-menu-list-item-content",
@@ -218,14 +210,14 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
     }));
   }, [children, onClickMenu, openCom, level, icon, label, path, href]);
   // Collapse
-  var CollapseMemo = useMemo(function () {
+  const CollapseMemo = useMemo(() => {
     return jsx(CollapseBox, Object.assign({
       in: openCom,
       className: "li-collapse",
       timeout: "auto",
       unmountOnExit: true
     }, {
-      children: children && children.length > 0 && children.map(function (item, index) {
+      children: children && children.length > 0 && children.map((item, index) => {
         return jsx(VerticalMenuListItem, Object.assign({}, item, {
           level: level + 1,
           idMenuLast: idMenuLast,
@@ -243,67 +235,50 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
   }));
 };
 // 弹出菜单
-var MenuItemPopper = function MenuItemPopper(props) {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    _props$open = props.open,
-    open = _props$open === void 0 ? false : _props$open,
-    anchorEl = props.anchorEl,
-    idMenuLast = props.idMenuLast,
-    _props$selectMenu2 = props.selectMenu,
-    selectMenu = _props$selectMenu2 === void 0 ? '' : _props$selectMenu2,
-    onClickMenu = props.onClickMenu,
-    _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onMouseEnterBus = props.onMouseEnterBus,
-    onMouseLeaveBus = props.onMouseLeaveBus,
-    _props$level2 = props.level,
-    level = _props$level2 === void 0 ? 1 : _props$level2,
-    color = props.color,
-    className = props.className;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    openChild = _useState4[0],
-    setOpenChild = _useState4[1]; // 是否渲染子级
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    childPos = _useState6[0],
-    setChildPos = _useState6[1]; // 子级定位元素
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    childList = _useState8[0],
-    setChildList = _useState8[1]; // 子级列表
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    posStyle = _useState10[0],
-    setPosStyle = _useState10[1]; // 定位元素样式
-  var _useState11 = useState({}),
-    _useState12 = _slicedToArray(_useState11, 1),
-    timerJson = _useState12[0];
-  var boxRef = useRef(null);
-  useEffect(function () {
-    return function () {
+const MenuItemPopper = props => {
+  const {
+    size = 'large',
+    open = false,
+    anchorEl,
+    idMenuLast,
+    selectMenu = '',
+    onClickMenu,
+    list = [],
+    onMouseEnter,
+    onMouseLeave,
+    onMouseEnterBus,
+    onMouseLeaveBus,
+    level = 1,
+    color,
+    className
+  } = props;
+  const [openChild, setOpenChild] = useState(false); // 是否渲染子级
+  const [childPos, setChildPos] = useState(''); // 子级定位元素
+  const [childList, setChildList] = useState([]); // 子级列表
+  const [posStyle, setPosStyle] = useState({}); // 定位元素样式
+  const [timerJson] = useState({});
+  const boxRef = useRef(null);
+  useEffect(() => {
+    return () => {
       clearTimeout(timerJson.leaveBox);
       clearTimeout(timerJson.closeTimer);
       clearTimeout(timerJson.styleTimer);
     };
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     handPosStyle();
   }, [open, anchorEl]);
   /**
    * 设置定位样式
    * */
-  var handPosStyle = function handPosStyle() {
+  const handPosStyle = () => {
     clearTimeout(timerJson.styleTimer);
-    timerJson.styleTimer = setTimeout(function () {
+    timerJson.styleTimer = setTimeout(() => {
       if (anchorEl && open && boxRef.current) {
         // 定位容器
-        var anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
-        var reactDom = anchorElDom.getBoundingClientRect();
-        var top = reactDom.top;
+        const anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
+        const reactDom = anchorElDom.getBoundingClientRect();
+        let top = reactDom.top;
         // 不是第一级的弹窗向上偏移
         if (level !== 1) {
           top = top - 4;
@@ -312,12 +287,11 @@ var MenuItemPopper = function MenuItemPopper(props) {
         if (handTooltip()) {
           top = top + (props.size === 'small' ? 2 : 4);
         }
-        var bodyHeight = document.body.clientHeight;
-        var selfHeight = boxRef.current.clientHeight;
+        const bodyHeight = document.body.clientHeight;
+        const selfHeight = boxRef.current.clientHeight;
         if (selfHeight + top > bodyHeight) {
           top = top - (selfHeight + top - bodyHeight) - 20; // 多减20的余量
         }
-
         if (top < 0) {
           top = 0;
         }
@@ -333,7 +307,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
   /**
    * 判断是否是第一级,且没有子级
    * */
-  var handTooltip = function handTooltip() {
+  const handTooltip = () => {
     // 第一层,长度为1,且没有父级,,子级也没有
     if (level === 1 && list.length === 1 && list[0]._paraui_menu_first && (!list[0].children || list[0].children.length === 0)) {
       return true;
@@ -344,8 +318,8 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * 处理MenuPopover样式类名
    * @return {string}
    */
-  var handPopoverClass = function handPopoverClass() {
-    var str = "".concat($prefixCls, "-vertical-menu-item-popper");
+  const handPopoverClass = () => {
+    let str = "".concat($prefixCls, "-vertical-menu-item-popper");
     if (color) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(color);
     if (size) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(size);
     if (color === 'deep') str += " ".concat($prefixCls, "-scrollbar-small-deep");else str += " ".concat($prefixCls, "-scrollbar-small");
@@ -361,9 +335,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param item {MenuChildrenProps} 子菜单详情
    * @return {string}
    */
-  var handItemClass = function handItemClass(item) {
-    var str = 'menu-item-popper-content-item';
-    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
+  const handItemClass = item => {
+    let str = 'menu-item-popper-content-item';
+    const selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
       str += ' menu-item-popper-content-item-select';
     }
@@ -374,9 +348,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param icon 图标信息
    * @return {ReactNode}
    */
-  var handIcon = function handIcon(icon) {
+  const handIcon = icon => {
     if (icon) {
-      var iconCom = iconList[icon];
+      const iconCom = iconList[icon];
       if (iconCom) return jsx("span", Object.assign({
         className: "menu-item-icon"
       }, {
@@ -395,7 +369,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param children 详细
    * @return {ReactNode}
    */
-  var handArrow = function handArrow(children) {
+  const handArrow = children => {
     if (children && children.length > 0) return jsx(Down, {});
     return jsx(Down, {
       className: "opacity-pos-svg"
@@ -404,7 +378,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
   /**
    * 处理数量
    * */
-  var handBadge = function handBadge(item) {
+  const handBadge = item => {
     if (item.badge !== undefined && !handTooltip()) {
       return jsx("div", Object.assign({
         className: 'menu-item-badge'
@@ -420,17 +394,15 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param item {MenuChildrenProps} 当前项参数
    * @param e 当前元素
    */
-  var clickMenu = function clickMenu(item) {
-    return function (e) {
-      e.preventDefault();
-      if (item.children && item.children.length > 0) return;
-      onClickMenu && onClickMenu(item);
-    };
+  const clickMenu = item => e => {
+    e.preventDefault();
+    if (item.children && item.children.length > 0) return;
+    onClickMenu && onClickMenu(item);
   };
   /**
    * 鼠标移入大容器
    * */
-  var onMouseEnterBox = function onMouseEnterBox() {
+  const onMouseEnterBox = () => {
     if (handTooltip()) return;
     if (level == 1) {
       // 关闭收缩按钮移出事件
@@ -442,10 +414,10 @@ var MenuItemPopper = function MenuItemPopper(props) {
   /**
    * 鼠标移出大容器
    * */
-  var onMouseLeaveBox = function onMouseLeaveBox() {
+  const onMouseLeaveBox = () => {
     if (handTooltip()) return;
     clearTimeout(timerJson.leaveBox);
-    timerJson.leaveBox = setTimeout(function () {
+    timerJson.leaveBox = setTimeout(() => {
       if (level === 1) {
         onMouseLeave && onMouseLeave();
       } else {
@@ -457,7 +429,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * 移入事件 传递 给子级
    * 用来通知上级
    * */
-  var onMouseEnterBusCom = function onMouseEnterBusCom() {
+  const onMouseEnterBusCom = () => {
     // 移入子级的大容器里面, 需要通知上级不关闭容器, 清楚关闭定时器
     clearTimeout(timerJson.leaveBox);
   };
@@ -465,7 +437,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * 移出事件 传递 给子级
    * 用来通知上级
    * */
-  var onMouseLeaveBusCom = function onMouseLeaveBusCom() {
+  const onMouseLeaveBusCom = () => {
     setOpenChild(false);
     setChildPos('');
     setChildList([]);
@@ -477,24 +449,22 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var onMouseEnterChildCom = function onMouseEnterChildCom(item) {
-    return function (e) {
-      handClassItemHover(e.target);
-      setOpenChild(false);
-      clearTimeout(timerJson.closeTimer);
-      timerJson.closeTimer = setTimeout(function () {
-        var childListHand = item.children || [];
-        if (childListHand.length > 0) {
-          setOpenChild(true);
-          setChildPos(e.target.getAttribute('data-menu-id'));
-          setChildList(item.children || []);
-        } else {
-          setOpenChild(false);
-          setChildPos('');
-          setChildList([]);
-        }
-      });
-    };
+  const onMouseEnterChildCom = item => e => {
+    handClassItemHover(e.target);
+    setOpenChild(false);
+    clearTimeout(timerJson.closeTimer);
+    timerJson.closeTimer = setTimeout(() => {
+      const childListHand = item.children || [];
+      if (childListHand.length > 0) {
+        setOpenChild(true);
+        setChildPos(e.target.getAttribute('data-menu-id'));
+        setChildList(item.children || []);
+      } else {
+        setOpenChild(false);
+        setChildPos('');
+        setChildList([]);
+      }
+    });
   };
   /**
    * 移出子级
@@ -502,18 +472,16 @@ var MenuItemPopper = function MenuItemPopper(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var onMouseLeaveChildCom = function onMouseLeaveChildCom(item) {
-    return function (e) {
-      //console.log('移出子级')
-    };
+  const onMouseLeaveChildCom = item => e => {
+    //console.log('移出子级')
   };
   /**
    * 处理移入的class
    * */
-  var handClassItemHover = function handClassItemHover(target) {
+  const handClassItemHover = target => {
     if (boxRef) {
-      var boxDom = boxRef.current;
-      var hoverDom = boxDom.querySelector('.menu-item-popper-content-item-hover');
+      const boxDom = boxRef.current;
+      const hoverDom = boxDom.querySelector('.menu-item-popper-content-item-hover');
       if (hoverDom) {
         hoverDom.classList.remove('menu-item-popper-content-item-hover');
       }
@@ -523,15 +491,15 @@ var MenuItemPopper = function MenuItemPopper(props) {
     }
   };
   /** 内容 */
-  var ContentMemo = useMemo(function () {
+  const ContentMemo = useMemo(() => {
     return jsx("div", Object.assign({
       className: "menu-item-popper-content",
       onMouseEnter: onMouseEnterBox,
       onMouseLeave: onMouseLeaveBox,
       ref: boxRef
     }, {
-      children: list.map(function (item, index) {
-        var Ele = handMenuEle(item.children);
+      children: list.map((item, index) => {
+        const Ele = handMenuEle(item.children);
         return jsx("div", Object.assign({
           className: handItemClass(item),
           onMouseEnter: onMouseEnterChildCom(item),
@@ -561,7 +529,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
     }));
   }, [list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
   // 计算定位
-  var MenuPopover = function MenuPopover() {
+  const MenuPopover = () => {
     return jsx("div", Object.assign({
       className: handPopoverClass(),
       style: posStyle
@@ -569,7 +537,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
       children: ContentMemo
     }));
   };
-  var MenuPortalMemo = useMemo(function () {
+  const MenuPortalMemo = useMemo(() => {
     return jsx(Fragment, {
       children: /*#__PURE__*/createPortal(jsx(MenuPopover, {}), document.getElementsByTagName('body')[0])
     });
@@ -597,101 +565,74 @@ var MenuItemPopper = function MenuItemPopper(props) {
  * @param transform {string}
  * @return {number}
  */
-var getTransformY = function getTransformY(transform) {
+const getTransformY = transform => {
   if (!transform) return 0;
   try {
-    var transformY = transform.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
+    const transformY = transform.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
     return Number(transformY && transformY[2]);
   } catch (e) {}
   return 0;
 };
-var VerticalMenuList = function VerticalMenuList(props) {
-  var list = props.list,
-    _props$expansion = props.expansion,
-    expansion = _props$expansion === void 0 ? true : _props$expansion,
-    _props$selectMenu3 = props.selectMenu,
-    selectMenu = _props$selectMenu3 === void 0 ? '' : _props$selectMenu3,
-    onClickMenu = props.onClickMenu,
-    className = props.className,
-    _props$shrinkOthers2 = props.shrinkOthers,
-    shrinkOthers = _props$shrinkOthers2 === void 0 ? true : _props$shrinkOthers2,
-    _props$size2 = props.size,
-    size = _props$size2 === void 0 ? 'large' : _props$size2,
-    color = props.color;
+const VerticalMenuList = props => {
+  const {
+    list,
+    expansion = true,
+    selectMenu = '',
+    onClickMenu,
+    className,
+    shrinkOthers = true,
+    size = 'large',
+    color
+  } = props;
   // const classes: any = useStyles(props);
-  var _useState13 = useState([]),
-    _useState14 = _slicedToArray(_useState13, 2),
-    listCom = _useState14[0],
-    setListCom = _useState14[1]; // 菜单数据
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    openChild = _useState16[0],
-    setOpenChild = _useState16[1]; // 侧边展开子菜单
-  var _useState17 = useState(null),
-    _useState18 = _slicedToArray(_useState17, 2),
-    openChildIndex = _useState18[0],
-    setOpenChildIndex = _useState18[1]; // 侧边菜单第几项
-  var _useState19 = useState(''),
-    _useState20 = _slicedToArray(_useState19, 2),
-    childPos = _useState20[0],
-    setChildPos = _useState20[1]; // 侧边子菜单定位
-  var _useState21 = useState([]),
-    _useState22 = _slicedToArray(_useState21, 2),
-    childList = _useState22[0],
-    setChildList = _useState22[1]; // 侧边子菜单数据
-  var _useState23 = useState(''),
-    _useState24 = _slicedToArray(_useState23, 2),
-    selectMenuCom = _useState24[0],
-    setSelectMenuCom = _useState24[1]; // 当前选中菜单id
+  const [listCom, setListCom] = useState([]); // 菜单数据
+  const [openChild, setOpenChild] = useState(false); // 侧边展开子菜单
+  const [openChildIndex, setOpenChildIndex] = useState(null); // 侧边菜单第几项
+  const [childPos, setChildPos] = useState(''); // 侧边子菜单定位
+  const [childList, setChildList] = useState([]); // 侧边子菜单数据
+  const [selectMenuCom, setSelectMenuCom] = useState(''); // 当前选中菜单id
   //const [jsonMenu, setJsonMenu] = useState<any>({}); // 菜单map
-  var _useState25 = useState({}),
-    _useState26 = _slicedToArray(_useState25, 2),
-    idMenuLast = _useState26[0],
-    setIdMenuLast = _useState26[1]; // 最后一级菜单所有层级id
-  var _useState27 = useState({
-      prev: false,
-      next: false
-    }),
-    _useState28 = _slicedToArray(_useState27, 2),
-    flipDisable = _useState28[0],
-    setFlipDisable = _useState28[1];
-  var _useState29 = useState({}),
-    _useState30 = _slicedToArray(_useState29, 1),
-    timerJson = _useState30[0];
-  var listRef = React__default.useRef();
-  useEffect(function () {
-    return function () {
+  const [idMenuLast, setIdMenuLast] = useState({}); // 最后一级菜单所有层级id
+  const [flipDisable, setFlipDisable] = useState({
+    prev: false,
+    next: false
+  });
+  const [timerJson] = useState({});
+  const listRef = React__default.useRef();
+  useEffect(() => {
+    return () => {
       // 防止组件销毁设置元素报错
       clearTimeout(timerJson.arrowTimer);
       clearTimeout(timerJson.leaveTimer);
       clearTimeout(timerJson.enterTimer);
     };
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     // 浅拷贝一层,防止数据外部使用用了同一份数据,导致收缩的时候定位错误
-    var listArr = list || [];
-    var arr = [];
-    for (var i = 0, l = listArr.length; i < l; i++) {
-      var item = listArr[i];
+    const listArr = list || [];
+    const arr = [];
+    for (let i = 0, l = listArr.length; i < l; i++) {
+      const item = listArr[i];
       arr.push(Object.assign({}, item));
     }
     handList(arr);
   }, [list]);
-  useEffect(function () {
+  useEffect(() => {
     isShowArrow();
   }, [listCom]);
-  useEffect(function () {
+  useEffect(() => {
     if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
     isShowArrow();
   }, [selectMenu]);
   /** 初始化判断是否显示箭头 */
-  var isShowArrow = function isShowArrow() {
+  const isShowArrow = () => {
     clearTimeout(timerJson.arrowTimer);
-    timerJson.arrowTimer = setTimeout(function () {
-      var _getLimit = getLimit(),
-        min = _getLimit.min,
-        max = _getLimit.max;
-      var y = getTransformY(listRef.current.style.transform);
+    timerJson.arrowTimer = setTimeout(() => {
+      const {
+        min,
+        max
+      } = getLimit();
+      const y = getTransformY(listRef.current.style.transform);
       setFlipDisable({
         prev: y !== min,
         next: y > max
@@ -702,9 +643,11 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * 鼠标滚动应用列表
    * @param e 元素
    */
-  var handleScroll = function handleScroll(e) {
-    var deltaY = e.deltaY;
-    var y = getTransformY(listRef.current.style.transform);
+  const handleScroll = e => {
+    const {
+      deltaY
+    } = e;
+    let y = getTransformY(listRef.current.style.transform);
     y -= deltaY;
     setTransform(y);
   };
@@ -712,29 +655,28 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * 翻页点击
    * @param type {'prev' | 'next'} 点击类型
    */
-  var flip = function flip(type) {
-    return function () {
-      var height = 100;
-      var y = getTransformY(listRef.current.style.transform);
-      switch (type) {
-        case 'next':
-          y -= height;
-          break;
-        case 'prev':
-          y += height;
-          break;
-      }
-      setTransform(y);
-    };
+  const flip = type => () => {
+    const height = 100;
+    let y = getTransformY(listRef.current.style.transform);
+    switch (type) {
+      case 'next':
+        y -= height;
+        break;
+      case 'prev':
+        y += height;
+        break;
+    }
+    setTransform(y);
   };
   /**
    * 设置上下平移
    * @param y {number} 滚动距离
    */
-  var setTransform = function setTransform(y) {
-    var _getLimit2 = getLimit(),
-      min = _getLimit2.min,
-      max = _getLimit2.max;
+  const setTransform = y => {
+    const {
+      min,
+      max
+    } = getLimit();
     if (y > min) y = min;
     if (y < max) y = max;
     setFlipDisable({
@@ -747,34 +689,34 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * 返回滚动限制
    * @return {object} 滚动限制
    */
-  var getLimit = function getLimit() {
-    var parentHeight = listRef.current.parentNode.getBoundingClientRect().height;
-    var min = 0;
-    var max = -(listRef.current.getBoundingClientRect().height - parentHeight);
+  const getLimit = () => {
+    const parentHeight = listRef.current.parentNode.getBoundingClientRect().height;
+    const min = 0;
+    let max = -(listRef.current.getBoundingClientRect().height - parentHeight);
     if (parentHeight > listRef.current.getBoundingClientRect().height) {
       max = 0;
     }
     return {
-      min: min,
-      max: max
+      min,
+      max
     };
   };
   /**
    * 处理菜单数据
    * @param dataArr {MenuChildrenProps} 菜单数据
    */
-  var handList = function handList(dataArr) {
-    var idMap = {}; // 所有id,层级map
-    var idMapLast = {}; // 最后一层菜单,层级map
-    var recurrenceFunc = function recurrenceFunc(daraChildArr, parent) {
-      for (var i = 0, l = daraChildArr.length; i < l; i++) {
-        var item = daraChildArr[i];
-        var path = item.path;
+  const handList = dataArr => {
+    const idMap = {}; // 所有id,层级map
+    const idMapLast = {}; // 最后一层菜单,层级map
+    const recurrenceFunc = (daraChildArr, parent) => {
+      for (let i = 0, l = daraChildArr.length; i < l; i++) {
+        const item = daraChildArr[i];
+        const path = item.path;
         item._paraui_menu_id = "_paraui_menu_id_".concat(UUID()); // 设置唯一id
         if (parent) {
-          var idList = DeepClone(idMap[parent.path] || []);
+          const idList = DeepClone(idMap[parent.path] || []);
           idList.push(path);
-          idMap[path] = _toConsumableArray(idList);
+          idMap[path] = [...idList];
         } else {
           // 不存在parent,第一级
           idMap[path] = [path];
@@ -798,52 +740,48 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * @param index {number} 移入当前项下标
    * @param e 当前元素
    */
-  var mouseEnterShrinkFunc = function mouseEnterShrinkFunc(item, index) {
-    return function (e) {
-      setOpenChild(false);
-      clearTimeout(timerJson.enterTimer);
-      timerJson.enterTimer = setTimeout(function () {
-        clearTimeout(timerJson.leaveTimer);
-        var childListHand = [item];
-        if (item.children && item.children.length > 0) {
-          childListHand = item.children;
-        }
-        setOpenChildIndex(index);
-        setChildPos(e.target.getAttribute('data-menu-id'));
-        setChildList(childListHand);
-        setOpenChild(true);
-      });
-    };
+  const mouseEnterShrinkFunc = (item, index) => e => {
+    setOpenChild(false);
+    clearTimeout(timerJson.enterTimer);
+    timerJson.enterTimer = setTimeout(() => {
+      clearTimeout(timerJson.leaveTimer);
+      let childListHand = [item];
+      if (item.children && item.children.length > 0) {
+        childListHand = item.children;
+      }
+      setOpenChildIndex(index);
+      setChildPos(e.target.getAttribute('data-menu-id'));
+      setChildList(childListHand);
+      setOpenChild(true);
+    });
   };
   /**
    * 鼠标移出收缩
    * @param item {MenuChildrenProps} 移出当前项参数
    * @param e 当前元素
    */
-  var mouseLeaveShrinkFunc = function mouseLeaveShrinkFunc(item) {
-    return function (e) {
-      leaveFunc();
-    };
+  const mouseLeaveShrinkFunc = item => e => {
+    leaveFunc();
   };
   /** 移出事件 */
-  var leaveFunc = function leaveFunc() {
+  const leaveFunc = () => {
     clearTimeout(timerJson.leaveTimer);
-    timerJson.leaveTimer = setTimeout(function () {
+    timerJson.leaveTimer = setTimeout(() => {
       closeShrink();
     }, 50);
   };
   /** 移入子菜单 */
-  var onMouseEnterChild = function onMouseEnterChild() {
+  const onMouseEnterChild = () => {
     clearTimeout(timerJson.leaveTimer);
   };
   /** 移出子菜单 */
-  var onMouseLeaveChild = function onMouseLeaveChild() {
+  const onMouseLeaveChild = () => {
     leaveFunc();
   };
   /**
    * 关闭收缩弹窗
    * */
-  var closeShrink = function closeShrink() {
+  const closeShrink = () => {
     setOpenChild(false);
     setChildPos('');
     setChildList([]);
@@ -854,11 +792,13 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * @param item {MenuChildrenProps} 当前项参数
    * @return {ReactNode}
    */
-  var handShrink = function handShrink(item) {
-    var icon = item.icon,
-      label = item.label;
+  const handShrink = item => {
+    const {
+      icon,
+      label
+    } = item;
     if (icon) {
-      var iconCom = iconList[icon];
+      const iconCom = iconList[icon];
       if (iconCom) return iconCom();
       return icon;
     }
@@ -871,7 +811,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
   /**
    * 处理数量
    * */
-  var handBadge = function handBadge(item) {
+  const handBadge = item => {
     if (item.badge !== undefined) {
       return jsx("div", Object.assign({
         className: 'menu-item-shrink-badge'
@@ -885,26 +825,24 @@ var VerticalMenuList = function VerticalMenuList(props) {
   /**
    * 点击收缩菜单时候的按钮
    * */
-  var clickShrinkMenu = function clickShrinkMenu(item) {
-    return function (e) {
-      if (!item.children || item.children.length === 0) {
-        var handItem = Object.assign({}, item);
-        delete handItem._paraui_menu_id;
-        onClickMenu && onClickMenu(handItem);
-      }
-      e.preventDefault();
-    };
+  const clickShrinkMenu = item => e => {
+    if (!item.children || item.children.length === 0) {
+      const handItem = Object.assign({}, item);
+      delete handItem._paraui_menu_id;
+      onClickMenu && onClickMenu(handItem);
+    }
+    e.preventDefault();
   };
   /**
    * 点击菜单
    * @param item {MenuChildrenProps | false} 当前项参数
    */
-  var clickMenu = function clickMenu(item) {
+  const clickMenu = item => {
     if (item === false) {
       return isShowArrow();
     }
     closeShrink();
-    var handItem = Object.assign({}, item);
+    const handItem = Object.assign({}, item);
     delete handItem._paraui_menu_id;
     onClickMenu && onClickMenu(handItem);
   };
@@ -914,9 +852,9 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * @param index {number} 下标
    * @return {string} 返回图标元素
    */
-  var handShrinkClass = function handShrinkClass(item, index) {
-    var str = 'vertical-menu-list-item-shrink';
-    var selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
+  const handShrinkClass = (item, index) => {
+    let str = 'vertical-menu-list-item-shrink';
+    const selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
     if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' vertical-menu-list-item-shrink-select';
     if (openChildIndex === index) str += ' vertical-menu-list-item-shrink-hover';
     return str;
@@ -925,15 +863,15 @@ var VerticalMenuList = function VerticalMenuList(props) {
    * 处理class
    * @return {string} class名
    */
-  var handClass = function handClass() {
-    var str = 'vertical-menu-list';
+  const handClass = () => {
+    let str = 'vertical-menu-list';
     if (className) str += " ".concat(className);
     return str;
   };
   /** 展开memo */
-  var ExpansionMemo = useMemo(function () {
+  const ExpansionMemo = useMemo(() => {
     if (expansion) {
-      return listCom.map(function (item, index) {
+      return listCom.map((item, index) => {
         return /*#__PURE__*/createElement(VerticalMenuListItem, Object.assign({}, item, {
           key: index,
           level: 1,
@@ -946,10 +884,10 @@ var VerticalMenuList = function VerticalMenuList(props) {
     }
   }, [expansion, listCom, idMenuLast, selectMenuCom, onClickMenu, shrinkOthers]);
   /** 收缩memo */
-  var ShrinkMemo = useMemo(function () {
+  const ShrinkMemo = useMemo(() => {
     if (expansion) return null;
-    return listCom.map(function (item, index) {
-      var Ele = handMenuEle(item.children);
+    return listCom.map((item, index) => {
+      const Ele = handMenuEle(item.children);
       return jsx(Ele, Object.assign({
         className: handShrinkClass(item, index),
         onMouseEnter: mouseEnterShrinkFunc(item, index),
@@ -966,7 +904,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
     });
   }, [expansion, listCom, idMenuLast, selectMenuCom, openChildIndex]);
   /** 向上翻页 */
-  var PrevScroll = useMemo(function () {
+  const PrevScroll = useMemo(() => {
     return jsx(Fragment, {
       children: flipDisable.prev && jsx("div", Object.assign({
         className: "scroll-top"
@@ -980,7 +918,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
     });
   }, [flipDisable]);
   /** 向下翻页 */
-  var NextScroll = useMemo(function () {
+  const NextScroll = useMemo(() => {
     return jsx(Fragment, {
       children: flipDisable.next && jsx("div", Object.assign({
         className: "scroll-bottom"
@@ -994,7 +932,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
     });
   }, [flipDisable]);
   /** 收缩弹出框菜单 */
-  var MenuItemPopperMemo = useMemo(function () {
+  const MenuItemPopperMemo = useMemo(() => {
     return jsx(Fragment, {
       children: openChild && jsx(MenuItemPopper, {
         open: openChild,
@@ -1014,9 +952,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
   return jsxs(Fragment, {
     children: [jsxs("div", Object.assign({
       className: handClass(),
-      onWheel: function onWheel(e) {
-        return handleScroll(e);
-      }
+      onWheel: e => handleScroll(e)
     }, {
       children: [PrevScroll, jsx("div", Object.assign({
         className: "vertical-menu-list-box"
@@ -1032,28 +968,29 @@ var VerticalMenuList = function VerticalMenuList(props) {
   });
 };
 
-var FooterExpansion = function FooterExpansion(props) {
-  var _props$expansion = props.expansion,
-    expansion = _props$expansion === void 0 ? true : _props$expansion,
-    expandIcon = props.expandIcon,
-    shrinkIcon = props.shrinkIcon,
-    customizeContent = props.customizeContent,
-    clickExpansion = props.clickExpansion,
-    version = props.version,
-    render = props.render,
-    className = props.className;
+const FooterExpansion = props => {
+  const {
+    expansion = true,
+    expandIcon,
+    shrinkIcon,
+    customizeContent,
+    clickExpansion,
+    version,
+    render,
+    className
+  } = props;
   /** 点击展开/收起按钮 */
-  var clickExpansionCom = function clickExpansionCom() {
+  const clickExpansionCom = () => {
     clickExpansion && clickExpansion(!expansion);
   };
   /**
    * 处理内容
    * @return {ReactNode}
    */
-  var handContent = function handContent() {
+  const handContent = () => {
     if (render) return render;
     if (customizeContent) return customizeContent;
-    var handIcon = function handIcon() {
+    const handIcon = () => {
       if (expansion) {
         if (expandIcon) return expandIcon;
         return jsx("span", Object.assign({
@@ -1083,8 +1020,8 @@ var FooterExpansion = function FooterExpansion(props) {
     });
   };
   // 处理className
-  var handClass = function handClass() {
-    var str = 'footer-expansion';
+  const handClass = () => {
+    let str = 'footer-expansion';
     if (className) str += " ".concat(className);
     if (!expansion) str += ' footer-expansion-shrink';
     return str;
@@ -1096,47 +1033,41 @@ var FooterExpansion = function FooterExpansion(props) {
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-vertical-menu {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\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}\n.paraui-v4-vertical-menu > .menu-logo {\n  width: 100%;\n  display: inline-block;\n  padding: 20px 16px 0 16px;\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}\n.paraui-v4-vertical-menu > .menu-logo.menu-logo-shrink {\n  padding: 20px 0 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span > svg {\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  cursor: pointer;\n  display: flex;\n  border-radius: 4px;\n  text-decoration: none;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon {\n  width: 20px;\n  margin-right: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  font-size: 16px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  white-space: nowrap;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-open > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  transform: rotate(180deg);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span > svg {\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .footer-expansion {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 16px;\n  white-space: nowrap;\n  height: 48px;\n  padding-left: 16px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 4px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon svg {\n  font-size: 24px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .version {\n  font-size: 14px;\n  width: calc(100% - 32px);\n  text-align: right;\n  padding-right: 20px;\n  padding-left: 12px;\n}\n.paraui-v4-vertical-menu > .footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n  padding-left: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  position: relative;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  position: relative;\n  font-size: 20px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  position: absolute;\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 1px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list {\n  padding: 24px 16px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 20px;\n  top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list {\n  padding: 24px 12px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 18px;\n  top: 1px;\n}\n\n.paraui-v4-vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n  border-radius: 4px;\n  padding: 4px 0;\n  max-height: 320px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 200px;\n  padding: 0px 10px;\n  display: flex;\n  cursor: pointer;\n  text-decoration: none;\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  content: \"\";\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  width: 16px;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  margin-right: 12px;\n}\n.paraui-v4-vertical-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  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-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: 16px;\n  transition: all 0.3s;\n  position: relative;\n  transform: rotate(270deg);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-v4-vertical-menu-deep > .menu-logo {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .menu-logo svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon {\n  background: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .version {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n\n.paraui-v4-vertical-menu-light {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-vertical-menu-light > .menu-logo {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .menu-logo svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon {\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .version {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content {\n  background-color: rgb(255, 255, 255);\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(234, 236, 241);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-vertical-menu {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\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}\n.paraui-v4-vertical-menu > .menu-logo {\n  width: 100%;\n  display: inline-block;\n  padding: 20px 16px 0 16px;\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}\n.paraui-v4-vertical-menu > .menu-logo.menu-logo-shrink {\n  padding: 20px 0 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-top > span > svg {\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  cursor: pointer;\n  display: flex;\n  border-radius: 4px;\n  text-decoration: none;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon {\n  width: 20px;\n  margin-right: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  font-size: 16px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  white-space: nowrap;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-open > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  transform: rotate(180deg);\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-vertical-menu > .vertical-menu-list > .scroll-bottom > span > svg {\n  font-size: 18px;\n}\n.paraui-v4-vertical-menu > .footer-expansion {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 16px;\n  white-space: nowrap;\n  height: 48px;\n  padding-left: 16px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 4px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .icon svg {\n  font-size: 24px;\n}\n.paraui-v4-vertical-menu > .footer-expansion > .version {\n  font-size: 14px;\n  width: calc(100% - 32px);\n  text-align: right;\n  padding-right: 20px;\n  padding-left: 12px;\n}\n.paraui-v4-vertical-menu > .footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n  padding-left: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:last-child {\n  margin-bottom: 0;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  position: relative;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  position: relative;\n  font-size: 20px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  position: absolute;\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 1px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list {\n  padding: 24px 16px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 8px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-large.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 20px;\n  top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list {\n  padding: 24px 12px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 4px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list {\n  padding: 24px 0px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.paraui-v4-vertical-menu.paraui-v4-vertical-menu-small.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > .menu-item-shrink-badge {\n  left: 18px;\n  top: 1px;\n}\n\n.paraui-v4-vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content {\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 4px;\n  border: 1px solid rgba(212, 218, 227, 0.4);\n  padding: 4px 0;\n  max-height: 320px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 200px;\n  padding: 0px 10px;\n  display: flex;\n  cursor: pointer;\n  text-decoration: none;\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  content: \"\";\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  width: 16px;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  margin-right: 12px;\n}\n.paraui-v4-vertical-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  position: relative;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  font-size: 14px;\n  width: 100%;\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge {\n  height: 16px;\n  min-width: 16px;\n  color: white;\n  background: rgb(46, 101, 230);\n  border-radius: 8px;\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  padding: 0 4px;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content > .menu-item-badge > span {\n  height: 16px;\n  line-height: 16px;\n  transform: scale(0.8);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-vertical-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: 16px;\n  transition: all 0.3s;\n  position: relative;\n  transform: rotate(270deg);\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v4-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v4-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-v4-vertical-menu-deep > .menu-logo {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .menu-logo svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon {\n  background: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .icon:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-deep > .footer-expansion > .version {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-deep.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(34, 54, 102);\n}\n\n.paraui-v4-vertical-menu-light {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-vertical-menu-light > .menu-logo {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .menu-logo svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-top > span:hover > svg, .paraui-v4-vertical-menu-light > .vertical-menu-list > .scroll-bottom > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v4-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon {\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .icon:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light > .footer-expansion > .version {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content {\n  background-color: rgb(234, 236, 241);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-vertical-menu-light.paraui-v4-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > .vertical-menu-list-item-shrink-content > svg {\n  color: rgb(46, 101, 230);\n}\n\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-deep > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(34, 54, 102);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content {\n  background-color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  padding: 2px 12px;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: white;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light.paraui-v4-vertical-menu-item-popper-tooltip > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: transparent;\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content {\n  background-color: rgb(255, 255, 255);\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-content {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-vertical-menu-item-popper-light > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(234, 236, 241);\n}";
 styleInject(css_248z);
 
-var Menu = function Menu(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? 'deep' : _props$color,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    logoProps = props.logoProps,
-    menuListProps = props.menuListProps,
-    _props$expansion = props.expansion,
-    expansion = _props$expansion === void 0 ? true : _props$expansion,
-    onClickExpansion = props.onClickExpansion,
-    selectMenu = props.selectMenu,
-    onClickMenu = props.onClickMenu,
-    className = props.className,
-    style = props.style,
-    _props$shrinkOthers = props.shrinkOthers,
-    shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers,
-    footerExpansionProps = props.footerExpansionProps,
-    _props$showExpansion = props.showExpansion,
-    showExpansion = _props$showExpansion === void 0 ? true : _props$showExpansion;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    expansionCom = _useState2[0],
-    setExpansionCom = _useState2[1];
-  useEffect(function () {
+const Menu = props => {
+  const {
+    color = 'deep',
+    size = 'large',
+    logoProps,
+    menuListProps,
+    expansion = true,
+    onClickExpansion,
+    selectMenu,
+    onClickMenu,
+    className,
+    style,
+    shrinkOthers = true,
+    footerExpansionProps,
+    showExpansion = true
+  } = props;
+  const [expansionCom, setExpansionCom] = useState(true);
+  useEffect(() => {
     if (expansion !== expansionCom) setExpansionCom(expansion);
   }, [expansion]);
   /**
    * 点击展开 / 收起
    */
-  var clickExpansion = function clickExpansion() {
+  const clickExpansion = () => {
     onClickExpansion && onClickExpansion(!expansionCom);
   };
   /**
    * 处理class
    * @return class名
    */
-  var handClass = function handClass() {
-    var str = "".concat($prefixCls, "-vertical-menu");
+  const handClass = () => {
+    let str = "".concat($prefixCls, "-vertical-menu");
     if (className) str += " ".concat(className);
     if (size) str += " ".concat($prefixCls, "-vertical-menu-").concat(size);
     if (color) str += " ".concat($prefixCls, "-vertical-menu-").concat(color);
@@ -1144,13 +1075,13 @@ var Menu = function Menu(props) {
     return str;
   };
   /** 头像memo */
-  var LogoMemo = useMemo(function () {
+  const LogoMemo = useMemo(() => {
     return props.logoProps && jsx(Logo, Object.assign({}, logoProps, {
       expansion: expansionCom
     }));
   }, [logoProps, expansionCom]);
   /** 菜单memo */
-  var MenuListMemo = useMemo(function () {
+  const MenuListMemo = useMemo(() => {
     return props.menuListProps && jsx(VerticalMenuList, Object.assign({}, props.menuListProps, {
       color: color,
       expansion: expansionCom,
@@ -1161,7 +1092,7 @@ var Menu = function Menu(props) {
     }));
   }, [menuListProps, expansionCom, selectMenu, onClickMenu, color, size]);
   /** 底部展开收起 */
-  var ExpansionMemo = useMemo(function () {
+  const ExpansionMemo = useMemo(() => {
     if (!showExpansion) return null;
     return jsx(FooterExpansion, Object.assign({
       clickExpansion: clickExpansion