fix(layouts): 🐛 [layouts] 修复面包屑问题

src/layouts/pageLayouts/components/AppTabs/hooks/useTabsChange.ts

@@ -5,9 +5,6 @@ import qs from 'qs';
 import { removeClass, toggleClass } from '@/utils/operate';
 import type { MultiTabsType } from '@/store/types';
 import { usePermissionStoreHook } from '@/store/modules/permission';
-import { findRouteByPath } from '@/router/utils';
-import { isUrl } from '@/utils/is';
-import type { AppRouteRecordRaw } from '#/route';
 
 export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
   const route = useRoute();
@@ -89,24 +86,5 @@ export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
     }, 600);
   }
 
-  const selectMenu = (path: string) => {
-    const routerinfo = (router.options.routes.find((i) => i.path === '/') ||
-      []) as AppRouteRecordRaw;
-    const findRoute = findRouteByPath(path, routerinfo.children || []);
-    if (findRoute) {
-      if (findRoute.redirect && findRoute.children && findRoute.children.length) {
-        selectMenu(findRoute.children[0].path);
-        return;
-      }
-
-      if (isUrl(findRoute.path)) return;
-      addRouteTabs(route);
-    }
-  };
-
-  // const logout = () => {
-  //   usePermissionStoreHook().handleRemoveMultiTabs();
-  // };
-
-  return { setTabPaneKey, addRouteTabs, onFresh, closeTabsRoute, removeTab, selectMenu };
+  return { setTabPaneKey, addRouteTabs, onFresh, closeTabsRoute, removeTab };
 };

src/layouts/pageLayouts/components/AppTabs/index.vue

@@ -8,6 +8,7 @@
   import type { MultiTabsType } from '@/store/types';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { emitter } from '@/utils/mitt';
 
   const { appConfig, setAppConfigMode } = useRootSetting();
 
@@ -19,21 +20,23 @@
   const { visible, rightClickTags, rightViewStyle, contextmenu, rightViewChange } =
     useTabsView(multiTabs);
 
-  const { setTabPaneKey, selectMenu, onFresh, removeTab } = useTabsChange(multiTabs);
+  const { setTabPaneKey, addRouteTabs, onFresh, removeTab } = useTabsChange(multiTabs);
 
   const editableTabsValue = ref(setTabPaneKey(route));
 
   watch(
-    () => [route.path, route.query],
+    () => [route.path],
     async () => {
-      await selectMenu(route.path);
       contextmenu(route);
-      setTimeout(() => (editableTabsValue.value = setTabPaneKey(route)));
+      editableTabsValue.value = setTabPaneKey(route);
     },
   );
 
   onBeforeMount(() => {
-    selectMenu(route.path);
+    emitter.on('siteBarChange', ({ routeRaw }) => {
+      addRouteTabs(routeRaw as unknown as MultiTabsType);
+    });
+    addRouteTabs(route);
     contextmenu(route);
   });
 

src/layouts/pageLayouts/components/Breadcrumb/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { isEqual } from 'lodash-es';
   import AppFold from '../AppFold/index.vue';
@@ -23,7 +23,10 @@
   // 解析路由匹配的数组
   const getBreadcrumb = () => {
     const matched: AppRouteRecordRaw[] = [];
-    const parentRoutes = getParentPaths(router.currentRoute.value.path || '', routes || []);
+    const parentRoutes = getParentPaths(
+      router.currentRoute.value.matched[1].path || '',
+      routes || [],
+    );
     // 获取每个父级路径对应的路由信息
     parentRoutes.forEach((path) => {
       if (path !== '/') {
@@ -36,7 +39,9 @@
         itemQuery = JSON.parse(JSON.stringify(item.query));
       }
       if (matched.find((i) => i.path === item.path)) return false;
-      return route.name === item.name && isEqual(route.query, itemQuery);
+      return (
+        route.name === item.name && isEqual(route.query, itemQuery) && route.path === item.path
+      );
     });
     if (item) matched.push(item as unknown as AppRouteRecordRaw);
     levelList.value = matched.filter(
@@ -60,7 +65,8 @@
     router.push(pathCompile(path));
   };
   // 首次调用
-  getBreadcrumb();
+  onMounted(getBreadcrumb);
+
   // 监控route的变化，避免组件复用信息同步问题
   watch(route, getBreadcrumb);
 

src/layouts/pageLayouts/components/Sidebar/MinSidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { useNavSideBar } from '../../hooks/useNavSideBar';
   import Item from './Item.vue';
   import AppLink from './Link.vue';
   import { usePermissionStoreHook } from '@/store/modules/permission';
@@ -9,6 +10,8 @@
 
   const route = useRoute();
 
+  const { selectMenu } = useNavSideBar();
+
   const resolvePath = (routeRaw: AppRouteRecordRaw): string => {
     let path = routeRaw.path;
     if (routeRaw.children && routeRaw.children.length && !routeRaw.children[0].hidden) {
@@ -36,6 +39,7 @@
     :default-active="activeMenyu"
     class="horizontal-header-menu"
     mode="horizontal"
+    @select="(indexPath: string) => selectMenu(indexPath)"
   >
     <AppLink
       v-for="menusRoute in usePermissionStoreHook().wholeMenus"

src/layouts/pageLayouts/components/Sidebar/index.vue

@@ -2,6 +2,7 @@
   import type { PropType } from 'vue';
   import { computed, ref, watch } from 'vue';
   import { useRoute } from 'vue-router';
+  import { useNavSideBar } from '../../hooks/useNavSideBar';
   import SidebarItem from './SidebarItem.vue';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import type { AppRouteRecordRaw } from '#/route';
@@ -15,6 +16,8 @@
     },
   });
 
+  const { selectMenu } = useNavSideBar();
+
   const route = useRoute();
   const { appConfig } = useRootSetting();
   let subMenuData = ref<AppRouteRecordRaw[]>(usePermissionStoreHook().wholeMenus);
@@ -63,6 +66,7 @@
       :unique-opened="true"
       :collapse="appConfig.sidebarMode === 'horizontal' ? false : appConfig.collapseMenu"
       :mode="mode"
+      @select="(indexPath: string) => selectMenu(indexPath)"
     >
       <SidebarItem
         v-for="menuRoute in menuData"

src/layouts/pageLayouts/hooks/useNavSideBar.ts

@@ -0,0 +1,32 @@
+import { useRouter } from 'vue-router';
+import type { AppRouteRecordRaw } from '#/route';
+import { findRouteByPath } from '@/router/utils';
+import { usePermissionStoreHook } from '@/store/modules/permission';
+import { isUrl } from '@/utils/is';
+import { emitter } from '@/utils/mitt';
+
+export const useNavSideBar = () => {
+  const router = (useRouter().options.routes.find((i) => i.path === '/') ||
+    []) as AppRouteRecordRaw;
+
+  const selectMenu = (path: string) => {
+    const findRoute = findRouteByPath(path, router.children || []);
+    if (findRoute) {
+      if (findRoute.redirect && findRoute.children && findRoute.children.length) {
+        selectMenu(findRoute.children[0].path);
+        return;
+      }
+
+      if (isUrl(findRoute.path)) return;
+      emitter.emit('siteBarChange', {
+        routeRaw: findRoute,
+      });
+    }
+  };
+
+  const logout = () => {
+    usePermissionStoreHook().handleRemoveMultiTabs();
+  };
+
+  return { selectMenu, logout };
+};

src/views/details-page/datails-info/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { onBeforeMount, ref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { usePermissionStoreHook } from '@/store/modules/permission';
+  import { useRoute } from 'vue-router';
+  import { useDatailsInfo } from '../hooks/useDatailsInfo';
 
   defineOptions({
     name: 'RtDetailsInfo',
@@ -10,24 +10,12 @@
   const route = useRoute();
   const { query } = route;
 
-  const router = useRouter();
-
   const value = ref('');
 
-  const toPath = (item: string) => {
-    const query = { id: `${item}` };
-    usePermissionStoreHook().handleMultiTabs('add', {
-      path: `/details_page/details_info`,
-      name: `RtDetailsInfo`,
-      query,
-      meta: {
-        title: { 'zh-ch': `详情页-${item}`, en: `pageDatails-${item}` },
-      },
-    });
-    router.push({ name: 'RtDetailsInfo', query });
-  };
+  const { toDatailsInfo } = useDatailsInfo();
+
   onBeforeMount(() => {
-    toPath(query.id as string);
+    toDatailsInfo(`${query.id}`, 'query');
   });
 </script>
 

src/views/details-page/datails-params/index.vue

@@ -1,31 +1,18 @@
 <script setup lang="ts">
   import { onBeforeMount } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { usePermissionStoreHook } from '@/store/modules/permission';
+  import { useRoute } from 'vue-router';
+  import { useDatailsInfo } from '../hooks/useDatailsInfo';
 
   defineOptions({
     name: 'RtDetailsInfo',
   });
 
   const route = useRoute();
-  const { path, params } = route;
+  const { params } = route;
+  const { toDatailsInfo } = useDatailsInfo();
 
-  const router = useRouter();
-
-  const toPath = (item: string) => {
-    const params = { id: `${item}` };
-    usePermissionStoreHook().handleMultiTabs('add', {
-      path,
-      name: `RtDetailsParams`,
-      params,
-      meta: {
-        title: { 'zh-ch': `详情页-params-${item}`, en: `pageDatails-${item}` },
-      },
-    });
-    router.push({ name: 'RtDetailsParams', params });
-  };
   onBeforeMount(() => {
-    toPath(params.id as string);
+    toDatailsInfo(`${params.id}`, 'params');
   });
 </script>
 

src/views/details-page/hooks/useDatailsInfo.ts

@@ -0,0 +1,32 @@
+import { useRouter } from 'vue-router';
+import { usePermissionStoreHook } from '@/store/modules/permission';
+
+export function useDatailsInfo() {
+  const router = useRouter();
+
+  function toDatailsInfo(params: string, model: string) {
+    if (model === 'query') {
+      usePermissionStoreHook().handleMultiTabs('add', {
+        path: `/details_page/details_info`,
+        name: `RtDetailsInfo`,
+        query: { id: `${params}` },
+        meta: {
+          title: { 'zh-ch': `详情页-${params}`, en: `pageDatails-${params}` },
+        },
+      });
+      router.push({ name: 'RtDetailsInfo', query: { id: `${params}` } });
+    } else {
+      usePermissionStoreHook().handleMultiTabs('add', {
+        path: `/details_page/details_params/${params}`,
+        name: `RtDetailsParams`,
+        params: { id: `${params}` },
+        meta: {
+          title: { 'zh-ch': `详情页-params-${params}`, en: `pageDatails-${params}` },
+        },
+      });
+      router.push({ name: 'RtDetailsParams', params: { id: `${params}` } });
+    }
+  }
+
+  return { toDatailsInfo };
+}

src/views/details-page/index.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
-  import { useRouter } from 'vue-router';
+  import { useDatailsInfo } from './hooks/useDatailsInfo';
   // import { usePermissionStoreHook } from '@/store/modules/permission';
 
-  const router = useRouter();
+  const { toDatailsInfo } = useDatailsInfo();
 
   const toPath = (item: number, type = 'query') => {
-    if (type === 'params') {
-      const params = { id: `${item}` };
-      router.push({ name: 'RtDetailsParams', params });
-    } else {
-      const query = { id: `${item}` };
-      router.push({ name: 'RtDetailsInfo', query });
-    }
+    toDatailsInfo(`${item}`, type);
   };
 </script>