对接后端

src/components/layout/TopBar.vue

@@ -6,38 +6,32 @@
     
     <div class="right">
       <template v-if="userStore.userInfo">
-        <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>
-          
-          <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>
+        <el-dropdown trigger="click">
+          <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>
-        </el-popover>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleProfile">
+                <el-icon><User /></el-icon>
+                个人中心
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleSettings">
+                <el-icon><Setting /></el-icon>
+                设置
+              </el-dropdown-item>
+              <el-dropdown-item divided @click="handleLogout">
+                <el-icon><SwitchButton /></el-icon>
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </template>
       <template v-else>
         <router-link to="/login" class="login-btn">
@@ -142,31 +136,14 @@ const handleLogout = async () => {
   text-decoration: none;
 }
 
-.menu-items {
-  padding: 4px 0;
-}
-
-.menu-item {
-  display: flex;
+.el-dropdown-menu__item {
+  display: flex !important;
   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 {
-  font-size: 16px;
+  margin-right: 4px;
 }
 
 .el-icon--right {

src/main.ts

@@ -1,16 +1,22 @@
 import './assets/styles/global.css'
-import { createApp } from 'vue'
+import { createApp, type Component } 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(ElementPlus)
-app.use(pinia)
 app.use(router)
 
 app.mount('#app')