From 8663aadfb33bac0e6880fe70155de5ee58c903d1 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sat, 7 Dec 2024 22:36:18 +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 | 127 +++++++++++++++++--------------
 src/main.ts                      |  16 ++--
 2 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
index f0e6373..252988d 100644
--- a/src/components/layout/TopBar.vue
+++ b/src/components/layout/TopBar.vue
@@ -6,35 +6,40 @@
     
     <div class="right">
       <template v-if="userStore.userInfo">
-        <el-dropdown :hide-on-click="false">
-          <span 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>
-          </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item @click="handleCommand('profile')">
-                <el-icon><User /></el-icon>
-                个人中心
-              </el-dropdown-item>
-              <el-dropdown-item @click="handleCommand('settings')">
-                <el-icon><Setting /></el-icon>
-                设置
-              </el-dropdown-item>
-              <el-dropdown-item divided @click="handleCommand('logout')">
-                <el-icon><SwitchButton /></el-icon>
-                退出登录
-              </el-dropdown-item>
-            </el-dropdown-menu>
+        <el-popover
+          :width="200"
+          trigger="click"
+          placement="bottom-end"
+        >
+          <template #reference>
+            <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>
-        </el-dropdown>
+          
+          <div class="menu-items">
+            <div class="menu-item" @click="handleProfile">
+              <el-icon><User /></el-icon>
+              <span>个人中心</span>
+            </div>
+            <div class="menu-item" @click="handleSettings">
+              <el-icon><Setting /></el-icon>
+              <span>设置</span>
+            </div>
+            <div class="divider"></div>
+            <div class="menu-item" @click="handleLogout">
+              <el-icon><SwitchButton /></el-icon>
+              <span>退出登录</span>
+            </div>
+          </div>
+        </el-popover>
       </template>
       <template v-else>
-        <!-- 未登录状态 -->
         <router-link to="/login" class="login-btn">
           <el-button type="primary">登录</el-button>
         </router-link>
@@ -57,7 +62,6 @@ import defaultAvatar from '@/assets/default-avatar.png'
 const router = useRouter()
 const userStore = useUserStore()
 
-// 初始化时获取用户信息
 onMounted(async () => {
   const token = localStorage.getItem('token')
   if (token && !userStore.userInfo) {
@@ -66,30 +70,26 @@ onMounted(async () => {
   }
 })
 
-// 处理菜单点击
-const handleCommand = async (command: string) => {
-  console.log('Menu clicked:', command) // 添加调试日志
-  switch (command) {
-    case 'profile':
-      router.push('/profile')
-      break
-    case 'settings':
-      router.push('/settings')
-      break
-    case 'logout':
-      try {
-        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-        userStore.clearUserInfo()
-        ElMessage.success('退出登录成功')
-        router.push('/login')
-      } catch {
-        // 用户取消操作
-      }
-      break
+const handleProfile = () => {
+  router.push('/profile')
+}
+
+const handleSettings = () => {
+  router.push('/settings')
+}
+
+const handleLogout = async () => {
+  try {
+    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    userStore.clearUserInfo()
+    ElMessage.success('退出登录成功')
+    router.push('/login')
+  } catch {
+    // 用户取消操作
   }
 }
 </script>
@@ -126,7 +126,6 @@ const handleCommand = async (command: string) => {
   padding: 2px 8px;
   border-radius: 4px;
   transition: background-color 0.3s;
-  user-select: none; /* 防止文本被选中 */
 }
 
 .user-info:hover {
@@ -143,24 +142,40 @@ const handleCommand = async (command: string) => {
   text-decoration: none;
 }
 
-.el-dropdown-menu__item {
+.menu-items {
+  padding: 4px 0;
+}
+
+.menu-item {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.menu-item:hover {
+  background-color: #f5f7fa;
+}
+
+.divider {
+  height: 1px;
+  background-color: #ebeef5;
+  margin: 4px 0;
 }
 
 .el-icon {
-  margin-right: 4px;
+  font-size: 16px;
 }
 
-/* 添加下拉箭头样式 */
 .el-icon--right {
   margin-left: 4px;
   font-size: 12px;
   transition: transform 0.3s;
 }
 
-.el-dropdown:hover .el-icon--right {
+.user-info:hover .el-icon--right {
   transform: rotate(180deg);
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 7ef65e2..ff4cfaf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,22 +1,16 @@
 import './assets/styles/global.css'
-import { createApp, type Component } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
-
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
 
 const app = createApp(App)
+const pinia = createPinia()
 
-// 注册 Element Plus 图标
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component as Component)
-}
-
-app.use(createPinia())
-app.use(router)
 app.use(ElementPlus)
+app.use(pinia)
+app.use(router)
 
 app.mount('#app')