From d3aca2d8b2c9df0c536b775982b8da9b1c5b0911 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Wed, 1 Dec 2021 22:56:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:element-plus=E5=AD=97=E4=BD=93=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue | 72 +++++++++++++++++---------------
 src/main.ts                      | 16 +++++--
 2 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 085d821..f31e976 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,51 +1,55 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+               @toggleClick="toggleSideBar"/>
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-<!--        <search id="header-search" class="right-menu-item" />
-
-        <error-log class="errLog-container right-menu-item hover-effect" />-->
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-<!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
-
+        <!--        <search id="header-search" class="right-menu-item" />
+                <error-log class="errLog-container right-menu-item hover-effect" />-->
+        <screenfull id="screenfull" class="right-menu-item hover-effect"/>
+        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+                  <size-select id="size-select" class="right-menu-item hover-effect" />
+                </el-tooltip>-->
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-
-          <i class="el-icon-caret-bottom" />
+          <el-icon>
+            <caret-bottom/>
+          </el-icon>
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
+
+        <template #dropdown>
+          <el-dropdown-menu>
+            <router-link to="/">
+              <el-dropdown-item>首页</el-dropdown-item>
+            </router-link>
+            <a target="_blank" href="https://github.com/hxrui">
+              <el-dropdown-item>Github</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://gitee.com/haoxr">
+              <el-dropdown-item>Gitee</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
+              <el-dropdown-item>项目文档</el-dropdown-item>
+            </a>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display:block;">退出</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
       </el-dropdown>
     </div>
   </div>
 </template>
 <script>
-import {reactive,computed,toRefs} from "vue";
+import {reactive, computed, toRefs} from "vue";
 import {useStore} from "@/store";
-import {useRoute,useRouter} from "vue-router"
+import {useRoute, useRouter} from "vue-router"
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
 import Screenfull from '@/components/screenfull/index.vue'
@@ -71,16 +75,16 @@ export default {
       return store.state.user.avatar
     })
 
-    const state=reactive({
-      toggleSideBar:()=>{
+    const state = reactive({
+      toggleSideBar: () => {
         store.dispatch('app/toggleSideBar', false)
       },
-      logout:()=>{
+      logout: () => {
         store.dispatch('user/logout')
         router.push(`/login?redirect=${route.fullPath}`)
       }
     })
-    return{
+    return {
       sidebar,
       device,
       avatar,
diff --git a/src/main.ts b/src/main.ts
index 41e8721..232ae7c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,16 +5,26 @@ import {store,key} from './store'
 import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-
+import 'element-plus/theme-chalk/index.css'
 import 'virtual:svg-icons-register';
 
 
+// @see https://blog.csdn.net/qq_37213281/article/details/121422027
+import * as ElIconModules from '@element-plus/icons'
+
+
 import '@/permission'
 
 const app=createApp(App)
+
+// 统一注册el-icon图标
+for(let iconName in ElIconModules){
+    // @ts-ignore
+    app.component(iconName,ElIconModules[iconName] )
+}
+
 app
     .use(router)
     .use(store,key)
     .use(ElementPlus)
-    .mount('#app')
+    .mount('#app')
\ No newline at end of file