74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { siteConfig } from '~/config/site'
|
||
|
||
const route = useRoute()
|
||
|
||
const breadcrumbs = computed(() => {
|
||
const path = route.path
|
||
if (path === '/') return []
|
||
|
||
const parts = path.split('/').filter(Boolean)
|
||
const result: Array<{ label: string; path: string }> = []
|
||
|
||
let currentPath = ''
|
||
for (const part of parts) {
|
||
currentPath += `/${part}`
|
||
result.push({
|
||
label: part,
|
||
path: currentPath,
|
||
})
|
||
}
|
||
|
||
return result
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<nav class="sticky top-0 z-40 w-full backdrop-blur-sm border-b"
|
||
style="background-color: color-mix(in srgb, var(--color-bg) 80%, transparent); border-color: var(--color-border);">
|
||
<div class="relative flex h-10 items-center justify-between px-2">
|
||
<!-- 最左边：头像 + 面包屑 -->
|
||
<div class="flex items-center gap-1 min-w-0">
|
||
<NuxtLink to="/" class="shrink-0 hover:opacity-80 transition-opacity">
|
||
<img
|
||
:src="siteConfig.avatar"
|
||
:alt="siteConfig.siteName"
|
||
class="h-6 w-6 rounded-full nav-avatar"
|
||
/>
|
||
</NuxtLink>
|
||
<template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
|
||
<span class="shrink-0 text-muted-foreground/40">/</span>
|
||
<NuxtLink
|
||
:to="crumb.path"
|
||
class="text-xs font-medium truncate shrink min-w-0 hover:opacity-80 transition-opacity"
|
||
:class="i === breadcrumbs.length - 1 ? 'text-foreground' : 'text-muted-foreground'"
|
||
>
|
||
{{ crumb.label }}
|
||
</NuxtLink>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 最右边：主题切换 -->
|
||
<div class="flex items-center gap-2 shrink-0">
|
||
<LayoutThemeToggle />
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.nav-avatar {
|
||
animation: spin 2s linear infinite;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.nav-avatar:hover {
|
||
animation-play-state: running;
|
||
}
|
||
</style>
|