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>