新增功能 - 用户头像信息展示

Author: liyupi

coder-test-frontend/src/components/GlobalNavbar.vue

@@ -25,9 +25,18 @@
           </div>
 
           <el-dropdown>
-            <span class="user-name">
-              {{ user?.nickname || user?.username }}
-              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+            <span class="user-info">
+              <el-avatar 
+                :src="user?.avatar" 
+                :size="32" 
+                class="user-avatar"
+              >
+                <el-icon><User /></el-icon>
+              </el-avatar>
+              <span class="user-name">
+                {{ user?.nickname || user?.username }}
+                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+              </span>
             </span>
             <template #dropdown>
               <el-dropdown-menu>
@@ -62,7 +71,8 @@ import {
   KnifeFork, 
   Clock, 
   SwitchButton, 
-  Coin
+  Coin,
+  User
 } from '@element-plus/icons-vue'
 
 // Props
@@ -176,24 +186,35 @@ const handleLogout = async () => {
   color: var(--accent-gold);
 }
 
-.user-name {
+.user-info {
   cursor: pointer;
   display: flex;
   align-items: center;
-  color: var(--bg-card);
-  font-weight: 500;
+  gap: 12px;
   padding: 8px 16px;
   border-radius: 25px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
 }
 
-.user-name:hover {
+.user-info:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: translateY(-1px);
 }
 
+.user-avatar {
+  border: 2px solid var(--accent-gold);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.user-name {
+  display: flex;
+  align-items: center;
+  color: var(--bg-card);
+  font-weight: 500;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .navbar-content {

database/add_avatar_column.sql

@@ -0,0 +1,10 @@
+-- 给用户表添加头像字段的迁移脚本
+-- 执行时间：2025-09-16
+
+USE `coder-test`;
+
+-- 添加头像字段
+ALTER TABLE `user` ADD COLUMN `avatar` VARCHAR(512) DEFAULT NULL COMMENT '用户头像URL' AFTER `nickname`;
+
+-- 验证字段是否添加成功
+DESC `user`;

database/create_tables.sql

@@ -15,6 +15,7 @@ CREATE TABLE `user`
     `username`   VARCHAR(50)  NOT NULL COMMENT '用户名',
     `password`   VARCHAR(255) NOT NULL COMMENT '密码（加密存储）',
     `nickname`   VARCHAR(50) DEFAULT NULL COMMENT '用户昵称',
+    `avatar`     VARCHAR(512) DEFAULT NULL COMMENT '用户头像URL',
     `salary`     INT         DEFAULT 10000 COMMENT '当前薪资（单位：元/月）',
     `createTime` DATETIME    DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
     `updateTime` DATETIME    DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',

src/main/java/com/yupi/codertestbackend/model/entity/User.java

@@ -34,6 +34,11 @@ public class User implements Serializable {
      */
     private String nickname;
 
+    /**
+     * 用户头像URL
+     */
+    private String avatar;
+
     /**
      * 当前薪资（单位：元/月）
      */

src/main/java/com/yupi/codertestbackend/model/vo/UserVO.java

@@ -26,6 +26,11 @@ public class UserVO implements Serializable {
      */
     private String nickname;
 
+    /**
+     * 用户头像URL
+     */
+    private String avatar;
+
     /**
      * 当前薪资（单位：元/月）
      */

src/main/java/com/yupi/codertestbackend/service/impl/UserServiceImpl.java

@@ -11,6 +11,7 @@
 import com.yupi.codertestbackend.model.entity.User;
 import com.yupi.codertestbackend.model.vo.UserVO;
 import com.yupi.codertestbackend.service.UserService;
+import com.yupi.codertestbackend.utils.AvatarUtils;
 import jakarta.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.BeanUtils;
@@ -76,6 +77,11 @@ public String userRegister(UserRegisterRequest userRegisterRequest) {
         if (!saveResult) {
             throw new RuntimeException("注册失败，数据库错误");
         }
+        
+        // 注册成功后设置默认头像（基于用户ID生成固定头像）
+        user.setAvatar(AvatarUtils.getDefaultAvatarByUserId(user.getId()));
+        this.updateById(user);
+        
         return user.getId();
     }
 
@@ -140,6 +146,12 @@ public UserVO getLoginUserVO(User user) {
         }
         UserVO userVO = new UserVO();
         BeanUtils.copyProperties(user, userVO);
+        
+        // 如果用户没有头像，设置默认头像
+        if (StrUtil.isBlank(userVO.getAvatar())) {
+            userVO.setAvatar(AvatarUtils.getDefaultAvatarByUserId(user.getId()));
+        }
+        
         return userVO;
     }
 

src/main/java/com/yupi/codertestbackend/utils/AvatarUtils.java

@@ -0,0 +1,48 @@
+package com.yupi.codertestbackend.utils;
+
+import java.util.Random;
+
+/**
+ * 头像工具类
+ */
+public class AvatarUtils {
+    
+    /**
+     * 默认头像列表（4个）
+     */
+    private static final String[] DEFAULT_AVATARS = {
+        "https://img.icons8.com/color/96/000000/user-male-circle--v1.png",
+        "https://img.icons8.com/color/96/000000/user-female-circle--v1.png", 
+        "https://img.icons8.com/color/96/000000/administrator-male--v1.png",
+        "https://img.icons8.com/color/96/000000/businesswoman--v1.png"
+    };
+    
+    private static final Random random = new Random();
+    
+    /**
+     * 获取随机默认头像
+     * 
+     * @return 默认头像URL
+     */
+    public static String getRandomDefaultAvatar() {
+        int index = random.nextInt(DEFAULT_AVATARS.length);
+        return DEFAULT_AVATARS[index];
+    }
+    
+    /**
+     * 根据用户ID生成固定的默认头像（确保同一用户总是获得相同的默认头像）
+     * 
+     * @param userId 用户ID
+     * @return 默认头像URL
+     */
+    public static String getDefaultAvatarByUserId(String userId) {
+        if (userId == null || userId.isEmpty()) {
+            return getRandomDefaultAvatar();
+        }
+        
+        // 使用用户ID的哈希值来确保相同用户ID总是得到相同的头像
+        int hash = Math.abs(userId.hashCode());
+        int index = hash % DEFAULT_AVATARS.length;
+        return DEFAULT_AVATARS[index];
+    }
+}