feat: Support dayjs and component library in multiple languages

Author: anncwb

.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",

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>

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 });

apps/web-antd/src/forward/README.md

@@ -0,0 +1,11 @@
+# forward
+
+用于扩展、转发大仓的包以及其他功能，方便在app内自定义不同的逻辑
+
+## request
+
+用于扩展请求的功能，例如添加header、错误响应等
+
+## locale
+
+用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换

apps/web-antd/src/forward/index.ts

@@ -1 +1,2 @@
+export * from './locale';
 export * from './request';

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 };

apps/web-antd/src/forward/request/index.ts renamed to apps/web-antd/src/forward/request.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 };

apps/web-antd/src/layouts/index.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',
     },

apps/web-antd/src/router/routes/_essentials.ts

@@ -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);