Vben
6 years ago
47 changed files with 353 additions and 284 deletions
@ -1,38 +0,0 @@ |
|||
import type { LocaleSetting } from '/#/config'; |
|||
|
|||
import { computed, unref } from 'vue'; |
|||
import { appStore } from '/@/store/modules/app'; |
|||
|
|||
import getProjectSetting from '/@/settings/projectSetting'; |
|||
import { localeList } from '/@/locales/constant'; |
|||
|
|||
// Get locale configuration
|
|||
const getLocale = computed(() => appStore.getProjectConfig.locale || getProjectSetting.locale); |
|||
|
|||
// get current language
|
|||
const getLang = computed(() => unref(getLocale).lang); |
|||
|
|||
// get Available Locales
|
|||
const getAvailableLocales = computed((): string[] => unref(getLocale).availableLocales); |
|||
|
|||
// get Fallback Locales
|
|||
const getFallbackLocale = computed((): string => unref(getLocale).fallback); |
|||
|
|||
const getShowLocale = computed(() => unref(getLocale).show); |
|||
|
|||
// Set locale configuration
|
|||
function setLocale(locale: Partial<LocaleSetting>): void { |
|||
appStore.commitProjectConfigState({ locale }); |
|||
} |
|||
|
|||
export function useLocaleSetting() { |
|||
return { |
|||
getLocale, |
|||
getLang, |
|||
localeList, |
|||
setLocale, |
|||
getShowLocale, |
|||
getAvailableLocales, |
|||
getFallbackLocale, |
|||
}; |
|||
} |
|||
@ -1,13 +0,0 @@ |
|||
import type { DropMenu } from '/@/components/Dropdown'; |
|||
|
|||
// locale list
|
|||
export const localeList: DropMenu[] = [ |
|||
{ |
|||
text: '简体中文', |
|||
event: 'zh_CN', |
|||
}, |
|||
{ |
|||
text: 'English', |
|||
event: 'en', |
|||
}, |
|||
]; |
|||
@ -1,4 +0,0 @@ |
|||
import { genMessage } from './helper'; |
|||
const modules = import.meta.globEager('./lang/**/*.ts'); |
|||
|
|||
export default genMessage(modules); |
|||
@ -0,0 +1,13 @@ |
|||
import { genMessage } from '../helper'; |
|||
const modules = import.meta.globEager('./en/**/*.ts'); |
|||
import antdLocale from 'ant-design-vue/es/locale/en_US'; |
|||
import momentLocale from 'moment/dist/locale/eu'; |
|||
|
|||
export default { |
|||
message: { |
|||
...genMessage(modules, 'en'), |
|||
antdLocale, |
|||
}, |
|||
momentLocale, |
|||
momentLocaleName: 'eu', |
|||
}; |
|||
@ -0,0 +1,13 @@ |
|||
import { genMessage } from '../helper'; |
|||
const modules = import.meta.globEager('./zh_CN/**/*.ts'); |
|||
import antdLocale from 'ant-design-vue/es/locale/zh_CN'; |
|||
import momentLocale from 'moment/dist/locale/zh-cn'; |
|||
|
|||
export default { |
|||
message: { |
|||
...genMessage(modules, 'zh_CN'), |
|||
antdLocale, |
|||
}, |
|||
momentLocale, |
|||
momentLocaleName: 'zh-cn', |
|||
}; |
|||
@ -1 +0,0 @@ |
|||
export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko'; |
|||
@ -1,64 +1,73 @@ |
|||
/** |
|||
* Multi-language related operations |
|||
*/ |
|||
import type { LocaleType } from '/@/locales/types'; |
|||
import type { Ref } from 'vue'; |
|||
import type { LocaleType } from '/#/config'; |
|||
|
|||
import { unref, ref } from 'vue'; |
|||
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting'; |
|||
import { ref } from 'vue'; |
|||
import moment from 'moment'; |
|||
import { computed } from 'vue'; |
|||
|
|||
import { i18n } from './setupI18n'; |
|||
import { localeStore } from '/@/store/modules/locale'; |
|||
import { unref } from 'vue'; |
|||
|
|||
import 'moment/dist/locale/zh-cn'; |
|||
interface LangModule { |
|||
message: Recordable; |
|||
momentLocale: Recordable; |
|||
momentLocaleName: string; |
|||
} |
|||
|
|||
const antConfigLocale = ref<Nullable<Recordable>>(null); |
|||
|
|||
const loadLocalePool: LocaleType[] = []; |
|||
|
|||
const antConfigLocaleRef = ref<any>(null); |
|||
function setI18nLanguage(locale: LocaleType) { |
|||
if (i18n.mode === 'legacy') { |
|||
i18n.global.locale = locale; |
|||
} else { |
|||
(i18n.global.locale as any).value = locale; |
|||
} |
|||
localeStore.setLocaleInfo({ locale }); |
|||
document.querySelector('html')?.setAttribute('lang', locale); |
|||
} |
|||
|
|||
export function useLocale() { |
|||
const { getLang, getLocale, setLocale: setLocalSetting } = useLocaleSetting(); |
|||
const getLocale = computed(() => localeStore.getLocale); |
|||
const getShowLocalePicker = computed(() => localeStore.getShowPicker); |
|||
|
|||
const getAntdLocale = computed(() => { |
|||
return i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale; |
|||
}); |
|||
|
|||
// Switching the language will change the locale of useI18n
|
|||
// And submit to configuration modification
|
|||
function changeLocale(lang: LocaleType): void { |
|||
if (i18n.mode === 'legacy') { |
|||
i18n.global.locale = lang; |
|||
} else { |
|||
((i18n.global.locale as unknown) as Ref<string>).value = lang; |
|||
} |
|||
setLocalSetting({ lang }); |
|||
// i18n.global.setLocaleMessage(locale, messages);
|
|||
async function changeLocale(locale: LocaleType) { |
|||
const globalI18n = i18n.global; |
|||
const currentLocale = unref(globalI18n.locale); |
|||
if (currentLocale === locale) return locale; |
|||
|
|||
switch (lang) { |
|||
// Simplified Chinese
|
|||
case 'zh_CN': |
|||
import('ant-design-vue/es/locale/zh_CN').then((locale) => { |
|||
antConfigLocaleRef.value = locale.default; |
|||
}); |
|||
if (loadLocalePool.includes(locale)) { |
|||
setI18nLanguage(locale); |
|||
return locale; |
|||
} |
|||
const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule; |
|||
if (!langModule) return; |
|||
|
|||
break; |
|||
// English
|
|||
case 'en': |
|||
import('ant-design-vue/es/locale/en_US').then((locale) => { |
|||
antConfigLocaleRef.value = locale.default; |
|||
}); |
|||
break; |
|||
const { message, momentLocale, momentLocaleName } = langModule; |
|||
|
|||
// other
|
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
globalI18n.setLocaleMessage(locale, message); |
|||
moment.updateLocale(momentLocaleName, momentLocale); |
|||
loadLocalePool.push(locale); |
|||
|
|||
// initialization
|
|||
function setLocale() { |
|||
const lang = unref(getLang); |
|||
lang && changeLocale(lang); |
|||
setI18nLanguage(locale); |
|||
return locale; |
|||
} |
|||
|
|||
return { |
|||
setLocale, |
|||
getLocale, |
|||
getLang, |
|||
getShowLocalePicker, |
|||
changeLocale, |
|||
antConfigLocale: antConfigLocaleRef, |
|||
antConfigLocale, |
|||
getAntdLocale, |
|||
}; |
|||
} |
|||
|
|||
@ -0,0 +1,29 @@ |
|||
import type { DropMenu } from '/@/components/Dropdown/src/types'; |
|||
import type { LocaleSetting, LocaleType } from '/#/config'; |
|||
|
|||
export const LOCALE: { [key: string]: LocaleType } = { |
|||
ZH_CN: 'zh_CN', |
|||
EN_US: 'en', |
|||
}; |
|||
|
|||
export const localeSetting: LocaleSetting = { |
|||
showPicker: true, |
|||
// Locale
|
|||
locale: LOCALE.ZH_CN, |
|||
// Default locale
|
|||
fallback: LOCALE.ZH_CN, |
|||
// available Locales
|
|||
availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US], |
|||
}; |
|||
|
|||
// locale list
|
|||
export const localeList: DropMenu[] = [ |
|||
{ |
|||
text: '简体中文', |
|||
event: LOCALE.ZH_CN, |
|||
}, |
|||
{ |
|||
text: 'English', |
|||
event: LOCALE.EN_US, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,44 @@ |
|||
import store from '/@/store'; |
|||
|
|||
import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators'; |
|||
|
|||
import { LOCALE_KEY } from '/@/enums/cacheEnum'; |
|||
|
|||
import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper'; |
|||
import { LocaleSetting, LocaleType } from '/#/config'; |
|||
import { createLocalStorage } from '/@/utils/cache'; |
|||
import { localeSetting } from '/@/settings/localeSetting'; |
|||
|
|||
const ls = createLocalStorage(); |
|||
|
|||
const lsSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting; |
|||
|
|||
const NAME = 'locale'; |
|||
hotModuleUnregisterModule(NAME); |
|||
@Module({ dynamic: true, namespaced: true, store, name: NAME }) |
|||
class Locale extends VuexModule { |
|||
private info: LocaleSetting = lsSetting; |
|||
|
|||
get getShowPicker(): boolean { |
|||
return !!this.info?.showPicker; |
|||
} |
|||
|
|||
get getLocale(): LocaleType { |
|||
return this.info?.locale; |
|||
} |
|||
|
|||
@Mutation |
|||
setLocaleInfo(info: Partial<LocaleSetting>): void { |
|||
this.info = { ...this.info, ...info }; |
|||
ls.set(LOCALE_KEY, this.info); |
|||
} |
|||
|
|||
@Action |
|||
initLocale(): void { |
|||
this.setLocaleInfo({ |
|||
...localeSetting, |
|||
...this.info, |
|||
}); |
|||
} |
|||
} |
|||
export const localeStore = getModule<Locale>(Locale); |
|||
Loading…
Reference in new issue