From 12c4d2f4392704ed87cd9e6ad73aeb9f820d2a1d Mon Sep 17 00:00:00 2001
From: Arman <arimanjiang@bangdao-tech.com>
Date: Fri, 30 Sep 2022 16:57:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Router=20=E9=9B=86=E6=88=90=20Element?=
 =?UTF-8?q?=20Plus=20=E7=9A=84=20icon,=20=E5=8F=AF=E9=80=89=E7=94=A8?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=9A=84=20icon=20=E6=88=96?=
 =?UTF-8?q?=E8=80=85=E7=BB=84=E4=BB=B6=E5=BA=93=E7=9A=84=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/SidebarItem.vue | 11 ++++++++--
 src/router/index.ts                           | 22 +++++++++++--------
 types/vue-router.d.ts                         |  6 ++++-
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 049feeeb..81c821f6 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -72,7 +72,8 @@ const resolvePath = (routePath: string) => {
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
           <template v-if="theOnlyOneChild.meta.title" #title>
-            <component v-if="theOnlyOneChild.meta.icon" class="svg-icon" :is="theOnlyOneChild.meta.icon" />
+            <svg-icon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
+            <component v-else-if="theOnlyOneChild.meta.elIcon" class="el-icon" :is="theOnlyOneChild.meta.elIcon" />
             {{ theOnlyOneChild.meta.title }}
           </template>
         </el-menu-item>
@@ -80,7 +81,8 @@ const resolvePath = (routePath: string) => {
     </template>
     <el-sub-menu v-else :index="resolvePath(props.item.path)" popper-append-to-body>
       <template #title>
-        <component v-if="props.item.meta && props.item.meta.icon" class="svg-icon" :is="props.item.meta.icon" />
+        <svg-icon v-if="props.item.meta && props.item.meta.svgIcon" :name="props.item.meta.svgIcon" />
+        <component v-else-if="props.item.meta && props.item.meta.elIcon" class="el-icon" :is="props.item.meta.elIcon" />
         <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span>
       </template>
       <template v-if="props.item.children">
@@ -99,6 +101,11 @@ const resolvePath = (routePath: string) => {
 
 <style lang="scss" scoped>
 .svg-icon {
+  margin-right: 8px;
+  min-width: 1em;
+  font-size: 16px;
+}
+.el-icon {
   width: 1em;
   height: 1em;
   margin-right: 8px;
diff --git a/src/router/index.ts b/src/router/index.ts
index 73b0a3b7..6dd925f0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -35,7 +35,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Dashboard",
         meta: {
           title: "首页",
-          icon: "dashboard",
+          svgIcon: "dashboard",
           affix: true
         }
       }
@@ -52,7 +52,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "UnoCSS",
         meta: {
           title: "unocss",
-          icon: "Female"
+          elIcon: "Female"
         }
       }
     ]
@@ -67,7 +67,8 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Link",
         meta: {
           title: "外链",
-          icon: "Link"
+          svgIcon: "link",
+          elIcon: "Hide"
         }
       }
     ]
@@ -79,7 +80,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     name: "Menu",
     meta: {
       title: "多级菜单",
-      icon: "menu"
+      elIcon: "menu"
     },
     children: [
       {
@@ -89,14 +90,17 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Menu1",
         meta: {
           title: "menu1",
-          icon: "Operation"
+          elIcon: "EditPen"
         },
         children: [
           {
             path: "menu1-1",
             component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
             name: "Menu1-1",
-            meta: { title: "menu1-1" }
+            meta: {
+              title: "menu1-1",
+              svgIcon: "bug"
+            }
           },
           {
             path: "menu1-2",
@@ -105,7 +109,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             name: "Menu1-2",
             meta: {
               title: "menu1-2",
-              icon: "Tools"
+              elIcon: "Tools"
             },
             children: [
               {
@@ -153,7 +157,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
     name: "Permission",
     meta: {
       title: "权限管理",
-      icon: "lock",
+      svgIcon: "lock",
       roles: ["admin", "editor"], // 可以在根路由中设置角色
       alwaysShow: true // 将始终显示根菜单
     },
@@ -184,7 +188,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
     name: "ErrorPage",
     meta: {
       title: "错误页面",
-      icon: "404",
+      svgIcon: "404",
       hidden: true
     },
     children: [
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index 582bd440..f23307f4 100644
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -9,7 +9,11 @@ declare module "vue-router" {
     /**
      * 设置该路由的图标，记得将 svg 导入 @/icons/svg
      */
-    icon?: string
+    svgIcon?: string
+    /**
+     * 设置该路由的图标，集成 Element Plus 的 icon 库
+     */
+    elIcon?: string
     /**
      * 默认 false，设置 true 的时候该路由不会在侧边栏出现
      */