feat(i18n): 菜单动态支持i18n (#109)

* feat(i18n): 菜单动态支持i18n
2026-01-20 16:53:37 +08:00 · 2021-11-15 16:45:09 +08:00
parent 2d6ad99f6f
commit aa8005a982
15 changed files with 94 additions and 15 deletions
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,6 @@ import {
 } from "vue-router";
 import { RouteConfigs } from "/@/layout/types";
 import { split, uniqBy } from "lodash-es";
-import { i18n } from "/@/plugins/i18n";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
 import { useTimeoutFn } from "@vueuse/core";
@@ -26,6 +25,7 @@ import flowChartRouter from "./modules/flowchart";
 import componentsRouter from "./modules/components";
 // 动态路由
 import { getAsyncRoutes } from "/@/api/routes";
+import { getMessage } from "../utils/i18n";

 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
@@ -209,9 +209,13 @@ router.beforeEach((to, _from, next) => {
  NProgress.start();
  const externalLink = to?.redirectedFrom?.fullPath;
  // @ts-ignore
-  const { t } = i18n.global;
+  // const { t } = i18n.global;
  // @ts-ignore
-  if (!externalLink) to.meta.title ? (document.title = t(to.meta.title)) : "";
+  if (!externalLink)
+    to.meta.title
+      ? // @ts-ignore
+        (document.title = getMessage(to.meta.title, to.meta.i18n))
+      : "";
  if (name) {
    if (_from?.name) {
      // 如果路由包含http 则是超链接 反之是普通路由
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -8,6 +8,7 @@ const componentsRouter = {
  meta: {
    icon: "Menu",
    title: "message.hscomponents",
+    i18n: true,
    showLink: true,
    rank: 4
  },
@@ -18,7 +19,8 @@ const componentsRouter = {
      component: () => import("/@/views/components/video/index.vue"),
      meta: {
        title: "message.hsvideo",
-        showLink: true
+        showLink: true,
+        i18n: true
      }
    },
    {
@@ -29,6 +31,7 @@ const componentsRouter = {
        title: "message.hsmap",
        showLink: true,
        keepAlive: true,
+        i18n: true,
        transition: {
          name: "fade"
        }
@@ -41,6 +44,7 @@ const componentsRouter = {
      meta: {
        title: "message.hsdraggable",
        showLink: true,
+        i18n: true,
        transition: {
          enterTransition: "animate__zoomIn",
          leaveTransition: "animate__zoomOut"
@@ -55,6 +59,7 @@ const componentsRouter = {
      meta: {
        title: "message.hssplitPane",
        showLink: true,
+        i18n: true,
        extraIcon: {
          svg: true,
          name: "team-iconxinpinrenqiwang"
@@ -67,6 +72,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/button/index.vue"),
      meta: {
        title: "message.hsbutton",
+        i18n: true,
        showLink: true
      }
    },
@@ -76,6 +82,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/cropping/index.vue"),
      meta: {
        title: "message.hscropping",
+        i18n: true,
        showLink: true
      }
    },
@@ -85,6 +92,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/count-to/index.vue"),
      meta: {
        title: "message.hscountTo",
+        i18n: true,
        showLink: true
      }
    },
@@ -94,6 +102,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/selector/index.vue"),
      meta: {
        title: "message.hsselector",
+        i18n: true,
        showLink: true
      }
    },
@@ -103,6 +112,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/seamless-scroll/index.vue"),
      meta: {
        title: "message.hsseamless",
+        i18n: true,
        showLink: true
      }
    },
@@ -112,6 +122,7 @@ const componentsRouter = {
      component: () => import("/@/views/components/contextmenu/index.vue"),
      meta: {
        title: "message.hscontextmenu",
+        i18n: true,
        showLink: true
      }
    }
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -8,6 +8,7 @@ const editorRouter = {
  meta: {
    icon: "Edit",
    title: "message.hseditor",
+    i18n: true,
    showLink: true,
    rank: 2
  },
@@ -19,6 +20,7 @@ const editorRouter = {
      meta: {
        title: "message.hseditor",
        showLink: true,
+        i18n: true,
        keepAlive: true,
        extraIcon: {
          svg: true,
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -9,6 +9,7 @@ const errorRouter = {
    icon: "Position",
    title: "message.hserror",
    showLink: true,
+    i18n: true,
    rank: 7
  },
  children: [
@@ -18,6 +19,7 @@ const errorRouter = {
      component: () => import("/@/views/error/401.vue"),
      meta: {
        title: "message.hsfourZeroOne",
+        i18n: true,
        showLink: true
      }
    },
@@ -27,6 +29,7 @@ const errorRouter = {
      component: () => import("/@/views/error/404.vue"),
      meta: {
        title: "message.hsfourZeroFour",
+        i18n: true,
        showLink: true
      }
    }
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -8,6 +8,7 @@ const externalLink = {
    icon: "Link",
    title: "message.externalLink",
    showLink: true,
+    i18n: true,
    rank: 190
  },
  children: [
@@ -16,6 +17,7 @@ const externalLink = {
      meta: {
        title: "message.externalLink",
        showLink: true,
+        i18n: true,
        rank: 191
      }
    }
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -9,6 +9,7 @@ const flowChartRouter = {
    icon: "SetUp",
    title: "message.hsflowChart",
    showLink: true,
+    i18n: true,
    rank: 1
  },
  children: [
@@ -18,6 +19,7 @@ const flowChartRouter = {
      component: () => import("/@/views/flow-chart/index.vue"),
      meta: {
        title: "message.hsflowChart",
+        i18n: true,
        showLink: true
      }
    }
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -8,6 +8,7 @@ const homeRouter = {
  meta: {
    icon: "HomeFilled",
    showLink: true,
+    i18n: true,
    rank: 0
  },
  children: [
@@ -17,6 +18,7 @@ const homeRouter = {
      component: () => import("/@/views/welcome.vue"),
      meta: {
        title: "message.hshome",
+        i18n: true,
        showLink: true
      }
    }
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -9,6 +9,7 @@ const nestedRouter = {
    title: "message.hsmenus",
    icon: "Histogram",
    showLink: true,
+    i18n: true,
    rank: 5
  },
  children: [
@@ -19,6 +20,7 @@ const nestedRouter = {
      meta: {
        title: "message.hsmenu1",
        showLink: true,
+        i18n: true,
        keepAlive: true
      },
      redirect: "/nested/menu1/menu1-1",
@@ -30,6 +32,7 @@ const nestedRouter = {
          meta: {
            title: "message.hsmenu1-1",
            showLink: true,
+            i18n: true,
            keepAlive: true
          }
        },
@@ -41,6 +44,7 @@ const nestedRouter = {
          meta: {
            title: "message.hsmenu1-2",
            showLink: true,
+            i18n: true,
            keepAlive: true
          },
          children: [
@@ -52,6 +56,7 @@ const nestedRouter = {
              meta: {
                title: "message.hsmenu1-2-1",
                showLink: true,
+                i18n: true,
                keepAlive: true
              }
            },
@@ -64,6 +69,7 @@ const nestedRouter = {
                title: "message.hsmenu1-2-2",
                showLink: true,
                keepAlive: true,
+                i18n: true,
                extraIcon: {
                  svg: true,
                  name: "team-iconxinpinrenqiwang"
@@ -79,6 +85,7 @@ const nestedRouter = {
          meta: {
            title: "message.hsmenu1-3",
            showLink: true,
+            i18n: true,
            keepAlive: true
          }
        }
@@ -91,6 +98,7 @@ const nestedRouter = {
      meta: {
        title: "message.hsmenu2",
        showLink: true,
+        i18n: true,
        keepAlive: true
      }
    }
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -8,6 +8,7 @@ const remainingRouter = [
    meta: {
      title: "message.hslogin",
      showLink: false,
+      i18n: true,
      rank: 101
    }
  },
@@ -18,6 +19,7 @@ const remainingRouter = [
    meta: {
      icon: "HomeFilled",
      title: "message.hshome",
+      i18n: true,
      showLink: false,
      rank: 104
    },