tntd 3.0.0-beta → 3.0.0-beta.1

package/lib/tntd-layout/SideMenu.js

@@ -1,285 +1,427 @@
 "use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _get2 = _interopRequireDefault(require("lodash/get"));
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _menu = _interopRequireDefault(require("../menu"));
-var _utils = require("../utils");
-var _ActionsContext = _interopRequireDefault(require("./ActionsContext"));
-var _Iconfont = _interopRequireDefault(require("./Iconfont"));
-var _storage = require("./storage");
-var _templateObject, _templateObject2;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
-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 || (_templateObject = _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.1);\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, 0.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,\n  .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, 0.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, 0.25) !important;\n    }\n  }\n"])), 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 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  .large-size & {\n    font-size: 15px;\n  }\n  color: rgba(255, 255, 255, 0.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"])), function (props) {
-  return props.theme.primaryTextColor;
-}, function (props) {
-  return "".concat(props.theme.iconColor);
-});
-var _default = exports["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, _get2["default"])(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 = Object.assign(Object.assign({}, param), {
-      data: subMenu
-    });
-    var defaultBeforeChange = function defaultBeforeChange(_ref6) {
-      var data = _ref6.data;
-      return !(0, _utils.isNewTabMenu)(data);
-    };
-    var defaultSelect = function defaultSelect(_ref7) {
-      var data = _ref7.data;
-      var _a;
-      var _ref8 = data || {},
-        path = _ref8.path;
-      var formatPath = formatMenuPath || function (path) {
-        return path;
-      };
-      if ((0, _utils.isNewTabMenu)(data)) {
-        (0, _utils.openInNewTab)(formatPath(data === null || data === void 0 ? void 0 : data.path, data));
-        return;
-      }
-      var routerPrefix = (_a = window.location.pathname.match(/(^\/[^\/]+)/i)) === null || _a === void 0 ? void 0 : _a[1];
-      if (path === null || path === void 0 ? void 0 : path.startsWith(routerPrefix)) {
-        var forwardPath = formatPath(path, data);
-        changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data === null || data === void 0 ? void 0 : data.name, forwardPath);
-      } else {
-        window.location.href = formatPath(path, data);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const menu_1 = __importDefault(require("../menu"));
+const utils_1 = require("../utils");
+const ActionsContext_1 = __importDefault(require("./ActionsContext"));
+const Iconfont_1 = __importDefault(require("./Iconfont"));
+const storage_1 = require("./storage");
+const color = 'rgba(255,255,255,.85)';
+const compatibleColor = '#a1d7ff';
+const { SubMenu, Item: MenuItem } = menu_1.default;
+const TNTMenu = (0, styled_components_1.default)(menu_1.default) `
+  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.1);
+      z-index: 2;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &::-moz-scrollbar {
+      display: none;
+    }
+
+    /** 一级结点是菜单样式开始 */
+    & > .ant-menu-item {
+      & > .tnt-icon:first-child {
+        font-size: 16px;
       }
-    };
-    var finalSelect = onSelect || defaultSelect;
-    if (param.key !== (0, _get2["default"])(selectedKeys, '0')) {
-      var finalBeforeChange = onBeforeChange || defaultBeforeChange;
-      if (finalBeforeChange(params, (0, _get2["default"])(selectedKeys, '0'))) {
-        // SideMenu菜单收起状态
-        if (collapsed) {
-          var newOpenKeys = parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(function (_ref9) {
-            var code = _ref9.code;
-            return code;
-          }).reverse();
-          onOpenChange(newOpenKeys);
-          (0, _storage.setSideMenuStore)({
-            openKeys: newOpenKeys,
-            beforeOpenKeys: newOpenKeys
-          });
+    }
+
+    .ant-layout-sider-collapsed & {
+      & > .ant-menu-item {
+        & > .tnt-icon:first-child {
+          padding-left: 8px;
+        }
+        a {
+          visibility: hidden;
         }
-        setSelectedKeys([param.key]);
-        onChange && onChange(params);
       }
     }
-    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-item:active,
+    .ant-menu-submenu-title:active {
+      background: none;
     }
-    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 || pnode === void 0 ? void 0 : pnode.code)) {
-            parentGroupKey = pnode === null || pnode === void 0 ? void 0 : pnode.code;
-          }
-          return false;
+
+    .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, 0.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')};
+    }
+
+    & > .ant-menu-item {
+      padding-left: 24px !important;
+      width: 100%;
+
+      & > .tnt-icon {
+        margin-right: 12px;
+      }
+      & > a {
+        display: inline-block;
+      }
+    }
+
+    .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};
         }
-      });
-      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;
+      & > .tnt-icon {
+        position: absolute;
+        right: 20px;
+        top: 1px;
+        font-size: 10px;
+      }
+
+      // 蓝色系主题
+      .tnt-themeS3 & {
+        color: #fff;
+      }
+      .tnt-icon {
+        .tnt-themeS3 & {
+          color: #fff;
+        }
+      }
+    }
+
+    & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-left: 54px !important;
     }
-    onOpenChange(newOpenKeys);
-  };
-  (0, _react.useEffect)(function () {
-    setSelectedKeys([selectedKey]);
-    if (selectedKey && !collapsed && (parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.length)) {
-      onOpenChange(parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(function (_ref10) {
-        var code = _ref10.code;
-        return code;
-      }).reverse());
+  }
+
+  &.ant-menu .menu-arrow-right {
+    color: ${(props) => (props.theme.compatible ? compatibleColor : color)};
+  }
+
+  .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};
+      }
     }
-    actions.setSelectedMenuKey(selectedKey);
-  }, [selectedKey]);
-  actions.off('menuSelect', onSelectMenu);
-  actions.on('menuSelect', onSelectMenu);
-  return _react["default"].createElement(TNTMenu, {
-    mode: "inline",
-    defaultSelectedKeys: [],
-    openKeys: openKeys,
-    selectedKeys: selectedKeys,
-    onOpenChange: onOpenKeysChange
-  }, menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
-    var _a;
-    var MenuLink = function MenuLink(_ref11) {
-      var menuName = _ref11.menuName,
-        enName = _ref11.enName,
-        path = _ref11.path;
-      return _react["default"].createElement("a", {
-        href: path,
-        onClick: function onClick(evt) {
-          return evt.preventDefault();
+
+    // 蓝色系列
+    .tnt-themeS3 & {
+      color: #fff;
+    }
+    &:hover {
+      .tnt-themeS3 & {
+        color: #fff;
+      }
+    }
+  }
+  & > .ant-menu-item.ant-menu-item-selected,
+  &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+    color: rgba(255, 255, 255, 0.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};
+    }
+
+    // 蓝色系 子项选中颜色
+    .tnt-themeS3 & {
+      color: #fff;
+      background: #013479;
+      &::after {
+        content: '';
+        display: none;
+      }
+    }
+  }
+  .ant-menu-submenu.ant-menu-submenu-selected {
+    .tnt-themeS2 & {
+      background: #141825;
+    }
+    .tnt-themeS2.compatible & {
+      background: rgba(47, 129, 247, 0.25) !important;
+    }
+  }
+`;
+const MenuTitle = styled_components_1.default.span `
+  font-size: 14px;
+  .large-size & {
+    font-size: 15px;
+  }
+  color: rgba(255, 255, 255, 0.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}`};
+    }
+  }
+`;
+exports.default = (0, styled_components_1.withTheme)((props) => {
+    const actions = (0, react_1.useContext)(ActionsContext_1.default);
+    const { language, menus = [], formatMenuPath, changeRouter, selectedKey, openKeys, onSelect, onBeforeChange, onChange, onOpenChange, collapsed, } = props;
+    const { subMenu, parentMenus } = (0, utils_1.getSelectedMenuInfo)(selectedKey, menus);
+    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)([(0, lodash_1.get)(subMenu, 'code')]);
+    const onSelectMenu = (param) => {
+        const { subMenu, parentMenus } = (0, utils_1.getSelectedMenuInfo)(param.key, menus) || {};
+        const params = Object.assign(Object.assign({}, param), { data: subMenu });
+        const defaultBeforeChange = ({ data }) => !(0, utils_1.isNewTabMenu)(data);
+        const defaultSelect = ({ data }) => {
+            var _a;
+            const { path } = data || {};
+            const formatPath = formatMenuPath || ((path) => path);
+            if ((0, utils_1.isNewTabMenu)(data)) {
+                (0, utils_1.openInNewTab)(formatPath(data === null || data === void 0 ? void 0 : data.path, data));
+                return;
+            }
+            const routerPrefix = (_a = window.location.pathname.match(/(^\/[^\/]+)/i)) === null || _a === void 0 ? void 0 : _a[1];
+            if (path === null || path === void 0 ? void 0 : path.startsWith(routerPrefix)) {
+                const forwardPath = formatPath(path, data);
+                changeRouter
+                    ? changeRouter(forwardPath, data)
+                    : window.history.pushState(data, data === null || data === void 0 ? void 0 : data.name, forwardPath);
+            }
+            else {
+                window.location.href = formatPath(path, data);
+            }
+        };
+        const finalSelect = onSelect || defaultSelect;
+        if (param.key !== (0, lodash_1.get)(selectedKeys, '0')) {
+            const finalBeforeChange = onBeforeChange || defaultBeforeChange;
+            if (finalBeforeChange(params, (0, lodash_1.get)(selectedKeys, '0'))) {
+                // SideMenu菜单收起状态
+                if (collapsed) {
+                    const newOpenKeys = parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(({ code }) => code).reverse();
+                    onOpenChange(newOpenKeys);
+                    (0, storage_1.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';
         }
-      }, {
-        cn: menuName,
-        en: enName
-      }[language]);
+        return openKeys.includes(code) ? 'up' : 'down';
     };
-    if ((0, _utils.isGroupMenu)(menu)) {
-      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["default"].createElement(MenuTitle, {
-            style: collapsed && isSubGroup ? {
-              color: props.theme.primaryTextColor
-            } : {}
-          }, !isSubGroup && _react["default"].createElement(_Iconfont["default"], {
-            type: groupIcon
-          }), collapsed && !isSubGroup ? '' : {
-            cn: groupName,
-            en: enName
-          }[language]),
-          expandIcon: collapsed ? null : _react["default"].createElement(_Iconfont["default"] /*  */, {
-            type: getExpandIcon(code)
-          })
+    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;
+            (0, utils_1.traverseTree)(menus, (node, pnode) => {
+                if (node.code === key) {
+                    if (pnode && openKeys.includes(pnode === null || pnode === void 0 ? void 0 : pnode.code)) {
+                        parentGroupKey = pnode === null || pnode === void 0 ? void 0 : pnode.code;
+                    }
+                    return false;
+                }
+            });
+            return parentGroupKey;
         };
-      };
-      return _react["default"].createElement(SubMenu, Object.assign({}, getSubMenuProps(menu), {
-        onClick: onSelectMenu
-      }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map(function (menu) {
+        // 展开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);
+    };
+    (0, react_1.useEffect)(() => {
+        setSelectedKeys([selectedKey]);
+        if (selectedKey && !collapsed && (parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.length)) {
+            onOpenChange(parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(({ code }) => code).reverse());
+        }
+        actions.setSelectedMenuKey(selectedKey);
+    }, [selectedKey]);
+    actions.off('menuSelect', onSelectMenu);
+    actions.on('menuSelect', onSelectMenu);
+    return (react_1.default.createElement(TNTMenu, { mode: "inline", defaultSelectedKeys: [], openKeys: openKeys, selectedKeys: selectedKeys, onOpenChange: onOpenKeysChange }, menus === null || menus === void 0 ? void 0 : menus.map((menu) => {
         var _a;
-        if ((0, _utils.isGroupMenu)(menu)) {
-          return _react["default"].createElement(SubMenu, Object.assign({}, getSubMenuProps(menu, true), {
-            onClick: onSelectMenu
-          }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
-            var code = _a.code,
-              menu = __rest(_a, ["code"]);
-            return _react["default"].createElement(MenuItem, {
-              key: code
-            }, _react["default"].createElement(MenuLink, Object.assign({}, menu, {
-              style: {
-                paddingLeft: '24px'
-              }
+        const MenuLink = ({ menuName, enName, path }) => (react_1.default.createElement("a", { href: path, onClick: (evt) => evt.preventDefault() }, {
+            cn: menuName,
+            en: enName,
+        }[language]));
+        if ((0, utils_1.isGroupMenu)(menu)) {
+            const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({
+                key: code,
+                title: (react_1.default.createElement(MenuTitle, { style: collapsed && isSubGroup ? { color: props.theme.primaryTextColor } : {} },
+                    !isSubGroup && react_1.default.createElement(Iconfont_1.default, { type: groupIcon }),
+                    collapsed && !isSubGroup
+                        ? ''
+                        : {
+                            cn: groupName,
+                            en: enName,
+                        }[language])),
+                expandIcon: collapsed ? null : react_1.default.createElement(Iconfont_1.default /*  */, { type: getExpandIcon(code) }),
+            });
+            return (react_1.default.createElement(SubMenu, Object.assign({}, getSubMenuProps(menu), { onClick: onSelectMenu }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map((menu) => {
+                var _a;
+                if ((0, utils_1.isGroupMenu)(menu)) {
+                    return (react_1.default.createElement(SubMenu, Object.assign({}, getSubMenuProps(menu, true), { onClick: onSelectMenu }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map((_a) => {
+                        var { code } = _a, menu = __rest(_a, ["code"]);
+                        return (react_1.default.createElement(MenuItem, { key: code },
+                            react_1.default.createElement(MenuLink, Object.assign({}, menu, { style: { paddingLeft: '24px' } }))));
+                    })));
+                }
+                return (react_1.default.createElement(MenuItem, { key: menu === null || menu === void 0 ? void 0 : menu.code },
+                    react_1.default.createElement(MenuLink, Object.assign({}, menu))));
             })));
-          }));
         }
-        return _react["default"].createElement(MenuItem, {
-          key: menu === null || menu === void 0 ? void 0 : menu.code
-        }, _react["default"].createElement(MenuLink, Object.assign({}, menu)));
-      }));
-    }
-    return _react["default"].createElement(MenuItem, {
-      key: menu.code,
-      onClick: onSelectMenu
-    }, _react["default"].createElement(_Iconfont["default"], {
-      type: menu.icon
-    }), _react["default"].createElement(MenuLink, Object.assign({}, menu)));
-  }));
-});
+        return (react_1.default.createElement(MenuItem, { key: menu.code, onClick: onSelectMenu },
+            react_1.default.createElement(Iconfont_1.default, { type: menu.icon }),
+            react_1.default.createElement(MenuLink, Object.assign({}, menu))));
+    })));
+});
+//# sourceMappingURL=SideMenu.js.map