feat(components): 变更面包屑动态生成

BREAKING CHANGE:
动态生成+动态路径

src/layouts/BasicLayout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout has-sider class="wh-full">
-    <n-layout-sider bordered :collapsed="appStore.collapsed" :collapsed-width="64" collapse-mode="width">
+    <n-layout-sider bordered :collapsed="appStore.collapsed" :collapsed-width="64" collapse-mode="width" :width="220">
       <Logo />
       <Menu />
     </n-layout-sider>

src/layouts/components/header/Breadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <n-breadcrumb class="px-4">
-    <n-breadcrumb-item v-for="(item, index) in routes" :key="index">
+    <n-breadcrumb-item v-for="(item, index) in routes" :key="index" @click="routerPush(item.path)">
       <e-icon :icon="item.meta.icon" />
       {{ item.meta.title }}
     </n-breadcrumb-item>
@@ -10,15 +10,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { useRouteStore } from '~/src/store';
+import { useRouteStore } from '@/store';
+import { useAppRouter } from '@/hook';
 
 const router = useRouter();
 const routeStore = useRouteStore();
+const { routerPush } = useAppRouter();
 const routes = computed(() => {
-  // return routeStore.createBreadcrumbInRoutes(router.currentRoute.value.name, routeStore.userRoutes);
+  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string, routeStore.userRoutes);
-  return router.currentRoute.value.matched.filter((item) => {
-    return item.meta.title;
-  });
 });
 </script>
 

src/store/modules/route.ts

@@ -30,26 +30,37 @@ export const useRouteStore = defineStore('route-store', {
       router.removeRoute('appRoot');
     },
     /* 根据当前路由的name生成面包屑数据 */
-    createBreadcrumbInRoutes(name = '/', userRoutes: AppRoute.Route[]) {
+    createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) {
-      return userRoutes.filter((item) => {
+      const path: AppRoute.Route[] = [];
-        if (item.name === name) {
+      // 筛选所有包含目标的各级路由组合成一维数组
-          return true;
+      const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => {
-        }
+        userRoutes.forEach((item) => {
-        if (item.children) {
+          if (this.hasPathinAllPath(routeName, item)) {
-          return this.hasNameInBreadcrumbsChildren(name, item.children);
+            path.push(item);
-        }
+            if (item.children && item.children.length !== 0) {
-      });
+              getPathfromRoutes(routeName, item.children);
+            }
+          }
+        });
+      };
+      getPathfromRoutes(routeName, userRoutes);
+      return path;
     },
-    /* 判断子路由中是否存在为name的路由 */
+    /* 判断当前路由和子路由中是否存在为routeName的路由 */
-    hasNameInBreadcrumbsChildren(name: string, userRoutes: AppRoute.Route[]): boolean {
+    hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
-      return userRoutes.some((item) => {
+      if (userRoutes.name === routeName) {
-        if (item.name === name) {
+        return true;
-          return true;
+      }
-        }
+      if (userRoutes.children && userRoutes.children.length !== 0) {
-        if (item.children) {
+        const arr: boolean[] = [];
-          return this.hasNameInBreadcrumbsChildren(name, item.children);
+        userRoutes.children.forEach((item) => {
-        }
+          arr.push(this.hasPathinAllPath(routeName, item));
-      });
+        });
+        return arr.some((item) => {
+          return item;
+        });
+      }
+      return false;
     },
     /* 设置当前高亮的菜单key */
     setActiveMenu(key: string) {