diff --git a/music-houduan/src/main/java/com/test/musichouduan/dto/MusicDTO.java b/music-houduan/src/main/java/com/test/musichouduan/dto/MusicDTO.java
index 43d0e07..b4ad32f 100644
--- a/music-houduan/src/main/java/com/test/musichouduan/dto/MusicDTO.java
+++ b/music-houduan/src/main/java/com/test/musichouduan/dto/MusicDTO.java
@@ -54,6 +54,16 @@ public class MusicDTO {
      */
     private Long playCount;
 
+    /**
+     * 点赞数
+     */
+    private Integer likeCount;
+
+    /**
+     * 收藏数
+     */
+    private Integer collectCount;
+
     /**
      * 歌手列表
      */
diff --git a/music-houduan/src/main/java/com/test/musichouduan/service/impl/MusicServiceImpl.java b/music-houduan/src/main/java/com/test/musichouduan/service/impl/MusicServiceImpl.java
index 06a354a..cb9f4f6 100644
--- a/music-houduan/src/main/java/com/test/musichouduan/service/impl/MusicServiceImpl.java
+++ b/music-houduan/src/main/java/com/test/musichouduan/service/impl/MusicServiceImpl.java
@@ -650,6 +650,10 @@ public class MusicServiceImpl implements MusicService {
         MusicDTO musicDTO = new MusicDTO();
         BeanUtils.copyProperties(music, musicDTO);
 
+        // 兜底互动计数，避免前端出现 null
+        musicDTO.setLikeCount(music.getLikeCount() != null ? music.getLikeCount() : 0);
+        musicDTO.setCollectCount(music.getCollectCount() != null ? music.getCollectCount() : 0);
+
         // 确保专辑字段正确复制
         musicDTO.setAlbum(music.getAlbum());
 
diff --git a/music-qianduan/src/views/MusicDetail.vue b/music-qianduan/src/views/MusicDetail.vue
index 9291c85..16a94fd 100644
--- a/music-qianduan/src/views/MusicDetail.vue
+++ b/music-qianduan/src/views/MusicDetail.vue
@@ -54,6 +54,16 @@
                 <span class="label">发行日期：</span>
                 <span class="value">{{ music.releaseDate || '-' }}</span>
               </div>
+
+              <div class="meta-item">
+                <span class="label">点赞数：</span>
+                <span class="value">{{ music.likeCount ?? 0 }}</span>
+              </div>
+
+              <div class="meta-item">
+                <span class="label">收藏数：</span>
+                <span class="value">{{ music.collectCount ?? 0 }}</span>
+              </div>
             </div>
 
             <div class="music-actions">
@@ -321,7 +331,11 @@ const fetchMusicDetail = async () => {
     const res = await getMusicById(id)
     if (res.code === 200) {
       if (res.data) {
-        music.value = res.data
+        music.value = {
+          ...res.data,
+          likeCount: res.data.likeCount ?? 0,
+          collectCount: res.data.collectCount ?? 0
+        }
         // 获取音乐状态
         fetchMusicStatus()
       } else {
@@ -543,6 +557,12 @@ const toggleCollect = async () => {
     if (res.code === 200) {
       // 后端直接返回了最新的收藏状态 (true/false)，直接赋值即可
       music.value.collected = res.data
+      // 仅在操作成功时同步更新本地收藏数
+      if (music.value.collected) {
+        music.value.collectCount = (music.value.collectCount || 0) + 1
+      } else {
+        music.value.collectCount = Math.max(0, (music.value.collectCount || 0) - 1)
+      }
       ElMessage.success(res.message || (music.value.collected ? '收藏成功' : '已取消收藏'))
     } else {
       ElMessage.error(res.message || '操作失败')