样式调整

vue/src/asset/style/element-ui.scss

@@ -102,18 +102,6 @@
         display: none;
     }
 
-    .el-menu-item,
-    .el-submenu__title {
-        //文字超出截断
-        > span {
-            display: inline-block;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            word-break: break-all;
-        }
-    }
-
     //子级菜单激活时，父级同样高亮
     .el-menu-item.is-active,
     .is-active > .el-submenu__title {
@@ -136,7 +124,7 @@
         min-width: 160px;
         padding: 0;
         margin-bottom: 0.5vh;
-        overflow-y: overlay;
+        overflow-y: auto;
 
         .el-menu-item,
         .el-submenu__title {

vue/src/asset/style/variables.scss

@@ -61,7 +61,7 @@ $menu-padding: $menu-icon-size + $menu-icon-text-gap;
 //暗色菜单的背景色
 $menu-dark-background: #304156;
 //暗色子级菜单的背景色
-$sub-menu-dark-background: #1f2d3d;
+$sub-menu-dark-background: darken($menu-dark-background, 5%);
 //暗色主菜单的背景色（用于双层侧边栏的主菜单和顶部导航栏）
 $root-menu-dark-background: #001529;
 //亮色菜单的文字颜色
@@ -86,10 +86,10 @@ $navbar-padding-left: 12px;
 $navbar-item-light-color: $menu-text-light-color;
 //暗色导航栏的功能项颜色
 $navbar-item-dark-color: rgba(255, 255, 255, .85);
-//亮色导航栏的功能项hover颜色
+//亮色导航栏的功能项hover背景颜色
 $navbar-item-hover-light-color: rgba(255, 255, 255, .85);
-//暗色导航栏的功能项hover颜色
-$navbar-item-hover-dark-color: #0f2438;
+//暗色导航栏的功能项hover背景颜色
+$navbar-item-hover-dark-color: lighten($root-menu-dark-background, 5%);
 
 //多页签栏高度
 $tags-view-height: 32px;

vue/src/component/menu/NavMenu/style.scss

@@ -46,13 +46,14 @@
 
     &.el-menu,
     .el-menu {
-        //菜单的文字以及hover颜色
+        //菜单文字
         .el-menu-item,
         .el-submenu__title {
-            //菜单文字的最大宽度
             > .menu-item-content {
+                text-overflow: ellipsis;
+                overflow: hidden;
                 //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
-                max-width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
+                width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
             }
         }
 

vue/src/component/menu/NavMenu/theme-dark.scss

@@ -16,14 +16,13 @@
             }
 
             //子级菜单的背景颜色
-            &.el-menu--inline,
-            .el-submenu .el-submenu > .el-submenu__title {
+            &.el-menu--inline {
                 background-color: $sub-menu-dark-background;
             }
 
             //子级菜单内阴影
             &.el-menu--inline {
-                box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
+                box-shadow: inset 0 2px 8px darken($sub-menu-dark-background, 10%)
             }
 
             //设置了显示弹出菜单的父级