From cea9d305dcd48cd9720bcc6373046cb689aa6011 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, 6 May 2023 20:05:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=85=A8=E5=B1=80=E7=BB=84=E4=BB=B6=E5=92=8C?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=A0=B7=E5=BC=8F=E4=B9=A6=E5=86=99?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 00c8b595147b293305d7666546ad7493a73fb810
---
 src/components/Screenfull/index.vue | 12 -----
 src/layout/components/Navbar.vue    | 69 ++++++++++++++++++++---------
 2 files changed, 49 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/Screenfull/index.vue

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
deleted file mode 100644
index 5e2051be..00000000
--- a/src/components/Screenfull/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { isFullscreen, toggle } = useFullscreen();
-</script>
-
-<template>
-  <div>
-    <svg-icon
-      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-      @click="toggle"
-    />
-  </div>
-</template>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 90a9fc0f..d28bd6fc 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -14,11 +14,21 @@ const router = useRouter();
 
 const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
 
+/**
+ * 左侧菜单栏显示/隐藏
+ */
 function toggleSideBar() {
   appStore.toggleSidebar(true);
 }
 
-// 注销
+/**
+ * vueUse 全屏
+ */
+const { isFullscreen, toggle } = useFullscreen();
+
+/**
+ * 注销
+ */
 function logout() {
   ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
     confirmButtonText: "确定",
@@ -52,25 +62,25 @@ function logout() {
     <!-- 右侧导航设置 -->
     <div class="flex">
       <!-- 导航栏设置(窄屏隐藏)-->
-
-      <div v-if="device !== 'mobile'" class="flex items-center">
+      <div class="setting-container" v-if="device !== 'mobile'">
         <!--全屏 -->
-        <screenfull class="navbar-setting-item" />
+        <div class="setting-item" @click="toggle">
+          <svg-icon
+            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+          />
+        </div>
         <!-- 布局大小 -->
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select class="navbar-setting-item" />
+          <size-select class="setting-item" />
         </el-tooltip>
         <!--语言选择-->
-        <lang-select class="navbar-setting-item" />
+        <lang-select class="setting-item" />
       </div>
 
       <!-- 用户头像 -->
       <el-dropdown trigger="click">
-        <div class="flex justify-center items-center mx-2">
-          <img
-            :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
-            class="w-[40px] h-[40px] rounded-lg"
-          />
+        <div class="avatar-container">
+          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
           <i-ep-caret-bottom class="w-3 h-3" />
         </div>
         <template #dropdown>
@@ -106,17 +116,36 @@ function logout() {
   background-color: #fff;
   box-shadow: 0 0 1px #0003;
 
-  .navbar-setting-item {
-    display: inline-block;
-    width: 30px;
-    height: 50px;
-    line-height: 50px;
-    color: #5a5e66;
-    text-align: center;
+  .setting-container {
+    display: flex;
+    align-items: center;
+
+    .setting-item {
+      display: inline-block;
+      width: 30px;
+      height: 50px;
+      line-height: 50px;
+      color: #5a5e66;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        background: rgb(249 250 251 / 100%);
+      }
+    }
+  }
+
+  .avatar-container {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    margin: 0 5px;
     cursor: pointer;
 
-    &:hover {
-      background: rgb(249 250 251 / 100%);
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 5px;
     }
   }
 }