liveh5-nuxt/app/plugins/i18n.ts

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()
      }
    })
  }
})