tntd 1.4.6 → 1.4.7

package/lib/Layout/SideMenu.js

@@ -1,367 +1,453 @@
-"use strict";
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-require("antd/lib/menu/style");
-
-var _menu = _interopRequireDefault(require("antd/lib/menu"));
-
-var _react = require("react");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _lodash = require("lodash");
-
-var _ActionsContext = _interopRequireDefault(require("./ActionsContext"));
-
-var _utils = require("./utils");
-
-var _storage = require("./storage");
-
-var _Iconfont = _interopRequireDefault(require("./Iconfont"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+import { useState, useEffect, useContext } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { Menu } from 'antd';
+import { get } from 'lodash';
+import ActionsContext from './ActionsContext';
+import { getSelectedMenuInfo, isGroupMenu, isNewTabMenu, openInNewTab, traverseTree } from './utils';
+import { setSideMenuStore } from './storage';
+import Iconfont from './Iconfont';
+
+const color = 'rgba(255,255,255,.85)';
+const compatibleColor = '#a1d7ff';
+const { SubMenu, Item: MenuItem } = Menu;
+const TNTMenu = styled(Menu)`
+    background: none !important;
+    &.ant-menu.ant-menu-root {
+        position: relative;
+        transition: none !important;
+        padding-top: 10px;
+        border-right: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        height: calc(100vh - ${props => `${props.theme.headerHeight}px`});
+        overflow-y: auto;
+        overflow-x: hidden;
+        .collapseIconPlacementBottom & {
+            padding-bottom: 36px;
+        }
+        .tnt-themeS1 & {
+            overflow-x: unset;
+            box-shadow: 10px 0 10px -5px rgba(0,0,0,0.10);
+            z-index: 2;
+        }
+        scrollbar-width: none;
+        -ms-overflow-style: none;
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        &::-moz-scrollbar {
+            display: none;
+        }
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n    .large-size & {\n        font-size: 15px;\n    }\n    color: rgba(255,255,255,.85);\n    .compatible & {\n        color: #A1D7FF;\n    }\n    .tnt-themeS1 & {\n        color: ", ";\n    }\n    .tnt-icon {\n        margin-right: 12px;\n        font-size: 16px;\n        position: relative;\n        top: 1px;\n\n        .large-size & {\n            font-size: 18px;\n            top: auto;\n        }\n        .tnt-themeS1 & {\n            /* color: #7e8081; */\n            color: ", ";\n        }\n    }\n"]);
+        /** 一级结点是菜单样式开始 */
+        & > .ant-menu-item {
+            & > .tnt-icon:first-child {
+                font-size: 16px
+            }
+        }
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
+        .ant-layout-sider-collapsed & {
+            & > .ant-menu-item {
+                & > .tnt-icon:first-child {
+                    padding-left: 8px;
+                }
+                a {
+                    visibility: hidden;
+                }
+            }
+        }
+        /** 一级结点是菜单样式结束 */
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    background: none !important;\n    &.ant-menu.ant-menu-root {\n        position: relative;\n        transition: none !important;\n        padding-top: 10px;\n        border-right: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        height: calc(100vh - ", ");\n        overflow-y: auto;\n        overflow-x: hidden;\n        .collapseIconPlacementBottom & {\n            padding-bottom: 36px;\n        }\n        .tnt-themeS1 & {\n            overflow-x: unset;\n            box-shadow: 10px 0 10px -5px rgba(0,0,0,0.10);\n            z-index: 2;\n        }\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n\n        &::-webkit-scrollbar {\n            display: none;\n        }\n        &::-moz-scrollbar {\n            display: none;\n        }\n\n        /** \u4E00\u7EA7\u7ED3\u70B9\u662F\u83DC\u5355\u6837\u5F0F\u5F00\u59CB */\n        & > .ant-menu-item {\n            & > .tnt-icon:first-child {\n                font-size: 16px\n            }\n        }\n\n        .ant-layout-sider-collapsed & {\n            & > .ant-menu-item {\n                & > .tnt-icon:first-child {\n                    padding-left: 8px;\n                }\n                a {\n                    visibility: hidden;\n                }\n            }\n        }\n        /** \u4E00\u7EA7\u7ED3\u70B9\u662F\u83DC\u5355\u6837\u5F0F\u7ED3\u675F */\n\n        .ant-menu-item:active,\n        .ant-menu-submenu-title:active {\n            background: none;\n        }\n\n        .ant-menu-submenu .ant-menu-sub {\n            background: #212635;\n            border-radius: 0 0 2px 2px;\n            .compatible & {\n                background: #07408d !important;\n            }\n            .tnt-themeS1 & {\n                background: #fff !important;\n            }\n\n            // \u84DD\u8272\u7CFB\u5217 \u83DC\u5355\u5C55\u5F00\u533A\u57DF\u989C\u8272\n            .tnt-themeS3 & {\n                background: #07408D !important;\n            }\n        }\n        .ant-menu-submenu.ant-menu-submenu-active,\n        .ant-menu-submenu.ant-menu-submenu-selected {\n            background: rgba(47,129,247,.25) !important;\n            .tnt-themeS1 & {\n                background: ", " !important;\n            }\n\n            // \u84DD\u8272\u7CFB \u4E00\u7EA7\u83DC\u5355\u7684\u9009\u4E2D\u6548\u679C\n            .tnt-themeS3 & {\n                background: #204085 !important;\n            }\n        }\n        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,\n        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {\n            background: none !important;\n            .tnt-themeS1 & {\n                background: ", " !important;\n            }\n            // \u84DD\u8272\u7CFB \u5B50\u7EA7\u83DC\u5355\u7EA7\u7684\u9009\u4E2D\u6548\u679C\n            .tnt-themeS3 & {\n                background: #204085 !important;\n            }\n        }\n        .ant-menu-item {\n            margin: 0;\n            font-size: 14px;\n            padding-left: 54px !important;\n            height: ", ";\n            line-height: ", ";\n        }\n\n        & > .ant-menu-item {\n            padding-left: 24px !important;\n            width: 100%;\n\n            & > .tnt-icon {\n                margin-right: 12px;\n            }\n            & > a {\n                display: inline-block;\n            }\n        }\n\n        .ant-menu-submenu-title {\n            position: relative;\n            color: ", ";\n            .tnt-themeS1 & {\n                color: ", ";\n            }\n            height: ", ";\n            line-height: ", ";\n            .tnt-icon {\n                .tnt-themeS1 & {\n                    color: ", ";\n                }\n            }\n            & > .tnt-icon {\n                position: absolute;\n                right: 20px;\n                top: 1px;\n                font-size: 10px;\n            }\n\n            // \u84DD\u8272\u7CFB\u4E3B\u9898\n            .tnt-themeS3 & {\n                color: #FFF;\n            }\n            .tnt-icon {\n                .tnt-themeS3 & {\n                    color: #FFF;\n                }\n            }\n        }\n\n        & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {\n            margin-top: 0;\n            margin-bottom: 0;\n            padding-left: 54px !important;\n        }\n    }\n\n    &.ant-menu .menu-arrow-right {\n        color: ", ";\n    }\n\n    .ant-menu-item, .ant-menu-item > a {\n        color: ", ";\n        .tnt-themeS1 & {\n            color: ", ";\n        }\n        &:hover {\n            color: #fff;\n            .tnt-themeS1 & {\n                color: ", ";\n            }\n        }\n\n        // \u84DD\u8272\u7CFB\u5217\n        .tnt-themeS3 & {\n            color: #fff;\n        }\n        &:hover {\n            .tnt-themeS3 & {\n                color: #fff;\n            }\n        }\n    }\n    & > .ant-menu-item.ant-menu-item-selected,\n    &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {\n        color: rgba(255,255,255,.85);\n        background-color: ", ";\n        .compatible & {\n            background-color: #013479;\n        }\n        & > a {\n            .tnt-themeS1 & {\n                color: #fff;\n            }\n        }\n        .tnt-themeS1 & {\n            color: #fff;\n            background-color: ", ";\n        }\n\n        // \u84DD\u8272\u7CFB \u5B50\u9879\u9009\u4E2D\u989C\u8272\n        .tnt-themeS3 & {\n            color: #fff;\n            background: #013479;\n            &::after{\n                content:\"\";\n                display:none;\n            }\n        }\n    }\n    .ant-menu-submenu.ant-menu-submenu-selected {\n        .tnt-themeS2 & {\n            background: #141825;\n        }\n        .tnt-themeS2.compatible & {\n            background: rgba(47,129,247,.25) !important;\n        }\n    }\n"]);
+        .ant-menu-item:active,
+        .ant-menu-submenu-title:active {
+            background: none;
+        }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+        .ant-menu-submenu .ant-menu-sub {
+            background: #212635;
+            border-radius: 0 0 2px 2px;
+            .compatible & {
+                background: #07408d !important;
+            }
+            .tnt-themeS1 & {
+                background: #fff !important;
+            }
+
+            // 蓝色系列 菜单展开区域颜色
+            .tnt-themeS3 & {
+                background: #07408D !important;
+            }
+        }
+        .ant-menu-submenu.ant-menu-submenu-active,
+        .ant-menu-submenu.ant-menu-submenu-selected {
+            background: rgba(47,129,247,.25) !important;
+            .tnt-themeS1 & {
+                background: ${props => props.theme.dividerColor} !important;
+            }
+
+            // 蓝色系 一级菜单的选中效果
+            .tnt-themeS3 & {
+                background: #204085 !important;
+            }
+        }
+        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,
+        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {
+            background: none !important;
+            .tnt-themeS1 & {
+                background: ${props => props.theme.dividerColor} !important;
+            }
+            // 蓝色系 子级菜单级的选中效果
+            .tnt-themeS3 & {
+                background: #204085 !important;
+            }
+        }
+        .ant-menu-item {
+            margin: 0;
+            font-size: 14px;
+            padding-left: 54px !important;
+            height: ${({ size }) => size === 'large' ? '40px' : '36px'};
+            line-height: ${({ size }) => size === 'large' ? '40px' : '36px'};
+        }
 
-  return data;
-}
+        & > .ant-menu-item {
+            padding-left: 24px !important;
+            width: 100%;
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+            & > .tnt-icon {
+                margin-right: 12px;
+            }
+            & > a {
+                display: inline-block;
+            }
+        }
 
-var color = 'rgba(255,255,255,.85)';
-var compatibleColor = '#a1d7ff';
-var SubMenu = _menu["default"].SubMenu,
-    MenuItem = _menu["default"].Item;
-var TNTMenu = (0, _styledComponents["default"])(_menu["default"])(_templateObject(), function (props) {
-  return "".concat(props.theme.headerHeight, "px");
-}, function (props) {
-  return props.theme.dividerColor;
-}, function (props) {
-  return props.theme.dividerColor;
-}, function (_ref) {
-  var size = _ref.size;
-  return size === 'large' ? '40px' : '36px';
-}, function (_ref2) {
-  var size = _ref2.size;
-  return size === 'large' ? '40px' : '36px';
-}, function (props) {
-  return props.theme.compatible ? compatibleColor : color;
-}, function (props) {
-  return props.theme.primaryTextColor;
-}, function (_ref3) {
-  var size = _ref3.size;
-  return size === 'large' ? '40px' : '36px';
-}, function (_ref4) {
-  var size = _ref4.size;
-  return size === 'large' ? '40px' : '36px';
-}, function (props) {
-  return props.theme.lightIconColor;
-}, function (props) {
-  return props.theme.compatible ? compatibleColor : color;
-}, function (props) {
-  return props.theme.compatible ? compatibleColor : color;
-}, function (props) {
-  return props.theme.primaryTextColor;
-}, function (props) {
-  return props.theme.primaryColor;
-}, function (props) {
-  return props.theme.primaryColor;
-}, function (props) {
-  return props.theme.primaryColor;
-});
-
-var MenuTitle = _styledComponents["default"].span(_templateObject2(), function (props) {
-  return props.theme.primaryTextColor;
-}, function (props) {
-  return "".concat(props.theme.iconColor);
-});
-
-var _default = (0, _styledComponents.withTheme)(function (props) {
-  var actions = (0, _react.useContext)(_ActionsContext["default"]);
-  var language = props.language,
-      _props$menus = props.menus,
-      menus = _props$menus === void 0 ? [] : _props$menus,
-      formatMenuPath = props.formatMenuPath,
-      changeRouter = props.changeRouter,
-      selectedKey = props.selectedKey,
-      openKeys = props.openKeys,
-      onSelect = props.onSelect,
-      onBeforeChange = props.onBeforeChange,
-      onChange = props.onChange,
-      onOpenChange = props.onOpenChange,
-      collapsed = props.collapsed;
-
-  var _getSelectedMenuInfo = (0, _utils.getSelectedMenuInfo)(selectedKey, menus),
-      subMenu = _getSelectedMenuInfo.subMenu,
-      parentMenus = _getSelectedMenuInfo.parentMenus;
-
-  var _useState = (0, _react.useState)([(0, _lodash.get)(subMenu, 'code')]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
-
-  var onSelectMenu = function onSelectMenu(param) {
-    var _ref5 = (0, _utils.getSelectedMenuInfo)(param.key, menus) || {},
-        subMenu = _ref5.subMenu,
-        parentMenus = _ref5.parentMenus;
-
-    var params = _objectSpread({}, param, {
-      data: subMenu
-    });
-
-    var defaultBeforeChange = function defaultBeforeChange(_ref6) {
-      var data = _ref6.data;
-      return !(0, _utils.isNewTabMenu)(data);
-    };
-
-    var defaultSelect = function defaultSelect(_ref7) {
-      var _window$location$path;
-
-      var data = _ref7.data;
-
-      var _ref8 = data || {},
-          path = _ref8.path;
-
-      var formatPath = formatMenuPath || function (path) {
-        return path;
-      };
-
-      if ((0, _utils.isNewTabMenu)(data)) {
-        (0, _utils.openInNewTab)(formatPath(data == null ? void 0 : data.path, data));
-        return;
-      }
-
-      var routerPrefix = (_window$location$path = window.location.pathname.match(/(^\/[^\/]+)/i)) == null ? void 0 : _window$location$path[1];
-
-      if (path == null ? void 0 : path.startsWith(routerPrefix)) {
-        var forwardPath = formatPath(path, data);
-        changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data == null ? void 0 : data.name, forwardPath);
-      } else {
-        window.location.href = formatPath(path, data);
-      }
-    };
-
-    var finalSelect = onSelect || defaultSelect;
-
-    if (param.key !== (0, _lodash.get)(selectedKeys, '0')) {
-      var finalBeforeChange = onBeforeChange || defaultBeforeChange;
-
-      if (finalBeforeChange(params, (0, _lodash.get)(selectedKeys, '0'))) {
-        // SideMenu菜单收起状态
-        if (collapsed) {
-          var newOpenKeys = parentMenus == null ? void 0 : parentMenus.map(function (_ref9) {
-            var code = _ref9.code;
-            return code;
-          }).reverse();
-          onOpenChange(newOpenKeys);
-          (0, _storage.setSideMenuStore)({
-            openKeys: newOpenKeys,
-            beforeOpenKeys: newOpenKeys
-          });
+        .ant-menu-submenu-title {
+            position: relative;
+            color: ${props => props.theme.compatible ? compatibleColor : color};
+            .tnt-themeS1 & {
+                color: ${props => props.theme.primaryTextColor};
+            }
+            height: ${({ size }) => size === 'large' ? '40px' : '36px'};
+            line-height: ${({ size }) => size === 'large' ? '40px' : '36px'};
+            .tnt-icon {
+                .tnt-themeS1 & {
+                    color: ${props => props.theme.lightIconColor};
+                }
+            }
+            & > .tnt-icon {
+                position: absolute;
+                right: 20px;
+                top: 1px;
+                font-size: 10px;
+            }
+
+            // 蓝色系主题
+            .tnt-themeS3 & {
+                color: #FFF;
+            }
+            .tnt-icon {
+                .tnt-themeS3 & {
+                    color: #FFF;
+                }
+            }
         }
 
-        setSelectedKeys([param.key]);
-        onChange && onChange(params);
-      }
+        & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {
+            margin-top: 0;
+            margin-bottom: 0;
+            padding-left: 54px !important;
+        }
     }
 
-    actions.setSelectedMenuKey(param.key);
-    setSelectedKeys([param.key]);
-    finalSelect(params);
-  };
-
-  var getExpandIcon = function getExpandIcon(code) {
-    if (props.theme.compatible) {
-      return openKeys.includes(code) ? 'minus' : 'plus';
+    &.ant-menu .menu-arrow-right {
+        color: ${props => props.theme.compatible ? compatibleColor : color};
     }
 
-    return openKeys.includes(code) ? 'up' : 'down';
-  };
-
-  var onOpenKeysChange = function onOpenKeysChange(keys) {
-    var openKey = keys.find(function (key) {
-      return !openKeys.includes(key);
-    }); // const closeKey = openKeys.find(key => !keys.includes(key));
-
-    var newOpenKeys = keys;
-
-    var findParentGroupKey = function findParentGroupKey(key, openKeys) {
-      var parentGroupKey;
-      (0, _utils.traverseTree)(menus, function (node, pnode) {
-        if (node.code === key) {
-          if (pnode && openKeys.includes(pnode == null ? void 0 : pnode.code)) {
-            parentGroupKey = pnode == null ? void 0 : pnode.code;
-          }
+    .ant-menu-item, .ant-menu-item > a {
+        color: ${props => props.theme.compatible ? compatibleColor : color};
+        .tnt-themeS1 & {
+            color: ${props => props.theme.primaryTextColor};
+        }
+        &:hover {
+            color: #fff;
+            .tnt-themeS1 & {
+                color: ${props => props.theme.primaryColor};
+            }
+        }
 
-          return false;
+        // 蓝色系列
+        .tnt-themeS3 & {
+            color: #fff;
+        }
+        &:hover {
+            .tnt-themeS3 & {
+                color: #fff;
+            }
         }
-      });
-      return parentGroupKey;
-    }; // 展开openKey
-
-
-    if (openKey) {
-      // 父子关系展开
-      var parentGroupKey = findParentGroupKey(openKey, openKeys);
-
-      if (parentGroupKey) {
-        newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys;
-      } else {
-        newOpenKeys = [openKey];
-      }
-    } else {
-      // 收起closeKey
-      newOpenKeys = keys;
     }
+    & > .ant-menu-item.ant-menu-item-selected,
+    &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        color: rgba(255,255,255,.85);
+        background-color: ${props => props.theme.primaryColor};
+        .compatible & {
+            background-color: #013479;
+        }
+        & > a {
+            .tnt-themeS1 & {
+                color: #fff;
+            }
+        }
+        .tnt-themeS1 & {
+            color: #fff;
+            background-color: ${props => props.theme.primaryColor};
+        }
 
-    onOpenChange(newOpenKeys);
-  };
-
-  (0, _react.useEffect)(function () {
-    setSelectedKeys([selectedKey]);
-
-    if (selectedKey && !collapsed && (parentMenus == null ? void 0 : parentMenus.length)) {
-      onOpenChange(parentMenus == null ? void 0 : parentMenus.map(function (_ref10) {
-        var code = _ref10.code;
-        return code;
-      }).reverse());
+        // 蓝色系 子项选中颜色
+        .tnt-themeS3 & {
+            color: #fff;
+            background: #013479;
+            &::after{
+                content:"";
+                display:none;
+            }
+        }
     }
-
-    actions.setSelectedMenuKey(selectedKey);
-  }, [selectedKey]);
-  actions.off('menuSelect', onSelectMenu);
-  actions.on('menuSelect', onSelectMenu);
-  return React.createElement(TNTMenu, {
-    mode: "inline",
-    defaultSelectedKeys: [],
-    openKeys: openKeys,
-    selectedKeys: selectedKeys,
-    onOpenChange: onOpenKeysChange
-  }, menus == null ? void 0 : menus.map(function (menu) {
-    var MenuLink = function MenuLink(_ref11) {
-      var menuName = _ref11.menuName,
-          enName = _ref11.enName,
-          path = _ref11.path;
-      return React.createElement("a", {
-        href: path,
-        onClick: function onClick(evt) {
-          return evt.preventDefault();
+    .ant-menu-submenu.ant-menu-submenu-selected {
+        .tnt-themeS2 & {
+            background: #141825;
         }
-      }, {
-        cn: menuName,
-        en: enName
-      }[language]);
-    };
-
-    if ((0, _utils.isGroupMenu)(menu)) {
-      var _menu$children;
-
-      var getSubMenuProps = function getSubMenuProps(_ref12) {
-        var code = _ref12.code,
-            groupIcon = _ref12.groupIcon,
-            groupName = _ref12.groupName,
-            enName = _ref12.enName;
-        var isSubGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-        return {
-          key: code,
-          title: React.createElement(MenuTitle, {
-            style: collapsed && isSubGroup ? {
-              color: props.theme.primaryTextColor
-            } : {}
-          }, !isSubGroup && React.createElement(_Iconfont["default"], {
-            type: groupIcon
-          }), collapsed && !isSubGroup ? '' : {
-            cn: groupName,
-            en: enName
-          }[language]),
-          expandIcon: collapsed ? null : React.createElement(_Iconfont["default"]
-          /*  */
-          , {
-            type: getExpandIcon(code)
-          })
-        };
-      };
-
-      return React.createElement(SubMenu, _extends({}, getSubMenuProps(menu), {
-        onClick: onSelectMenu
-      }), menu == null ? void 0 : (_menu$children = menu.children) == null ? void 0 : _menu$children.map(function (menu) {
-        if ((0, _utils.isGroupMenu)(menu)) {
-          var _menu$children2;
-
-          return React.createElement(SubMenu, _extends({}, getSubMenuProps(menu, true), {
-            onClick: onSelectMenu
-          }), menu == null ? void 0 : (_menu$children2 = menu.children) == null ? void 0 : _menu$children2.map(function (_ref13) {
-            var code = _ref13.code,
-                menu = _objectWithoutProperties(_ref13, ["code"]);
-
-            return React.createElement(MenuItem, {
-              key: code
-            }, React.createElement(MenuLink, _extends({}, menu, {
-              style: {
-                paddingLeft: '24px'
-              }
-            })));
-          }));
+        .tnt-themeS2.compatible & {
+            background: rgba(47,129,247,.25) !important;
         }
-
-        return React.createElement(MenuItem, {
-          key: menu == null ? void 0 : menu.code
-        }, React.createElement(MenuLink, menu));
-      }));
     }
+`;
+const MenuTitle = styled.span`
+    font-size: 14px;
+    .large-size & {
+        font-size: 15px;
+    }
+    color: rgba(255,255,255,.85);
+    .compatible & {
+        color: #A1D7FF;
+    }
+    .tnt-themeS1 & {
+        color: ${props => props.theme.primaryTextColor};
+    }
+    .tnt-icon {
+        margin-right: 12px;
+        font-size: 16px;
+        position: relative;
+        top: 1px;
+
+        .large-size & {
+            font-size: 18px;
+            top: auto;
+        }
+        .tnt-themeS1 & {
+            /* color: #7e8081; */
+            color: ${props => `${props.theme.iconColor}`};
+        }
+    }
+`;
+
+
+export default withTheme(
+    props => {
+        const actions = useContext(ActionsContext);
+        const { language, menus = [], formatMenuPath, changeRouter, selectedKey, openKeys, onSelect, onBeforeChange, onChange, onOpenChange, collapsed } = props;
+        const { subMenu, parentMenus } = getSelectedMenuInfo(selectedKey, menus);
+        const [selectedKeys, setSelectedKeys] = useState([get(subMenu, 'code')]);
+        const onSelectMenu = param => {
+            const { subMenu, parentMenus } = getSelectedMenuInfo(param.key, menus) || {};
+            const params = {
+                ...param,
+                data: subMenu
+            };
+            const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
+            const defaultSelect = ({ data }) => {
+                const { path } = data || {};
+                const formatPath = formatMenuPath || (path => path);
+
+                if (isNewTabMenu(data)) {
+                    openInNewTab(formatPath(data?.path, data));
+                    return;
+                }
+
+                const routerPrefix = window.location.pathname.match(/(^\/[^\/]+)/i)?.[1];
+
+                if (path?.startsWith(routerPrefix)) {
+                    const forwardPath = formatPath(path, data);
+                    changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data?.name, forwardPath);
+                } else {
+                    window.location.href = formatPath(path, data);
+                }
+            };
+            const finalSelect = onSelect || defaultSelect;
+
+            if (param.key !== get(selectedKeys, '0')) {
+                const finalBeforeChange = onBeforeChange || defaultBeforeChange;
+
+                if (finalBeforeChange(params, get(selectedKeys, '0'))) {
+                    // SideMenu菜单收起状态
+                    if (collapsed) {
+                        const newOpenKeys = parentMenus?.map(({ code }) => code).reverse();
+
+                        onOpenChange(newOpenKeys);
+                        setSideMenuStore({
+                            openKeys: newOpenKeys,
+                            beforeOpenKeys: newOpenKeys
+                        });
+                    }
+                    setSelectedKeys([param.key]);
+                    onChange && onChange(params);
+                }
+            }
+            actions.setSelectedMenuKey(param.key);
+            setSelectedKeys([param.key]);
+
+            finalSelect(params);
+        };
+        const getExpandIcon = code => {
+            if (props.theme.compatible) {
+                return openKeys.includes(code) ? 'minus' : 'plus';
+            }
 
-    return React.createElement(MenuItem, {
-      key: menu.code,
-      onClick: onSelectMenu
-    }, React.createElement(_Iconfont["default"], {
-      type: menu.icon
-    }), React.createElement(MenuLink, menu));
-  }));
-});
+            return openKeys.includes(code) ? 'up' : 'down';
+        };
+        const onOpenKeysChange = keys => {
+            const openKey = keys.find(key => !openKeys.includes(key));
+            // const closeKey = openKeys.find(key => !keys.includes(key));
+            let newOpenKeys = keys;
+
+            const findParentGroupKey = (key, openKeys) => {
+                let parentGroupKey;
+
+                traverseTree(menus, (node, pnode) => {
+                    if (node.code === key) {
+                        if (pnode && openKeys.includes(pnode?.code)) {
+                            parentGroupKey = pnode?.code;
+                        }
+
+                        return false;
+                    }
+                });
+
+                return parentGroupKey;
+            };
+
+            // 展开openKey
+            if (openKey) {
+                // 父子关系展开
+                const parentGroupKey = findParentGroupKey(openKey, openKeys);
+                if (parentGroupKey) {
+                    newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys;
+                } else {
+                    newOpenKeys = [openKey];
+                }
+            } else { // 收起closeKey
+                newOpenKeys = keys;
+            }
+
+            onOpenChange(newOpenKeys);
+        };
 
-exports["default"] = _default;
+        useEffect(() => {
+            setSelectedKeys([selectedKey]);
+            if (selectedKey && !collapsed && parentMenus?.length) {
+                onOpenChange(parentMenus?.map(({ code }) => code).reverse());
+            }
+            actions.setSelectedMenuKey(selectedKey);
+        }, [selectedKey]);
+
+        actions.off('menuSelect', onSelectMenu);
+        actions.on('menuSelect', onSelectMenu);
+
+        return (
+            <TNTMenu
+                mode="inline"
+                defaultSelectedKeys={[]}
+                openKeys={openKeys}
+                selectedKeys={selectedKeys}
+                onOpenChange={onOpenKeysChange}
+            >
+                {
+                    menus?.map(menu => {
+                        const MenuLink = ({ menuName, enName, path }) => (
+                            <a href={path} onClick={evt => evt.preventDefault()}>
+                                {
+                                    {
+                                        cn: menuName,
+                                        en: enName
+                                    }[language]
+                                }
+                            </a>
+                        );
+
+                        if (isGroupMenu(menu)) {
+                            const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({
+                                key: code,
+                                title: (
+                                    <MenuTitle style={(collapsed && isSubGroup) ? { color: props.theme.primaryTextColor } : {}}>
+                                        {!isSubGroup && <Iconfont type={groupIcon} />}
+                                        {
+                                            (collapsed && !isSubGroup) ? '' : {
+                                                cn: groupName,
+                                                en: enName
+                                            }[language]
+                                        }
+                                    </MenuTitle>
+                                ),
+                                expandIcon: collapsed ? null : (
+                                    <Iconfont/*  */ type={getExpandIcon(code)} />
+                                )
+                            });
+
+                            return (
+                                <SubMenu
+                                    {...getSubMenuProps(menu)}
+                                    onClick={onSelectMenu}
+                                >
+                                    {
+                                        menu?.children?.map(menu => {
+                                            if (isGroupMenu(menu)) {
+                                                return (
+                                                    <SubMenu
+                                                        {...getSubMenuProps(menu, true)}
+                                                        onClick={onSelectMenu}
+                                                    >
+                                                        {
+                                                            menu?.children?.map(({ code, ...menu }) => (
+                                                                <MenuItem key={code}>
+                                                                    <MenuLink {...menu} style={{ paddingLeft: '24px' }}/>
+                                                                </MenuItem>
+                                                            ))
+                                                        }
+                                                    </SubMenu>
+                                                );
+                                            }
+
+                                            return (
+                                                <MenuItem key={menu?.code}>
+                                                    <MenuLink {...menu} />
+                                                </MenuItem>
+                                            );
+                                        })
+                                    }
+                                </SubMenu>
+                            );
+                        }
+
+                        return (
+                            <MenuItem key={menu.code} onClick={onSelectMenu}>
+                                <Iconfont type={menu.icon} />
+                                <MenuLink {...menu} />
+                            </MenuItem>
+                        );
+                    })
+                }
+            </TNTMenu>
+        );
+    }
+);