From aa8005a982231575b3e910f1724615603b62f165 Mon Sep 17 00:00:00 2001
From: hb0730 <1278032416@qq.com>
Date: Mon, 15 Nov 2021 16:45:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E8=8F=9C=E5=8D=95=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E6=94=AF=E6=8C=81i18n=20(#109)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(i18n): 菜单动态支持i18n
---
 mock/asyncRoutes.ts                           |  6 ++++++
 src/layout/components/navbar.vue              |  9 ++++++--
 src/layout/components/sidebar/breadCrumb.vue  | 10 ++++++---
 src/layout/components/sidebar/sidebarItem.vue | 21 +++++++++++++------
 src/layout/types.ts                           |  1 +
 src/router/index.ts                           | 10 ++++++---
 src/router/modules/components.ts              | 13 +++++++++++-
 src/router/modules/editor.ts                  |  2 ++
 src/router/modules/error.ts                   |  3 +++
 src/router/modules/externalLink.ts            |  2 ++
 src/router/modules/flowchart.ts               |  2 ++
 src/router/modules/home.ts                    |  2 ++
 src/router/modules/nested.ts                  |  8 +++++++
 src/router/modules/remaining.ts               |  2 ++
 src/utils/i18n.ts                             | 18 ++++++++++++++++
 15 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/i18n.ts

diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index 977cbcdf7..36a6cbcca 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -9,6 +9,7 @@ const systemRouter = {
   meta: {
     icon: "Setting",
     title: "message.hssysManagement",
+    i18n: true,
     showLink: true,
     rank: 6
   },
@@ -18,6 +19,7 @@ const systemRouter = {
       name: "user",
       meta: {
         title: "message.hsBaseinfo",
+        i18n: true,
         showLink: true
       }
     },
@@ -26,6 +28,7 @@ const systemRouter = {
       name: "dict",
       meta: {
         title: "message.hsDict",
+        i18n: true,
         showLink: true
       }
     }
@@ -39,6 +42,7 @@ const permissionRouter = {
   meta: {
     title: "message.permission",
     icon: "Lollipop",
+    i18n: true,
     showLink: true,
     rank: 3
   },
@@ -48,6 +52,7 @@ const permissionRouter = {
       name: "permissionPage",
       meta: {
         title: "message.permissionPage",
+        i18n: true,
         showLink: true
       }
     },
@@ -56,6 +61,7 @@ const permissionRouter = {
       name: "permissionButton",
       meta: {
         title: "message.permissionButton",
+        i18n: true,
         showLink: true,
         authority: []
       }
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index ee1e12ef7..badaaf0b5 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -10,6 +10,7 @@ import { unref, watch, getCurrentInstance } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import screenfull from "../components/screenfull/index.vue";
 import globalization from "/@/assets/svg/globalization.svg";
+import { getMessage } from "/@/utils/i18n";
 
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
@@ -17,13 +18,17 @@ const pureApp = useAppStoreHook();
 const router = useRouter();
 const route = useRoute();
 let usename = storageSession.getItem("info")?.username;
-const { locale, t } = useI18n();
+const { locale } = useI18n();
 
 watch(
   () => locale.value,
   () => {
     //@ts-ignore
-    document.title = t(unref(route.meta.title)); // 动态title
+    document.title = getMessage(
+      //@ts-ignore
+      unref(route.meta.title),
+      unref(route.meta.i18n)
+    ); // 动态title
   }
 );
 
diff --git a/src/layout/components/sidebar/breadCrumb.vue b/src/layout/components/sidebar/breadCrumb.vue
index dbcd6861b..6d3df2e78 100644
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+import { getMessage } from "/@/utils/i18n";
 
 const levelList = ref([]);
 const route = useRoute();
@@ -22,7 +23,7 @@ const getBreadcrumb = (): void => {
       {
         path: "/welcome",
         parentPath: "/",
-        meta: { title: "message.hshome" }
+        meta: { title: "message.hshome", i18n: true }
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }
@@ -37,6 +38,9 @@ watch(
   () => route.path,
   () => getBreadcrumb()
 );
+const getI18nMessage = meta => {
+  return getMessage(meta.title, meta.i18n);
+};
 
 const handleLink = (item: RouteLocationMatched): any => {
   const { redirect, path } = item;
@@ -55,10 +59,10 @@ const handleLink = (item: RouteLocationMatched): any => {
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ $t(item.meta.title) }}</span
+          >{{ getI18nMessage(item.meta) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ $t(item.meta.title) }}
+          {{ getI18nMessage(item.meta) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 763614859..3eed20266 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -4,6 +4,7 @@ import { PropType, ref, nextTick, getCurrentInstance } from "vue";
 import { childrenType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
+import { getMessage } from "/@/utils/i18n";
 import { findIconReg } from "/@/components/ReIcon";
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
@@ -109,14 +110,18 @@ function resolvePath(routePath) {
             overflow: 'hidden'
           }"
         >
-          <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
+          <span v-if="!menuMode">{{
+            getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+          }}</span>
           <el-tooltip
             v-else
             placement="top"
             :offset="-10"
             :disabled="!onlyOneChild.showTooltip"
           >
-            <template #content> {{ $t(onlyOneChild.meta.title) }} </template>
+            <template #content>
+              {{ getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+            </template>
             <span
               ref="menuTextRef"
               :style="{
@@ -126,7 +131,7 @@ function resolvePath(routePath) {
               }"
               @mouseover="hoverMenu(onlyOneChild)"
             >
-              {{ $t(onlyOneChild.meta.title) }}
+              {{ getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
             </span>
           </el-tooltip>
           <Icon
@@ -151,14 +156,18 @@ function resolvePath(routePath) {
           :is="findIconReg(props.item.meta && props.item.meta.icon)"
         ></component>
       </el-icon>
-      <span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
+      <span v-if="!menuMode">{{
+        getMessage(props.item.meta.title, props.item.meta.i18n)
+      }}</span>
       <el-tooltip
         v-else
         placement="top"
         :offset="-10"
         :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
-        <template #content> {{ $t(props.item.meta.title) }} </template>
+        <template #content>
+          {{ getMessage(props.item.meta.title, props.item.meta.i18n) }}
+        </template>
         <div
           ref="menuTextRef"
           :style="{
@@ -170,7 +179,7 @@ function resolvePath(routePath) {
           @mouseover="hoverMenu(props.item)"
         >
           <span style="overflow: hidden; text-overflow: ellipsis">
-            {{ $t(props.item.meta.title) }}
+            {{ getMessage(props.item.meta.title, props.item.meta.i18n) }}
           </span>
         </div>
       </el-tooltip>
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 215ef67d5..1aaabd5b9 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -58,6 +58,7 @@ export type childrenType = {
   meta?: {
     icon?: string;
     title?: string;
+    i18n?: boolean;
     extraIcon?: {
       svg?: boolean;
       name?: string;
diff --git a/src/router/index.ts b/src/router/index.ts
index a442c9448..e91090431 100644
--- 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 则是超链接 反之是普通路由
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index b9f8f2d0a..03657b1f9 100644
--- 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
       }
     }
diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts
index ae54f3b12..15af35ead 100644
--- 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,
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 9a470d2a2..449900462 100644
--- 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
       }
     }
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index baa572780..6791327e6 100644
--- 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
       }
     }
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
index b8b39f80a..ef9ef5aa9 100644
--- 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
       }
     }
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 5b5bd17a6..5dc5b7b3a 100644
--- 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
       }
     }
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
index 6ec506570..bab0681ce 100644
--- 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
       }
     }
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 20c736a1e..b6a8729c6 100644
--- 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
     },
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
new file mode 100644
index 000000000..0a5238a46
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,18 @@
+import { i18n } from "../plugins/i18n";
+/**
+ * 获取对应的消息
+ * @param message message
+ * @param isI18n  如果true,获取对应的消息,否则返回this
+ * @returns message
+ */
+export function getMessage(message = "", isI18n: Boolean = false) {
+  if (!message) {
+    return "";
+  }
+  if (isI18n) {
+    //@ts-ignore
+    return i18n.global.tc.call(i18n.global, message);
+  } else {
+    return message;
+  }
+}