From 28d1d37b23a9d62a6b370ccd7b63cae31b131aa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 1 Jan 2022 16:07:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(Navbar):=20=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8Fsetup=E8=AF=AD=E6=B3=95=E7=B3=96=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0=E5=92=8C=E4=BC=98=E5=8C=96=E9=80=80=E5=87=BA=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E7=9A=84=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue | 68 +++++++++++++-------------------
 1 file changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 26d98b1e..d9fda8ac 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -10,7 +10,7 @@
         <!--        <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">
+        <!--<el-tooltip content="Global Size" effect="dark" placement="bottom">
                   <size-select id="size-select" class="right-menu-item hover-effect" />
                 </el-tooltip>-->
       </template>
@@ -18,9 +18,7 @@
       <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">
-          <el-icon>
-            <caret-bottom/>
-          </el-icon>
+          <CaretBottom style="width: .6em; height: .6em;" />
         </div>
 
         <template #dropdown>
@@ -37,7 +35,7 @@
             <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
               <el-dropdown-item>项目文档</el-dropdown-item>
             </a>
-            <el-dropdown-item divided @click.native="logout">
+            <el-dropdown-item divided @click="logout">
               退出
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -46,8 +44,9 @@
     </div>
   </div>
 </template>
-<script>
-import {reactive, computed, toRefs} from "vue";
+<script setup lang="ts">
+import { computed} from "vue"
+import {ElMessageBox} from 'element-plus'
 import {useRoute, useRouter} from "vue-router"
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
@@ -55,43 +54,30 @@ import Screenfull from '@/components/screenfull/index.vue'
 import {tagsViewStoreHook} from '@/store/modules/tagsView'
 import {useAppStoreHook} from '@/store/modules/app'
 import {useUserStoreHook} from '@/store/modules/user'
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger,
-    Screenfull
-  },
-  setup() {
-    const route = useRoute()
-    const router = useRouter()
 
-    const sidebar = computed(() => {
-      return useAppStoreHook().sidebar
-    })
-    const device = computed(() => {
-      return useAppStoreHook().device
-    })
-    const avatar = computed(() => {
-      return useUserStoreHook().avatar
-    })
+import SvgIcon from '@/components/SvgIcon/index.vue'
 
-    const state = reactive({
-      toggleSideBar: () => {
-        useAppStoreHook().toggleSidebar(false)
-      },
-      logout: () => {
-        useUserStoreHook().logout().then(()=>{
-          router.push(`/login?redirect=${route.fullPath}`)
-        })
-      }
+const route = useRoute()
+const router = useRouter()
+
+const sidebar = computed(() => useAppStoreHook().sidebar)
+const device = computed(() => useAppStoreHook().device)
+const avatar = computed(() => useUserStoreHook().avatar)
+
+function toggleSideBar() {
+  useAppStoreHook().toggleSidebar()
+}
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    useUserStoreHook().logout().then(() => {
+      router.push(`/login?redirect=${route.fullPath}`)
     })
-    return {
-      sidebar,
-      device,
-      avatar,
-      ...toRefs(state)
-    }
-  }
+  })
 }
 </script>