From 1d70d7153734b5606f817b2d8e19275183bba022 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sun, 30 Jun 2024 15:42:30 +0800
Subject: [PATCH] feat: Support dayjs and component library in multiple
 languages

---
 .vscode/settings.json                         |  5 +-
 apps/web-antd/src/app.vue                     |  8 +---
 apps/web-antd/src/bootstrap.ts                |  6 ++-
 apps/web-antd/src/forward/README.md           | 11 +++++
 apps/web-antd/src/forward/index.ts            |  1 +
 apps/web-antd/src/forward/locale.ts           | 48 +++++++++++++++++++
 .../forward/{request/index.ts => request.ts}  |  0
 apps/web-antd/src/layouts/index.ts            |  6 +--
 .../web-antd/src/router/routes/_essentials.ts |  4 +-
 .../ui-kit/menu-ui/src/styles/index.scss      |  5 +-
 .../layouts/src/authentication/index.ts       |  2 +-
 packages/locales/src/i18n.ts                  |  4 +-
 packages/locales/src/index.ts                 | 13 ++++-
 packages/locales/src/third-party/.gitkeep     |  0
 packages/locales/src/typing.ts                |  6 +++
 15 files changed, 99 insertions(+), 20 deletions(-)
 create mode 100644 apps/web-antd/src/forward/README.md
 create mode 100644 apps/web-antd/src/forward/locale.ts
 rename apps/web-antd/src/forward/{request/index.ts => request.ts} (100%)
 delete mode 100644 packages/locales/src/third-party/.gitkeep

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6ddee36e..9de1c1cd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -171,7 +171,10 @@
     "packages/@vben-core/shared/design-tokens/src/**/*.css"
   ],
 
-  "i18n-ally.localesPaths": ["packages/locales/src/langs"],
+  "i18n-ally.localesPaths": [
+    "packages/locales/src/langs",
+    "packages/@core/shared/i18n/src/langs"
+  ],
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
diff --git a/apps/web-antd/src/app.vue b/apps/web-antd/src/app.vue
index 22256864..30af9ffa 100644
--- a/apps/web-antd/src/app.vue
+++ b/apps/web-antd/src/app.vue
@@ -5,15 +5,11 @@ import { GlobalProvider } from '@vben/widgets';
 import { preferences, usePreferences } from '@vben-core/preferences';
 
 import { App, ConfigProvider, theme } from 'ant-design-vue';
-import zhCN from 'ant-design-vue/es/locale/zh_CN';
-import dayjs from 'dayjs';
 
-import 'dayjs/locale/zh-cn';
+import { antdLocale } from '#/forward';
 
 defineOptions({ name: 'App' });
 
-dayjs.locale(zhCN.locale);
-
 const { isDark } = usePreferences();
 
 const tokenTheme = computed(() => {
@@ -35,7 +31,7 @@ const tokenTheme = computed(() => {
 
 <template>
   <GlobalProvider>
-    <ConfigProvider :locale="zhCN" :theme="tokenTheme">
+    <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
       <App>
         <RouterView />
       </App>
diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
index b8dea800..d2b66807 100644
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -4,6 +4,7 @@ import { setupI18n } from '@vben/locales';
 import '@vben/styles';
 import { preferences } from '@vben-core/preferences';
 
+import { loadThirdPartyMessage } from '#/forward';
 import { setupStore } from '#/store';
 
 import App from './app.vue';
@@ -13,7 +14,10 @@ async function bootstrap(namespace: string) {
   const app = createApp(App);
 
   // 国际化 i18n 配置
-  await setupI18n(app, { defaultLocale: preferences.app.locale });
+  await setupI18n(app, {
+    defaultLocale: preferences.app.locale,
+    loadThirdPartyMessage,
+  });
 
   // 配置 pinia-store
   await setupStore(app, { namespace });
diff --git a/apps/web-antd/src/forward/README.md b/apps/web-antd/src/forward/README.md
new file mode 100644
index 00000000..67152c3d
--- /dev/null
+++ b/apps/web-antd/src/forward/README.md
@@ -0,0 +1,11 @@
+# forward
+
+用于扩展、转发大仓的包以及其他功能，方便在app内自定义不同的逻辑
+
+## request
+
+用于扩展请求的功能，例如添加header、错误响应等
+
+## locale
+
+用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换
diff --git a/apps/web-antd/src/forward/index.ts b/apps/web-antd/src/forward/index.ts
index 56e4b055..54e1e279 100644
--- a/apps/web-antd/src/forward/index.ts
+++ b/apps/web-antd/src/forward/index.ts
@@ -1 +1,2 @@
+export * from './locale';
 export * from './request';
diff --git a/apps/web-antd/src/forward/locale.ts b/apps/web-antd/src/forward/locale.ts
new file mode 100644
index 00000000..1af8a109
--- /dev/null
+++ b/apps/web-antd/src/forward/locale.ts
@@ -0,0 +1,48 @@
+import type { SupportedLanguagesType } from '@vben/types';
+import type { Locale } from 'ant-design-vue/es/locale';
+
+import { ref } from 'vue';
+
+import defaultLocale from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+
+const antdLocale = ref<Locale>(defaultLocale);
+
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    default: {
+      locale = await import('dayjs/locale/en');
+    } // 默认使用英语
+  }
+  dayjs.locale(locale);
+}
+
+async function loadAntdLocale(lang: SupportedLanguagesType) {
+  switch (lang) {
+    case 'zh-CN': {
+      antdLocale.value = defaultLocale;
+      break;
+    }
+    case 'en-US': {
+      antdLocale.value = (await import(
+        'ant-design-vue/es/locale/en_US'
+      )) as unknown as Locale;
+      break;
+    }
+  }
+}
+
+async function loadThirdPartyMessage(land: SupportedLanguagesType) {
+  await Promise.all([loadAntdLocale(land), loadDayjsLocale(land)]);
+}
+
+export { antdLocale, loadThirdPartyMessage };
diff --git a/apps/web-antd/src/forward/request/index.ts b/apps/web-antd/src/forward/request.ts
similarity index 100%
rename from apps/web-antd/src/forward/request/index.ts
rename to apps/web-antd/src/forward/request.ts
diff --git a/apps/web-antd/src/layouts/index.ts b/apps/web-antd/src/layouts/index.ts
index b9056f30..23d79d6e 100644
--- a/apps/web-antd/src/layouts/index.ts
+++ b/apps/web-antd/src/layouts/index.ts
@@ -2,7 +2,7 @@ const BasicLayout = () => import('./basic.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayoutType = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayoutType);
+const AuthPageLayout = () =>
+  import('@vben/layouts').then((m) => m.AuthPageLayout);
 
-export { AuthPageLayoutType, BasicLayout, IFrameView };
+export { AuthPageLayout, BasicLayout, IFrameView };
diff --git a/apps/web-antd/src/router/routes/_essentials.ts b/apps/web-antd/src/router/routes/_essentials.ts
index 1c832a94..484a6cb0 100644
--- a/apps/web-antd/src/router/routes/_essentials.ts
+++ b/apps/web-antd/src/router/routes/_essentials.ts
@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import { DEFAULT_HOME_PATH } from '@vben/constants';
 import { $t } from '@vben/locales';
 
-import { AuthPageLayoutType } from '#/layouts';
+import { AuthPageLayout } from '#/layouts';
 import Login from '#/views/_essential/authentication/login.vue';
 
 /** 全局404页面 */
@@ -30,7 +30,7 @@ const essentialsRoutes: RouteRecordRaw[] = [
     redirect: DEFAULT_HOME_PATH,
   },
   {
-    component: AuthPageLayoutType,
+    component: AuthPageLayout,
     meta: {
       title: 'Authentication',
     },
diff --git a/packages/@core/ui-kit/menu-ui/src/styles/index.scss b/packages/@core/ui-kit/menu-ui/src/styles/index.scss
index ed838458..cb001cdc 100644
--- a/packages/@core/ui-kit/menu-ui/src/styles/index.scss
+++ b/packages/@core/ui-kit/menu-ui/src/styles/index.scss
@@ -495,11 +495,12 @@
     padding-right: 12px !important;
   }
 
-  &:not(.is-active):hover {
+  // &:not(.is-active):hover {
+  &:hover {
     color: var(--menu-submenu-hover-color);
     text-decoration: none;
     cursor: pointer;
-    background: var(--menu-submenu-hover-background-color);
+    background: var(--menu-submenu-hover-background-color) !important;
 
     svg {
       fill: var(--menu-submenu-hover-color);
diff --git a/packages/business/layouts/src/authentication/index.ts b/packages/business/layouts/src/authentication/index.ts
index 19249a5f..6c684d11 100644
--- a/packages/business/layouts/src/authentication/index.ts
+++ b/packages/business/layouts/src/authentication/index.ts
@@ -1 +1 @@
-export { default as AuthPageLayoutType } from './authentication.vue';
+export { default as AuthPageLayout } from './authentication.vue';
diff --git a/packages/locales/src/i18n.ts b/packages/locales/src/i18n.ts
index 305f3d75..c3a2370a 100644
--- a/packages/locales/src/i18n.ts
+++ b/packages/locales/src/i18n.ts
@@ -43,7 +43,7 @@ function setI18nLanguage(locale: Locale) {
  * Load locale messages
  * @param lang
  */
-async function loadLocaleMessages(lang: SupportedLanguagesType) {
+async function loadI18nMessages(lang: SupportedLanguagesType) {
   if (unref(i18n.global.locale) === lang) {
     return setI18nLanguage(lang);
   }
@@ -59,4 +59,4 @@ async function loadLocaleMessages(lang: SupportedLanguagesType) {
   return setI18nLanguage(lang);
 }
 
-export { i18n, loadLocaleMessages, setI18nLanguage };
+export { i18n, loadI18nMessages, setI18nLanguage };
diff --git a/packages/locales/src/index.ts b/packages/locales/src/index.ts
index 4a3a00dc..8b67b42f 100644
--- a/packages/locales/src/index.ts
+++ b/packages/locales/src/index.ts
@@ -1,13 +1,22 @@
-import type { LocaleSetupOptions } from './typing';
+import type { LocaleSetupOptions, SupportedLanguagesType } from './typing';
 
 import type { App } from 'vue';
 
-import { i18n, loadLocaleMessages } from './i18n';
+import { i18n, loadI18nMessages } from './i18n';
 
 const $t = i18n.global.t;
 
+let loadThirdPartyMessage: (lang: SupportedLanguagesType) => Promise<void>;
+
+async function loadLocaleMessages(lang: SupportedLanguagesType) {
+  await loadI18nMessages(lang);
+  await loadThirdPartyMessage(lang);
+}
+
 async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   const { defaultLocale = 'zh-CN' } = options;
+  // app可以自行扩展一些第三方库和组件库的国际化
+  loadThirdPartyMessage = options.loadThirdPartyMessage || (async () => {});
   app.use(i18n);
   await loadLocaleMessages(defaultLocale);
 }
diff --git a/packages/locales/src/third-party/.gitkeep b/packages/locales/src/third-party/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/locales/src/typing.ts b/packages/locales/src/typing.ts
index 6884585e..bb74c985 100644
--- a/packages/locales/src/typing.ts
+++ b/packages/locales/src/typing.ts
@@ -8,6 +8,12 @@ interface LocaleSetupOptions {
    * @default zh-CN
    */
   defaultLocale?: SupportedLanguagesType;
+  /**
+   * Load third-party library messages
+   * @param lang
+   * @returns
+   */
+  loadThirdPartyMessage?: (lang: SupportedLanguagesType) => Promise<void>;
 }
 
 export type { ImportLocaleFn, LocaleSetupOptions, SupportedLanguagesType };