@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/lib/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _antd = require("antd");
-var _reactRouterDom = require("react-router-dom");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactRouterDom = require("react-router-dom");
 var _index = require("../../index");
 var _SideMenu = _interopRequireDefault(require("../SideMenu"));
+var _index2 = require("../../../../index");
 var _utils = require("../../../../utils");
 var FoldMenu = function FoldMenu(props) {
   var style = props.style,
@@ -27,77 +29,85 @@ var FoldMenu = function FoldMenu(props) {
     'pro-layout-menu-tooltip-has-notice': notice,
     'pro-layout-menu-tooltip-nav-open': collapsed
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var _useContext = (0, _react.useContext)(_index2.LayoutContext),
+    selectedPath = _useContext.selectedPath;
+  return (0, _jsxRuntime.jsx)("div", {
     className: "pro-layout-menu-fold",
-    style: (0, _objectSpread2.default)({}, style)
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "pro-layout-menu-fold-list",
-    style: (0, _objectSpread2.default)({}, style)
-  }, menus.map(function (item, index) {
-    var _url$split;
-    var id = item.id,
-      url = item.url,
-      name = item.name,
-      icon = item.icon,
-      imgUrl = item.imgUrl,
-      imgActiveUrl = item.imgActiveUrl,
-      hideInMenu = item.hideInMenu,
-      children = item.children;
-    // 隐藏菜单
-    if (hideInMenu) {
-      return null;
-    }
-    var selectedMenu = (0, _utils.getUrlParams)('activeMenu');
-    // 取第一级
-    var currentKeyIdPath = (0, _utils.getPathNameKey)({
-      menus: menus,
-      pathName: selectedMenu || window.location.pathname // 优先匹配URL中定位菜单
-    }) || [];
-    var cls = (0, _classnames.default)({
-      active: currentKeyIdPath.includes(id)
-    });
-    // 是否包含子级菜单
-    var hasChildrenMenu = Array.isArray(children) && children.length;
-    // 一级li Dom节点
-    var LiNode = /*#__PURE__*/_react.default.createElement("li", {
-      key: "".concat(id, "-").concat(name),
-      id: url === null || url === void 0 ? void 0 : (_url$split = url.split('/')) === null || _url$split === void 0 ? void 0 : _url$split[1],
-      className: "".concat(cls, " pro-layout-menu-fold-li")
-    }, /*#__PURE__*/_react.default.createElement("div", null, imgUrl ? /*#__PURE__*/_react.default.createElement("img", {
-      className: "pro-layout-icon",
-      src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
-      alt: "icon"
-    }) : /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: icon || '',
-      iconfontUrl: iconfontUrl || ''
-    }), /*#__PURE__*/_react.default.createElement("h2", null, name)));
-    return hasChildrenMenu ? /*#__PURE__*/_react.default.createElement(_antd.Popover, {
-      key: "".concat(id, "-").concat(name),
-      mouseEnterDelay: 0,
-      content: /*#__PURE__*/_react.default.createElement(_SideMenu.default, {
-        dataSource: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataSource), {}, {
-          menus: item
-        })
-      }),
-      color: "#fff",
-      overlayClassName: noticeCls,
-      overlayInnerStyle: {
-        marginTop: headerHeight - 48,
-        height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
-      },
-      placement: "rightTop"
-    }, LiNode) : !collapsed ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
-      placement: "right",
-      title: name,
-      key: item.redirectUrl || item.url
-    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-      to: item.redirectUrl || item.url,
-      key: item.redirectUrl || item.url
-    }, LiNode)) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-      to: item.redirectUrl || item.url,
-      key: item.redirectUrl || item.url
-    }, LiNode);
-  })));
+    style: (0, _objectSpread2.default)({}, style),
+    children: (0, _jsxRuntime.jsx)("ul", {
+      className: "pro-layout-menu-fold-list",
+      style: (0, _objectSpread2.default)({}, style),
+      children: menus.map(function (item, index) {
+        var _url$split;
+        var id = item.id,
+          url = item.url,
+          name = item.name,
+          icon = item.icon,
+          imgUrl = item.imgUrl,
+          imgActiveUrl = item.imgActiveUrl,
+          hideInMenu = item.hideInMenu,
+          children = item.children;
+        var toPath = item.redirectUrl || item.url;
+        // 隐藏菜单
+        if (hideInMenu) {
+          return null;
+        }
+        var selectedMenu = (0, _utils.getUrlParams)('activeMenu');
+        // 取第一级
+        var currentKeyIdPath = (0, _utils.getPathNameKey)({
+          menus: menus,
+          pathName: selectedMenu || selectedPath || window.location.pathname // 优先匹配URL中定位菜单
+        }) || [];
+        var cls = (0, _classnames.default)({
+          active: currentKeyIdPath.includes(id)
+        });
+        // 是否包含子级菜单
+        var hasChildrenMenu = Array.isArray(children) && children.length;
+        // 一级li Dom节点
+        var LiNode = (0, _jsxRuntime.jsx)("li", {
+          id: url === null || url === void 0 ? void 0 : (_url$split = url.split('/')) === null || _url$split === void 0 ? void 0 : _url$split[1],
+          className: "".concat(cls, " pro-layout-menu-fold-li"),
+          children: (0, _jsxRuntime.jsxs)("div", {
+            children: [imgUrl ? (0, _jsxRuntime.jsx)("img", {
+              className: "pro-layout-icon",
+              src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+              alt: "icon"
+            }) : (0, _jsxRuntime.jsx)(_index.Icon, {
+              type: icon || '',
+              iconfontUrl: iconfontUrl || ''
+            }), (0, _jsxRuntime.jsx)("h2", {
+              children: name
+            })]
+          })
+        }, "".concat(id, "-").concat(name));
+        return hasChildrenMenu ? (0, _jsxRuntime.jsx)(_antd.Popover, {
+          mouseEnterDelay: 0,
+          content: (0, _jsxRuntime.jsx)(_SideMenu.default, {
+            dataSource: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataSource), {}, {
+              menus: item
+            })
+          }),
+          color: "#fff",
+          overlayClassName: noticeCls,
+          overlayInnerStyle: {
+            marginTop: headerHeight - 48,
+            height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
+          },
+          placement: "rightTop",
+          children: LiNode
+        }, "".concat(id, "-").concat(name)) : !collapsed ? (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+          placement: "right",
+          title: name,
+          children: (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+            to: toPath,
+            children: LiNode
+          }, toPath)
+        }, toPath) : (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: toPath,
+          children: LiNode
+        }, toPath);
+      })
+    })
+  });
 };
-var _default = FoldMenu;
-exports.default = _default;
+var _default = exports.default = FoldMenu;

package/lib/ProLayout/components/Layout/Menu/FoldMenu/style/index.less

@@ -11,8 +11,8 @@
 
     div {
       display        : flex;
-      align-items    : top;
-      justify-content: left;
+      align-items    : center;
+      justify-content: center;
       color          : var(--zaui-text, #343434);
 
       .pro-layout-icon {
@@ -45,10 +45,10 @@
 
     h2 {
       display     : inline-block;
-      padding-left: 8px;
+      padding-left: var(--zaui-space-size-sm, 8px);
       color       : var(--zaui-base-bg, #ffffff);
       font-weight : normal;
-      font-size   : 14px;
+      font-size   : var(--zaui-font-size-md, 14px);
     }
 
     &.active {
@@ -81,7 +81,7 @@
 .pro-layout-menu-tooltip.ant-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.ant-popover-placement-rightTop {
   position    : fixed;
-  z-index     : 1051;
+  z-index     : 1001;
   left        : 49px !important;
   padding-left: 0
 }
@@ -95,6 +95,6 @@
 }
 
 .pro-layout-menu-tooltip .ant-popover-content .ant-popover-inner {
-  padding      : 0;
-  // box-shadow: 0 0 0
-}
+  padding   : 0;
+  box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
+}

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { OpenMenuPropsType } from './propsType';
-declare const OpenMenu: (props: OpenMenuPropsType) => React.JSX.Element;
+declare const OpenMenu: (props: OpenMenuPropsType) => JSX.Element;
 export default OpenMenu;

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,17 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _antd = require("antd");
 var _ahooks = require("ahooks");
 var _icons = require("@ant-design/icons");
-var _reactRouterDom = require("react-router-dom");
 var _classnames2 = _interopRequireDefault(require("classnames"));
+var _reactRouterDom = require("react-router-dom");
 var _lodash = require("lodash");
+var _index = require("../../../../index");
 var _utils = require("../../../../utils");
-var _index = require("../../index");
+var _index2 = require("../../index");
 var OpenMenu = function OpenMenu(props) {
-  var _getIdsByPathName, _history$location, _history$location$que;
+  var _getIdsByPathName;
   var className = props.className,
     dataSource = props.dataSource,
     style = props.style,
@@ -28,22 +29,27 @@ var OpenMenu = function OpenMenu(props) {
   var _ref = dataSource || {},
     menus = _ref.menus,
     sideMenu = _ref.sideMenu;
+  var linkRef = (0, _react.useRef)(null);
   // 通过URL匹配对应的ID用于回显
   var _useSetState = (0, _ahooks.useSetState)({
       selectedKeys: [],
-      openKeys: []
+      openKeys: [],
+      router: ''
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     _useSetState2$ = _useSetState2[0],
     selectedKeys = _useSetState2$.selectedKeys,
     openKeys = _useSetState2$.openKeys,
+    router = _useSetState2$.router,
     setState = _useSetState2[1];
-  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams(window.location.search);
+  var _useContext = (0, _react.useContext)(_index.LayoutContext),
+    onSelected = _useContext.onSelected;
   var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
     'pro-layout-open-menu': true
   }, "".concat(className), className));
   // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = (0, _utils.getIdsByPathName)(menus, history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : (_history$location$que = _history$location.query) === null || _history$location$que === void 0 ? void 0 : _history$location$que.activeMenu)) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
+  var selectKeyIdPath = ((_getIdsByPathName = (0, _utils.getIdsByPathName)(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
     return String(item);
   })) || [];
   var itemsTransform = (0, _react.useMemo)(function () {
@@ -57,23 +63,28 @@ var OpenMenu = function OpenMenu(props) {
         // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
         var isFirstMenu = item.keyIdPath.length === 1 || sideMenu && item.keyIdPath.length === 2;
         // 第一级菜单显示icon
-        item.label = /*#__PURE__*/_react.default.createElement("div", {
+        item.label = (0, _jsxRuntime.jsxs)("div", {
           className: (0, _classnames2.default)({
             'pro-layout-open-menu-lv1': isFirstMenu
-          })
-        }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.imgUrl && isFirstMenu ? /*#__PURE__*/_react.default.createElement("img", {
-          className: "pro-layout-icon",
-          src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
-          alt: "icon"
-        }) : item.icon && isFirstMenu ? /*#__PURE__*/_react.default.createElement(_index.Icon, {
-          type: item.icon || '',
-          iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
-        }) : /*#__PURE__*/_react.default.createElement("span", {
-          className: (0, _classnames2.default)({
-            'pro-layout-icon': true,
-            'pro-layout-icon-empty': isFirstMenu
-          })
-        })), /*#__PURE__*/_react.default.createElement("h2", null, item.name));
+          }),
+          children: [(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: item.imgUrl && isFirstMenu ? (0, _jsxRuntime.jsx)("img", {
+              className: "pro-layout-icon",
+              src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
+              alt: "icon"
+            }) : item.icon && isFirstMenu ? (0, _jsxRuntime.jsx)(_index2.Icon, {
+              type: item.icon || '',
+              iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
+            }) : (0, _jsxRuntime.jsx)("span", {
+              className: (0, _classnames2.default)({
+                'pro-layout-icon': true,
+                'pro-layout-icon-empty': isFirstMenu
+              })
+            })
+          }), (0, _jsxRuntime.jsx)("h2", {
+            children: item.name
+          })]
+        });
         item.key = String(item.id);
         item.router = item.redirectUrl || item.router || item.url;
         Object.keys(item).filter(function (keyItem) {
@@ -117,36 +128,49 @@ var OpenMenu = function OpenMenu(props) {
       });
     }
   }, [sideMenu]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: cls,
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_antd.Menu, {
-    mode: "inline",
-    theme: theme,
-    selectedKeys: selectedKeys,
-    openKeys: openKeys,
-    items: itemsTransform,
-    inlineIndent: 14,
-    expandIcon: /*#__PURE__*/_react.default.createElement(_icons.CaretDownOutlined, null),
-    onOpenChange: function onOpenChange(openKeys) {
-      setState({
-        openKeys: openKeys
-      });
-    },
-    onClick: function onClick(_ref2) {
-      var _item$props;
-      var item = _ref2.item,
-        keyPath = _ref2.keyPath;
-      setState({
-        selectedKeys: keyPath
-      });
-      history.push(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router);
-    },
-    style: {
-      height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
-      color: 'red'
+  (0, _react.useEffect)(function () {
+    // 路由变更，且不再demo文档中
+    if (router && !window.location.href.includes('~demos/prolayout')) {
+      linkRef.current.click();
     }
-  }));
+  }, [router]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: style,
+    children: [(0, _jsxRuntime.jsx)(_antd.Menu, {
+      mode: "inline",
+      // @ts-ignore
+      theme: theme,
+      selectedKeys: selectedKeys,
+      openKeys: openKeys,
+      items: itemsTransform,
+      inlineIndent: 14,
+      expandIcon: (0, _jsxRuntime.jsx)(_icons.CaretDownOutlined, {}),
+      onOpenChange: function onOpenChange(openKeys) {
+        setState({
+          openKeys: openKeys
+        });
+      },
+      onClick: function onClick(_ref2) {
+        var _item$props, _item$props2;
+        var item = _ref2.item,
+          keyPath = _ref2.keyPath;
+        setState({
+          selectedKeys: keyPath,
+          router: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router
+        });
+        onSelected({
+          selectedPath: item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.router
+        });
+      },
+      style: {
+        height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
+        color: 'red'
+      }
+    }), (0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+      to: router,
+      ref: linkRef
+    })]
+  });
 };
-var _default = OpenMenu;
-exports.default = _default;
+var _default = exports.default = OpenMenu;

package/lib/ProLayout/components/Layout/Menu/OpenMenu/propsType.d.ts

@@ -6,9 +6,11 @@ export interface OpenMenuPropsType {
         /** 是否是折叠模式的菜单 */
         sideMenu?: boolean;
     };
+    theme: string;
     [key: string]: any;
 }
 export interface StatePropsType {
     selectedKeys: string[];
     openKeys: string[];
+    router: string;
 }

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -37,6 +37,10 @@
 
     .ant-menu-item {
       padding-left: 30px !important;
+
+      &::after {
+        display: none;
+      }
     }
 
   }
@@ -51,6 +55,11 @@
   .ant-menu-submenu-title {
     &:hover {
       background: var(--ant-primary-8, #003eb3);
+
+      h2 {
+        color: #fff;
+      }
+
     }
   }
 
@@ -62,6 +71,10 @@
     .ant-menu-item-only-child {
       &:hover {
         background: var(--ant-primary-8, #003eb3);
+
+        h2 {
+          color: #fff;
+        }
       }
     }
   }
@@ -101,17 +114,15 @@
       }
 
       h2 {
-        flex-grow       : 1;
-        margin-bottom   : 0;
-        opacity         : 1;
-        color           : #fff;
-        transition      : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
-        display         : inline-block;
-        padding-left    : 12px;
-        color           : #CACACA;
-        // color        : var(--zaui-base-bg, #fff);
-        font-weight     : 400;
-        font-size       : 14px;
+        flex-grow    : 1;
+        margin-bottom: 0;
+        opacity      : 1;
+        transition   : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
+        display      : inline-block;
+        padding-left : 12px;
+        color        : #CACACA;
+        font-weight  : 400;
+        font-size    : var(--zaui-font-size-md, 14px);
       }
     }
 
@@ -177,4 +188,4 @@
     }
 
   }
-}
+}

package/lib/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -1,12 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ahooks = require("ahooks");
 var _OpenMenu = _interopRequireDefault(require("../OpenMenu"));
@@ -22,22 +22,25 @@ var SideMenu = function SideMenu(props) {
   var cls = (0, _classnames.default)({
     'pro-layout-sider-menu': true
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: cls
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    ref: ref
-  }, (menus === null || menus === void 0 ? void 0 : menus.name) || ''), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_OpenMenu.default, {
-    className: "pro-layout-sider-menu-list",
-    theme: "light",
-    dataSource: {
-      menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
-      iconfontUrl: iconfontUrl,
-      sideMenu: true
-    },
-    style: {
-      height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0), "px)")
-    }
-  })));
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    children: [(0, _jsxRuntime.jsx)("h2", {
+      ref: ref,
+      children: (menus === null || menus === void 0 ? void 0 : menus.name) || ''
+    }), (0, _jsxRuntime.jsx)("div", {
+      children: (0, _jsxRuntime.jsx)(_OpenMenu.default, {
+        className: "pro-layout-sider-menu-list",
+        theme: "light",
+        dataSource: {
+          menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
+          iconfontUrl: iconfontUrl,
+          sideMenu: true
+        },
+        style: {
+          height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0), "px)")
+        }
+      })
+    })]
+  });
 };
-var _default = SideMenu;
-exports.default = _default;
+var _default = exports.default = SideMenu;

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -5,7 +5,7 @@
   h2 {
     margin-bottom: 0;
     padding      : 16px 16px 8px;
-    color        : #343434;
+    color        : var(--zaui-text, #343434);
     color        : var(--zaui-text);
     font-weight  : 500;
     font-size    : var(--zaui-font-size-lg, 16px);
@@ -51,14 +51,14 @@
             display: none;
 
             &~h2 {
-              margin-left: 16px;
+              margin-left: var(--zaui-space-size-md, 16px);
             }
           }
         }
 
         .pro-layout-icon {
           fill : currentColor;
-          color: #343434 !important;
+          color: var(--zaui-text, #343434) !important;
         }
 
         &.ant-menu-sub {
@@ -72,6 +72,7 @@
         .ant-menu-submenu-title:hover,
         .ant-menu-item:hover {
           background-color: #f2f2f2;
+          color           : #fff;
         }
 
         .ant-menu-item {
@@ -94,4 +95,4 @@
   }
 
 
-}
+}