feat(i18n): 添加导航菜单多语言支持并调整头部样式

- 在en.json和zh.json中添加导航菜单和品牌名称的翻译
- 修改ArcticNewOneHeader组件使用vue-i18n实现多语言切换
- 调整导航菜单的间距和字体大小

app/components/layouts/ArcticNewOneHeader.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 gsap.registerPlugin(ScrollTrigger)
 
+const { t } = useI18n()
+
 // 导航菜单数据配置
-const navItems = [
+const navItems = computed(() => [
-  { name: 'Home', path: '/' },
+  { name: t('nav.home'), path: '/' },
-  { name: 'Studio', path: '/studio' },
+  { name: t('nav.studio'), path: '/studio' },
-  { name: 'Work', path: '/work' },
+  { name: t('nav.work'), path: '/work' },
-  { name: 'News', path: '/news' },
+  { name: t('nav.news'), path: '/news' },
-  { name: 'Contact', path: '/contact' }
+  { name: t('nav.contact'), path: '/contact' }
-]
+])
 
 const topHeaderRef = ref<HTMLElement | null>(null)
 const bottomHeaderRef = ref<HTMLElement | null>(null)
@@ -165,19 +168,19 @@ onBeforeUnmount(() => {
         </svg>
       </div>
       <div class="flex flex-col justify-center">
-        <span class="text-base font-bold leading-none tracking-wider text-black">北极新一</span>
+        <span class="text-base font-bold leading-none tracking-wider text-black">{{ t('app.brand') }}</span>
-        <span class="mt-1 text-xs leading-none text-gray-500">ArcticNewOne</span>
+        <span class="mt-1 text-xs leading-none text-gray-500">{{ t('app.name') }}</span>
       </div>
     </div>
 
     <!-- 中间：导航链接 -->
-    <nav class="hidden md:flex items-center gap-20 lg:gap-28">
+    <nav class="hidden md:flex items-center gap-10 lg:gap-16">
       <NuxtLink
         v-for="item in navItems"
         :key="item.name"
         :to="item.path"
         class="nav-link-item group flex items-center overflow-hidden font-semibold tracking-[-0.7px] text-black"
-        style="font-size: 1.125rem; justify-content: flex-start; position: relative;"
+        style="font-size: 1rem; justify-content: flex-start; position: relative;"
       >
         <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[18px] pr-[18px]">
           <span class="mr-2 h-2.5 w-2.5 rounded-full bg-black shrink-0"></span>

i18n/locales/en.json

@@ -1,8 +1,16 @@
 {
   "app": {
     "name": "ArcticNewOne",
+    "brand": "ArcticNewOne",
     "description": "Explore infinite possibilities and modern experiences. Welcome to ArcticNewOne."
   },
+  "nav": {
+    "home": "Home",
+    "studio": "Studio",
+    "work": "Work",
+    "news": "News",
+    "contact": "Contact"
+  },
   "home": {
     "title": "Home",
     "welcome": "Welcome to Arctic New One"

i18n/locales/zh.json

@@ -1,8 +1,16 @@
 {
   "app": {
     "name": "ArcticNewOne",
+    "brand": "北极新一",
     "description": "探索无限可能的现代化体验，欢迎来到 ArcticNewOne。"
   },
+  "nav": {
+    "home": "首页",
+    "studio": "工作室",
+    "work": "作品",
+    "news": "动态",
+    "contact": "联系"
+  },
   "home": {
     "title": "首页",
     "welcome": "欢迎来到 Arctic New One"