|
|
@@ -1,52 +1,54 @@
|
|
|
-import { defineStore } from 'pinia'
|
|
|
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|
|
-import en from 'element-plus/es/locale/lang/en'
|
|
|
-import zhMessages from '@/locales/zh-CN.js' // 中文语言包
|
|
|
-import enMessages from '@/locales/en.js'
|
|
|
+import { defineStore } from 'pinia';
|
|
|
+import i18n from '@/i18n'; // 导入 i18n 实例
|
|
|
|
|
|
-// 定义localStorage的key
|
|
|
-const LANG_KEY = 'APP_CURRENT_LANG'
|
|
|
+// 导入 Element Plus 语言包
|
|
|
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
|
|
+import en from 'element-plus/es/locale/lang/en';
|
|
|
+
|
|
|
+// 语言包映射
|
|
|
const elLocaleMap = {
|
|
|
'zh-CN': zhCn,
|
|
|
- en: en
|
|
|
-}
|
|
|
+ en: en,
|
|
|
+};
|
|
|
+
|
|
|
+const LANG_KEY = 'APP_CURRENT_LANG';
|
|
|
|
|
|
-// 默认语言（优先从localStorage读取，没有则用浏览器默认）
|
|
|
-const defaultLang = localStorage.getItem(LANG_KEY) || (navigator.language || 'zh-CN').toLowerCase();
|
|
|
-localStorage.setItem(LANG_KEY, defaultLang)
|
|
|
+const getInitialLang = () => {
|
|
|
+ const savedLang = localStorage.getItem(LANG_KEY);
|
|
|
+ if (savedLang && ['zh-CN', 'en'].includes(savedLang)) {
|
|
|
+ return savedLang;
|
|
|
+ }
|
|
|
+ const browserLang = navigator.language || 'zh-CN';
|
|
|
+ return browserLang.toLowerCase().startsWith('en') ? 'en' : 'zh-CN';
|
|
|
+};
|
|
|
|
|
|
export const useLangStore = defineStore('lang', {
|
|
|
- state: () => ({
|
|
|
- // 当前语言
|
|
|
- currentLang: defaultLang === 'en' ? 'en' : 'zh-CN', // 兼容处理，只保留en/zh-CN
|
|
|
- elLocale: elLocaleMap[defaultLang === 'en' ? 'en' : 'zh-CN']
|
|
|
- }),
|
|
|
+ state: () => {
|
|
|
+ const initialLang = getInitialLang();
|
|
|
+ return {
|
|
|
+ currentLang: initialLang,
|
|
|
+ elLocale: elLocaleMap[initialLang],
|
|
|
+ };
|
|
|
+ },
|
|
|
actions: {
|
|
|
- // 切换语言
|
|
|
changeLang(lang) {
|
|
|
- this.currentLang = lang
|
|
|
- this.elLocale = elLocaleMap[lang === 'en' ? 'en' : 'zh-CN']
|
|
|
- // 持久化到localStorage
|
|
|
- localStorage.setItem(LANG_KEY, lang)
|
|
|
-
|
|
|
- // 触发i18n实例的语言切换（后续在i18n配置中关联）
|
|
|
- if (window.$i18n && window.$i18n.global) {
|
|
|
- window.$i18n.global.locale.value = lang
|
|
|
- }
|
|
|
- window.$i18n.locale = lang
|
|
|
- console.log('切换到语言:', lang, $i18n)
|
|
|
- // 动态设置页面标题
|
|
|
- this.updateDynamicTitle()
|
|
|
+ if (!['zh-CN', 'en'].includes(lang)) return;
|
|
|
+
|
|
|
+ this.currentLang = lang;
|
|
|
+ this.elLocale = elLocaleMap[lang];
|
|
|
+ i18n.global.locale.value = lang; // 正确更新 i18n 实例的 locale
|
|
|
+ localStorage.setItem(LANG_KEY, lang);
|
|
|
+ this.updateDynamicTitle();
|
|
|
},
|
|
|
- // 动态更新页面标题
|
|
|
updateDynamicTitle() {
|
|
|
- // 从语言包获取网站标题
|
|
|
- const siteTitle = this.currentLang === 'en' ? enMessages.common.title : zhMessages.common.title;
|
|
|
- if (siteTitle) {
|
|
|
- document.title = siteTitle
|
|
|
- }
|
|
|
+ // 动态更新页面标题
|
|
|
+ document.title = i18n.global.t('common.title');
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-})
|
|
|
+ // 初始化时设置语言
|
|
|
+ initializeLang() {
|
|
|
+ const initialLang = this.currentLang;
|
|
|
+ i18n.global.locale.value = initialLang;
|
|
|
+ this.updateDynamicTitle();
|
|
|
+ }
|
|
|
+ },
|
|
|
+});
|
ext.zhangbin71