对接后端

src/components/layout/TopBar.vue

@@ -6,35 +6,40 @@
     
     <div class="right">
       <template v-if="userStore.userInfo">
-        <el-dropdown :hide-on-click="false">
+        <el-popover
-          <span class="user-info">
+          :width="200"
-            <el-avatar 
+          trigger="click"
-              :size="32" 
+          placement="bottom-end"
-              :src="userStore.userInfo.avatar || defaultAvatar"
+        >
-            />
+          <template #reference>
-            <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
+            <div class="user-info">
-            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              <el-avatar 
-          </span>
+                :size="32" 
-          <template #dropdown>
+                :src="userStore.userInfo.avatar || defaultAvatar"
-            <el-dropdown-menu>
+              />
-              <el-dropdown-item @click="handleCommand('profile')">
+              <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
-                <el-icon><User /></el-icon>
+              <el-icon class="el-icon--right"><arrow-down /></el-icon>
-                个人中心
+            </div>
-              </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>
           </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 handleProfile = () => {
-const handleCommand = async (command: string) => {
+  router.push('/profile')
-  console.log('Menu clicked:', command) // 添加调试日志
+}
-  switch (command) {
+
-    case 'profile':
+const handleSettings = () => {
-      router.push('/profile')
+  router.push('/settings')
-      break
+}
-    case 'settings':
+
-      router.push('/settings')
+const handleLogout = async () => {
-      break
+  try {
-    case 'logout':
+    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
-      try {
+      confirmButtonText: '确定',
-        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+      cancelButtonText: '取消',
-          confirmButtonText: '确定',
+      type: 'warning'
-          cancelButtonText: '取消',
+    })
-          type: 'warning'
+    userStore.clearUserInfo()
-        })
+    ElMessage.success('退出登录成功')
-        userStore.clearUserInfo()
+    router.push('/login')
-        ElMessage.success('退出登录成功')
+  } catch {
-        router.push('/login')
+    // 用户取消操作
-      } catch {
-        // 用户取消操作
-      }
-      break
   }
 }
 </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>

src/main.ts

@@ -1,22 +1,16 @@
 import './assets/styles/global.css'
-import { createApp, type Component } from 'vue'
+import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 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')