feat(playlist): 实现热门歌单缓存更新功能

- 添加定时任务每小时更新热门歌单缓存
- 实现分页查询所有歌单并计算热门分数- 使用并行流提升歌单评分计算性能
- 按照热门分数排序并限制返回数量
- 将热门歌单列表序列化后存入Redis缓存
- 添加详细的JavaDoc注释说明方法用途
-优化查询逻辑中的条件组合说明- 增强错误处理和日志记录机制

music-houduan/pom.xml

@@ -97,6 +97,13 @@
             <artifactId>spring-boot-starter-websocket</artifactId>
         </dependency>
 
+        <!-- Hutool工具库 -->
+        <dependency>
+            <groupId>cn.hutool</groupId>
+            <artifactId>hutool-all</artifactId>
+            <version>5.8.22</version>
+        </dependency>
+
         <!-- 工具类 -->
         <dependency>
             <groupId>org.apache.commons</groupId>

music-houduan/src/main/java/com/test/musichouduan/config/LocalDateTimeDeserializer.java

@@ -0,0 +1,38 @@
+package com.test.musichouduan.config;
+
+import com.fasterxml.jackson.core.JsonParser;
+import com.fasterxml.jackson.databind.DeserializationContext;
+import com.fasterxml.jackson.databind.JsonDeserializer;
+
+import java.io.IOException;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+
+public class LocalDateTimeDeserializer extends JsonDeserializer<LocalDateTime> {
+
+    private static final DateTimeFormatter FORMATTER_DATETIME = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
+    private static final DateTimeFormatter FORMATTER_DATE = DateTimeFormatter.ofPattern("yyyy-MM-dd");
+
+    @Override
+    public LocalDateTime deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
+        String str = p.getText().trim();
+        if (str.isEmpty()) {
+            return null;
+        }
+
+        try {
+            // 尝试解析 "yyyy-MM-dd HH:mm:ss" 格式
+            return LocalDateTime.parse(str, FORMATTER_DATETIME);
+        } catch (DateTimeParseException e) {
+            // 如果失败，尝试解析 "yyyy-MM-dd" 格式
+            try {
+                LocalDate date = LocalDate.parse(str, FORMATTER_DATE);
+                return date.atStartOfDay();
+            } catch (DateTimeParseException e2) {
+                throw new IOException(e2);
+            }
+        }
+    }
+}

music-houduan/src/main/java/com/test/musichouduan/config/SaTokenConfig.java

@@ -19,16 +19,10 @@ public class SaTokenConfig implements WebMvcConfigurer {
         // 注册Sa-Token拦截器，打开注解式鉴权功能
         registry.addInterceptor(new SaInterceptor(handle -> {
             // 打印调试信息
-            System.out.println("\n=== Sa-Token 拦截器检查登录状态 ===\n");
-
             // 获取当前登录用户ID
             Object loginId = StpUtil.getLoginIdDefaultNull();
-            System.out.println("当前登录用户ID: " + loginId);
-
             // 获取当前用户角色
             List<String> roleList = StpUtil.getRoleList();
-            System.out.println("当前用户角色: " + roleList);
-
             // 检查登录状态
             StpUtil.checkLogin();
         }))

music-houduan/src/main/java/com/test/musichouduan/config/StpInterfaceImpl.java

@@ -45,9 +45,6 @@ public class StpInterfaceImpl implements StpInterface {
             } else {
                 roles.add("user");
             }
-            
-            // 打印调试信息
-            System.out.println("用户ID: " + userId + ", 角色: " + roles);
         });
         
         return roles;

music-houduan/src/main/java/com/test/musichouduan/dto/MusicDTO.java

@@ -1,6 +1,8 @@
 package com.test.musichouduan.dto;
 
 import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.test.musichouduan.config.LocalDateTimeDeserializer;
 import lombok.Data;
 
 import java.time.LocalDateTime;
@@ -101,6 +103,7 @@ public class MusicDTO {
      * 发行日期
      */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime releaseDate;
 
     /**
@@ -117,12 +120,14 @@ public class MusicDTO {
      * 创建时间
      */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime createTime;
 
     /**
      * 收藏时间
      */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime collectTime;
 
     /**

music-houduan/src/main/java/com/test/musichouduan/dto/PlaylistDTO.java

@@ -1,5 +1,8 @@
 package com.test.musichouduan.dto;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.test.musichouduan.config.LocalDateTimeDeserializer;
 import jakarta.persistence.Column;
 import lombok.Data;
 
@@ -92,6 +95,8 @@ public class PlaylistDTO {
     /**
      * 创建时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime createTime;
 
     /**
@@ -102,5 +107,7 @@ public class PlaylistDTO {
     /**
      * 收藏时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime collectTime;
 }

music-houduan/src/main/java/com/test/musichouduan/dto/SingerDTO.java

@@ -1,5 +1,8 @@
 package com.test.musichouduan.dto;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.test.musichouduan.config.LocalDateTimeDeserializer;
 import jakarta.persistence.Column;
 import lombok.Data;
 
@@ -70,6 +73,8 @@ public class SingerDTO {
     /**
      * 创建时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime createTime;
 
     /**

music-houduan/src/main/java/com/test/musichouduan/dto/UserDTO.java

@@ -1,5 +1,8 @@
 package com.test.musichouduan.dto;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.test.musichouduan.config.LocalDateTimeDeserializer;
 import lombok.Data;
 
 import java.time.LocalDateTime;
@@ -63,6 +66,8 @@ public class UserDTO {
     /**
      * 创建时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
     private LocalDateTime createTime;
 
     /**

music-houduan/src/main/java/com/test/musichouduan/entity/UserCollectPlaylist.java

@@ -35,6 +35,7 @@ public class UserCollectPlaylist {
     /**
      * 收藏时间
      */
+    @CreationTimestamp
     @Column(nullable = false, updatable = false)
-    private LocalDateTime collectTime;
+    private LocalDateTime createTime;
 }

music-houduan/src/main/java/com/test/musichouduan/repository/CommentRepository.java

@@ -34,6 +34,14 @@ public interface CommentRepository extends JpaRepository<Comment, Long>, JpaSpec
      */
     List<Comment> findByParentIdOrderByCreateTimeAsc(Long parentId);
 
+    /**
+     * 根据父评论ID列表查询所有子评论
+     *
+     * @param parentIds 父评论ID列表
+     * @return 子评论列表
+     */
+    List<Comment> findByParentIdInOrderByCreateTimeAsc(List<Long> parentIds);
+
     /**
      * 根据用户查询评论
      *

music-houduan/src/main/java/com/test/musichouduan/service/impl/BannerServiceImpl.java

@@ -101,7 +101,8 @@ public class BannerServiceImpl implements BannerService {
 
             // 上传新图片
             String imageUrl = fileService.uploadImage(image);
-            banner.setImageUrl(imageUrl); // imageUrl已经是 /upload/images/... 格式
+            String Url = imageUrl.replace(System.getProperty("user.dir") + File.separator + "music-houduan", "").replace(File.separator, "/");
+            banner.setImageUrl(Url); // imageUrl已经是 /upload/images/... 格式
         }
 
         // 更新轮播图信息

music-houduan/src/main/java/com/test/musichouduan/service/impl/CommentServiceImpl.java

@@ -74,16 +74,28 @@ public class CommentServiceImpl implements CommentService {
                 .map(this::convertToDTO)
                 .collect(Collectors.toList());
 
-        // 获取子评论
+        // 优化：一次性获取所有子评论
-        for (CommentDTO commentDTO : commentDTOs) {
+        // 1. 获取所有父评论的ID
-            List<Comment> children = commentRepository.findByParentIdOrderByCreateTimeAsc(commentDTO.getId());
+        List<Long> parentIds = commentDTOs.stream()
-            if (!children.isEmpty()) {
+                                          .map(CommentDTO::getId)
-                commentDTO.setChildren(children.stream()
+                                          .collect(Collectors.toList());
+
+        // 2. 如果有父评论，则一次性查询出它们所有的子评论
+        if (!parentIds.isEmpty()) {
+            List<Comment> allChildren = commentRepository.findByParentIdInOrderByCreateTimeAsc(parentIds);
+
+            // 3. 将子评论按其父ID分组
+            java.util.Map<Long, List<CommentDTO>> childrenMap = allChildren.stream()
                     .map(this::convertToDTO)
-                        .collect(Collectors.toList()));
+                    .collect(Collectors.groupingBy(CommentDTO::getParentId));
+
+            // 4. 将子评论列表设置到对应的父评论DTO中
+            commentDTOs.forEach(parentDTO -> parentDTO.setChildren(
+                    childrenMap.getOrDefault(parentDTO.getId(), new ArrayList<>())
+            ));
         } else {
-                commentDTO.setChildren(new ArrayList<>());
+            // 如果没有父评论，确保children字段不是null
-            }
+            commentDTOs.forEach(parentDTO -> parentDTO.setChildren(new ArrayList<>()));
         }
 
         return new PageResult<>(

music-houduan/src/main/java/com/test/musichouduan/service/impl/PlaylistServiceImpl.java

@@ -83,38 +83,54 @@ public class PlaylistServiceImpl implements PlaylistService {
     private FileService fileService;
 
     @Override
+    /**
+     * 根据歌单ID获取歌单信息
+     * @param id 歌单的唯一标识符
+     * @return PlaylistDTO 歌单的数据传输对象，包含歌单的详细信息
+     * @throws BusinessException 当指定的歌单不存在时抛出业务异常
+     */
     public PlaylistDTO getPlaylistById(Long id) {
+        // 从数据库中查找指定ID的歌单，如果不存在则抛出业务异常
         Playlist playlist = playlistRepository.findById(id)
                 .orElseThrow(() -> new BusinessException("歌单不存在"));
+        // 将实体对象转换为DTO对象并返回
         return convertToDTO(playlist);
     }
 
     @Override
+    /**
+     * 获取歌单列表
+     * @param page 当前页码
+     * @param size 每页大小
+     * @param keyword 搜索关键词
+     * @param typeId 歌单类型ID
+     * @return PageResult<PlaylistDTO> 歌单列表分页结果
+     */
     public PageResult<PlaylistDTO> getPlaylistList(Integer page, Integer size, String keyword, Long typeId) {
         // 构建查询条件
         Specification<Playlist> spec = (root, query, cb) -> {
             List<Predicate> predicates = new ArrayList<>();
-            query.distinct(true); // 添加 distinct 查询
+            query.distinct(true); // 添加 distinct 查询，避免重复结果
 
             // 关键字查询
             if (StringUtils.hasText(keyword)) {
                 // 搜索歌单名、描述、创建者用户名以及歌单内的音乐名
-                Predicate p1 = cb.like(root.get("name"), "%" + keyword + "%");
+                Predicate p1 = cb.like(root.get("name"), "%" + keyword + "%"); // 匹配歌单名
-                Predicate p2 = cb.like(root.get("description"), "%" + keyword + "%");
+                Predicate p2 = cb.like(root.get("description"), "%" + keyword + "%"); // 匹配歌单描述
-                Predicate p3 = cb.like(root.join("creator").get("username"), "%" + keyword + "%");
+                Predicate p3 = cb.like(root.join("creator").get("username"), "%" + keyword + "%"); // 匹配创建者用户名
-                Predicate p4 = cb.like(root.join("musics", jakarta.persistence.criteria.JoinType.LEFT).get("name"), "%" + keyword + "%");
+                Predicate p4 = cb.like(root.join("musics", jakarta.persistence.criteria.JoinType.LEFT).get("name"), "%" + keyword + "%"); // 匹配歌单内的音乐名
-                predicates.add(cb.or(p1, p2, p3, p4));
+                predicates.add(cb.or(p1, p2, p3, p4)); // 将多个查询条件组合为OR关系
             }
 
             // 类型查询
             if (typeId != null) {
-                predicates.add(cb.equal(root.get("type").get("id"), typeId));
+                predicates.add(cb.equal(root.get("type").get("id"), typeId)); // 添加类型ID查询条件
             }
 
-            return cb.and(predicates.toArray(new Predicate[0]));
+            return cb.and(predicates.toArray(new Predicate[0])); // 将所有查询条件组合为AND关系
         };
 
-        // 执行查询
+        // 执行查询，按创建时间降序排列
         Page<Playlist> playlistPage = playlistRepository.findAll(
                 spec,
                 PageRequest.of(page - 1, size, Sort.by(Sort.Direction.DESC, "createTime"))
@@ -173,46 +189,80 @@ public class PlaylistServiceImpl implements PlaylistService {
         }
     }
 
+/**
+ * 定时任务方法：用于更新热门歌单缓存
+ * 使用@Scheduled注解配置定时任务，cron表达式设置为"0 0 * * * ?"
+ * 表示每小时整点执行一次任务（即每小时的0分0秒触发）
+ */
     @Scheduled(cron = "0 0 * * * ?")
     public void scheduleUpdateHotPlaylist() {
+    // 打印任务开始日志
         System.out.println("Scheduled task started: Updating hot playlist cache...");
+    // 调用更新热门歌单缓存的方法
         updateHotPlaylistCache();
     }
 
+/**
+ * 更新热门歌单缓存的方法
+ * 使用异步方式和只读事务注解
+ * @return 返回包含热门歌单DTO列表的CompletableFuture
+ */
     @Async
     @Transactional(readOnly = true)
     public CompletableFuture<List<PlaylistDTO>> updateHotPlaylistCache() {
+    // 用于存储所有歌单的列表
         List<Playlist> allPlaylists = new ArrayList<>();
+    // 分页查询结果对象
         Page<Playlist> playlistPage;
+    // 当前页码，从0开始
         int pageNum = 0;
+    // 每页大小，设置为500
         int pageSize = 500;
 
+    // 分页查询所有歌单，直到没有更多数据
         do {
+        // 创建分页对象
             Pageable pageable = PageRequest.of(pageNum, pageSize);
+        // 执行分页查询
             playlistPage = playlistRepository.findAll(pageable);
+        // 将当前页的歌单添加到总列表中
             allPlaylists.addAll(playlistPage.getContent());
+        // 页码递增
             pageNum++;
         } while (playlistPage.hasNext());
 
+    // 使用并行流为每个歌单计算热门分数
         allPlaylists.parallelStream().forEach(playlist -> {
+        // 计算热门歌单分数
             double score = HotPlaylistScoreUtil.calculateHotScore(playlist);
+        // 设置歌单的热门分数
             playlist.setHotScore(score);
         });
 
+    // 将歌单按热门分数降序排序，并限制热门歌单数量
         List<PlaylistDTO> sortedHotPlaylists = allPlaylists.stream()
+            // 按热门分数降序排序
                 .sorted(Comparator.comparing(Playlist::getHotScore).reversed())
+            // 限制热门歌单数量
                 .limit(HOT_PLAYLIST_LIMIT)
+            // 将歌单实体转换为DTO对象
                 .map(this::convertToDTO)
+            // 收集为列表
                 .collect(Collectors.toList());
 
         try {
+        // 将热门歌单列表转换为JSON字符串
             String jsonToCache = objectMapper.writeValueAsString(sortedHotPlaylists);
+        // 将JSON字符串存入Redis缓存，设置过期时间
             redisTemplate.opsForValue().set(HOT_PLAYLIST_CACHE_KEY, jsonToCache, CACHE_EXPIRATION_HOURS, TimeUnit.HOURS);
+        // 打印更新成功的日志
             System.out.println("Hot playlist cache updated successfully with " + sortedHotPlaylists.size() + " items.");
         } catch (Exception e) {
+        // 打印更新失败的错误信息
             System.err.println("Failed to cache hot playlist list to Redis: " + e.getMessage());
         }
 
+    // 返回包含热门歌单DTO列表的CompletableFuture
         return CompletableFuture.completedFuture(sortedHotPlaylists);
     }
 
@@ -368,22 +418,29 @@ public class PlaylistServiceImpl implements PlaylistService {
 
         // 检查是否已收藏
         if (userCollectPlaylistRepository.existsByUserAndPlaylist(user, playlist)) {
-            throw new BusinessException("已收藏该歌单");
+            // 已收藏则取消收藏
-        }
+            userCollectPlaylistRepository.deleteByUserAndPlaylist(user, playlist);
 
-        // 收藏歌单
+            // 更新收藏数
+            playlist.setCollectCount((playlist.getCollectCount() == null ? 0 : playlist.getCollectCount()) - 1);
+            playlistRepository.save(playlist);
+
+            return false; // 表示取消收藏
+        } else {
+            // 未收藏则进行收藏
             com.test.musichouduan.entity.UserCollectPlaylist userCollectPlaylist = new com.test.musichouduan.entity.UserCollectPlaylist();
             userCollectPlaylist.setUser(user);
             userCollectPlaylist.setPlaylist(playlist);
-        userCollectPlaylist.setCollectTime(java.time.LocalDateTime.now());
             userCollectPlaylistRepository.save(userCollectPlaylist);
 
             // 更新收藏数
             playlist.setCollectCount((playlist.getCollectCount() == null ? 0 : playlist.getCollectCount()) + 1);
             playlistRepository.save(playlist);
 
-        return true;
+            return true; // 表示收藏成功
         }
+    }
+
 
     @Override
     @Transactional
@@ -429,7 +486,7 @@ public class PlaylistServiceImpl implements PlaylistService {
         // 获取用户收藏的歌单
         Page<Playlist> playlistPage = userCollectPlaylistRepository.findCollectedPlaylist(
                 userId,
-                PageRequest.of(page - 1, size, Sort.by(Sort.Direction.DESC, "collectTime"))
+                PageRequest.of(page - 1, size, Sort.by(Sort.Direction.DESC, "createTime"))
         );
 
         // 转换为DTO
@@ -438,7 +495,7 @@ public class PlaylistServiceImpl implements PlaylistService {
                     PlaylistDTO dto = convertToDTO(playlist);
                     // 从收藏记录中获取收藏时间
                     userCollectPlaylistRepository.findByUserIdAndPlaylistId(userId, playlist.getId())
-                            .ifPresent(ucp -> dto.setCollectTime(ucp.getCollectTime()));
+                            .ifPresent(ucp -> dto.setCollectTime(ucp.getCreateTime()));
                     return dto;
                 })
                 .collect(Collectors.toList());

music-houduan/src/main/java/com/test/musichouduan/service/impl/SingerServiceImpl.java

@@ -1,6 +1,8 @@
 package com.test.musichouduan.service.impl;
 
 import cn.dev33.satoken.stp.StpUtil;
+import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.core.util.StrUtil;
 import com.test.musichouduan.dto.PageResult;
 import com.test.musichouduan.dto.SingerDTO;
 import com.test.musichouduan.dto.MusicDTO;
@@ -225,6 +227,12 @@ public class SingerServiceImpl implements SingerService {
         singer.setAvatar(avatarUrl);
         singer.setIntroduction(singerDTO.getIntroduction());
         singer.setCollectCount(0);
+        // 设置默认歌手类型
+        if (ObjectUtil.isEmpty(singerDTO.getTypeId())){
+            SingerType defaultType = singerTypeRepository.findById(1L)
+                    .orElseThrow(() -> new BusinessException("默认歌手类型不存在"));
+            singer.setType(defaultType);
+        }
 
         // 设置歌手类型
         if (singerDTO.getTypeId() != null) {

music-qianduan/src/views/Music.vue

@@ -136,7 +136,7 @@ const fetchHotMusic = async (params = {}) => {
       })
 
       // 更新状态
-      updateMusicStatuses(allHotMusic)
+      await updateMusicStatuses(allHotMusic)
 
       // 根据当前页码和每页数量进行前端分页
       const page = params.page || currentPage.value

music-qianduan/src/views/MusicDetail.vue

@@ -129,8 +129,9 @@
 
           <div class="comment-list">
             <div v-for="comment in comments" :key="comment.id" class="comment-item">
+              <!-- 一级评论 -->
               <div class="comment-avatar">
-                <el-avatar :src="comment.user.avatar" :size="40" />
+                <el-avatar :src="processImageUrl(comment.user.avatar)" :size="40" />
               </div>
               <div class="comment-content">
                 <div class="comment-header">
@@ -150,19 +151,69 @@
                 <div class="comment-text">{{ comment.content }}</div>
                 <div class="comment-footer">
                   <div class="comment-time">{{ comment.createTime }}</div>
+                  <el-button type="text" size="small" @click="toggleReplies(comment)">
+                    {{ expandedComments.includes(comment.id) ? '收起回复' : `查看回复 (${comment.children ? comment.children.length : 0})` }}
+                  </el-button>
                 </div>
-                <div v-if="replyingTo && replyingTo.id === comment.id" class="comment-input child-comment-input">
+
+                <!-- 回复输入框 -->
+                <div v-if="replyingTo === comment.id" class="comment-input child-comment-input">
                   <el-input
                     v-model="replyContent"
                     type="textarea"
                     :rows="2"
-                    :placeholder="`回复 @${replyingTo.user.username}`"
+                    :placeholder="`回复 @${replyTo.user.username}`"
                   />
                   <div class="comment-submit-actions">
                     <el-button type="primary" size="small" @click="submitComment(true)">回复</el-button>
                     <el-button size="small" @click="cancelReply">取消</el-button>
                   </div>
                 </div>
+
+                <!-- 二级评论 -->
+                <div v-if="expandedComments.includes(comment.id) && comment.children && comment.children.length > 0" class="child-comments">
+                  <div v-for="child in comment.children" :key="child.id" class="comment-item">
+                    <div class="comment-avatar">
+                      <el-avatar :src="processImageUrl(child.user.avatar)" :size="32" />
+                    </div>
+                    <div class="comment-content">
+                      <div class="comment-header">
+                        <div class="comment-user">{{ child.user.username }}</div>
+                        <div class="comment-actions">
+                          <el-button type="text" size="small" @click="setReplyTo(child)">回复</el-button>
+                          <el-button
+                            v-if="userStore.isAdmin || child.user.id === userStore.user?.id"
+                            type="danger"
+                            size="small"
+                            @click="deleteComment(child.id)"
+                          >
+                            删除
+                          </el-button>
+                        </div>
+                      </div>
+                      <div class="comment-text">
+                        <span v-if="child.parentCommentUser" class="reply-to">@{{ child.parentCommentUser.username }}</span>
+                        {{ child.content }}
+                      </div>
+                      <div class="comment-footer">
+                        <div class="comment-time">{{ child.createTime }}</div>
+                      </div>
+                      <!-- 二级回复输入框 -->
+                      <div v-if="replyingTo === child.id" class="comment-input child-comment-input">
+                        <el-input
+                          v-model="replyContent"
+                          type="textarea"
+                          :rows="2"
+                          :placeholder="`回复 @${replyTo.user.username}`"
+                        />
+                        <div class="comment-submit-actions">
+                          <el-button type="primary" size="small" @click="submitComment(true, child.id)">回复</el-button>
+                          <el-button size="small" @click="cancelReply">取消</el-button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
             <el-empty v-if="!comments.length" description="还没有评论，快来抢沙发吧！" />
@@ -210,6 +261,7 @@ import { getCommentList, addComment, deleteComment as apiDeleteComment } from '.
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { VideoPlay, VideoPause, Star, StarFilled, Plus } from '@element-plus/icons-vue'
+import { processImageUrl } from '../utils/imageUtils'
 
 const route = useRoute()
 const router = useRouter()
@@ -226,6 +278,7 @@ const comments = ref([])
 const commentContent = ref('')
 const replyContent = ref('')
 const replyingTo = ref(null)
+const replyTo = ref(null)
 const expandedComments = ref([])
 let commentSubscription = null;
 
@@ -351,7 +404,7 @@ const submitComment = async (isReply = false) => {
       targetId: music.value.id,
       targetType: 1, // 1表示音乐
       content: content,
-      parentId: isReply ? replyingTo.value.id : null,
+      parentId: isReply ? replyingTo.value : null,
     });
 
     if (res.code === 200) {
@@ -398,15 +451,34 @@ const deleteComment = async (commentId) => {
 
 // 设置回复对象
 const setReplyTo = (comment) => {
-  replyingTo.value = comment;
+  replyingTo.value = comment.id;
+  replyTo.value = comment;
+  if (!expandedComments.value.includes(comment.id)) {
+    expandedComments.value.push(comment.id);
+  }
 };
 
 // 取消回复
 const cancelReply = () => {
   replyingTo.value = null;
+  replyTo.value = null;
   replyContent.value = '';
 };
 
+// 切换回复可见性
+const toggleReplies = (comment) => {
+  const commentId = comment.id;
+  const index = expandedComments.value.indexOf(commentId);
+  if (index > -1) {
+    expandedComments.value.splice(index, 1);
+    if (replyingTo.value === commentId) {
+      cancelReply();
+    }
+  } else {
+    expandedComments.value.push(commentId);
+  }
+};
+
 // WebSocket 订阅
 const setupWebSocket = () => {
   if (!music.value) return;
@@ -414,10 +486,30 @@ const setupWebSocket = () => {
     const destination = `/topic/comments/1/${music.value.id}`; // 1 代表音乐类型
     commentSubscription = subscribe(destination, (newComment) => {
       if (newComment && newComment.id) {
-        // 简单处理：直接重新拉取整个评论列表
+        if (newComment.user && newComment.user.avatar) {
-        fetchComments();
+          newComment.user.avatar = processImageUrl(newComment.user.avatar);
+        }
+
+        if (newComment.parentId) {
+          const parentComment = comments.value.find(c => c.id === newComment.parentId);
+          if (parentComment) {
+            if (!parentComment.children) {
+              parentComment.children = [];
+            }
+            parentComment.children.push(newComment);
+          }
+        } else {
+          if (!comments.value.some(c => c.id === newComment.id)) {
+            comments.value.unshift(newComment);
+          }
+        }
+      } else {
+        console.warn("Received invalid comment data via WebSocket:", newComment);
       }
     });
+  }, (error) => {
+      console.error("WebSocket connection error:", error);
+      // ElMessage.error('评论服务连接失败，实时更新不可用');
   });
 };
 

music-qianduan/src/views/admin/Singer.vue

@@ -261,7 +261,7 @@ const submitForm = async () => {
     const singerData = {
       name: form.value.name,
       introduction: form.value.introduction,
-      type: form.value.typeId ? { id: form.value.typeId } : null
+      typeId: form.value.typeId || null
     }
 
     let res

music-qianduan/src/views/user/CollectSinger.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getCollectedSinger, toggleCollectSinger } from '../../api/singer'
+import { getCollectedSinger, uncollectSinger } from '../../api/singer'
 import { processImageUrl } from '../../utils/imageUtils'
 
 const router = useRouter()
@@ -59,7 +59,7 @@ const cancelCollect = (id, event) => {
     type: 'warning'
   }).then(async () => {
     try {
-      const res = await toggleCollectSinger(id)
+      const res = await uncollectSinger(id)
       if (res.code === 200) {
         // 从列表中移除该歌手
         collectSingers.value = collectSingers.value.filter(item => item.id !== id)