117 lines
2.9 KiB
Markdown
117 lines
2.9 KiB
Markdown
# 国际化系统重构说明
|
||
|
||
## 概述
|
||
|
||
本项目已重构国际化系统，采用更简洁、稳定的架构，解决了原有的语言切换逻辑混乱问题。
|
||
|
||
## 新架构特点
|
||
|
||
### 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 操作和页面刷新
|