wip: multi-language support

src/hooks/core/useSetting.ts

@@ -1,41 +0,0 @@
-import type { ProjectConfig, GlobConfig, SettingWrap, GlobEnvConfig } from '/@/types/config';
-
-import getProjectSetting from '/@/settings/projectSetting';
-
-import { getGlobEnvConfig, isDevMode } from '/@/utils/env';
-import { getShortName } from '../../../build/getShortName';
-import { warn } from '/@/utils/log';
-
-const reg = /[a-zA-Z\_]*/;
-
-const ENV_NAME = getShortName(import.meta.env);
-const ENV = ((isDevMode()
-  ? getGlobEnvConfig()
-  : window[ENV_NAME as any]) as unknown) as GlobEnvConfig;
-const {
-  VITE_GLOB_APP_TITLE,
-  VITE_GLOB_API_URL,
-  VITE_GLOB_APP_SHORT_NAME,
-  VITE_GLOB_API_URL_PREFIX,
-} = ENV;
-
-if (!reg.test(VITE_GLOB_APP_SHORT_NAME)) {
-  warn(
-    `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
-  );
-}
-
-export const useSetting = (): SettingWrap => {
-  // Take global configuration
-  const glob: Readonly<GlobConfig> = {
-    title: VITE_GLOB_APP_TITLE,
-    apiUrl: VITE_GLOB_API_URL,
-    shortName: VITE_GLOB_APP_SHORT_NAME,
-    urlPrefix: VITE_GLOB_API_URL_PREFIX,
-  };
-  const projectSetting: Readonly<ProjectConfig> = getProjectSetting;
-  return {
-    globSetting: glob as Readonly<GlobConfig>,
-    projectSetting,
-  };
-};

src/hooks/web/useI18n.ts

@@ -1,16 +0,0 @@
-import { createI18n } from 'vue-i18n';
-import { ref, watch } from 'vue';
-import type { I18nOptions } from 'vue-i18n';
-export function useI18n(options?: I18nOptions) {
-  const i18n = createI18n(options);
-
-  const localeRef = ref(i18n.global.locale);
-
-  watch(localeRef, () => {
-    i18n.global.locale = localeRef.value as any;
-  });
-  return {
-    t: i18n.global.t,
-    localeRef,
-  };
-}

src/hooks/web/useLocale.ts

@@ -1,21 +1,74 @@
+/**
+ * Multi-language related operations
+ */
 import type { LocaleType } from '/@/locales/types';
-import { appStore } from '/@/store/modules/app';
+
+import { unref, ref } from 'vue';
+
+import { getI18n } from '/@/setup/i18n';
+
+import { useLocaleSetting } from '/@/settings/use/useLocaleSetting';
+
+import moment from 'moment';
+
+import 'moment/dist/locale/zh-cn';
+
+moment.locale('zh-cn');
+
+const antConfigLocaleRef = ref<any>(null);
 
 export function useLocale() {
-  /**
-   *
-   */
-  function getLocale(): string {
-    return appStore.getProjectConfig.locale;
+  const { getLang, getLocale, setLocale: setLocalSetting } = useLocaleSetting();
+
+  // Switching the language will change the locale of useI18n
+  // And submit to configuration modification
+  function changeLocale(lang: LocaleType): void {
+    (getI18n().global.locale as any).value = lang;
+    setLocalSetting({ lang });
+    // i18n.global.setLocaleMessage(locale, messages);
+
+    antConfigLocaleRef.value = { a: 1 };
+    switch (lang) {
+      // Simplified Chinese
+      case 'zh_CN':
+        import('ant-design-vue/es/locale/zh_CN').then((locale) => {
+          antConfigLocaleRef.value = locale.default;
+        });
+
+        moment.locale('cn');
+        break;
+      // English
+      case 'en':
+        import('ant-design-vue/es/locale/en_US').then((locale) => {
+          antConfigLocaleRef.value = locale.default;
+        });
+        moment.locale('en-us');
+        break;
+
+      // other
+      default:
+        break;
+    }
   }
 
-  /**
-   *
-   * @param locale
-   */
-  async function changeLocale(locale: LocaleType): Promise<void> {
-    appStore.commitProjectConfigState({ locale: locale });
+  // initialization
+  function setupLocale() {
+    const lang = unref(getLang);
+    lang && changeLocale(lang);
   }
 
-  return { getLocale, changeLocale };
+  return {
+    setupLocale,
+    getLocale,
+    getLang,
+    changeLocale,
+    antConfigLocale: antConfigLocaleRef,
+  };
+}
+
+/**
+ * For non-setup use
+ */
+export function useExternalI18n() {
+  return getI18n().global;
 }

src/hooks/web/useMessage.tsx

@@ -3,7 +3,6 @@ import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
 import { Modal, message as Message, notification } from 'ant-design-vue';
 import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
 
-import { useSetting } from '/@/hooks/core/useSetting';
 import { ArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
 
 export interface NotifyApi {
@@ -33,8 +32,6 @@ interface ConfirmOptions {
   warning: ModalFunc;
 }
 
-const { projectSetting } = useSetting();
-
 function getIcon(iconType: string) {
   if (iconType === 'warning') {
     return <InfoCircleFilled class="modal-icon-warning" />;
@@ -60,7 +57,6 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
   const opt: ModalFuncProps = {
     centered: true,
     icon: getIcon(iconType),
-    ...projectSetting.messageSetting,
     ...options,
   };
   return Modal.confirm(opt) as any;