数据结构优化

client/src/components/Header.vue

@@ -1,88 +1,189 @@
 <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">{{ siteTitle || '年糕崽崽' }}</span>
-        <span class="font-serif text-2xl italic tracking-wider text-art-accent group-hover:text-white transition-colors">.Blog</span>
+    <!-- 优化点1: 移动端高度减小 (h-16), 桌面端保持 h-20 -->
+    <div class="max-w-7xl mx-auto px-4 md:px-6 h-16 md:h-20 flex items-center justify-between">
+      <!-- Logo -->
+      <div class="cursor-pointer group flex items-center gap-1" @click="goTo('/')">
+        <span class="font-serif text-xl md:text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">{{ siteTitle || '年糕崽崽' }}</span>
+        <span class="font-serif text-xl md:text-2xl italic tracking-wider text-art-accent group-hover:text-white transition-colors">.Blog</span>
       </div>
-      <nav class="hidden md:flex items-center gap-10">
-        <button 
-          v-if="visibleMenus.includes('home')"
-          @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"
+
+      <!-- Desktop Nav -->
+      <nav class="hidden md:flex items-center gap-8 lg:gap-10">
+        <button
+            v-if="visibleMenus.includes('home')"
+            @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' }"
         >
           首页
         </button>
-        <button 
-          v-if="visibleMenus.includes('blog')"
-          @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
+            v-if="visibleMenus.includes('blog')"
+            @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' }"
         >
           思考
         </button>
-        <button 
-          v-if="visibleMenus.includes('columns')"
-          @click="goTo('/columns')" 
-          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 === 'columns' }"
-          data-target="columns"
+        <button
+            v-if="visibleMenus.includes('columns')"
+            @click="goTo('/columns')"
+            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 === 'columns' }"
         >
           专栏
         </button>
-        <button 
-          v-if="visibleMenus.includes('works')"
-          @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
+            v-if="visibleMenus.includes('works')"
+            @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' }"
         >
           作品
         </button>
-        <button 
-          v-if="visibleMenus.includes('snippets')"
-          @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
+            v-if="visibleMenus.includes('snippets')"
+            @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' }"
         >
           代码
         </button>
-        <button 
-          v-if="visibleMenus.includes('about')"
-          @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
+            v-if="visibleMenus.includes('about')"
+            @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' }"
         >
           关于
         </button>
       </nav>
+
+      <!-- Desktop Actions -->
       <div class="hidden md:flex items-center gap-4">
         <a href="#" class="text-art-muted hover:text-white transition-colors"><Icon name="github" :size="20" /></a>
         <a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
           <Icon name="layout-dashboard" :size="20" />
         </a>
-        <button 
-          v-if="visibleMenus.includes('services')"
-          @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
+            v-if="visibleMenus.includes('services')"
+            @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">
+
+      <!-- Mobile Menu Button -->
+      <button class="md:hidden text-white p-2 -mr-2 active:scale-95 transition-transform" @click="isMobileMenuOpen = true">
         <Icon name="menu" :size="24" />
       </button>
     </div>
+
+    <!-- Mobile Drawer Menu (抽屉式) -->
+    <!-- 优化点3: 使用 Teleport 传送到 body，确保不被父级遮挡，并实现抽屉动画 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div v-if="isMobileMenuOpen" class="fixed inset-0 z-[100] md:hidden" @click="closeMobileMenu">
+          <!-- Backdrop -->
+          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+        </div>
+      </Transition>
+
+      <Transition name="slide-right">
+        <div v-if="isMobileMenuOpen" class="fixed top-0 right-0 bottom-0 w-64 bg-[#1a1a1a] z-[101] shadow-2xl border-l border-white/10 flex flex-col md:hidden">
+          <!-- Drawer Header -->
+          <div class="h-16 px-6 flex items-center justify-between border-b border-white/5">
+             <span class="font-serif text-lg italic tracking-wider text-white">
+               Menu
+             </span>
+            <button class="text-white/70 hover:text-white p-2 -mr-2" @click="closeMobileMenu">
+              <Icon name="x" :size="24" />
+            </button>
+          </div>
+
+          <!-- Drawer Content -->
+          <div class="flex-1 overflow-y-auto py-6 px-6 space-y-6">
+            <nav class="flex flex-col space-y-4">
+              <button
+                  v-if="visibleMenus.includes('home')"
+                  @click="goTo('/')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'home' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                首页
+              </button>
+              <button
+                  v-if="visibleMenus.includes('blog')"
+                  @click="goTo('/blog')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'blog' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                思考
+              </button>
+              <button
+                  v-if="visibleMenus.includes('columns')"
+                  @click="goTo('/columns')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'columns' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                专栏
+              </button>
+              <button
+                  v-if="visibleMenus.includes('works')"
+                  @click="goTo('/works')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'works' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                作品
+              </button>
+              <button
+                  v-if="visibleMenus.includes('snippets')"
+                  @click="goTo('/snippets')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'snippets' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                代码
+              </button>
+              <button
+                  v-if="visibleMenus.includes('about')"
+                  @click="goTo('/about')"
+                  class="text-left text-base font-medium py-2 border-b border-white/5 transition-colors"
+                  :class="activeNav === 'about' ? 'text-art-accent' : 'text-art-muted hover:text-white'"
+              >
+                关于
+              </button>
+            </nav>
+
+            <div class="pt-6 border-t border-white/10 space-y-4">
+              <div class="flex items-center gap-4">
+                <a href="#" class="flex items-center gap-2 text-art-muted hover:text-white transition-colors text-sm">
+                  <Icon name="github" :size="18" />
+                  <span>GitHub</span>
+                </a>
+                <a href="/admin" target="_blank" class="flex items-center gap-2 text-art-muted hover:text-white transition-colors text-sm">
+                  <Icon name="layout-dashboard" :size="18" />
+                  <span>管理后台</span>
+                </a>
+              </div>
+              <button
+                  v-if="visibleMenus.includes('services')"
+                  @click="goTo('/services')"
+                  class="w-full py-3 text-xs font-bold tracking-widest uppercase border border-white/20 hover:bg-white/5 hover:border-art-accent hover:text-art-accent transition-all rounded-lg text-center text-white"
+              >
+                商业合作
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </header>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { getPublicSettings } from '../services/api'
 import Icon from './Icon.vue'
@@ -91,26 +192,13 @@ const router = useRouter()
 const route = useRoute()
 const activeNav = ref('home')
 const siteTitle = ref<string>('')
-const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services']) // 默认显示所有菜单
+const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services'])
+const isMobileMenuOpen = ref(false)
 
-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 closeMobileMenu = () => {
+  isMobileMenuOpen.value = false
 }
 
-// navigate function is used in template via @click handlers
-// navigate function removed - not used in template
-
 const updateActiveNav = () => {
   const path = route.path
   if (path === '/') activeNav.value = 'home'
@@ -123,32 +211,25 @@ const updateActiveNav = () => {
   else if (path === '/about') activeNav.value = 'about'
 }
 
-// Icons are now handled by Vue components
-
-// 获取网站配置
 const loadSiteSettings = async () => {
   try {
     const settings = await getPublicSettings()
     if (settings.site_title) {
       siteTitle.value = settings.site_title
     }
-    
-    // 获取菜单显示配置
+
     if (settings.visible_menus) {
       try {
-        // 尝试解析JSON格式
         const parsed = JSON.parse(settings.visible_menus)
         if (Array.isArray(parsed)) {
           visibleMenus.value = parsed
         }
       } catch {
-        // 如果不是JSON，按逗号分隔
         visibleMenus.value = settings.visible_menus.split(',').map((m: string) => m.trim()).filter((m: string) => m)
       }
     }
   } catch (error) {
     console.error('Failed to load site settings:', error)
-    // 使用默认值，不抛出错误
   }
 }
 
@@ -158,17 +239,47 @@ onMounted(() => {
 })
 
 watch(
-  () => route.path,
-  () => {
-    updateActiveNav()
-  }
+    () => route.path,
+    () => {
+      updateActiveNav()
+    }
 )
 
 const goTo = (target: string) => {
   router.push(target)
+  closeMobileMenu() // 跳转时关闭菜单
 }
+
+// 监听菜单状态，控制 body 滚动，防止抽屉打开时背景还能滚动
+watch(isMobileMenuOpen, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
 </script>
 
 <style scoped>
-/* 组件特定样式可以在这里添加 */
+/* Fade Animation */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide Right Animation */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
 </style>

client/src/components/Icon.vue

@@ -3,7 +3,7 @@
     :is="iconComponent" 
     :class="className" 
     :style="style"
-    :size="size"
+    :size="iconSize"
   />
 </template>
 
@@ -35,4 +35,13 @@ const iconComponent = computed(() => {
   const iconName = toPascalCase(props.name) as keyof typeof LucideIcons
   return LucideIcons[iconName] || LucideIcons.AlertCircle
 })
+
+// 确保 size 是 number 类型
+const iconSize = computed(() => {
+  if (typeof props.size === 'string') {
+    const parsed = parseInt(props.size, 10)
+    return isNaN(parsed) ? 24 : parsed
+  }
+  return props.size ?? 24
+})
 </script>

client/src/components/StarBackground.vue

@@ -198,7 +198,7 @@ const updateAndDrawParticles = () => {
   }
 }
 
-const createMeteor = (force = false) => {
+const createMeteor = () => {
   const startX = Math.random() * width
   const angle = Math.PI / 4 // 45度
   meteors.push({