更新

admin/src/layout/default/components/header/index.vue

@@ -1,7 +1,7 @@
 <template>
     <header class="header">
         <div class="navbar">
-            <div class="flex-1 flex">
+            <div class="flex-1 flex items-center gap-1 min-w-0">
                 <div class="navbar-item">
                     <el-tooltip
                         class="box-item"
@@ -17,11 +17,14 @@
                         <refresh />
                     </el-tooltip>
                 </div>
-                <div class="flex items-center px-2" v-if="!isMobile && settingStore.showCrumb">
+                <div
+                    class="hidden md:flex items-center min-w-0 px-2"
+                    v-if="settingStore.showCrumb && breadcrumbs.length"
+                >
                     <breadcrumb />
                 </div>
             </div>
-            <div class="flex">
+            <div class="flex items-center gap-1">
                 <div class="navbar-item" v-if="!isMobile">
                     <el-tooltip
                         class="box-item"
@@ -36,12 +39,7 @@
                     <user-drop-down />
                 </div>
                 <div class="navbar-item">
-                    <el-tooltip
-                        class="box-item"
-                        effect="dark"
-                        content="主题设置"
-                        placement="bottom"
-                    >
+                    <el-tooltip class="box-item" effect="dark" content="主题设置" placement="bottom">
                         <setting />
                     </el-tooltip>
                 </div>
@@ -52,8 +50,10 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationMatched } from 'vue-router'
 import { useFullscreen } from '@vueuse/core'
 
+import { useWatchRoute } from '@/hooks/useWatchRoute'
 import useAppStore from '@/stores/modules/app'
 import useSettingStore from '@/stores/modules/setting'
 
@@ -70,14 +70,20 @@ const isMobile = computed(() => appStore.isMobile)
 const isCollapsed = computed(() => appStore.isCollapsed)
 const settingStore = useSettingStore()
 const { isFullscreen } = useFullscreen()
+
+const breadcrumbs = ref<RouteLocationMatched[]>([])
+useWatchRoute((route) => {
+    breadcrumbs.value = route.matched.filter((item) => item.meta && item.meta.title)
+})
 </script>
 
 <style lang="scss">
 .navbar {
     height: var(--navbar-height);
-    @apply flex px-2 bg-body;
+    @apply flex px-3 bg-body;
+
     .navbar-item {
-        @apply h-full  flex justify-center items-center  hover:bg-page;
+        @apply h-full flex justify-center items-center;
     }
 }
 </style>