refactor: refactor locales, separate locales within apps,fixed #12

apps/web-antd/CHANGELOG.md

@@ -16,7 +16,7 @@
   - @vben/constants@5.0.1
   - @vben/hooks@5.0.1
   - @vben/icons@5.0.1
-  - @vben/locales@5.0.1
+  - #/locales@5.0.1
   - @vben/styles@5.0.1
   - @vben/types@5.0.1
   - @vben/utils@5.0.1

apps/web-antd/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@vben-core/helpers": "workspace:*",
+    "@vben-core/locales": "workspace:*",
     "@vben-core/preferences": "workspace:*",
     "@vben-core/request": "workspace:*",
     "@vben-core/stores": "workspace:*",
@@ -34,7 +35,6 @@
     "@vben/constants": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
-    "@vben/locales": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/universal-ui": "workspace:*",

apps/web-antd/src/app.vue

@@ -6,7 +6,7 @@ import { preferences, usePreferences } from '@vben-core/preferences';
 
 import { App, ConfigProvider, theme } from 'ant-design-vue';
 
-import { antdLocale } from '#/forward';
+import { antdLocale } from '#/locales';
 
 defineOptions({ name: 'App' });
 

apps/web-antd/src/bootstrap.ts

@@ -1,10 +1,9 @@
 import { createApp } from 'vue';
 
-import { setupI18n } from '@vben/locales';
 import '@vben/styles';
 import { preferences } from '@vben-core/preferences';
 
-import { loadThirdPartyMessage } from '#/forward';
+import { loadMessages, setupI18n } from '#/locales';
 import { setupStore } from '#/store';
 
 import App from './app.vue';
@@ -16,7 +15,7 @@ async function bootstrap(namespace: string) {
   // 国际化 i18n 配置
   await setupI18n(app, {
     defaultLocale: preferences.app.locale,
-    loadThirdPartyMessage,
+    loadMessages,
   });
 
   // 配置 pinia-store

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

@@ -2,13 +2,13 @@ import type { GeneratorMenuAndRoutesOptions } from '@vben/access';
 import type { ComponentRecordType } from '@vben/types';
 
 import { generateMenusAndRoutes } from '@vben/access';
-import { $t } from '@vben/locales';
 import { preferences } from '@vben-core/preferences';
 
 import { message } from 'ant-design-vue';
 
 import { getAllMenus } from '#/apis';
 import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
 
 const forbiddenPage = () => import('#/views/_essential/fallback/forbidden.vue');
 

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

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

apps/web-antd/src/layouts/basic.vue

@@ -7,11 +7,11 @@ import { useRouter } from 'vue-router';
 import { LOGIN_PATH } from '@vben/constants';
 import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons';
 import { BasicLayout } from '@vben/layouts';
-import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
 import { Notification, UserDropdown } from '@vben/widgets';
 import { preferences } from '@vben-core/preferences';
 
+import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
 import { useAppStore } from '#/store';
 

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

@@ -3,11 +3,41 @@ import type { Locale } from 'ant-design-vue/es/locale';
 
 import { ref } from 'vue';
 
+import { $t, loadLocalesMap, setupI18n } from '@vben-core/locales';
+
 import defaultLocale from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
 
 const antdLocale = ref<Locale>(defaultLocale);
 
+const modules = import.meta.glob('./langs/*.y(a)?ml');
+
+const localesMap = loadLocalesMap(modules);
+
+/**
+ * 加载应用特有的语言包
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang](),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
 async function loadDayjsLocale(lang: SupportedLanguagesType) {
   let locale;
   switch (lang) {
@@ -19,13 +49,18 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
       break;
     }
+    // 默认使用英语
     default: {
       locale = await import('dayjs/locale/en');
-    } // 默认使用英语
+    }
   }
   dayjs.locale(locale);
 }
 
+/**
+ * 加载antd的语言包
+ * @param lang
+ */
 async function loadAntdLocale(lang: SupportedLanguagesType) {
   switch (lang) {
     case 'zh-CN': {
@@ -41,8 +76,4 @@ async function loadAntdLocale(lang: SupportedLanguagesType) {
   }
 }
 
-async function loadThirdPartyMessage(land: SupportedLanguagesType) {
-  await Promise.all([loadAntdLocale(land), loadDayjsLocale(land)]);
-}
-
-export { antdLocale, loadThirdPartyMessage };
+export { $t, antdLocale, loadMessages, setupI18n };

apps/web-antd/src/locales/langs/en-US.yaml

@@ -0,0 +1,28 @@
+page:
+  demos:
+    title: Demos
+    access:
+      title: Access Control
+      frontend-control: Front-end Control
+      backend-control: Backend Control
+      page: Page visit
+      button: Button control
+      loading-menu: In the loading menu
+      access-test-1: Super visit
+      access-test-2: Admin visit
+      access-test-3: User visit
+    nested:
+      title: Nested Menu
+      menu1: Menu 1
+      menu2: Menu 2
+      menu21: Menu 2-1
+      menu3: Menu 3
+      menu31: Menu 3-1
+      menu32: Menu 3-2
+      menu321: Menu 3-2-1
+    outside:
+      title: External Page
+      embedded: embedded Page
+      external-link: External Link
+    fallback:
+      title: Fallback Page

apps/web-antd/src/locales/langs/zh-CN.yaml

@@ -0,0 +1,27 @@
+page:
+  demos:
+    title: 演示
+    access:
+      title: 访问控制
+      frontend-control: 前端控制
+      backend-control: 后端控制
+      page: 页面访问
+      button: 按钮控制
+      access-test-1: Super 可见
+      access-test-2: Admin 可见
+      access-test-3: User 可见
+    nested:
+      title: 嵌套菜单
+      menu1: 菜单 1
+      menu2: 菜单 2
+      menu21: 菜单 2-1
+      menu3: 菜单 3
+      menu31: 菜单 3-1
+      menu32: 菜单 3-2
+      menu321: 菜单 3-2-1
+    outside:
+      title: 外部页面
+      embedded: 内嵌
+      external-link: 外链
+    fallback:
+      title: 缺省页

apps/web-antd/src/router/guard.ts

@@ -1,13 +1,13 @@
 import type { Router } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
-import { $t } from '@vben/locales';
 import { startProgress, stopProgress } from '@vben/utils';
 import { preferences } from '@vben-core/preferences';
 
 import { useTitle } from '@vueuse/core';
 
-import { generateAccess } from '#/forward/access';
+import { generateAccess } from '#/forward';
+import { $t } from '#/locales';
 import { dynamicRoutes, essentialsRouteNames } from '#/router/routes';
 import { useAccessStore } from '#/store';
 

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

@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH } from '@vben/constants';
-import { $t } from '@vben/locales';
 
 import { AuthPageLayout } from '#/layouts';
+import { $t } from '#/locales';
 import Login from '#/views/_essential/authentication/login.vue';
 
 /** 全局404页面 */

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -1,8 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { $t } from '@vben/locales/helper';
-
 import { BasicLayout } from '#/layouts';
+import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {

apps/web-antd/src/router/routes/modules/demos.ts

@@ -1,8 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { $t } from '@vben/locales/helper';
-
 import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {

apps/web-antd/src/router/routes/modules/vben.ts

@@ -2,9 +2,8 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { VBEN_GITHUB_URL, VBEN_LOGO } from '@vben/constants';
 
-import { $t } from '@vben/locales/helper';
-
 import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {

apps/web-antd/src/views/_essential/authentication/login.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { LoginAndRegisterParams } from '@vben/universal-ui';
 
-import { $t } from '@vben/locales';
 import { AuthenticationLogin } from '@vben/universal-ui';
 
 import { App } from 'ant-design-vue';
 
+import { $t } from '#/locales';
 import { useAccessStore } from '#/store';
 
 defineOptions({ name: 'Login' });