feat: add internationalization support for the router

apps/admin/src/AppConfiguration.ts

@@ -76,7 +76,7 @@ function initializeI18n() {
   );
   LocalesEngine.initLocales(() => ({
     locale: getLocale.value,
-    fallbackLocale: "zh",
+    fallbackLocale: "en",
     messagesHandler: () => {
       return messages;
     },

apps/admin/src/layouts/menu/index.vue

@@ -4,6 +4,7 @@ import { CAUnoCSSIcon } from "@celeris/components";
 import { mapTreeStructure } from "@celeris/utils";
 import type { RouteLocationNormalizedLoaded } from "vue-router";
 import { RouterLink } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { useMenuSetting } from "~/composables/setting/useMenuSetting";
 import { REDIRECT_NAME } from "~/router/constant";
 import { getMenus } from "~/router/menus";
@@ -13,6 +14,7 @@ import { usePermissionStore } from "~/store/modules/permission";
 defineOptions({
   name: "MenuLayout",
 });
+const { te, t } = useI18n();
 const activeMenu = ref();
 const permissionStore = usePermissionStore();
 const isCollapse = useMenuSetting().getCollapsed;
@@ -33,6 +35,10 @@ async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
   const menu = route || unref(currentRoute);
   activeMenu.value = menu.path;
 }
+const i18nRender = (key: string) => {
+  return te(key) ? t(key) : key;
+};
+
 const transformProjectMenuToNaiveUIMenu = (menu: Menu) => {
   const { path, meta, icon, children } = menu;
   const renderIcon = (icon?: string) => {
@@ -44,7 +50,7 @@ const transformProjectMenuToNaiveUIMenu = (menu: Menu) => {
   return {
     label: () => {
       if (children) {
-        return meta?.title;
+        return i18nRender(meta?.title as string);
       }
       return h(
         RouterLink,
@@ -53,12 +59,12 @@ const transformProjectMenuToNaiveUIMenu = (menu: Menu) => {
             path,
           },
         },
-        { default: () => meta?.title },
+        { default: () => i18nRender(meta?.title as string) },
       );
     },
     key: path,
     icon: renderIcon(icon || meta?.icon as string),
-    collapseTitle: meta?.title,
+    collapseTitle: i18nRender(meta?.title as string),
   };
 };
 // Generate menu

apps/admin/src/locales/en.json

@@ -1,4 +1,30 @@
 {
+  "routes": {
+    "dashboard": {
+      "dashboard": "Dashboard"
+    },
+    "directives": {
+      "directives": "Directive Examples",
+      "permission": "Permission Directive",
+      "copy": "Copy Directive"
+    },
+    "iframe": {
+      "iframe": "Embedded Webpage",
+      "githubInternal": "GitHub (Internal)",
+      "GitHubExternal": "GitHub (External)"
+    },
+    "permission": {
+      "permission": "Permission Test",
+      "authPageA": "Test Page A",
+      "authPageB": "Test Page B",
+      "frontend": "Frontend-based",
+      "backend": "Backend-based",
+      "pageAuth": "Page Permissions",
+      "buttonAuth": "Button Permissions",
+      "role": "Role Permissions",
+      "directive": "Directive Permissions"
+    }
+  },
   "layouts": {
     "header": {
       "toggleCollapsed": "Toggle Menu",

apps/admin/src/locales/zh.json

@@ -1,4 +1,30 @@
 {
+  "routes": {
+    "dashboard": {
+      "dashboard": "仪表盘"
+    },
+    "directives": {
+      "directives": "指令示例",
+      "permission": "权限指令",
+      "copy": "复制指令"
+    },
+    "iframe": {
+      "iframe": "内嵌网页",
+      "githubInternal": "GitHub仓库（内链）",
+      "GitHubExternal": "GitHub仓库（外链）"
+    },
+    "permission": {
+      "permission": "权限测试页",
+      "authPageA": "权限测试页A",
+      "authPageB": "权限测试页B",
+      "frontend": "基于前端权限",
+      "backend": "基于后台权限",
+      "pageAuth": "页面权限",
+      "buttonAuth": "按钮权限",
+      "role": "角色权限",
+      "directive": "指令权限"
+    }
+  },
   "layouts": {
     "header": {
       "toggleCollapsed": "折叠菜单",

apps/admin/src/router/routes/modules/dashboard.ts

@@ -7,17 +7,17 @@ const dashboard: RouteRecordRaw = {
   component: LAYOUT,
   redirect: "/dashboard/index",
   meta: {
-    shouldHideSubMenuInMenu: true,
+    title: "routes.dashboard.dashboard",
     icon: "i-mdi-monitor-dashboard",
-    title: "Dashboard",
+    shouldHideSubMenuInMenu: true,
   },
   children: [
     {
       path: "index",
       name: "Dashboard",
       component: () => import("~/pages/dashboard/index.vue"),
       meta: {
-        title: "Dashboard",
+        title: "routes.dashboard.dashboard",
         icon: "i-mdi-monitor-dashboard",
         shouldHideInMenu: true,
       },

apps/admin/src/router/routes/modules/directives.ts

@@ -8,16 +8,16 @@ const directive: RouteRecordRaw = {
   component: LAYOUT,
   redirect: "/directive/copy",
   meta: {
+    title: "routes.directives.directives",
     icon: "i-mingcute-plugin-2-line",
-    title: "指令示例",
   },
   children: [
     {
       path: "copy",
       name: "Copy",
       component: () => import("~/pages/directives/copy/index.vue"),
       meta: {
-        title: "Copy",
+        title: "routes.directives.copy",
         icon: "i-material-symbols-content-copy-outline",
       },
     },

apps/admin/src/router/routes/modules/iframe.ts

@@ -9,28 +9,28 @@ const iframe: RouteRecordRaw = {
   component: LAYOUT,
   redirect: "/frame/github",
   meta: {
+    title: "routes.iframe.iframe",
     icon: "i-line-md-external-link",
-    title: "外部页面",
   },
   children: [
     {
       path: "github",
       name: "GitHub",
       component: IFRAME,
       meta: {
-        iframeLink: CELERIS_WEB_GITHUB_URL,
+        title: "routes.iframe.githubInternal",
         icon: "i-line-md-github-loop",
-        title: "GitHub仓库（内链）",
+        iframeLink: CELERIS_WEB_GITHUB_URL,
       },
     },
     {
       path: "github-external",
       name: "GitHubExternal",
       component: IFRAME,
       meta: {
-        externalLink: CELERIS_WEB_GITHUB_URL,
+        title: "routes.iframe.GitHubExternal",
         icon: "i-line-md-github-loop",
-        title: "GitHub仓库（外链）",
+        externalLink: CELERIS_WEB_GITHUB_URL,
       },
     },
   ],

apps/admin/src/router/routes/modules/permission.ts

@@ -9,9 +9,9 @@ const permission: RouteRecordRaw = {
   component: LAYOUT,
   redirect: "/permission/frontend/page",
   meta: {
-    orderNo: 15,
+    title: "routes.permission.permission",
     icon: "i-mdi-security",
-    title: "权限管理",
+    orderNo: 15,
   },
 
   children: [
@@ -20,31 +20,31 @@ const permission: RouteRecordRaw = {
       name: "PermissionFrontDemo",
       component: getParentLayout("PermissionFrontDemo"),
       meta: {
-        title: "基于前端权限",
+        title: "routes.permission.frontend",
       },
       children: [
         {
           path: "page",
           name: "FrontPageAuth",
           component: () => import("~/pages/permission/frontend/index.vue"),
           meta: {
-            title: "页面权限",
+            title: "routes.permission.pageAuth",
           },
         },
         {
           path: "button-permission",
           name: "FrontButtonAuth",
           component: () => import("~/pages/permission/frontend/ButtonPermission.vue"),
           meta: {
-            title: "按钮权限",
+            title: "routes.permission.buttonAuth",
           },
         },
         {
           path: "auth-pageA",
           name: "FrontAuthPageA",
           component: () => import("~/pages/permission/frontend/AuthPageA.vue"),
           meta: {
-            title: "权限测试页A",
+            title: "routes.permission.authPageA",
             allowedRoles: [RoleConstants.ADMIN],
           },
         },
@@ -53,7 +53,7 @@ const permission: RouteRecordRaw = {
           name: "FrontAuthPageB",
           component: () => import("~/pages/permission/frontend/AuthPageB.vue"),
           meta: {
-            title: "权限测试页B",
+            title: "routes.permission.authPageB",
             allowedRoles: [RoleConstants.USER],
           },
         },
@@ -64,23 +64,23 @@ const permission: RouteRecordRaw = {
       name: "PermissionBackDemo",
       component: getParentLayout("PermissionBackDemo"),
       meta: {
-        title: "基于后台权限",
+        title: "routes.permission.backend",
       },
       children: [
         {
           path: "page",
           name: "BackAuthPage",
           component: () => import("~/pages/permission/backend/index.vue"),
           meta: {
-            title: "页面权限",
+            title: "routes.permission.pageAuth",
           },
         },
         {
           path: "button-permission",
           name: "BackButtonAuth",
           component: () => import("~/pages/permission/backend/ButtonPermission.vue"),
           meta: {
-            title: "按钮权限",
+            title: "routes.permission.buttonAuth",
           },
         },
       ],

apps/admin/src/setting/projectSetting.ts

@@ -14,7 +14,7 @@ export const DEFAULT_PROJECT_SETTING: ProjectSetting = {
 
   // 国际化语言
   // The locale
-  locale: "zh",
+  locale: "en",
 
   // 是否显示主题切换按钮
   // Whether to display the dark mode toggle button

packages/web/locale/src/config.ts

@@ -10,7 +10,7 @@ export interface LocalesOptions {
 export class LocalesConfiguration {
   private static options: LocalesOptions = {
     messagesHandler: () => {},
-    locale: "zh",
+    locale: "en",
     fallbackLocale: "en",
   };
 

packages/web/locale/src/store.ts

@@ -2,7 +2,7 @@ import { computed } from "vue";
 import { useLocalStorage } from "@celeris/hooks";
 import { LOCALES_STORE_KEY } from "@celeris/constants";
 
-const store = useLocalStorage(LOCALES_STORE_KEY, "zh");
+const store = useLocalStorage(LOCALES_STORE_KEY, "en");
 
 export function setLocale(locale: string) {
   store.value = locale;