feat(header): 重构导航栏动画逻辑并优化入场效果

将导航栏动画控制从首页迁移到组件内部，实现更流畅的从底部飞入效果
添加自定义事件监听和保底机制确保导航栏正常显示
优化导航链接样式和交互效果

app/pages/index.vue

@@ -252,15 +252,35 @@ onMounted(() => {
           yPercent: 0,
           duration: 1.05,
           ease: 'power4.inOut',
+          onUpdate: function() {
+            // 当 Hero (白色背景) 的 yPercent 运动到 40% 的时候（即大部分背景已经上浮到了屏幕内，还没完全贴顶），触发导航栏出场
+            const progress = this.progress()
+            // 使用一个标记防止重复触发
+            if (progress > 0.6 && !this._headerTriggered) {
+              this._headerTriggered = true
+              window.dispatchEvent(new Event('hero-intro-done'))
+            }
+          },
+          onStart: function() {
+            this._headerTriggered = false
+          }
         }, 'introOut')
-      if (topHeader) {
-        introTimeline.to(topHeader, {
-          yPercent: 0,
-          autoAlpha: 1,
-          duration: 0.55,
-          ease: 'power3.out',
-        }, 'introOut+=0.45')
-      }
+      // 取消原本通过 index.vue 直接控制导航栏 yPercent 的行为
+      // 因为我们要让 Header 自己执行从屏幕底部（y: 100vh）飞入的高级动画
+      // if (topHeader) {
+      //   introTimeline.to(topHeader, {
+      //     yPercent: 0,
+      //     autoAlpha: 1,
+      //     duration: 0.55,
+      //     ease: 'power3.out',
+      //   }, 'introOut+=0.45')
+      // }
+
+      // 在动画即将完成或者 Hero 入场时触发自定义事件，通知导航栏执行自身的从下往上飞入动画
+      // 将触发时机再延后，等白色背景开始渲染的瞬间就触发
+      // introTimeline.add(() => {
+      //   window.dispatchEvent(new Event('hero-intro-done'))
+      // }, 'introOut')
     }
 
     const releasePageScroll = () => {
@@ -283,9 +303,6 @@ onMounted(() => {
     gsap.set(introCharElements, { y: 0, yPercent: 110 })
     gsap.set(tmElement, { autoAlpha: 0 })
     gsap.set(heroElement, { yPercent: 100 })
-    if (topHeader) {
-      gsap.set(topHeader, { yPercent: -140, autoAlpha: 0 })
-    }
     setupHeroScroll()
 
     loaderTween = gsap.to(loaderBarElement, {