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

* feat(i18n): 菜单动态支持i18n

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

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>

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>

src/layout/types.ts

@@ -58,6 +58,7 @@ export type childrenType = {
   meta?: {
     icon?: string;
     title?: string;
+    i18n?: boolean;
     extraIcon?: {
       svg?: boolean;
       name?: string;