website-client-Nigeria/INTERNATIONALIZATION.md

国际化系统重构说明

概述

本项目已重构国际化系统，采用更简洁、稳定的架构，解决了原有的语言切换逻辑混乱问题。

新架构特点

1. 统一的状态管理

• 使用 Pinia store (src/stores/language.js) 统一管理语言状态
• 支持 localStorage 持久化用户语言选择
• 自动检测浏览器语言偏好

2. 简化的语言切换

• 使用 useLanguageSwitch composable 处理语言切换
• 自动处理路由前缀（中文页面添加 /cn 前缀）
• 无需强制页面刷新，提供流畅的用户体验

3. 清晰的职责分离

• 语言状态管理: useLanguageStore
• 语言切换逻辑: useLanguageSwitch
• 路由导航: useNavigation
• 初始化: language-init.client.js 插件

核心文件

语言状态管理

// src/stores/language.js
export const useLanguageStore = defineStore('language', () => {
  const currentLocale = ref('en')
  const availableLocales = [
    { code: 'en', name: 'English' },
    { code: 'cn', name: '简体中文' }
  ]
  
  // 设置语言、初始化、切换等方法
})

语言切换逻辑

// src/composables/useLanguageSwitch.js
export const useLanguageSwitch = () => {
  const switchLanguage = async (newLocale) => {
    // 更新状态并处理路由跳转
  }
  
  const initLanguage = () => {
    // 初始化语言状态
  }
})

使用方法

在组件中切换语言

<script setup>
import { useLanguageSwitch } from '@/composables/useLanguageSwitch.js'

const { switchLanguage, currentLocale } = useLanguageSwitch()

const changeToChinese = () => {
  switchLanguage('cn')
}

const changeToEnglish = () => {
  switchLanguage('en')
}
</script>

在组件中使用翻译

<template>
  <h1>{{ $t('page.home') }}</h1>
  <p>{{ $t('nav.about') }}</p>
</template>

路由策略

• 默认语言: 英文 (en)
• 策略: prefix_except_default
• 中文页面: 自动添加 /cn 前缀
• 英文页面: 无前缀

路由示例

• 英文首页: /
• 中文首页: /cn
• 英文关于我们: /about-us
• 中文关于我们: /cn/about-us

语言检测逻辑

1. 优先使用: 用户手动选择的语言（localStorage）
2. 其次使用: 浏览器语言检测
3. 默认语言: 英文

测试

访问 /test-language 页面可以测试语言切换功能。

移除的旧文件

• src/composables/useLanguageDetection.js - 被新的 useLanguageSwitch 替代
• src/hook/lang.js - 功能整合到 store 中

优势

1. 代码简洁: 移除了重复和冲突的逻辑
2. 状态一致: 统一的状态管理确保服务端和客户端一致
3. 用户体验: 无需页面刷新，流畅的语言切换
4. 可维护性: 清晰的职责分离，易于维护和扩展
5. 性能优化: 减少了不必要的 Cookie 操作和页面刷新