|
| 1 | +/** |
| 2 | + * vue-i18n 使用姿势说明 |
| 3 | + * see more : https://pikax.me/vue-composable/composable/i18n/i18n.html#parameters |
| 4 | + */ |
| 5 | + |
| 6 | +import { includes } from 'lodash' |
| 7 | +import Store from '@/store' |
| 8 | +import moment from 'moment' |
| 9 | +import { findKeyByValue } from '@/utils/common' |
| 10 | +import { useI18n } from 'vue-composable' |
| 11 | +import zhCN from '@/i18n/messages/zhCN' |
| 12 | +import en from '@/i18n/messages/en' |
| 13 | + |
| 14 | +let __LOCALE__ = Store.__s('app.language') |
| 15 | + |
| 16 | +if (!__LOCALE__) { |
| 17 | + __LOCALE__ = window.navigator.language.split('-').join('') |
| 18 | + Store.__s('app.language', __LOCALE__) |
| 19 | +} |
| 20 | + |
| 21 | +/** 定义语言模版 */ |
| 22 | +export const Locales: any = {} |
| 23 | + |
| 24 | +/** |
| 25 | + * @todo 语言名字命名要考虑三个部分：一是 antdv 组件国际化的语言名字，二是 i18n模版语言的命名，三是浏览器对于语言的命名（这里会跟 http 请* 求相关，也是后端能识别的语言命名），因此要将前两种语言的名字通过字典转换成标准名称，也就是浏览器的语言名使用SO 639-1标准 |
| 26 | + */ |
| 27 | + |
| 28 | +export const TranslateTable: { [key: string]: string } = { |
| 29 | + en: 'en_US', |
| 30 | + zhCN: 'zh_CN' |
| 31 | +} |
| 32 | + |
| 33 | +export const LanguageNameList: { [key: string]: string } = { |
| 34 | + en: 'English', |
| 35 | + zhCN: '简体(中文)' |
| 36 | +} |
| 37 | + |
| 38 | +export const i18nInstance = useI18n({ |
| 39 | + locale: 'zhCN', |
| 40 | + messages: { |
| 41 | + zhCN, |
| 42 | + en |
| 43 | + } |
| 44 | +}) |
| 45 | + |
| 46 | +/** |
| 47 | + * @description 自动加载 antd-vue 需要的语言模版 |
| 48 | + */ |
| 49 | +function loadAtdLocales() { |
| 50 | + const files = require.context( |
| 51 | + '../../node_modules/ant-design-vue/es/locale-provider', |
| 52 | + true, |
| 53 | + /\.js$/ |
| 54 | + ) |
| 55 | + files.keys().forEach(key => { |
| 56 | + const fileName = /(?<=\/)\S+(?=\.)/.exec(key) as Array<any> |
| 57 | + if (includes(TranslateTable, fileName[0])) { |
| 58 | + const localeKey = findKeyByValue(TranslateTable, fileName[0]) |
| 59 | + if (localeKey) { |
| 60 | + Locales[localeKey] = files(key).default |
| 61 | + } |
| 62 | + } |
| 63 | + }) |
| 64 | +} |
| 65 | + |
| 66 | +/** |
| 67 | + * @functin setLang - set the app's language |
| 68 | + * @param {string} lang - the language will be setted |
| 69 | + * @return {string} lang - langguage name |
| 70 | + */ |
| 71 | + |
| 72 | +function _set(lang: keyof typeof TranslateTable): any { |
| 73 | + i18nInstance.locale.value = lang as any |
| 74 | + // 设置当前语言的时间 |
| 75 | + moment.locale(TranslateTable[lang]) |
| 76 | + // Axios.defaults.headers.common['Accept-Language'] = lang |
| 77 | + Store.__s('app.language', lang) |
| 78 | + return lang |
| 79 | +} |
| 80 | + |
| 81 | +/** |
| 82 | + * @functin 异步加载自定义的 i18n 模版 |
| 83 | + * @param {string} lang - 将要更换的语言 |
| 84 | + * @return {string} lang - 返回将要更改的语言明后才能 |
| 85 | + */ |
| 86 | +export function setLang(lang: string): Promise<string> { |
| 87 | + if (lang === i18nInstance.locale.value) { |
| 88 | + return Promise.resolve('same') |
| 89 | + } |
| 90 | + return Promise.resolve(_set(lang)) |
| 91 | +} |
| 92 | + |
| 93 | +/* 加载 antd 模版 */ |
| 94 | +loadAtdLocales() |
| 95 | + |
| 96 | +/** 设置初始化语言 */ |
| 97 | +setLang(__LOCALE__) |
0 commit comments