Files
jinshen-website/app/composables/useLocalizations.ts
R2m1liA fc6c922ac3
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m18s
feat: 站点的语言切换选项添加西班牙语与俄语选项
- WIP: i18n文本尚未完善
2025-11-20 15:35:20 +08:00

100 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { Language as ElementLanguage } from 'element-plus/es/locale';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import es from 'element-plus/es/locale/lang/es';
import ru from 'element-plus/es/locale/lang/ru';
/**
* 应用语言映射结构
* 用于统一 Strapi / Directus / Element Plus 的多语言配置
*/
export interface LocaleMapping {
/** 用于Directus translations.languages_code **/
directus: string;
/** Element Plus语言对象 **/
element: ElementLanguage;
}
/**
* 应用支持的语言映射表。
*
* 每个键(如 "zh"、"en")对应一套统一的本地化配置,
* 方便在 Strapi / Directus / Element Plus 三方系统间保持一致。
*/
export const localeMap = {
zh: {
directus: 'zh-CN',
element: zhCn,
},
en: {
directus: 'en-US',
element: en,
},
es: {
directus: 'es-ES',
element: es,
},
ru: {
directus: 'ru-RU',
element: ru,
},
} satisfies Record<string, LocaleMapping>;
/** 应用支持的语言键类型 **/
export type AppLocale = keyof typeof localeMap;
/** 默认语言, 当找不到匹配语言时回退到默认语言 **/
const defaultLocale: AppLocale = 'zh';
/**
* 提供 Strapi、 Directus 与 Element Plus的国际化映射工具
*
* ---
* @example
* ``` ts
* const { locale, getStrapiLocale, getElementPlusLocale } = useLocalizations()
*
* const strapiLang = getStrapiLocale() // 当前 Strapi 语言码
* const elLocale = getElementPlusLocale('en') // 获取 Element Plus 英文对象
* const all = getLocaleMapping('zh') // 获取完整映射结构
* ```
* ---
*
* @returns 返回当前语言及各系统的本地化获取方法
*/
export const useLocalizations = () => {
const { locale } = useI18n<{ locale: Ref<AppLocale> }>();
/**
* 获取对应语言的完整映射结构
*
* @param nuxtLocale - 可选的语言码参数,若提供则使用该语言码,否则使用当前应用语言
* @returns 返回当前语言的完整映射对象
*/
const getMapping = (nuxtLocale?: AppLocale): LocaleMapping => {
const current = nuxtLocale || locale.value;
return localeMap[current] || localeMap[defaultLocale];
};
return {
/** 当前Nuxt I18n语言(只读) **/
locale: readonly(locale),
/** 获取Directus的本地化代码 **/
getDirectusLocale: (l?: AppLocale) => getMapping(l).directus,
/** 获取Element Plus语言对象 **/
getElementPlusLocale: (l?: AppLocale) => getMapping(l).element,
/**
* 获取完整的语言映射结构(Strapi / Directus / Element Plus)
*
* @param l: 指定语言默认为当前locale
* @returns 语言映射对象
*/
getLocaleMapping: getMapping,
/** 所有可用的Directus语言代码列表(只读) **/
availableDirectusLocales: readonly(
Object.values(localeMap).map((item) => item.directus)
),
};
};