From ed9866211d7a21543b673230f53c428fc65e47bf Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Sun, 26 Apr 2026 22:26:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E6=B7=BB=E5=8A=A0=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=90=8D=E7=A7=B0=E5=92=8C=E6=8F=8F=E8=BF=B0=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加中英文的应用名称和描述配置
优化全局和首页的SEO meta设置
配置响应式的标题模板和国际化meta信息
---
 app/app.vue          | 31 +++++++++++++++++++++++++++++++
 app/pages/index.vue  | 10 ++++++++++
 i18n/locales/en.json |  4 ++++
 i18n/locales/zh.json |  4 ++++
 nuxt.config.ts       |  6 ++++++
 5 files changed, 55 insertions(+)

diff --git a/app/app.vue b/app/app.vue
index f8eacfa..f9b59cf 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { useHead, useSeoMeta } from '#imports'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+
+const { t } = useI18n()
+
+// 站点通用基础信息
+const siteImage = '/og-image.png'
+
+// 配置全局 Title 模板
+useHead({
+  titleTemplate: computed(() => (titleChunk?: string) => {
+    const siteName = t('app.name')
+    return titleChunk ? `${titleChunk} - ${siteName}` : siteName
+  })
+})
+
+// 配置全局基础 SEO 和 Meta (响应式支持国际化)
+useSeoMeta({
+  description: () => t('app.description'),
+  ogTitle: () => t('app.name'),
+  ogDescription: () => t('app.description'),
+  ogImage: siteImage,
+  twitterCard: 'summary_large_image',
+  twitterTitle: () => t('app.name'),
+  twitterDescription: () => t('app.description'),
+  twitterImage: siteImage,
+})
+</script>
+
 <template>
   <NuxtLayout>
     <NuxtPage />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 998074a..a09fc0a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -28,6 +28,16 @@ useHead({
   },
 })
 
+// 首页的 SEO 和 Meta 优化，支持国际化响应式
+useSeoMeta({
+  title: () => t('home.title'),
+  description: () => t('home.welcome'),
+  ogTitle: () => `${t('home.title')} - ${t('app.name')}`,
+  ogDescription: () => t('home.welcome'),
+  twitterTitle: () => `${t('home.title')} - ${t('app.name')}`,
+  twitterDescription: () => t('home.welcome'),
+})
+
 // 背景图是装饰层，左右两列共用同一套模板，只通过 side 区分位置和速度。
 const heroGalleryColumns = [
   {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 8d71952..4cf4900 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,8 @@
 {
+  "app": {
+    "name": "ArcticNewOne",
+    "description": "Explore infinite possibilities and modern experiences. Welcome to ArcticNewOne."
+  },
   "home": {
     "title": "Home",
     "welcome": "Welcome to Arctic New One"
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index 1075e1a..a5c127f 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -1,4 +1,8 @@
 {
+  "app": {
+    "name": "ArcticNewOne",
+    "description": "探索无限可能的现代化体验，欢迎来到 ArcticNewOne。"
+  },
   "home": {
     "title": "首页",
     "welcome": "欢迎来到 Arctic New One"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b74e4cc..4de9236 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
+    },
+  },
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   css: ['~/assets/css/tailwind.css'],