修改

src/assets/styles/sidebar.scss

@@ -111,7 +111,7 @@
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      // background-color: $base-sub-menu-background !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,32 +1,25 @@
 <template>
-  <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
-          <template #title>
-            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
-          </template>
-        </el-menu-item>
-      </app-link>
-    </template>
+    <div v-if="!item.hidden">
+        <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+            <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+                <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+                    <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+                    <template #title>
+                        <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+                    </template>
+                </el-menu-item>
+            </app-link>
+        </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
-      <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
-        <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
-      </template>
+        <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+            <template v-if="item.meta" #title>
+                <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+                <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
+            </template>
 
-      <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
-    </el-sub-menu>
-  </div>
+            <sidebar-item v-for="(child, index) in item.children" :key="child.path + index" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
+        </el-sub-menu>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -99,3 +92,9 @@ const hasTitle = (title: string | undefined): string => {
   return title;
 };
 </script>
+<style lang="scss" scoped>
+.el-menu-item.is-active {
+  background: var(--el-color-primary) !important;
+  color: #fff !important;
+}
+</style>

src/main.ts

@@ -15,8 +15,6 @@ import directive from './directive';
 // 注册插件
 import plugins from './plugins/index'; // plugins
 
-
-
 // svg图标
 import 'virtual:svg-icons-register';
 import ElementIcons from '@/plugins/svgicon';