refactor: 布局代码优化

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -32,16 +32,16 @@
 </template>
 
 <script lang="ts" setup>
-import { RouteRecordRaw } from "vue-router";
 import { usePermissionStore, useAppStore } from "@/store";
 import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
+import { RouteRecordRaw } from "vue-router";
 
 const appStore = useAppStore();
 const permissionStore = usePermissionStore();
 const router = useRouter();
 
-const activePath = computed(() => appStore.activeTopMenu);
+const activePath = computed(() => appStore.activeTopMenuPath);
 
 // 顶部菜单集合
 const mixTopMenus = ref<RouteRecordRaw[]>([]);
@@ -49,10 +49,10 @@ const mixTopMenus = ref<RouteRecordRaw[]>([]);
 /**
  * 菜单选择事件
  */
-const handleMenuSelect = (selectedRoutePath: string) => {
+const handleMenuSelect = (routePath: string) => {
-  appStore.activeTopMenu(selectedRoutePath);
+  appStore.activeTopMenu(routePath);
-  permissionStore.setMixLeftMenus(selectedRoutePath);
+  permissionStore.setMixLeftMenus(routePath);
-  // 获取左侧菜单集合，并跳转到第一个菜单
+  // 获取左侧菜单集合，默认跳转到第一个菜单
   const mixLeftMenus = permissionStore.mixLeftMenus;
   goToFirstMenu(mixLeftMenus);
 };

src/layout/index.vue

@@ -12,7 +12,7 @@
     <!-- 混合布局 -->
     <div v-if="layout === 'mix'" class="mix-container">
       <div class="mix-container__left">
-        <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenu" />
+        <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
         <div class="sidebar-toggle">
           <hamburger
             :is-active="appStore.sidebar.opened"
@@ -35,7 +35,7 @@
     <!-- 左侧布局|| 顶部布局 -->
     <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <Navbar v-if="layout === 'left'" />
+        <NavBar v-if="layout === 'left'" />
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />
@@ -61,8 +61,8 @@ const showTagsView = computed(() => settingsStore.tagsView);
 const showSettings = computed(() => settingsStore.showSettings);
 const layout = computed(() => settingsStore.layout);
 
-const activeTopMenu = computed(() => {
+const activeTopMenuPath = computed(() => {
-  return appStore.activeTopMenu;
+  return appStore.activeTopMenuPath;
 });
 // 混合模式左侧菜单
 const mixLeftMenus = computed(() => {
@@ -70,7 +70,7 @@ const mixLeftMenus = computed(() => {
 });
 
 watch(
-  () => activeTopMenu.value,
+  () => activeTopMenuPath.value,
   (newVal) => {
     if (layout.value !== "mix") return;
     permissionStore.setMixLeftMenus(newVal);

src/store/modules/permission.ts

@@ -1,5 +1,4 @@
 import { RouteRecordRaw } from "vue-router";
-import { defineStore } from "pinia";
 import { constantRoutes } from "@/router";
 import { store } from "@/store";
 import { listRoutes } from "@/api/menu";
@@ -98,15 +97,12 @@ export const usePermissionStore = defineStore("permission", () => {
         });
     });
   }
-
   /**
    * 获取与激活的顶部菜单项相关的混合模式左侧菜单集合
    */
   const mixLeftMenus = ref<RouteRecordRaw[]>([]);
-  function setMixLeftMenus(activeTopMenu: string) {
+  function setMixLeftMenus(topMenuPath: string) {
-    const matchedItem = routes.value.find(
+    const matchedItem = routes.value.find((item) => item.path === topMenuPath);
-      (item) => item.path === activeTopMenu
-    );
     if (matchedItem && matchedItem.children) {
       mixLeftMenus.value = matchedItem.children;
     }