chore: 重构图标

src/layout/components/sidebar/horizontal.vue

@@ -13,11 +13,9 @@ import Notice from "../notice/index.vue";
 import { templateRef } from "@vueuse/core";
 import SidebarItem from "./sidebarItem.vue";
 import avatars from "/@/assets/avatars.jpg";
-import { algorithm } from "/@/utils/algorithm";
 import screenfull from "../screenfull/index.vue";
 import { useRoute, useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";
-import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
@@ -92,7 +90,7 @@ const menuSelect = (indexPath: string): void => {
       }
     });
   }
-  findCurrentRoute(algorithm.increaseIndexes(routers));
+  findCurrentRoute(routers);
 };
 
 function backHome() {
@@ -128,7 +126,11 @@ onMounted(() => {
 <template>
   <div class="horizontal-header">
     <div class="horizontal-header-left" @click="backHome">
-      <Icon svg :width="35" :height="35" content="team-iconlogo" />
+      <FontIcon
+        icon="team-iconlogo"
+        svg
+        style="width: 35px; height: 35px"
+      ></FontIcon>
       <h4>{{ title }}</h4>
     </div>
     <el-menu
@@ -183,8 +185,11 @@ onMounted(() => {
         <template #dropdown>
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
-              <i class="ri-logout-circle-r-line"></i
-              >{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
+              <IconifyIconOffline
+                icon="logout-circle-r-line"
+                style="margin: 5px"
+              />
+              {{ $t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>

src/layout/components/sidebar/logo.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { getCurrentInstance } from "vue";
-import Icon from "/@/components/ReIcon/src/Icon.vue";
 const props = defineProps({
   collapse: Boolean
 });
@@ -19,7 +18,11 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <Icon svg :width="35" :height="35" content="team-iconlogo" />
+        <FontIcon
+          icon="team-iconlogo"
+          svg
+          style="width: 35px; height: 35px"
+        ></FontIcon>
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
@@ -29,7 +32,11 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <Icon svg :width="35" :height="35" content="team-iconlogo" />
+        <FontIcon
+          icon="team-iconlogo"
+          svg
+          style="width: 35px; height: 35px"
+        ></FontIcon>
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>

src/layout/components/sidebar/sidebarItem.vue

@@ -10,9 +10,8 @@ import {
 import path from "path";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
-import { findIconReg } from "/@/components/ReIcon";
-import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
@@ -143,7 +142,7 @@ function resolvePath(routePath) {
       <el-icon v-show="props.item.meta.icon">
         <component
           :is="
-            findIconReg(
+            useRenderIcon(
               onlyOneChild.meta.icon ||
                 (props.item.meta && props.item.meta.icon)
             )
@@ -176,11 +175,11 @@ function resolvePath(routePath) {
               }}
             </span>
           </el-tooltip>
-          <Icon
+          <FontIcon
             v-if="onlyOneChild.meta.extraIcon"
+            :icon="onlyOneChild.meta.extraIcon.name"
             :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
-            :content="`${onlyOneChild.meta.extraIcon.name}`"
-          />
+          ></FontIcon>
         </div>
       </template>
     </el-menu-item>
@@ -195,7 +194,7 @@ function resolvePath(routePath) {
     <template #title>
       <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
         <component
-          :is="findIconReg(props.item.meta && props.item.meta.icon)"
+          :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         ></component>
       </el-icon>
       <span v-if="!menuMode">{{
@@ -220,11 +219,11 @@ function resolvePath(routePath) {
           </span>
         </div>
       </el-tooltip>
-      <Icon
+      <FontIcon
         v-if="props.item.meta.extraIcon"
+        :icon="props.item.meta.extraIcon.name"
         :svg="props.item.meta.extraIcon.svg ? true : false"
-        :content="`${props.item.meta.extraIcon.name}`"
-      />
+      ></FontIcon>
     </template>
     <sidebar-item
       v-for="child in props.item.children"

src/layout/components/sidebar/vertical.vue

@@ -2,7 +2,6 @@
 import Logo from "./logo.vue";
 import { emitter } from "/@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
-import { algorithm } from "/@/utils/algorithm";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
 import { computed, ref, onBeforeMount } from "vue";
@@ -48,7 +47,7 @@ const menuSelect = (indexPath: string): void => {
       }
     });
   }
-  findCurrentRoute(algorithm.increaseIndexes(router));
+  findCurrentRoute(router);
 };
 
 onBeforeMount(() => {