From 7a4e1e39b856a82247a3580fc67f7bc13fe46980 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sat, 7 Dec 2024 22:28:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=90=8E=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/TopBar.vue | 33 ++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
index cbf18d6..d41493c 100644
--- a/src/components/layout/TopBar.vue
+++ b/src/components/layout/TopBar.vue
@@ -7,13 +7,14 @@
     <div class="right">
       <template v-if="userStore.userInfo">
         <!-- 已登录状态 -->
-        <el-dropdown @command="handleCommand">
+        <el-dropdown trigger="click" @command="handleCommand">
           <div class="user-info">
             <el-avatar 
               :size="32" 
               :src="userStore.userInfo.avatar || defaultAvatar"
             />
             <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
+            <el-icon class="el-icon--right"><arrow-down /></el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
@@ -50,8 +51,8 @@
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
-import { ElMessage } from 'element-plus'
-import { User, Setting, SwitchButton } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { User, Setting, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
 import defaultAvatar from '@/assets/default-avatar.png'
 
 const router = useRouter()
@@ -76,9 +77,18 @@ const handleCommand = async (command: string) => {
       router.push('/settings')
       break
     case 'logout':
-      userStore.clearUserInfo()
-      ElMessage.success('退出登录成功')
-      router.push('/login')
+      try {
+        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        userStore.clearUserInfo()
+        ElMessage.success('退出登录成功')
+        router.push('/login')
+      } catch {
+        // 用户取消操作
+      }
       break
   }
 }
@@ -141,4 +151,15 @@ const handleCommand = async (command: string) => {
 .el-icon {
   margin-right: 4px;
 }
+
+/* 添加下拉箭头样式 */
+.el-icon--right {
+  margin-left: 4px;
+  font-size: 12px;
+  transition: transform 0.3s;
+}
+
+.el-dropdown:hover .el-icon--right {
+  transform: rotate(180deg);
+}
 </style>