@kdcloudjs/kdesign 1.3.9 → 1.4.0

package/lib/menu/menuItem.js

@@ -17,8 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = require("../config-provider");
@@ -52,7 +56,7 @@ var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 exports.MENU_ITEM_CONTAINER_NAME = MENU_ITEM_CONTAINER_NAME;
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
-  var _classNames;
+  var _context, _classNames;
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -71,6 +75,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       subMenuMode = _a.subMenuMode,
       inlineIndent = _a.inlineIndent,
       className = _a.className,
@@ -78,11 +83,13 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
       style = _a.style,
-      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style"]);
+      parentPath = _a.parentPath,
+      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "setSelectedKeyPath", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style", "parentPath"]);
 
   (0, _devwarning.default)(!keyValue && keyValue !== 0, 'menuitem', 'cannot found children in Menu.Item');
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
+  var menuItemParentPath = Array.isArray(parentPath) ? (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(parentPath), [keyValue]) : [keyValue];
 
   var renderItemChildren = function renderItemChildren(children) {
     if (typeof children === 'string') {
@@ -115,7 +122,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     e.stopPropagation();
     var info = {
       key: keyValue,
-      keyPath: [keyValue],
+      keyPath: menuItemParentPath,
       domEvent: e.nativeEvent
     };
     handleOnClick(info);
@@ -159,6 +166,11 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     return renderItemChildren(children);
   };
 
+  React.useEffect(function () {
+    if (selectedKey && selectedKey === keyValue) {
+      setSelectedKeyPath(menuItemParentPath);
+    }
+  }, [selectedKey]);
   return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
     ref: menuItemRef,
     className: (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, subMenuMode !== 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),

package/lib/menu/style/index.css

@@ -104,65 +104,65 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.hover {
+.menu-dark-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.active {
+.menu-dark-active {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.active-inline-title {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+.menu-dark-active-inline-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
-.light {
+.menu-light-base {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light .kd-menu-item-disabled,
-.light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+.menu-light-base .kd-menu-item-disabled,
+.menu-light-base .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
-.light .kd-menu-submenu-sub {
+.menu-light-base .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.light .kd-menu-item:hover {
+.menu-light-base .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light .kd-menu-item-hover,
-.light .kd-menu-submenu-hover {
+.menu-light-base .kd-menu-item-hover,
+.menu-light-base .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light .kd-menu-item-active,
-.light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+.menu-light-base .kd-menu-item-active,
+.menu-light-base .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
-.light-default {
+.menu-light-default {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light-hover {
+.menu-light-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+.menu-light-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
-.light-active-inline-title {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
-  background: #ffffff !important;
+.menu-light-active-inline-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
   border: none;
 }
 .kd-menu {
@@ -236,8 +236,8 @@
 }
 .kd-menu-item-disabled {
   cursor: not-allowed;
-  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  background-color: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -310,8 +310,8 @@
 }
 .kd-menu-submenu-disabled {
   cursor: not-allowed;
-  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  background-color: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -436,7 +436,7 @@
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
-.kd-menu-dark .kd-menu-item:hover {
+.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
@@ -456,13 +456,13 @@
 }
 .kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
 .kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
-.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled) > .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active) > .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
 .kd-menu-light {
@@ -471,13 +471,13 @@
 }
 .kd-menu-light .kd-menu-item-disabled,
 .kd-menu-light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+  background-color: #fff;
 }
 .kd-menu-light .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.kd-menu-light .kd-menu-item:hover {
+.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
@@ -490,17 +490,17 @@
 }
 .kd-menu-light .kd-menu-item-active,
 .kd-menu-light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
 .kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
 .kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
-  background: #ffffff !important;
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
   border: none;
 }
-.kd-menu-popper .kd-menu-submenu:hover,
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
 .kd-menu-popper .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -527,7 +527,7 @@
   -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
           box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
 .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -563,13 +563,13 @@
 }
 .kd-menu-popper.light .kd-menu-item-disabled,
 .kd-menu-popper.light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+  background-color: #fff;
 }
 .kd-menu-popper.light .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.kd-menu-popper.light .kd-menu-item:hover {
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
@@ -582,7 +582,7 @@
 }
 .kd-menu-popper.light .kd-menu-item-active,
 .kd-menu-popper.light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }

package/lib/menu/style/index.less

@@ -135,55 +135,55 @@
   }
 
   .@{menuitem-prefix-cls} {
-    &:hover {
-      .hover();
+    &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+      .menu-dark-hover();
     }
 
     &-active {
-      .active()
+      .menu-dark-active()
     }
   }
 
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .active()
+    .menu-dark-active()
   }
 
   .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .hover()
+    .menu-dark-hover()
   }
 }
 
 .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .active-inline-title()
+      .menu-dark-active-inline-title()
     }
   }
 
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled) {
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
     > .@{submenu-prefix-cls}-title:hover {
-      .active-inline-title()
+      .menu-dark-active-inline-title()
     }
   }
 }
 
 // light
 .@{menu-light-prefix-cls} {
-  .light();
+  .menu-light-base();
 }
 
 .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .light-active-inline-title()
+      .menu-light-active-inline-title()
     }
   }
 }
 
 .@{menu-popper-prefix-cls} {
-  .@{submenu-prefix-cls}:hover,
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active):hover,
   .@{submenu-prefix-cls}-hover {
-    .hover();
+    .menu-dark-hover();
   }
 
   &.hidden {
@@ -206,9 +206,9 @@
       0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
-        &:hover,
+        &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          .hover()
+          .menu-dark-hover()
         }
       }
 
@@ -234,7 +234,7 @@
   }
 
   &.light {
-    .light();
+    .menu-light-base();
   }
 }
 

package/lib/menu/style/mixin.less

@@ -24,6 +24,7 @@
     align-items: center;
     height: 50px;
     .ellipsis();
+
     & > span {
       .ellipsis();
       opacity: 1;
@@ -57,8 +58,8 @@
 
   &-disabled {
     cursor: not-allowed;
-    color: @menu-color-disabled !important;
-    background-color: @menu-color-background !important;
+    color: @menu-color-disabled;
+    background-color: @menu-color-background;
   }
 
   &-arrow {
@@ -78,68 +79,67 @@
 }
 
 
-.hover {
+.menu-dark-hover {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.active {
+.menu-dark-active {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.active-inline-title {
-  color: @menu-sub-color-hover !important;
-  background: @menu-color-background !important;
+.menu-dark-active-inline-title {
+  color: @menu-sub-color-hover;
+  background: @menu-color-background;
   border: none;
 }
 
-
-.light {
-  .light-default();
+.menu-light-base {
+  .menu-light-default();
 
   .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
-    background-color: #fff !important;
+    background-color: #fff;
   }
 
   .@{submenu-prefix-cls}-sub {
     color: @menu-light-color;
-    background: #FAFAFA;
+    background: #fafafa;
   }
 
-  .@{menuitem-prefix-cls}:hover {
-    .light-hover();
+  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+    .menu-light-hover();
   }
 
   .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .light-hover();
+    .menu-light-hover();
   }
 
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .light-active();
+    .menu-light-active();
   }
 }
 
-.light-default {
+.menu-light-default {
   color: @menu-light-color;
   background: #ffffff;
 }
 
-.light-hover {
+.menu-light-hover {
   background-color: @menu-light-color-background-hover;
   color: @menu-light-color-hover;
   border: none;
 }
 
-.light-active {
-  background-color: @menu-light-color-background-active !important;
-  color: @menu-light-color-active !important;
+.menu-light-active {
+  background-color: @menu-light-color-background-active;
+  color: @menu-light-color-active;
   border: none;
 }
 
-.light-active-inline-title {
-  color: @menu-light-color-active !important;
-  background: #ffffff !important;
+.menu-light-active-inline-title {
+  color: @menu-light-color-active;
+  background: #ffffff;
   border: none;
 }
 

package/lib/menu/subMenu.js

@@ -11,12 +11,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -75,6 +77,7 @@ var SubMenu = function SubMenu(props) {
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
       selectedKeyPath = _a.selectedKeyPath,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       openKeys = _a.openKeys,
       triggerSubMenuAction = _a.triggerSubMenuAction,
       forceSubMenuRender = _a.forceSubMenuRender,
@@ -84,7 +87,7 @@ var SubMenu = function SubMenu(props) {
       handleOnOpenChange = _a.handleOnOpenChange,
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
-      restProps = __rest(_a, ["prefixCls", "theme", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "selectedKeyPath", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
+      restProps = __rest(_a, ["prefixCls", "theme", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "selectedKeyPath", "setSelectedKeyPath", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
 
   var isVertical = mode === 'vertical'; // 初始化level
 
@@ -92,6 +95,14 @@ var SubMenu = function SubMenu(props) {
     restProps.level = 1;
   }
 
+  if (Array.isArray(restProps.parentPath)) {
+    var _context;
+
+    restProps.parentPath = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(restProps.parentPath), [keyValue]);
+  } else {
+    restProps.parentPath = [keyValue];
+  }
+
   if (mode === 'inline') {
     restProps.subMenuMode = 'vertical';
     restProps.popupOffset = [];
@@ -218,10 +229,7 @@ var SubMenu = function SubMenu(props) {
     if (!(0, _includes.default)(className).call(className, _menuItem.MENU_ITEM_CONTAINER_NAME)) {
       closeSubMenu();
     }
-  }); // // 缩略模式自动关闭子菜单
-  // if (triggerSubMenuAction === 'click' && mode === 'vertical' && collapsed) {
-  //   closeSubMenu()
-  // }
+  });
 
   var handleMouseEvent = function handleMouseEvent(status) {
     if (disabled || triggerSubMenuAction === 'click') return;
@@ -237,11 +245,6 @@ var SubMenu = function SubMenu(props) {
   };
 
   var handleOnClick = function handleOnClick(info) {
-    var _context;
-
-    // 保存路径
-    info.keyPath = (0, _concat.default)(_context = info.keyPath).call(_context, [keyValue]);
-
     if (triggerSubMenuAction === 'click' && isVertical) {
       closeSubMenu();
     }
@@ -350,13 +353,15 @@ var SubMenu = function SubMenu(props) {
       mode: mode,
       theme: theme,
       selectedKey: selectedKey,
+      setSelectedKeyPath: setSelectedKeyPath,
       openKeys: openKeys,
       forceSubMenuRender: forceSubMenuRender,
       triggerSubMenuAction: triggerSubMenuAction,
       handleOnOpenChange: handleOnOpenChange,
       handleOnClick: handleOnClick,
       inlineIndent: inlineIndent,
-      paddingLeft: curPaddingLeft
+      paddingLeft: curPaddingLeft,
+      parentPath: restProps.parentPath
     });
   }))), {
     arrow: false,
@@ -398,13 +403,15 @@ var SubMenu = function SubMenu(props) {
         collapsed: collapsed,
         mode: mode,
         selectedKey: selectedKey,
+        setSelectedKeyPath: setSelectedKeyPath,
         openKeys: openKeys,
         forceSubMenuRender: forceSubMenuRender,
         triggerSubMenuAction: triggerSubMenuAction,
         handleOnOpenChange: handleOnOpenChange,
         handleOnClick: handleOnClick,
         inlineIndent: inlineIndent,
-        paddingLeft: curPaddingLeft
+        paddingLeft: curPaddingLeft,
+        parentPath: restProps.parentPath
       });
     }))));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [