fix: i18n (#110)

src/layout/components/navbar.vue

@@ -10,7 +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";
+import { transformI18n } from "/@/utils/i18n";
 
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
@@ -24,7 +24,7 @@ watch(
   () => locale.value,
   () => {
     //@ts-ignore
-    document.title = getMessage(
+    document.title = transformI18n(
       //@ts-ignore
       unref(route.meta.title),
       unref(route.meta.i18n)

src/layout/components/sidebar/breadCrumb.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
-import { getMessage } from "/@/utils/i18n";
+import { transformI18n } from "/@/utils/i18n";
 
 const levelList = ref([]);
 const route = useRoute();
@@ -38,9 +38,6 @@ watch(
   () => route.path,
   () => getBreadcrumb()
 );
-const getI18nMessage = meta => {
-  return getMessage(meta.title, meta.i18n);
-};
 
 const handleLink = (item: RouteLocationMatched): any => {
   const { redirect, path } = item;
@@ -59,10 +56,10 @@ const handleLink = (item: RouteLocationMatched): any => {
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ getI18nMessage(item.meta) }}</span
+          >{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ getI18nMessage(item.meta) }}
+          {{ transformI18n(item.meta.title, item.meta.i18n) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>

src/layout/components/sidebar/sidebarItem.vue

@@ -4,7 +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 { transformI18n } from "/@/utils/i18n";
 import { findIconReg } from "/@/components/ReIcon";
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
@@ -111,7 +111,7 @@ function resolvePath(routePath) {
           }"
         >
           <span v-if="!menuMode">{{
-            getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+            transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
           }}</span>
           <el-tooltip
             v-else
@@ -120,7 +120,9 @@ function resolvePath(routePath) {
             :disabled="!onlyOneChild.showTooltip"
           >
             <template #content>
-              {{ getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+              {{
+                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+              }}
             </template>
             <span
               ref="menuTextRef"
@@ -131,7 +133,9 @@ function resolvePath(routePath) {
               }"
               @mouseover="hoverMenu(onlyOneChild)"
             >
-              {{ getMessage(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+              {{
+                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+              }}
             </span>
           </el-tooltip>
           <Icon
@@ -157,7 +161,7 @@ function resolvePath(routePath) {
         ></component>
       </el-icon>
       <span v-if="!menuMode">{{
-        getMessage(props.item.meta.title, props.item.meta.i18n)
+        transformI18n(props.item.meta.title, props.item.meta.i18n)
       }}</span>
       <el-tooltip
         v-else
@@ -166,7 +170,7 @@ function resolvePath(routePath) {
         :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
         <template #content>
-          {{ getMessage(props.item.meta.title, props.item.meta.i18n) }}
+          {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
         </template>
         <div
           ref="menuTextRef"
@@ -179,7 +183,7 @@ function resolvePath(routePath) {
           @mouseover="hoverMenu(props.item)"
         >
           <span style="overflow: hidden; text-overflow: ellipsis">
-            {{ getMessage(props.item.meta.title, props.item.meta.i18n) }}
+            {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
           </span>
         </div>
       </el-tooltip>

src/layout/components/tag/index.vue

@@ -6,6 +6,7 @@ let routerArrays: Array<RouteConfigs> = [
     meta: {
       title: "message.hshome",
       icon: "el-icon-s-home",
+      i18n: true,
       showLink: true
     }
   }
@@ -31,6 +32,7 @@ import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
+import { transformI18n } from "/@/utils/i18n";
 
 import close from "/@/assets/svg/close.svg";
 import refresh from "/@/assets/svg/refresh.svg";
@@ -166,6 +168,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           parentPath: "/",
           meta: {
             title: "message.hshome",
+            i18n: true,
             icon: "el-icon-s-home",
             showLink: true
           }
@@ -481,7 +484,7 @@ onBeforeMount(() => {
         @mouseleave.prevent="onMouseleave(item, index)"
       >
         <router-link :to="item.path" @click="tagOnClick(item)">{{
-          $t(item.meta.title)
+          transformI18n(item.meta.title, item.meta.i18n)
         }}</router-link>
         <el-icon
           v-if="

src/layout/types.ts

@@ -4,6 +4,7 @@ export const routerArrays: Array<RouteConfigs> = [
     parentPath: "/",
     meta: {
       title: "message.hshome",
+      i18n: true,
       icon: "el-icon-s-home",
       showLink: true
     }
@@ -15,6 +16,7 @@ export type RouteConfigs = {
   parentPath?: string;
   meta?: {
     title?: string;
+    i18n?: boolean;
     icon?: string;
     showLink?: boolean;
     savedPosition?: boolean;

src/router/index.ts

@@ -25,7 +25,7 @@ import flowChartRouter from "./modules/flowchart";
 import componentsRouter from "./modules/components";
 // 动态路由
 import { getAsyncRoutes } from "/@/api/routes";
-import { getMessage } from "../utils/i18n";
+import { transformI18n } from "../utils/i18n";
 
 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
@@ -214,7 +214,7 @@ router.beforeEach((to, _from, next) => {
   if (!externalLink)
     to.meta.title
       ? // @ts-ignore
-        (document.title = getMessage(to.meta.title, to.meta.i18n))
+        (document.title = transformI18n(to.meta.title, to.meta.i18n))
       : "";
   if (name) {
     if (_from?.name) {

src/utils/i18n.ts

@@ -1,11 +1,11 @@
 import { i18n } from "../plugins/i18n";
 /**
- * 获取对应的消息
+ * 消息转换
  * @param message message
  * @param isI18n  如果true,获取对应的消息,否则返回this
  * @returns message
  */
-export function getMessage(message = "", isI18n: Boolean = false) {
+export function transformI18n(message = "", isI18n: Boolean = false) {
   if (!message) {
     return "";
   }