feat(projects): 面包屑

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>

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>

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 };