nl-blogs/client/src/components/Header.vue

<template>
  <header class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="main-header">
    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
      <div class="cursor-pointer group" @click="goTo('/')">
        <span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">年糕崽崽.Dev</span>
      </div>
      <nav class="hidden md:flex items-center gap-10">
        <button 
          @click="goTo('/')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'home' }"
          data-target="home"
        >
          首页
        </button>
        <button 
          @click="goTo('/blog')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'blog' }"
          data-target="blog"
        >
          思考
        </button>
        <button 
          @click="goTo('/works')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'works' }"
          data-target="works"
        >
          作品
        </button>
        <button 
          @click="goTo('/snippets')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'snippets' }"
          data-target="snippets"
        >
          代码
        </button>
        <button 
          @click="goTo('/about')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'about' }"
          data-target="about"
        >
          关于
        </button>
      </nav>
      <div class="hidden md:flex items-center gap-4">
        <a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
        <button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
          合作
        </button>
      </div>
      <button class="md:hidden text-white" @click="toggleMobileMenu">
        <i data-lucide="menu" class="w-6 h-6"></i>
      </button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeNav = ref('home')

const toggleMobileMenu = () => {
  const menu = document.getElementById('mobile-menu')
  if (menu) {
    if (menu.classList.contains('menu-closed')) {
      menu.classList.remove('menu-closed')
      menu.classList.add('menu-open')
      document.body.style.overflow = 'hidden'
    } else {
      menu.classList.remove('menu-open')
      menu.classList.add('menu-closed')
      document.body.style.overflow = ''
    }
  }
}

const navigate = (target: string) => {
  router.push(target)
  toggleMobileMenu()
}

const updateActiveNav = () => {
  const path = route.path
  if (path === '/') activeNav.value = 'home'
  else if (path === '/blog') activeNav.value = 'blog'
  else if (path === '/works' || path.startsWith('/works/')) activeNav.value = 'works'
  else if (path === '/snippets') activeNav.value = 'snippets'
  else if (path === '/services') activeNav.value = 'services'
  else if (path === '/about') activeNav.value = 'about'
}

onMounted(() => {
  updateActiveNav()
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
})

watch(
  () => route.path,
  () => {
    updateActiveNav()
  }
)

const goTo = (target: string) => {
  router.push(target)
}
</script>

<style scoped>
/* 组件特定样式可以在这里添加 */
</style>