From 09c7658c21c7dda461dbb528e85b638b5a7dfacd Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Tue, 11 Jan 2022 19:03:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E9=9D=A2=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/system.ts                       | 13 +++++-
 .../components/GlobalBreadcrumb.vue           | 43 +++++++++++++++++++
 .../GlobalHeader/components/HeaderMenu.vue    | 26 +++++++++++
 .../common/GlobalHeader/components/index.ts   |  4 +-
 src/layouts/common/GlobalHeader/index.vue     | 20 ++++++---
 src/router/routes/index.ts                    |  2 +-
 src/utils/router/breadcrumb.ts                | 35 +++++++++++++++
 src/utils/router/index.ts                     |  1 +
 8 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
 create mode 100644 src/layouts/common/GlobalHeader/components/HeaderMenu.vue
 create mode 100644 src/utils/router/breadcrumb.ts

diff --git a/src/interface/system.ts b/src/interface/system.ts
index 5c3fc30f6..d85919a06 100644
--- a/src/interface/system.ts
+++ b/src/interface/system.ts
@@ -1,7 +1,18 @@
-import type { MenuOption } from 'naive-ui';
+import type { MenuOption, DropdownOption } from 'naive-ui';
 
 /** 菜单项配置 */
 export type GlobalMenuOption = MenuOption & {
   routeName: string;
   routePath: string;
 };
+
+/** 面包屑 */
+export type GlobalBreadcrumb = DropdownOption & {
+  key: string;
+  label: string;
+  disabled: boolean;
+  routeName: string;
+  hasChildren: boolean;
+  iconName?: string;
+  children?: GlobalBreadcrumb[];
+};
diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
new file mode 100644
index 000000000..7d45fe04a
--- /dev/null
+++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -0,0 +1,43 @@
+<template>
+  <n-breadcrumb class="px-12px">
+    <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.key">
+      <n-breadcrumb-item>
+        <n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.children" @select="dropdownSelect">
+          <span>
+            <component :is="breadcrumb.icon" v-if="theme.header.crumb.showIcon" class="inline-block mr-4px text-16px" />
+            <span>{{ breadcrumb.label }}</span>
+          </span>
+        </n-dropdown>
+        <template v-else>
+          <component :is="breadcrumb.icon" v-if="theme.header.crumb.showIcon" class="inline-block mr-4px text-16px" />
+          <span>{{ breadcrumb.label }}</span>
+        </template>
+      </n-breadcrumb-item>
+    </template>
+  </n-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
+import { routePath } from '@/router';
+import { useThemeStore, useRouteStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import { getBreadcrumbByRouteKey } from '@/utils';
+import type { GlobalMenuOption } from '@/interface';
+
+const route = useRoute();
+const theme = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPush } = useRouterPush();
+
+const breadcrumbs = computed(() =>
+  getBreadcrumbByRouteKey(route.name as string, routeStore.menus as GlobalMenuOption[], routePath('root'))
+);
+
+function dropdownSelect(key: string) {
+  routerPush({ name: key });
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
new file mode 100644
index 000000000..0cfb17b34
--- /dev/null
+++ b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -0,0 +1,26 @@
+<template>
+  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { NMenu } from 'naive-ui';
+import type { MenuOption } from 'naive-ui';
+import { useRouteStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import type { GlobalMenuOption } from '@/interface';
+
+const route = useRoute();
+const routeStore = useRouteStore();
+const { routerPush } = useRouterPush();
+
+const menus = computed(() => routeStore.menus as GlobalMenuOption[]);
+const activeKey = computed(() => route.name as string);
+
+function handleUpdateMenu(_key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  routerPush(menuItem.routePath);
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/index.ts b/src/layouts/common/GlobalHeader/components/index.ts
index dd03f8b2d..b13a8ab6e 100644
--- a/src/layouts/common/GlobalHeader/components/index.ts
+++ b/src/layouts/common/GlobalHeader/components/index.ts
@@ -1,7 +1,9 @@
 import MenuCollapse from './MenuCollapse.vue';
+import GlobalBreadcrumb from './GlobalBreadcrumb.vue';
+import HeaderMenu from './HeaderMenu.vue';
 import GithubSite from './GithubSite.vue';
 import FullScreen from './FullScreen.vue';
 import ThemeMode from './ThemeMode.vue';
 import UserAvatar from './UserAvatar.vue';
 
-export { MenuCollapse, GithubSite, FullScreen, ThemeMode, UserAvatar };
+export { MenuCollapse, GlobalBreadcrumb, HeaderMenu, GithubSite, FullScreen, ThemeMode, UserAvatar };
diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
index 7f1fbf0a3..3d16a09e8 100644
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/src/layouts/common/GlobalHeader/index.vue
@@ -3,13 +3,11 @@
     <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
     <div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
       <menu-collapse v-if="showMenuCollape" />
-      <!-- <global-breadcrumb v-if="theme.header.crumb.visible" /> -->
+      <global-breadcrumb v-if="theme.header.crumb.visible" />
+    </div>
+    <div v-else class="flex-1-hidden flex-y-center h-full" :style="{ justifyContent: theme.menu.horizontalPosition }">
+      <header-menu />
     </div>
-    <div
-      v-else
-      class="flex-1-hidden flex-y-center h-full"
-      :style="{ justifyContent: theme.menu.horizontalPosition }"
-    ></div>
     <div class="flex justify-end h-full">
       <github-site />
       <full-screen />
@@ -24,7 +22,15 @@ import { DarkModeContainer } from '@/components';
 import { useThemeStore } from '@/store';
 import type { GlobalHeaderProps } from '@/interface';
 import GlobalLogo from '../GlobalLogo/index.vue';
-import { MenuCollapse, GithubSite, FullScreen, ThemeMode, UserAvatar } from './components';
+import {
+  MenuCollapse,
+  GlobalBreadcrumb,
+  HeaderMenu,
+  GithubSite,
+  FullScreen,
+  ThemeMode,
+  UserAvatar
+} from './components';
 
 interface Props {
   /** 显示logo */
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index 6546565d4..b782ed5e2 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -54,7 +54,7 @@ export const constantRoutes: AuthRoute.Route[] = [
       singleLayout: 'blank'
     }
   },
-  // 匹配无效的路径重定向not-found的页面
+  // 匹配无效路径的路由
   {
     name: 'not-found-page',
     path: '/:pathMatch(.*)*',
diff --git a/src/utils/router/breadcrumb.ts b/src/utils/router/breadcrumb.ts
new file mode 100644
index 000000000..fd5e9aff8
--- /dev/null
+++ b/src/utils/router/breadcrumb.ts
@@ -0,0 +1,35 @@
+import type { GlobalMenuOption, GlobalBreadcrumb } from '@/interface';
+
+/**
+ * 获取面包屑数据
+ * @param activeKey - 当前页面路由的key
+ * @param menus - 菜单数据
+ * @param rootPath - 根路由路径
+ */
+export function getBreadcrumbByRouteKey(activeKey: string, menus: GlobalMenuOption[], rootPath: string) {
+  return menus.map(menu => getBreadcrumbItem(activeKey, menu, rootPath)).flat(1);
+}
+
+function getBreadcrumbItem(activeKey: string, menu: GlobalMenuOption, rootPath: string) {
+  const list: GlobalBreadcrumb[] = [];
+  if (activeKey.includes(menu.routeName)) {
+    const breadcrumb: GlobalBreadcrumb = {
+      key: menu.routeName,
+      label: menu.label as string,
+      routeName: menu.routeName,
+      disabled: menu.routePath === rootPath,
+      hasChildren: false
+    };
+    if (menu.icon) {
+      breadcrumb.icon = menu.icon;
+    }
+    if (menu.children && menu.children.length) {
+      breadcrumb.hasChildren = true;
+      breadcrumb.children = menu.children
+        .map(item => getBreadcrumbItem(activeKey, item as GlobalMenuOption, rootPath))
+        .flat(1);
+    }
+    list.push(breadcrumb);
+  }
+  return list;
+}
diff --git a/src/utils/router/index.ts b/src/utils/router/index.ts
index e659803c6..4da1be672 100644
--- a/src/utils/router/index.ts
+++ b/src/utils/router/index.ts
@@ -1,3 +1,4 @@
 export * from './helpers';
 export * from './menu';
+export * from './breadcrumb';
 export * from './regexp';