From b2a9425a45bbbf5afebd86d808b88848f153e2a3 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Thu, 18 Aug 2022 14:39:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E5=8F=98=E6=9B=B4=E9=9D=A2?=
 =?UTF-8?q?=E5=8C=85=E5=B1=91=E5=8A=A8=E6=80=81=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE:
动态生成+动态路径
---
 src/layouts/BasicLayout/index.vue            |  2 +-
 src/layouts/components/header/Breadcrumb.vue | 11 ++---
 src/store/modules/route.ts                   | 49 ++++++++++++--------
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index d7625c9..db0ab28 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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>
diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
index fd75e58..6b43493 100644
--- a/src/layouts/components/header/Breadcrumb.vue
+++ b/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 router.currentRoute.value.matched.filter((item) => {
-    return item.meta.title;
-  });
+  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string, routeStore.userRoutes);
 });
 </script>
 
diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts
index bb6f452..cf4a818 100644
--- a/src/store/modules/route.ts
+++ b/src/store/modules/route.ts
@@ -30,26 +30,37 @@ export const useRouteStore = defineStore('route-store', {
       router.removeRoute('appRoot');
     },
     /* 根据当前路由的name生成面包屑数据 */
-    createBreadcrumbInRoutes(name = '/', userRoutes: AppRoute.Route[]) {
-      return userRoutes.filter((item) => {
-        if (item.name === name) {
-          return true;
-        }
-        if (item.children) {
-          return this.hasNameInBreadcrumbsChildren(name, item.children);
-        }
-      });
+    createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) {
+      const path: AppRoute.Route[] = [];
+      // 筛选所有包含目标的各级路由组合成一维数组
+      const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => {
+        userRoutes.forEach((item) => {
+          if (this.hasPathinAllPath(routeName, item)) {
+            path.push(item);
+            if (item.children && item.children.length !== 0) {
+              getPathfromRoutes(routeName, item.children);
+            }
+          }
+        });
+      };
+      getPathfromRoutes(routeName, userRoutes);
+      return path;
     },
-    /* 判断子路由中是否存在为name的路由 */
-    hasNameInBreadcrumbsChildren(name: string, userRoutes: AppRoute.Route[]): boolean {
-      return userRoutes.some((item) => {
-        if (item.name === name) {
-          return true;
-        }
-        if (item.children) {
-          return this.hasNameInBreadcrumbsChildren(name, item.children);
-        }
-      });
+    /* 判断当前路由和子路由中是否存在为routeName的路由 */
+    hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
+      if (userRoutes.name === routeName) {
+        return true;
+      }
+      if (userRoutes.children && userRoutes.children.length !== 0) {
+        const arr: boolean[] = [];
+        userRoutes.children.forEach((item) => {
+          arr.push(this.hasPathinAllPath(routeName, item));
+        });
+        return arr.some((item) => {
+          return item;
+        });
+      }
+      return false;
     },
     /* 设置当前高亮的菜单key */
     setActiveMenu(key: string) {