From 69bd4da00990d156731abe4691d44405de755f09 Mon Sep 17 00:00:00 2001
From: Cat73 <root@cat73.org>
Date: Tue, 10 Mar 2020 14:09:51 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E8=8F=9C=E5=8D=95=E4=B8=8A?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BD=BF=E7=94=A8=20el-icon=20=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ElIcon/index.vue               | 39 +++++++++++++++++++
 src/icons/index.js                            |  2 +
 src/layout/components/Sidebar/Item.vue        | 12 +++++-
 src/layout/components/Sidebar/SidebarItem.vue |  4 +-
 src/styles/sidebar.scss                       | 13 +++++++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ElIcon/index.vue

diff --git a/src/components/ElIcon/index.vue b/src/components/ElIcon/index.vue
new file mode 100644
index 00000000..cc67a306
--- /dev/null
+++ b/src/components/ElIcon/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <i :class="iconName" :style="appendStyle" />
+</template>
+
+<script>
+export default {
+  name: 'ElIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    iconColor: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `sub-el-icon el-icon-${this.iconClass}`
+    },
+    appendStyle() {
+      if (this.iconColor) {
+        return 'color: ' + this.iconColor + ';'
+      } else {
+        return ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  width: 1em;
+  height: 1em;
+}
+</style>
diff --git a/src/icons/index.js b/src/icons/index.js
index 2c6b309c..3ea4bb40 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
+import ElIcon from '@/components/ElIcon'
 
 // register globally
 Vue.component('svg-icon', SvgIcon)
+Vue.component('el-icon', ElIcon)
 
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index b515f615..9302d919 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,4 +1,6 @@
 <script>
+import variables from '@/styles/variables.scss'
+
 export default {
   name: 'MenuItem',
   functional: true,
@@ -7,19 +9,27 @@ export default {
       type: String,
       default: ''
     },
+    elicon: {
+      type: String,
+      default: ''
+    },
     title: {
       type: String,
       default: ''
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, elicon, title } = context.props
     const vnodes = []
 
     if (icon) {
       vnodes.push(<svg-icon icon-class={icon}/>)
     }
 
+    if (elicon) {
+      vnodes.push(<el-icon icon-class={elicon} icon-color={variables.menuText}/>)
+    }
+
     if (title) {
       vnodes.push(<span slot='title'>{(title)}</span>)
     }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index a418c3d7..313f007f 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :elicon="onlyOneChild.meta.elicon||item.meta && item.meta.elicon" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :elicon="item.meta && item.meta.elicon" :title="item.meta.title" />
       </template>
       <sidebar-item
         v-for="child in item.children"
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3dad4c39..8f98148e 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -57,6 +57,11 @@
       margin-right: 16px;
     }
 
+    .sub-el-icon {
+      margin-right: 13px;
+      margin-left: -1px;
+    }
+
     .el-menu {
       border: none;
       height: 100%;
@@ -105,6 +110,10 @@
         .svg-icon {
           margin-left: 20px;
         }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
       }
     }
 
@@ -118,6 +127,10 @@
           margin-left: 20px;
         }
 
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
         .el-submenu__icon-arrow {
           display: none;
         }