From 364a21ea1822762d588bb55f39a056ece1c63f21 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Sun, 26 Apr 2026 23:06:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E6=B7=BB=E5=8A=A0=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E8=8F=9C=E5=8D=95=E5=A4=9A=E8=AF=AD=E8=A8=80=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B9=B6=E8=B0=83=E6=95=B4=E5=A4=B4=E9=83=A8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在en.json和zh.json中添加导航菜单和品牌名称的翻译
- 修改ArcticNewOneHeader组件使用vue-i18n实现多语言切换
- 调整导航菜单的间距和字体大小
---
 app/components/layouts/ArcticNewOneHeader.vue | 27 ++++++++++---------
 i18n/locales/en.json                          |  8 ++++++
 i18n/locales/zh.json                          |  8 ++++++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/app/components/layouts/ArcticNewOneHeader.vue b/app/components/layouts/ArcticNewOneHeader.vue
index 4c29a80..b8e3ce3 100644
--- a/app/components/layouts/ArcticNewOneHeader.vue
+++ b/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 = [
-  { name: 'Home', path: '/' },
-  { name: 'Studio', path: '/studio' },
-  { name: 'Work', path: '/work' },
-  { name: 'News', path: '/news' },
-  { name: 'Contact', path: '/contact' }
-]
+const navItems = computed(() => [
+  { name: t('nav.home'), path: '/' },
+  { name: t('nav.studio'), path: '/studio' },
+  { name: t('nav.work'), path: '/work' },
+  { name: t('nav.news'), path: '/news' },
+  { 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="mt-1 text-xs leading-none text-gray-500">ArcticNewOne</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">{{ 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>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4cf4900..23c8b74 100644
--- a/i18n/locales/en.json
+++ b/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"
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index a5c127f..d8c9ef1 100644
--- a/i18n/locales/zh.json
+++ b/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"