diff --git a/app/app.vue b/app/app.vue index 3784383..50092a6 100644 --- a/app/app.vue +++ b/app/app.vue @@ -17,7 +17,6 @@ const router = useRouter() const route = useRoute() const slideDirection = ref('slide-left') const { locale } = useI18n() -// locale.value = 'en-US' // 记录路由历史 const routeHistory = ref([]) diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue index a1abbbf..149bb89 100644 --- a/app/pages/profile/index.vue +++ b/app/pages/profile/index.vue @@ -78,6 +78,13 @@ fetchData() + +
+ + + +
+
diff --git a/app/plugins/i18n.ts b/app/plugins/i18n.ts index 82ae900..27c0273 100644 --- a/app/plugins/i18n.ts +++ b/app/plugins/i18n.ts @@ -15,22 +15,59 @@ export default defineNuxtPlugin(() => { if (import.meta.client) { const i18n = useNuxtApp().$i18n const { setLocale } = i18n + const nuxtApp = useNuxtApp() - // 暂时设置固定语言,用于调试 - // 可以根据需要修改这里的语言代码:'zh-CN' | 'en-US' | 'ja-JP' | 'zh-TW' -/* const fixedLang = 'zh-CN' - setLocale(fixedLang) - Locale.use(fixedLang)*/ + // 获取系统语言 + 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) } - else { - setLocale(i18n.locale.value) - Locale.use(i18n.locale.value) - } + + // 监听系统语言变化(当用户未手动设置语言时) + 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() + } + }) } }) diff --git a/app/plugins/websocket.ts b/app/plugins/websocket.ts index fba9d84..5551c18 100644 --- a/app/plugins/websocket.ts +++ b/app/plugins/websocket.ts @@ -3,22 +3,39 @@ import {authStore} from "@/stores/auth"; export default defineNuxtPlugin(() => { const config = useRuntimeConfig() const { token } = authStore() + const i18n = useNuxtApp().$i18n + const ws = reactive({ instance: null as WebSocket | null, isConnected: false, + currentPath: '', // 保存当前连接的路径 + currentData: null as Record | null, // 保存当前连接的数据 // 修改 connect 方法接收路径和数据对象 connect(path: string, data?: Record) { + // 保存当前连接的路径和数据,以便后续重连使用 + this.currentPath = path + this.currentData = data || null + if (this.instance?.readyState === WebSocket.OPEN) { this.instance.close() } // 构建查询字符串 const queryString =data - ? '?' + Object.entries({ token: token.value,...data}) + ? '?' + Object.entries({ + token: token.value, + 'accept-language': i18n.locale.value, // 添加当前语言作为 accept-language + ...data + }) + .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) + .join('&') + : '?' + Object.entries({ + token: token.value, + 'accept-language': i18n.locale.value // 即使没有其他数据,也添加语言 + }) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .join('&') - : '' // 构建完整的 WebSocket URL const wsUrl = `${config.public.NUXT_PUBLIC_SOCKET_URL}${path}${queryString}` @@ -50,13 +67,24 @@ export default defineNuxtPlugin(() => { }, // 更新重连方法以支持数据对象 - reconnect(path: string, data?: Record) { + reconnect(path?: string, data?: Record) { setTimeout(() => { console.log('尝试重新连接...') - this.connect(path, data) + // 如果提供了新的路径和数据,则使用新的;否则使用保存的当前路径和数据 + this.connect(path || this.currentPath, data || this.currentData || undefined) }, 3000) }, + // 使用当前保存的路径和数据重新连接 + refreshConnection() { + if (this.currentPath) { + console.log('刷新 WebSocket 连接,使用当前语言:', i18n.locale.value) + this.connect(this.currentPath, this.currentData || undefined) + return true + } + return false // 如果没有当前连接信息,返回 false + }, + // 发送消息 send(data: any) { if (this.instance?.readyState === WebSocket.OPEN) {