fix:修复头部右侧不显示用户头像的问题

src/layout/AdminLayout.vue

@@ -39,8 +39,10 @@
         </el-button>
         <div class="header-right">
           <template v-if="login">
-            <el-dropdown placement="bottom">
-              <el-button text>
+              <el-dropdown placement="bottom">
+              <el-button text class="user-btn">
+                <el-avatar v-if="userStore.state.avatarUrl" :size="24" :src="userStore.state.avatarUrl" class="user-avatar" />
+                <el-icon v-else class="user-avatar-icon"><UserFilled /></el-icon>
                 {{ userStore.state.nickname }}
               </el-button>
               <template #dropdown>
@@ -126,4 +128,17 @@ const logoutHandler = () => {
   align-items: center;
   gap: 10px;
 }
+.user-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.user-avatar {
+  --el-avatar-bg-color: var(--el-color-primary-dark-2);
+  --el-avatar-text-color: #fff;
+  flex-shrink: 0;
+}
+.user-avatar-icon {
+  font-size: 20px;
+}
 </style>

src/layout/UserLayout.vue

@@ -32,7 +32,8 @@
           <template v-if="login">
             <el-dropdown placement="bottom">
               <el-button class="user-btn" text>
-                <el-icon class="user-avatar"><UserFilled /></el-icon>
+                <el-avatar v-if="userStore.state.avatarUrl" :size="24" :src="userStore.state.avatarUrl" class="user-avatar" />
+                <el-icon v-else class="user-avatar-icon"><UserFilled /></el-icon>
                 <span class="username">{{ userStore.state.nickname }}</span>
               </el-button>
               <template #dropdown>
@@ -161,12 +162,20 @@ const logoutHandler = () => {
   align-items: center;
   gap: 6px;
   cursor: pointer;
-  transition: color 0.2s;
+  color: #fff;
 }
 .user-btn:hover {
   color: rgba(255, 255, 255, 0.8);
 }
+.user-btn.user-btn:hover {
+  background-color: transparent !important;
+}
 .user-avatar {
+  --el-avatar-bg-color: var(--el-color-primary-dark-2);
+  --el-avatar-text-color: #fff;
+  flex-shrink: 0;
+}
+.user-avatar-icon {
   font-size: 20px;
   color: #fff;
 }