🎈 perf(菜单样式统一UI):

dsk-operate-ui/src/assets/styles/sidebar.scss

@@ -99,8 +99,10 @@
       margin-right: 8px;
     }
     .el-submenu__icon-arrow {
-      top: 54%;
-      right: 5px;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: 0px;
+      right: 8px;
       color: #d8d8d8;
     }
 
@@ -121,7 +123,7 @@
       min-width: 128px;
       font-size: 12px;
       color: #fff !important;
-      padding-left: 24px !important;
+      padding-left: 24px;
     }
     .el-menu--inline .nest-menu .el-menu-item .svg-icon {
       display: none;
@@ -328,6 +330,42 @@
       transition: none;
     }
   }
+
+  // 重置导航栏菜单样式
+  .el-menu {
+    .secondary-menu {
+      .secondary-menu-item {
+        &.el-submenu {
+          & > {
+            .el-menu--inline {
+              padding: 0px;
+              .secondary-menu-item-sub {
+                .el-menu-item {
+                  font-size: 14px;
+                  padding-left: 32px !important;
+                }
+
+                & > .secondary-menu-item {
+                  .el-submenu__title {
+                    padding-left: 32px !important;
+                  }
+
+                  & > .el-menu--inline {
+                    .secondary-menu-item-sub {
+                      .el-menu-item {
+                        font-size: 12px;
+                        padding-left: 40px !important;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 // when menu collapsed

dsk-operate-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -9,12 +9,12 @@
           </el-menu-item>
         </app-link>
       </template>
-      <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body class="secondary-menu-item">
         <template slot="title">
           <item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" />
         </template>
         <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path,child.query)"
-          :active-menu="activeMenu" class="nest-menu" />
+          :active-menu="activeMenu" class="nest-menu secondary-menu-item-sub" />
       </el-submenu>
     </template>
     <!-- 收起 -->

dsk-operate-ui/src/layout/components/Sidebar/index.vue

 <template>
-    <div :class="{'has-logo':showLogo}"  @mouseenter="sideEnter" @mouseleave="sideLeave" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="variables.menuBg"
-                :text-color="variables.menuText"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical"
-            >
-                <sidebar-item
-                    v-for="(route, index) in hidechildren"
-
-                    :key="route.path  + index"
-					:is-collapse="isCollapse"
-					:active-menu="activeMenu"
-                    :item="route"
-                    :base-path="route.path"
-					:class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
-					:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''"
-
-                />
-            </el-menu>
-        </el-scrollbar>
-		<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
-		  <img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
-		</div>
+  <div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave"
+    :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
+        :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
+        <sidebar-item v-for="(route, index) in hidechildren" :key="route.path  + index" :is-collapse="isCollapse" :active-menu="activeMenu"
+          :item="route" :base-path="route.path" :class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
+          :style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''" class="secondary-menu"/>
+      </el-menu>
+    </el-scrollbar>
+    <div v-show="isExpand" class="side-expand" @click="toggleSideBar">
+      <img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
     </div>
+  </div>
 </template>
 
 <script>
@@ -40,69 +24,69 @@ import variables from "@/assets/styles/variables.scss";
 
 export default {
 
-    components: { SidebarItem, Logo },
-	data() {
-	  return {
-	    isExpand: false
-	  }
-	},
-    computed: {
-        ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
-        hidechildren(){
-          return this.sidebarRouters.map(item=>{
-            if(item.children?.length){
-             item.children = item.children.filter(i=>{
-                if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index"){
-                  return i
-                }
-              })
-            }
-            return item
-          })
-        },
-        activeMenu() {
-            const route = this.$route;
-            const { meta, path } = route;
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu;
+  components: { SidebarItem, Logo },
+  data() {
+    return {
+      isExpand: false
+    };
+  },
+  computed: {
+    ...mapState(["settings"]),
+    ...mapGetters(["sidebarRouters", "sidebar"]),
+    hidechildren() {
+      return this.sidebarRouters.map(item => {
+        if (item.children?.length) {
+          item.children = item.children.filter(i => {
+            if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index") {
+              return i;
             }
-            return path;
-        },
-		device() {
-		  return this.$store.state.app.device
-		},
-		bottomMenu() {
-		  const routeArr = this.$router.options.routes
-		  const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed)
-		  return navFixed.length
-		},
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo;
-        },
-        variables() {
-            return variables;
-        },
-        isCollapse() {
-            return !this.sidebar.opened;
-        },
+          });
+        }
+        return item;
+      });
+    },
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    },
+    device() {
+      return this.$store.state.app.device;
+    },
+    bottomMenu() {
+      const routeArr = this.$router.options.routes;
+      const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed);
+      return navFixed.length;
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    isCollapse() {
+      return !this.sidebar.opened;
+    },
+  },
+  methods: {
+    toggleSideBar() {
+      this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
+      this.$store.dispatch('app/toggleSideBar');
+    },
+    sideEnter() {
+      if (this.device !== 'mobile') {
+        this.isExpand = true;
+      }
+    },
+    sideLeave() {
+      if (this.device !== 'mobile') {
+        this.isExpand = false;
+      }
     },
-	methods: {
-		toggleSideBar(){
-		  this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
-		  this.$store.dispatch('app/toggleSideBar');
-		},
-		sideEnter(){
-		  if (this.device !== 'mobile') {
-		    this.isExpand = true;
-		  }
-		},
-		sideLeave(){
-		  if (this.device !== 'mobile') {
-		    this.isExpand = false;
-		  }
-		},
-	},
+  },
 };
 </script>