From 4ef4768c65c7b6767085c4d0e2bc32c289a3f927 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 16 Nov 2021 22:17:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E4=B8=BB=E5=88=86?=
 =?UTF-8?q?=E6=94=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/asyncRoutes.ts                           |  3 ++
 src/components/ReIcon/index.ts                | 38 ++++++++++++++++++-
 src/layout/components/navbar.vue              |  9 ++++-
 src/layout/components/sidebar/breadCrumb.vue  |  7 ++--
 src/layout/components/sidebar/sidebarItem.vue | 36 +++++++++++++-----
 src/layout/components/tag/index.vue           |  6 ++-
 src/layout/types.ts                           |  3 ++
 src/plugins/element-plus/index.ts             |  7 +++-
 src/router/index.ts                           | 16 +++++---
 src/router/modules/error.ts                   |  3 ++
 src/router/modules/externalLink.ts            |  2 +
 src/router/modules/home.ts                    |  2 +
 src/router/modules/remaining.ts               |  2 +
 src/utils/i18n.ts                             | 19 ++++++++++
 src/utils/storage/index.ts                    |  2 +-
 src/utils/storage/responsive.ts               |  3 +-
 16 files changed, 132 insertions(+), 26 deletions(-)
 create mode 100644 src/utils/i18n.ts

diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index 3136434..6954db3 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -9,6 +9,7 @@ const permissionRouter = {
   meta: {
     title: "message.permission",
     icon: "Lollipop",
+    i18n: true,
     showLink: true,
     rank: 3
   },
@@ -18,6 +19,7 @@ const permissionRouter = {
       name: "permissionPage",
       meta: {
         title: "message.permissionPage",
+        i18n: true,
         showLink: true
       }
     },
@@ -26,6 +28,7 @@ const permissionRouter = {
       name: "permissionButton",
       meta: {
         title: "message.permissionButton",
+        i18n: true,
         showLink: true,
         authority: []
       }
diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts
index 441416b..41bf519 100644
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -1,5 +1,7 @@
-import { App } from "vue";
+import { App, defineComponent } from "vue";
 import icon from "./src/Icon.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { iconComponents } from "/@/plugins/element-plus";
 
 export const Icon = Object.assign(icon, {
   install(app: App) {
@@ -10,3 +12,37 @@ export const Icon = Object.assign(icon, {
 export default {
   Icon
 };
+/**
+ * find icon component
+ * @param icon icon图标
+ * @returns component
+ */
+export function findIconReg(icon: string) {
+  const faReg = /^fa-/;
+  if (faReg.test(icon)) {
+    return findIcon(icon.split(faReg)[1]);
+  } else {
+    return findIcon(icon, false);
+  }
+}
+export function findIcon(icon: String, isFa: Boolean = true) {
+  if (isFa) {
+    return defineComponent({
+      name: "FaIcon",
+      data() {
+        return { icon: icon };
+      },
+      components: { FontAwesomeIcon },
+      template: `<font-awesome-icon :icon="icon" />`
+    });
+  } else {
+    const components = iconComponents.filter(
+      component => component.name === icon
+    );
+    if (components.length > 0) {
+      return components[0];
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index ee1e12e..17da9d3 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 { transformI18n } 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 = transformI18n(
+      //@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 dbcd686..393b147 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 { transformI18n } 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);
   }
@@ -55,10 +56,10 @@ const handleLink = (item: RouteLocationMatched): any => {
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ $t(item.meta.title) }}</span
+          >{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ $t(item.meta.title) }}
+          {{ transformI18n(item.meta.title, item.meta.i18n) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 2f65926..00c7b5e 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -4,7 +4,8 @@ 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 { transformI18n } from "/@/utils/i18n";
+import { findIconReg } from "/@/components/ReIcon";
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
 const pureApp = useAppStoreHook();
@@ -92,7 +93,10 @@ function resolvePath(routePath) {
       <el-icon v-show="props.item.meta.icon">
         <component
           :is="
-            onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+            findIconReg(
+              onlyOneChild.meta.icon ||
+                (props.item.meta && props.item.meta.icon)
+            )
           "
         ></component>
       </el-icon>
@@ -106,14 +110,20 @@ function resolvePath(routePath) {
             overflow: 'hidden'
           }"
         >
-          <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
+          <span v-if="!menuMode">{{
+            transformI18n(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>
+              {{
+                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+              }}
+            </template>
             <span
               ref="menuTextRef"
               :style="{
@@ -123,7 +133,9 @@ function resolvePath(routePath) {
               }"
               @mouseover="hoverMenu(onlyOneChild)"
             >
-              {{ $t(onlyOneChild.meta.title) }}
+              {{
+                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+              }}
             </span>
           </el-tooltip>
           <Icon
@@ -144,16 +156,22 @@ function resolvePath(routePath) {
   >
     <template #title>
       <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
-        <component :is="props.item.meta && props.item.meta.icon"></component>
+        <component
+          :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">{{
+        transformI18n(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>
+          {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+        </template>
         <div
           ref="menuTextRef"
           :style="{
@@ -165,7 +183,7 @@ function resolvePath(routePath) {
           @mouseover="hoverMenu(props.item)"
         >
           <span style="overflow: hidden; text-overflow: ellipsis">
-            {{ $t(props.item.meta.title) }}
+            {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
           </span>
         </div>
       </el-tooltip>
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index dbbeeec..161cabd 100644
--- a/src/layout/components/tag/index.vue
+++ b/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
           }
@@ -280,6 +283,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       relativeStorage.routesInStorage = routerArrays;
       usePermissionStoreHook().clearAllCachePage();
       router.push("/welcome");
+
       break;
   }
   setTimeout(() => {
@@ -480,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="
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 215ef67..82ac814 100644
--- a/src/layout/types.ts
+++ b/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;
@@ -58,6 +60,7 @@ export type childrenType = {
   meta?: {
     icon?: string;
     title?: string;
+    i18n?: boolean;
     extraIcon?: {
       svg?: boolean;
       name?: string;
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index 29aac0c..1260028 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -93,9 +93,11 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  ElSwitch,
+  ElSwitch
+];
 
-  // icon
+// icon
+export const iconComponents = [
   Check,
   Menu,
   HomeFilled,
@@ -115,6 +117,7 @@ const components = [
 const plugins = [ElLoading];
 
 export function useElementPlus(app: App) {
+  components.push(...iconComponents);
   components.forEach((component: Component) => {
     app.component(component.name, component);
   });
diff --git a/src/router/index.ts b/src/router/index.ts
index ba0c07d..399bde3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,11 +7,10 @@ import {
 } from "vue-router";
 import { RouteConfigs } from "/@/layout/types";
 import { split, uniqBy } from "lodash-es";
-import { i18n } from "/@/plugins/i18n";
+import { transformI18n } from "../utils/i18n";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
 import { useTimeoutFn } from "@vueuse/core";
-import { RouteConfigs } from "/@/layout/types";
 import { storageSession, storageLocal } from "/@/utils/storage";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
@@ -201,10 +200,15 @@ router.beforeEach((to, _from, next) => {
   const name = storageSession.getItem("info");
   NProgress.start();
   const externalLink = to?.redirectedFrom?.fullPath;
-  // @ts-ignore
-  const { t } = i18n.global;
-  // @ts-ignore
-  if (!externalLink) to.meta.title ? (document.title = t(to.meta.title)) : "";
+  if (!externalLink)
+    to.matched.some(item => {
+      item.meta.title
+        ? (document.title = transformI18n(
+            item.meta.title as string,
+            item.meta?.i18n as boolean
+          ))
+        : "";
+    });
   if (name) {
     if (_from?.name) {
       // 如果路由包含http 则是超链接 反之是普通路由
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 9a470d2..4499004 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 baa5727..6791327 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/home.ts b/src/router/modules/home.ts
index 5b5bd17..5dc5b7b 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/remaining.ts b/src/router/modules/remaining.ts
index 20c736a..b6a8729 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 0000000..62b9e0a
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,19 @@
+import { i18n } from "../plugins/i18n";
+
+/**
+ * 消息转换
+ * @param message message
+ * @param isI18n  如果true,获取对应的消息,否则返回this
+ * @returns message
+ */
+export function transformI18n(message = "", isI18n = false) {
+  if (!message) {
+    return "";
+  }
+  if (isI18n) {
+    //@ts-ignore
+    return i18n.global.tc.call(i18n.global, message);
+  } else {
+    return message;
+  }
+}
diff --git a/src/utils/storage/index.ts b/src/utils/storage/index.ts
index 12a5df5..f4580f6 100644
--- a/src/utils/storage/index.ts
+++ b/src/utils/storage/index.ts
@@ -20,7 +20,7 @@ class sessionStorageProxy implements ProxyStorage {
 
   // 取
   public getItem(key: string): any {
-    return JSON.parse(this.storage.getItem(key)) || null;
+    return JSON.parse(this.storage.getItem(key));
   }
 
   // 删
diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts
index af71dc3..4df889f 100644
--- a/src/utils/storage/responsive.ts
+++ b/src/utils/storage/responsive.ts
@@ -13,7 +13,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
           parentPath: "/",
           meta: {
             title: "message.hshome",
-            icon: "el-icon-s-home",
+            i18n: true,
+            icon: "HomeFilled",
             showLink: true
           }
         }