From 449010718e02a419ef2f44551d63bdc1380f2fd7 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Sun, 26 Apr 2026 22:19:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(header):=20=E6=B7=BB=E5=8A=A0=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E8=8F=9C=E5=8D=95=E5=92=8C=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增导航菜单数据配置
- 实现左侧logo和标题区域
- 添加中间导航链接区域
- 添加右侧菜单图标
- 优化header布局为flex响应式设计
---
 app/components/layouts/ArcticNewOneHeader.vue | 46 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/app/components/layouts/ArcticNewOneHeader.vue b/app/components/layouts/ArcticNewOneHeader.vue
index 941f4bc..4af0ccc 100644
--- a/app/components/layouts/ArcticNewOneHeader.vue
+++ b/app/components/layouts/ArcticNewOneHeader.vue
@@ -5,6 +5,15 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 gsap.registerPlugin(ScrollTrigger)
 
+// 导航菜单数据配置
+const navItems = [
+  { name: 'Home', path: '/' },
+  { name: 'Studio', path: '/studio' },
+  { name: 'Work', path: '/work' },
+  { name: 'News', path: '/news' },
+  { name: 'Contact', path: '/contact' }
+]
+
 const topHeaderRef = ref<HTMLElement | null>(null)
 const bottomHeaderRef = ref<HTMLElement | null>(null)
 let topHeaderTween: gsap.core.Tween | null = null
@@ -83,9 +92,42 @@ onBeforeUnmount(() => {
 <template>
   <header
     ref="topHeaderRef"
-    class="site-header-top fixed left-0 right-0 top-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-red-200 px-4 py-5"
+    class="site-header-top fixed left-0 right-0 top-0 z-50 mx-auto flex h-[70px] w-page-container max-w-[calc(100%-2rem)] items-center justify-between px-4 py-5"
   >
-    <nav>Top Navigation</nav>
+    <!-- 左侧：Logo 和 标题 -->
+    <div class="flex items-center gap-3">
+      <div class="logo-icon flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
+        <!-- 简单的极简风格 SVG Logo -->
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+          <path d="M2 12h20" />
+        </svg>
+      </div>
+      <div class="flex flex-col justify-center">
+        <span class="text-sm font-bold leading-none tracking-wider text-black">北极新一</span>
+        <span class="mt-1 text-[10px] leading-none text-gray-500">ArcticNewOne</span>
+      </div>
+    </div>
+
+    <!-- 中间：导航链接 -->
+    <nav class="hidden md:flex items-center gap-8">
+      <a
+        v-for="item in navItems"
+        :key="item.name"
+        :href="item.path"
+        class="group relative flex items-center text-sm font-medium text-black"
+      >
+        <span class="absolute -left-3 h-1.5 w-1.5 rounded-full bg-black opacity-0 transition-all duration-300 group-hover:opacity-100"></span>
+        <span class="transition-transform duration-300 group-hover:translate-x-2">{{ item.name }}</span>
+      </a>
+    </nav>
+
+    <!-- 右侧：菜单图标 (使用 div 绘制) -->
+    <div class="menu-icon group flex h-8 w-8 cursor-pointer flex-col items-end justify-center gap-[6px]">
+      <div class="h-[2px] w-6 bg-black transition-all duration-300 group-hover:translate-y-[1px]"></div>
+      <div class="h-[2px] w-6 bg-black transition-all duration-300 group-hover:-translate-y-[1px]"></div>
+    </div>
   </header>
 
   <header