chore: initial commit

frontend/packages/lib-shared/locale/helper.ts

@@ -0,0 +1,7 @@
+import type { LocaleType } from '@lib/shared/types/global';
+
+export const loadLocalePool: LocaleType[] = [];
+
+export function setLoadLocalePool(cb: (lp: LocaleType[]) => void) {
+  cb(loadLocalePool);
+}

frontend/packages/lib-shared/locale/index.ts

@@ -0,0 +1,46 @@
+import { createI18n } from 'vue-i18n';
+
+import type { LocaleType } from '../types/global';
+import { setLoadLocalePool } from './helper';
+import type { App } from 'vue';
+import type { I18nOptions } from 'vue-i18n';
+
+export const LOCALE_OPTIONS = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+];
+
+// eslint-disable-next-line import/no-mutable-exports
+export let i18n: ReturnType<typeof createI18n>;
+
+async function createI18nOptions(): Promise<I18nOptions> {
+  const locale = (localStorage.getItem('CRM-locale') || 'zh-CN') as LocaleType;
+  const defaultLocal = await import(`@locale/${locale}/index.ts`);
+  const message = defaultLocal.default?.message ?? {};
+
+  setLoadLocalePool((loadLocalePool) => {
+    loadLocalePool.push(locale);
+  });
+
+  return {
+    locale,
+    fallbackLocale: 'zh-CN',
+    legacy: false,
+    allowComposition: true,
+    messages: {
+      [locale]: message,
+    },
+    sync: true, // If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
+    silentTranslationWarn: true, // true - warning off
+    missingWarn: false,
+    silentFallbackWarn: true,
+  };
+}
+
+// 创建国际化实例
+export async function setupI18n(app: App) {
+  const options = await createI18nOptions();
+
+  i18n = createI18n(options);
+  app.use(i18n);
+}

frontend/packages/lib-shared/locale/useLocale.ts

@@ -0,0 +1,68 @@
+import { ref, unref } from 'vue';
+import dayjs from 'dayjs';
+
+import { loadLocalePool } from './helper';
+import { i18n } from './index';
+import type { LocaleType, Recordable } from '@lib/shared/types/global';
+
+interface LangModule {
+  message: Recordable;
+  dayjsLocale: Recordable;
+  dayjsLocaleName: string;
+}
+
+export default function useLocale(showLoadingTip: (message: string) => void) {
+  const { locale } = i18n.global;
+  const currentLocale = ref(locale as LocaleType);
+
+  /**
+   * 设置语言
+   * @param _locale 语言类型
+   */
+  function setI18nLanguage(_locale: LocaleType) {
+    if (i18n.mode === 'legacy') {
+      i18n.global.locale = _locale;
+    } else {
+      (i18n.global.locale as any).value = _locale;
+    }
+    localStorage.setItem('CRM-locale', _locale);
+  }
+
+  /**
+   * 切换语言
+   * @param _locale 语言类型
+   * @returns 语言类型
+   */
+  async function changeLocale(_locale: LocaleType) {
+    const globalI18n = i18n.global;
+    const _currentLocale = unref(globalI18n.locale);
+    if (_currentLocale === _locale) {
+      setI18nLanguage(_locale); // 初始化的时候需要设置一次本地语言
+      return _locale;
+    }
+
+    showLoadingTip(_currentLocale === 'zh-CN' ? '语言切换中...' : 'Language switching...');
+
+    if (loadLocalePool.includes(_locale)) {
+      setI18nLanguage(_locale);
+      return _locale;
+    }
+    const langModule = ((await import(`@locale/${_locale}/index.ts`)) as any).default as LangModule;
+    if (!langModule) return;
+
+    const { message, dayjsLocale, dayjsLocaleName } = langModule;
+
+    globalI18n.setLocaleMessage(_locale, message);
+    dayjs.locale(dayjsLocaleName, dayjsLocale);
+    loadLocalePool.push(_locale);
+
+    setI18nLanguage(_locale);
+    window.location.reload();
+    return _locale;
+  }
+
+  return {
+    currentLocale,
+    changeLocale,
+  };
+}