初始化

2026-01-15 13:51:44 +08:00
commit b7b6d3e39e
156 changed files with 38913 additions and 0 deletions
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -0,0 +1,122 @@
+<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>