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 |
* Multi-language related operations |
||||
*/ |
*/ |
||||
import type { LocaleType } from '/@/locales/types'; |
import type { LocaleType } from '/#/config'; |
||||
import type { Ref } from 'vue'; |
|
||||
|
|
||||
import { unref, ref } from 'vue'; |
import { ref } from 'vue'; |
||||
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting'; |
import moment from 'moment'; |
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
import { i18n } from './setupI18n'; |
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() { |
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
|
// Switching the language will change the locale of useI18n
|
||||
// And submit to configuration modification
|
// And submit to configuration modification
|
||||
function changeLocale(lang: LocaleType): void { |
async function changeLocale(locale: LocaleType) { |
||||
if (i18n.mode === 'legacy') { |
const globalI18n = i18n.global; |
||||
i18n.global.locale = lang; |
const currentLocale = unref(globalI18n.locale); |
||||
} else { |
if (currentLocale === locale) return locale; |
||||
((i18n.global.locale as unknown) as Ref<string>).value = lang; |
|
||||
} |
|
||||
setLocalSetting({ lang }); |
|
||||
// i18n.global.setLocaleMessage(locale, messages);
|
|
||||
|
|
||||
switch (lang) { |
if (loadLocalePool.includes(locale)) { |
||||
// Simplified Chinese
|
setI18nLanguage(locale); |
||||
case 'zh_CN': |
return locale; |
||||
import('ant-design-vue/es/locale/zh_CN').then((locale) => { |
} |
||||
antConfigLocaleRef.value = locale.default; |
const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule; |
||||
}); |
if (!langModule) return; |
||||
|
|
||||
break; |
const { message, momentLocale, momentLocaleName } = langModule; |
||||
// English
|
|
||||
case 'en': |
|
||||
import('ant-design-vue/es/locale/en_US').then((locale) => { |
|
||||
antConfigLocaleRef.value = locale.default; |
|
||||
}); |
|
||||
break; |
|
||||
|
|
||||
// other
|
globalI18n.setLocaleMessage(locale, message); |
||||
default: |
moment.updateLocale(momentLocaleName, momentLocale); |
||||
break; |
loadLocalePool.push(locale); |
||||
} |
|
||||
} |
|
||||
|
|
||||
// initialization
|
setI18nLanguage(locale); |
||||
function setLocale() { |
return locale; |
||||
const lang = unref(getLang); |
|
||||
lang && changeLocale(lang); |
|
||||
} |
} |
||||
|
|
||||
return { |
return { |
||||
setLocale, |
|
||||
getLocale, |
getLocale, |
||||
getLang, |
getShowLocalePicker, |
||||
changeLocale, |
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