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

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

music-qianduan/src/views/Music.vue

@@ -2,12 +2,14 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { Search } from '@element-plus/icons-vue'
-import { getMusicList, getHotMusic, getLatestMusic, processMusicUrl } from '../api/music'
+import { getMusicList, getHotMusic, getLatestMusic, processMusicUrl, getMusicStatus } from '../api/music'
 import { getMusicTypeList } from '../api/musicType'
 import MusicList from '../components/MusicList.vue'
 import { ElMessage } from 'element-plus'
+import { useUserStore } from '../stores/user'
 
 const router = useRouter()
+const userStore = useUserStore()
 
 // 音乐列表数据
 const musicList = ref([])
@@ -43,13 +45,8 @@ const fetchMusicList = async (params = {}) => {
 
       console.log('音乐列表数据:', res.data)
 
-      // 处理收藏状态
+      // 确保音乐URL和封面URL正确处理
       musicList.value.forEach(music => {
-        if (music.collected === undefined) {
-          music.collected = false
-        }
-
-        // 确保音乐URL和封面URL正确处理
         if (music.url) {
           music.url = processMusicUrl(music.url)
         }
@@ -57,6 +54,9 @@ const fetchMusicList = async (params = {}) => {
           music.cover = processMusicUrl(music.cover)
         }
       })
+
+      // 更新音乐状态
+      updateMusicStatuses(musicList.value)
     } else {
       ElMessage.error(res.message || '获取音乐列表失败')
     }
@@ -98,6 +98,27 @@ const handleCollectChange = (music) => {
   console.log('收藏状态变化:', music)
 }
 
+// 更新音乐状态
+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 fetchHotMusic = async (params = {}) => {
   loadingHot.value = true
@@ -108,13 +129,15 @@ const fetchHotMusic = async (params = {}) => {
       const allHotMusic = res.data || []
       total.value = allHotMusic.length // 总数是50
 
-      // 处理URL和收藏状态
+      // 处理URL
       allHotMusic.forEach(music => {
         if (music.url) music.url = processMusicUrl(music.url)
         if (music.cover) music.cover = processMusicUrl(music.cover)
-        if (music.collected === undefined) music.collected = false
       })
 
+      // 更新状态
+      updateMusicStatuses(allHotMusic)
+
       // 根据当前页码和每页数量进行前端分页
       const page = params.page || currentPage.value
       const size = params.size || pageSize.value
@@ -149,10 +172,10 @@ const fetchLatestMusic = async () => {
         if (music.cover) {
           music.cover = processMusicUrl(music.cover)
         }
-        if (music.collected === undefined) {
-          music.collected = false
-        }
       })
+
+      // 更新状态
+      updateMusicStatuses(latestMusicList.value)
     } else {
       ElMessage.error(res.message || '获取最新音乐失败')
     }