feat: add breadcrumb navigation (#74)

* feat: breadcrumb navigation

* style: delete empty lines and useless elements

src/layouts/default/header/components/Breadcrumb.vue

@@ -0,0 +1,17 @@
+<template>
+  <a-breadcrumb class="!ml-2">
+    <a-breadcrumb-item v-for="(item,index) in routes" :key="index">
+      {{ item.meta.title }}
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const routes = ref(route.matched)
+
+router.afterEach((to) => {
+  routes.value = to.matched
+})
+</script>

src/layouts/default/header/index.vue

@@ -1,8 +1,10 @@
 <template>
   <a-layout-header :class="getHeaderClass">
-    <div class="h-full">
+    <div class="h-full flex items-center">
       <sider-trigger class="layout-header-action" />
+      <breadcrumb />
     </div>
+
     <div class="flex h-full">
       <full-screen class="layout-header-action" />
       <user-dropdown class="layout-header-action" />
@@ -18,6 +20,7 @@ import SiderTrigger from './components/SiderTrigger.vue'
 import FullScreen from './components/FullScreen.vue'
 import UserDropdown from './components/UserDropdown.vue'
 import SettingDrawer from './components/SettingDrawer.vue'
+import Breadcrumb from './components/Breadcrumb.vue'
 
 const { getCollapsed } = useCollapsed()