退出登录

src/components/HeaderSection/index.vue

@@ -16,12 +16,21 @@
       <div class="title"></div>
     </div>
     <div class="header-right">
-      <i class="userIcon" />
+      <div ref="userRef" class="userIcon" @click="handleShowBox">
+        <div v-show="showBox" class="log-out-box">
+          <div class="log-out" @click="logout">退出登录</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup name="headerSection">
+import useUserStore from '@/store/modules/user';
+import { onClickOutside } from '@vueuse/core';
+
+const userStore = useUserStore();
+const userRef = ref();
 let date = ref([]);
 const getCurrentFormattedTime = () => {
   const now = new Date();
@@ -39,6 +48,22 @@ const getCurrentFormattedTime = () => {
   date.value = [formattedDate, formattedTime];
 };
 let timer;
+let showBox = ref(false);
+onClickOutside(userRef, (event) => {
+  showBox.value = false;
+});
+const handleShowBox = () => {
+  showBox.value = true;
+};
+const logout = async () => {
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  });
+  await userStore.logout();
+  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + '#' + 'index';
+};
 onMounted(() => {
   getCurrentFormattedTime();
   timer = setInterval(getCurrentFormattedTime, 1000);
@@ -100,6 +125,29 @@ onUnmounted(() => {
       background-size: 100% 100%;
       margin-top: 14px;
       margin-right: 24px;
+      position: relative;
+      cursor: pointer;
+      .log-out-box {
+        position: absolute;
+        bottom: -40px;
+        left: -40px;
+        border: 1px solid #2db3e9;
+        .log-out {
+          width: 80px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 7px 0;
+          color: #ffffff;
+          font-size: 14px;
+          background: #0d2c70;
+          cursor: pointer;
+          &:hover {
+            background: #1b4ea5;
+          }
+        }
+      }
     }
   }
 }