traffic-laser/src/lang/index.ts

import { App, WritableComputedRef } from "vue";
import { createI18n, I18n as BaseI18n } from "vue-i18n";
import { deflangName, langNameEum, langNames, langNameDescs } from "./constant";
import { localGetFactory, localSetFactory } from "@/utils/store";
import { paramsToStr, strToParams } from "@/utils";
import zh from "./locales/zh.json";

type I18n = BaseI18n & {
  global: {
    t: I18nGlobalTranslation;
    changeLang(langName: langNameEum, reload?: boolean): void;
    locale: WritableComputedRef<langNameEum>;
  };
};
const localKey = "lang";
const local = {
  get: localGetFactory((str) => {
    if (str) {
      return str as langNameEum;
    } else {
      const langs = Object.keys(langNameDescs);
      const defLang = window?.navigator?.language || "en";
      const navLang = langs.find((lang) =>
        new RegExp(`-?${lang}-?`).test(defLang)
      );
      return navLang || langNameEum.en;
    }
  }),
  set: localSetFactory((lang: langNameEum) => lang),
};

const params = strToParams(location.search);
export const lang = (params.lang || local.get(localKey)) as langNameEum;
if (lang !== local.get(localKey)) {
  local.set(localKey, lang);
}

const i18n: I18n = createI18n({
  legacy: false,
  fallbackLocale: deflangName,
  availableLocales: langNames,
  locale: lang,
  sync: true,
  silentTranslationWarn: true,
  missingWarn: false,
  silentFallbackWarn: true,
}) as I18n;

export const langs = {
  [langNameEum.zh]: zh,
};

i18n.global.setLocaleMessage(langNameEum.zh, zh);
i18n.global.changeLang = (lang: langNameEum, reload = true) => {
  i18n.global.locale.value = lang;
  local.set(localKey, lang);
  params.lang = lang;
  if (reload) {
    location.search = paramsToStr(params);
  }
  // location.reload()
};

export const setupI18n = (app: App) => {
  app.config.globalProperties.$t = i18n.global.t;
  app.use(i18n);
};
export const changeLang = i18n.global.changeLang;
export const ui18n = i18n.global;
export const useI18n = () => ui18n;

export * from "./constant";