feat(music): 添加音乐状态获取功能并优化音乐列表展示

- 新增 getMusicStatus API 接口，用于获取音乐的收藏和点赞状态
- 在音乐列表、歌单详情、搜索结果等页面中集成音乐状态获取功能
- 优化音乐播放器，主动获取并更新音乐状态
- 为每首歌曲添加收藏和点赞状态字段

music-qianduan/src/views/SingerDetail.vue

@@ -7,7 +7,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSingerById, toggleCollectSinger } from '../api/singer'
 import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { processImageUrl } from '../utils/imageUtils'
-import { processMusicUrl, getMusicBySinger } from '../api/music'
+import { processMusicUrl, getMusicBySinger, getMusicStatus } from '../api/music'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
 
 const route = useRoute()
@@ -92,6 +92,9 @@ const fetchSingerMusic = async () => {
         cover: processMusicUrl(song.cover),
         url: processMusicUrl(song.url)
       }))
+
+      // 更新歌曲状态
+      updateMusicStatuses(songs.value)
     } else {
       ElMessage.error(res.message || '获取歌手音乐失败')
     }
@@ -221,6 +224,27 @@ const cancelReply = () => {
   replyContent.value = ''
 }
 
+// 更新音乐状态
+const updateMusicStatuses = async (list) => {
+  if (!userStore.isLoggedIn || !list || list.length === 0) {
+    return
+  }
+
+  // 为列表中的每首歌曲获取状态
+  const promises = list.map(music => getMusicStatus(music.id))
+  try {
+    const results = await Promise.all(promises)
+    results.forEach((res, index) => {
+      if (res.code === 200 && res.data) {
+        list[index].collected = res.data.collected
+        list[index].liked = res.data.liked
+      }
+    })
+  } catch (error) {
+    console.error('批量获取音乐状态失败:', error)
+  }
+}
+
 // 提交评论
 const submitComment = async (isReply = false) => {
   if (!userStore.isLoggedIn) {