对接后端

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':
+      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>