From d1589ba12b2f3731a1280dae3b28a43e6d3ce37f Mon Sep 17 00:00:00 2001
From: rd <>
Date: Tue, 1 Jul 2025 17:52:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_base/exit-account-modal/img/icon1.png    | Bin 0 -> 639 bytes
 .../_base/exit-account-modal/index.vue        |  98 ++++++++++++++++++
 src/components/_base/navbar/index.vue         |  62 +++++++----
 3 files changed, 138 insertions(+), 22 deletions(-)
 create mode 100644 src/components/_base/exit-account-modal/img/icon1.png
 create mode 100644 src/components/_base/exit-account-modal/index.vue

diff --git a/src/components/_base/exit-account-modal/img/icon1.png b/src/components/_base/exit-account-modal/img/icon1.png
new file mode 100644
index 0000000000000000000000000000000000000000..40402eba487815a406941dbf66496801eadeb21e
GIT binary patch
literal 639
zcmV-_0)YLAP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0u)I^K~#7F?U><F
z!ypvL|3n9H1G9lTfpG(?epe^(I)Rr7yiQ>KuGS6A2z7(FfeW<wAZag92mx&3_4>O@
zk3tClJi_BWfIT}7Lj-(=BP@{7Q&J>2Q5u){rn-Vkb2h>c0tpgG!Y;w_K*g+MmxAtp
zVb_?#6EA`Mm4qdDqGF0LN)np;2<;?LP9?_--7V%CbxOZEO?~OU)d7i1N!%yGt!AU7
z(Jx#gTLo@W+zO{itH2(_tq>y5Y%4u!>G+84i-R1a`o4`AEy&++M=j6rqo6)z^#J)|
z8GKk`#BT7RSDP)!r1ks|er|+&afvc~soa;LS|3MPub-*aNu{6F*t8(SErueIyOUPc
zKsw~Va>ij~wT3mi1y3<NS@Vx7a5<>;P-{q=e^r5Okj0^*g>4D`IeUSz=-=QRLnBg!
z28T-Hg7(r-o05YkA9gOwJYum`dCVGB;DO8?LdhcfHc@6#u~!|F6$pV-pl}5yE>T7p
zg&r50_TmYKf^9}Y8v^MKL`+tqe@YsAs#hKwZ)F&_MY)zfaf^f@H&<KW?=m0B&<B);
z%0SmZ($Z;!ex|ylE4MXT1<KV#DIvBiGCb{EF?8bY+&AO{Dogq&LUxKe7cN~l`W+t4
zD52s}`LcM~aqY@F5qkV4go@-U>)55BAYfw3dtJmIV2V6OqzVa+wdOBW3#^Daz}&O*
Z`~v?$k_a=)qKN<i002ovPDHLkV1oY*5Sah~

literal 0
HcmV?d00001

diff --git a/src/components/_base/exit-account-modal/index.vue b/src/components/_base/exit-account-modal/index.vue
new file mode 100644
index 0000000..030e470
--- /dev/null
+++ b/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>
diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue
index 04308ce..87e2fbb 100644
--- a/src/components/_base/navbar/index.vue
+++ b/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>