feat: 退出登录

src/components/_base/exit-account-modal/index.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="400px"
+    modal-class="exit-account-modal"
+    show-close="false"
+    :footer="false"
+    @close="onClose"
+  >
+    <div class="flex items-center mb-16px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span class="s1">确认退出登录吗？</span>
+    </div>
+    <p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
+    <div class="flex items-center justify-end">
+      <a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
+        >退出登录</a-button
+      >
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { fetchLogOut } from '@/api/all/login';
+import { handleUserLogout } from '@/utils/user';
+
+import icon1 from './img/icon1.png';
+
+const visible = ref(false);
+
+function onClose() {
+  visible.value = false;
+}
+
+const open = (record) => {
+  visible.value = true;
+};
+
+async function onLogout() {
+  const { code } = await fetchLogOut();
+  if (code === 200) {
+    handleUserLogout();
+    AMessage.success('退出登录成功');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+.exit-account-modal {
+  border-radius: 8px;
+  border: 1px solid var(--BG-300, #e6e6e8) !important;
+  background-color: var(--BG-white, #fff) !important;
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  .arco-modal-header {
+    display: none;
+  }
+  .arco-modal-body {
+    padding: 24px;
+    .s1 {
+      color: var(--Text-1, #211f24);
+      font-family: 'PuHuiTi-Medium';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+    .s2 {
+      color: var(--Text-2, #3c4043);
+      font-family: 'PuHuiTi-Regular';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      &:hover {
+        border: 1px solid var(--BG-500, #b1b2b5);
+      }
+    }
+    .danger-btn {
+      border-radius: 4px;
+      background: var(--Functional-Danger-6, #f64b31) !important;
+      border: none !important;
+    }
+  }
+}
+</style>

src/components/_base/navbar/index.vue

@@ -8,6 +8,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
 import { MENU_GROUP_IDS } from '@/router/constants';
 import router from '@/router';
 import { useRoute } from 'vue-router';
+import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
 
 interface MenuItem {
   name: string;
@@ -20,7 +21,7 @@ interface MenuItem {
 const lists = ref<MenuItem[]>([]);
 const sidebarStore = useSidebarStore();
 const route = useRoute();
-
+const exitAccountModalRef = ref(null);
 const selectedKey = computed(() => {
   // 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
   if (route.name === 'Home' || route.path === '/') {
@@ -31,10 +32,7 @@ const selectedKey = computed(() => {
 });
 
 const clickExit = async () => {
-  const { code } = await fetchLogOut();
-  if (code === 200) {
-    handleUserLogout();
-  }
+  exitAccountModalRef.value?.open();
 };
 const getMenus = async () => {
   const res = await fetchMenusTree();
@@ -112,31 +110,37 @@ const handleDopdownClick = (index: any, ind: any) => {
     </div>
     <ul class="right-side">
       <li>
-        <a-dropdown trigger="click">
+        <a-dropdown trigger="click" class="layout-avatar-dropdown">
           <a-avatar class="cursor-pointer" :size="32">
             <img alt="avatar" src="@/assets/avatar.svg" />
           </a-avatar>
           <template #content>
-            <div style="padding: 14px">
+            <div>
               <a-doption>
-                <a-space @click="setServerMenu">
-                  <img src="@/assets/option.svg" style="width: 16px; height: 16px" />
-                  <span style="width: 140px; font-size: 12px">管理中心</span>
-                  <icon-right />
+                <a-space class="flex justify-between w-100%" @click="setServerMenu">
+                  <div class="flex items-center">
+                    <img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
+                    <span>管理中心</span>
+                  </div>
+                  <icon-right size="12" />
                 </a-space>
               </a-doption>
-              <a-doption>
-                <a-space>
-                  <img src="@/assets/change.svg" style="width: 16px; height: 16px" />
-                  <span style="width: 140px; font-size: 12px">切换企业账号</span>
-                  <icon-right />
+              <!-- <a-doption>
+                <a-space class="flex justify-between w-100%">
+                  <div class="flex items-center">
+                    <img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
+                    <span>切换企业账号</span>
+                  </div>
+                  <icon-right size="12" />
                 </a-space>
-              </a-doption>
+              </a-doption> -->
               <a-doption>
-                <a-space @click="clickExit">
-                  <img src="@/assets/exit.svg" style="width: 16px; height: 16px" />
-                  <span style="width: 140px; font-size: 12px">退出登录</span>
-                  <icon-right />
+                <a-space class="flex justify-between w-100%" @click="clickExit">
+                  <div class="flex items-center">
+                    <img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
+                    <span>退出登录</span>
+                  </div>
+                  <icon-right size="12" />
                 </a-space>
               </a-doption>
             </div>
@@ -144,6 +148,7 @@ const handleDopdownClick = (index: any, ind: any) => {
         </a-dropdown>
       </li>
     </ul>
+    <ExitAccountModal ref="exitAccountModalRef" />
   </div>
 </template>
 
@@ -237,7 +242,8 @@ const handleDopdownClick = (index: any, ind: any) => {
 </style>
 
 <style lang="scss">
-.layout-menu-item-dropdown {
+.layout-menu-item-dropdown,
+.layout-avatar-dropdown {
   .arco-dropdown {
     border-radius: 8px;
     border: 1px solid var(--BG-300, #e6e6e8);
@@ -271,4 +277,16 @@ const handleDopdownClick = (index: any, ind: any) => {
     }
   }
 }
+.layout-avatar-dropdown {
+  width: 200px;
+  .arco-dropdown {
+    padding: 12px 4px;
+    .arco-dropdown-option {
+      padding: 0 !important;
+      &-content {
+        padding: 0 12px !important;
+      }
+    }
+  }
+}
 </style>