refactor(frontend): modularize i18n architecture

frontend/src/views/public/guide/GuideLayout.vue

@@ -35,7 +35,7 @@
         <nav class="w-full px-3">
           <div class="space-y-0.5">
             <template
-              v-for="item in guideNavItems"
+              v-for="item in resolvedGuideNavItems"
               :key="item.id"
             >
               <RouterLink
@@ -127,7 +127,7 @@
             <div class="flex items-center gap-3">
               <button
                 class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
-                :title="themeMode === 'system' ? '跟随系统' : themeMode === 'dark' ? '深色模式' : '浅色模式'"
+                :title="themeModeTitle"
                 @click="toggleDarkMode"
               >
                 <SunMoon
@@ -143,6 +143,7 @@
                   class="h-4 w-4"
                 />
               </button>
+              <LanguageSwitcher />
               <button
                 class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
                 @click="mobileMenuOpen = !mobileMenuOpen"
@@ -230,7 +231,7 @@
               to="/guide"
               class="hover:text-foreground transition-colors"
             >
-              教程文档
+              {{ t('guide.title') }}
             </RouterLink>
             <template v-if="currentNavItem && currentNavItem.id !== 'overview'">
               <ChevronRight class="w-3 h-3 opacity-50" />
@@ -244,7 +245,7 @@
         <div class="flex items-center gap-2">
           <button
             class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
-            :title="themeMode === 'system' ? '跟随系统' : themeMode === 'dark' ? '深色模式' : '浅色模式'"
+            :title="themeModeTitle"
             @click="toggleDarkMode"
           >
             <SunMoon
@@ -265,10 +266,11 @@
             target="_blank"
             rel="noopener noreferrer"
             class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
-            title="GitHub 仓库"
+            :title="t('common.githubRepository')"
           >
             <GithubIcon class="h-4 w-4" />
           </a>
+          <LanguageSwitcher />
         </div>
       </header>
     </template>
@@ -333,20 +335,37 @@ import {
 } from 'lucide-vue-next'
 import GithubIcon from '@/components/icons/GithubIcon.vue'
 import HeaderLogo from '@/components/HeaderLogo.vue'
+import LanguageSwitcher from '@/components/common/LanguageSwitcher.vue'
 import AppShell from '@/components/layout/AppShell.vue'
 import { useDarkMode } from '@/composables/useDarkMode'
 import { useSiteInfo } from '@/composables/useSiteInfo'
+import { useI18n } from '@/i18n'
 import { guideNavItems } from './guide-config'
 
 const route = useRoute()
 const { themeMode, toggleDarkMode } = useDarkMode()
 const { siteName, siteSubtitle } = useSiteInfo()
+const { t } = useI18n()
 
 const mobileMenuOpen = ref(false)
 const baseUrl = ref(typeof window !== 'undefined' ? window.location.origin : 'https://your-aether.com')
 const activeHash = ref('')
 const lightboxSrc = ref('')
 const lightboxAlt = ref('')
+const themeModeTitle = computed(() => {
+  if (themeMode.value === 'system') return t('theme.system')
+  if (themeMode.value === 'dark') return t('theme.dark')
+  return t('theme.light')
+})
+const resolvedGuideNavItems = computed(() => guideNavItems.map(item => ({
+  ...item,
+  name: t(item.nameKey),
+  description: item.descriptionKey ? t(item.descriptionKey) : undefined,
+  subItems: item.subItems?.map(subItem => ({
+    ...subItem,
+    name: t(subItem.nameKey),
+  })),
+})))
 
 function onArticleClick(e: MouseEvent) {
   const target = e.target as HTMLElement
@@ -437,7 +456,7 @@ onUnmounted(() => {
 })
 
 const currentNavItem = computed(() => {
-  return guideNavItems.find(item => item.path === route.path)
+  return resolvedGuideNavItems.value.find(item => item.path === route.path)
 })
 
 function isNavActive(href: string) {
@@ -451,7 +470,7 @@ function isNavActive(href: string) {
 const navigation = computed(() => [
   {
     title: '',
-    items: guideNavItems.map(item => ({
+    items: resolvedGuideNavItems.value.map(item => ({
       name: item.name,
       href: item.path,
       icon: item.icon