462a2b23a9
- 移除 App.vue 中的固定语言设置 - 在 i18n.ts 中实现系统语言自动检测和手动设置支持 - 添加语言切换时重新连接 WebSocket 的逻辑 - 在 profile 页面添加语言设置入口 - 优化 WebSocket连接过程，添加 accept-language头
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import type { Locale as TypeLocale } from '#i18n'
|
||
import { Locale } from 'vant'
|
||
import enUS from 'vant/es/locale/lang/en-US'
|
||
import zhCN from 'vant/es/locale/lang/zh-CN'
|
||
import jaJP from 'vant/es/locale/lang/ja-JP'
|
||
import zhTW from 'vant/es/locale/lang/zh-TW'
|
||
|
||
export default defineNuxtPlugin(() => {
|
||
// 载入 vant 语言包
|
||
Locale.use('zh-CN', zhCN)
|
||
Locale.use('en-US', enUS)
|
||
Locale.use('ja-JP', jaJP)
|
||
Locale.use('zh-TW', zhTW)
|
||
|
||
if (import.meta.client) {
|
||
const i18n = useNuxtApp().$i18n
|
||
const { setLocale } = i18n
|
||
const nuxtApp = useNuxtApp()
|
||
|
||
// 获取系统语言
|
||
const getSystemLanguage = () => {
|
||
const browserLang = navigator.language
|
||
|
||
// 将浏览器语言映射到应用支持的语言
|
||
if (browserLang.startsWith('zh')) {
|
||
return browserLang.includes('TW') || browserLang.includes('HK') ? 'zh-TW' : 'zh-CN'
|
||
} else if (browserLang.startsWith('ja')) {
|
||
return 'ja-JP'
|
||
} else if (browserLang.startsWith('en')) {
|
||
return 'en-US'
|
||
}
|
||
|
||
// 默认返回中文
|
||
return 'zh-CN'
|
||
}
|
||
|
||
// 获取用户手动设置的语言或系统语言
|
||
const lang = localStorage.getItem('lang')
|
||
if (lang) {
|
||
// 用户手动设置了语言，优先使用
|
||
setLocale(lang as TypeLocale)
|
||
Locale.use(lang)
|
||
} else {
|
||
// 用户未手动设置语言，使用系统语言
|
||
const systemLang = getSystemLanguage()
|
||
setLocale(systemLang as TypeLocale)
|
||
Locale.use(systemLang)
|
||
|
||
// 将系统语言保存到 localStorage，以便下次使用
|
||
localStorage.setItem('lang', systemLang)
|
||
}
|
||
|
||
// 监听系统语言变化（当用户未手动设置语言时）
|
||
window.addEventListener('languagechange', () => {
|
||
// 只有当用户未手动设置语言时，才跟随系统语言变化
|
||
if (!localStorage.getItem('lang')) {
|
||
const systemLang = getSystemLanguage()
|
||
setLocale(systemLang as TypeLocale)
|
||
Locale.use(systemLang)
|
||
}
|
||
})
|
||
|
||
// 监听语言变化，当语言变化时，如果有活跃的 WebSocket 连接，则重新连接
|
||
watch(() => i18n.locale.value, (newLocale) => {
|
||
// 如果 WebSocket 插件已加载并且有活跃连接
|
||
if (nuxtApp.$ws) {
|
||
// 使用 refreshConnection 方法刷新 WebSocket 连接
|
||
console.log('语言已更改为:', newLocale, '正在更新 WebSocket 连接')
|
||
nuxtApp.$ws.refreshConnection()
|
||
}
|
||
})
|
||
}
|
||
})
|