feat: 初始化提交
笑笑 authored at 2025-05-13 21:25:06
2.20 KiB
cube-front
import { createI18n } from 'vue-i18n';
import zhCN from './locales/zh-CN';
import enUS from './locales/en-US';

// 获取浏览器语言设置
function getBrowserLanguage() {
  const navigatorLanguage = navigator.language;
  if (navigatorLanguage.startsWith('zh')) {
    return 'zh-CN';
  }
  return 'en-US';
}

// 获取本地存储的语言设置或使用浏览器语言
function getLanguage() {
  return localStorage.getItem('cube-language') || getBrowserLanguage();
}

// 创建 i18n 实例
const i18n = createI18n({
  legacy: false, // 使用组合式 API
  locale: getLanguage(),
  fallbackLocale: 'zh-CN', // 设置回退语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  },
  silentTranslationWarn: true,
});

// 导出 i18n 实例
export default i18n;

/**
 * 切换语言的工具函数
 * @param {string} lang - 语言代码
 */
export function setLanguage(lang: typeof i18n.global.locale.value) {
  i18n.global.locale.value = lang;
  localStorage.setItem('cube-language', lang);
  // 可以在这里添加其他语言切换逻辑,比如更新 HTML 标签的 lang 属性
  document.querySelector('html')?.setAttribute('lang', lang);
}

// 获取当前语言
export function getCurrentLanguage() {
  return i18n.global.locale.value;
}

// 创建一个与 react-intl-universal 兼容的接口
export const intl = {
  get: (key: string) => {
    return {
      d: (defaultValue: string) => {
        const message = i18n.global.t(key);
        return message !== key ? message : defaultValue;
      },
    };
  },
  getHTML: (key: string) => {
    return {
      d: (defaultValue: string) => {
        const message = i18n.global.t(key);
        return message !== key ? message : defaultValue;
      },
    };
  },
  formatMessage: (options: { id: string; defaultMessage?: string }) => {
    const message = i18n.global.t(options.id);
    return message !== options.id ? message : options.defaultMessage || options.id;
  },
  formatHTMLMessage: (options: { id: string; defaultMessage?: string }) => {
    const message = i18n.global.t(options.id);
    return message !== options.id ? message : options.defaultMessage || options.id;
  },
  getLocale: () => i18n.global.locale.value,
  determineLocale: () => i18n.global.locale.value,
};