@jt-home/jt-language-tools
v1.1.0
Published
语言工具包,提供前端本地语言标识映射、Element Plus locale 解析和语言切换副作用编排。
Readme
@jt-home/jt-language-tools
语言工具包,提供前端本地语言标识映射、Element Plus locale 解析和语言切换副作用编排。
使用
import {
DEFAULT_LANGUAGE_OPTIONS,
getCurrentElementPlusLocale,
getElementPlusLocale,
resolveBrowserLanguage,
resolveLanguageOption,
switchLanguage,
} from "@jt-home/jt-language-tools";包内不依赖 mfe-runtime。当前语种从哪里来由调用方决定,可以是 mfe-runtime.getLanguage(),也可以是业务 store 或其他 npm 包提供的值。
传入值应是前端本地语言标识,例如 zh、en、th、km。
const currentLocale = getCurrentElementPlusLocale({
getLanguage: () => getLanguageFromRuntimeOrStore(),
});
const currentOption = resolveLanguageOption(getLanguageFromRuntimeOrStore());首次进入系统且调用方确认没有缓存语言时,可以把浏览器语言传给纯解析函数。工具包只解析,不直接读写 localStorage、navigator 或 mfe-runtime:
const result = resolveBrowserLanguage({
browserLanguages: [...(navigator.languages || []), navigator.language].filter(Boolean),
fallback: "ZHS",
});
localStorage.setItem("mfe-language", result.businessLanguage);
const elementPlusLocale = getElementPlusLocale(result.elementPlusLocaleCode);浏览器语言按 BCP 47 标识解析,例如 zh-CN、en-US、pt-BR、es-419。完整标识未命中时会按主语言兜底,例如 en-PH 解析为 en。解析结果同时包含前端语言码、runtime/后端业务语言码和 Element Plus locale 码:
resolveBrowserLanguage({ browserLanguages: ["pt-BR"] });
// {
// localeKey: "pt",
// businessLanguage: "POR",
// elementPlusLocaleCode: "pt",
// option: { key: "pt", ... }
// }切换语言时,业务项目把自己的 i18n、store、localStorage、页面刷新等副作用通过回调传入:
switchLanguage({
language: "en",
setI18nLocale: (localeKey) => {
i18n.locale.value = localeKey;
},
setGlobalLanguage: (localeKey) => {
globalStore.setGlobalState("language", localeKey);
},
setStoredLanguage: (localeKey) => {
localStorage.setItem("language", localeKey);
},
setDocumentTitle: (title) => {
document.title = title;
localStorage.setItem("appTitle", title);
},
titleMap: {
zh: "J&T Home",
},
reload: () => window.location.reload(),
});