diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue index 68c695b2..5e2051be 100644 --- a/src/components/Screenfull/index.vue +++ b/src/components/Screenfull/index.vue @@ -1,3 +1,7 @@ + + - - diff --git a/src/lang/index.ts b/src/lang/index.ts index 8ed51e90..a5554678 100644 --- a/src/lang/index.ts +++ b/src/lang/index.ts @@ -1,9 +1,10 @@ -// 自定义国际化配置 import { createI18n } from 'vue-i18n'; +import { useAppStore } from '@/store/modules/app'; +const appStore = useAppStore(); // 本地语言包 -import enLocale from './en'; -import zhCnLocale from './zh-cn'; +import enLocale from './package/en'; +import zhCnLocale from './package/zh-cn'; const messages = { 'zh-cn': { @@ -14,31 +15,9 @@ const messages = { } }; -/** - * 获取当前系统使用语言字符串 - * - * @returns zh-cn|en ... - */ -export const getLanguage = () => { - // 本地缓存获取 - let language = localStorage.getItem('language'); - if (language) { - return language; - } - // 浏览器使用语言 - language = navigator.language.toLowerCase(); - const locales = Object.keys(messages); - for (const locale of locales) { - if (language.indexOf(locale) > -1) { - return locale; - } - } - return 'zh-cn'; -}; - const i18n = createI18n({ legacy: false, - locale: getLanguage(), + locale: appStore.language, messages: messages }); diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index 82c2c507..d00447fb 100644 --- a/src/layout/components/Settings/index.vue +++ b/src/layout/components/Settings/index.vue @@ -29,6 +29,9 @@ const themeColors = ref([ '#f5222d' ]); +/** + * 切换主题颜色 + */ function changeThemeColor(color: string) { document.documentElement.style.setProperty('--el-color-primary', color); settingsStore.changeSetting({ key: 'layout', value: color }); diff --git a/src/main.ts b/src/main.ts index 9a9fe032..1d10f2f0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,8 +13,8 @@ import 'virtual:svg-icons-register'; import i18n from '@/lang/index'; // 样式 -import '@/styles/index.scss'; import 'element-plus/theme-chalk/dark/css-vars.css'; +import '@/styles/index.scss'; import 'uno.css'; const app = createApp(App); diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index d0573725..2b0bfd2c 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -2,14 +2,13 @@ import { defineStore } from 'pinia'; import { useStorage } from '@vueuse/core'; import defaultSettings from '@/settings'; -// Element Plus 语言包 +// 导入 Element Plus 中英文语言包 import zhCn from 'element-plus/es/locale/lang/zh-cn'; import en from 'element-plus/es/locale/lang/en'; // setup export const useAppStore = defineStore('app', () => { // state - const device = useStorage('device', 'desktop'); const size = useStorage('size', defaultSettings.size); const language = useStorage('language', defaultSettings.language); @@ -20,6 +19,9 @@ export const useAppStore = defineStore('app', () => { withoutAnimation: false }); + /** + * 根据语言标识读取对应的语言包 + */ const locale = computed(() => { if (language?.value == 'en') { return en; @@ -58,7 +60,11 @@ export const useAppStore = defineStore('app', () => { function changeSize(val: string) { size.value = val; } - + /** + * 切换语言 + * + * @param val + */ function changeLanguage(val: string) { language.value = val; }