# 国际化系统重构说明

## 概述

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

## 新架构特点

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

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

### 3. 清晰的职责分离
- **语言状态管理**: `useLanguageStore`
- **语言切换逻辑**: `useLanguageSwitch`
- **路由导航**: `useNavigation`
- **初始化**: `language-init.client.js` 插件

## 核心文件

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

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

## 使用方法

### 在组件中切换语言
```vue
<script setup>
import { useLanguageSwitch } from '@/composables/useLanguageSwitch.js'

const { switchLanguage, currentLocale } = useLanguageSwitch()

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

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

### 在组件中使用翻译
```vue
<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 操作和页面刷新