feat(playlist): 优化歌单收藏功能

- 新增 collectPlaylist 和 uncollectPlaylist 函数，分别用于收藏和取消收藏歌单- 重构 toggleCollectPlaylist 函数，使用新增的两个函数实现收藏和取消收藏
- 在 Playlist组件中实现批量更新歌单收藏状态的功能
- 优化收藏按钮点击逻辑，根据歌单的 collected 属性决定是收藏还是取消收藏

music-qianduan/src/api/playlist.js

@@ -286,6 +286,24 @@ export function deletePlaylist(id) {
   return api.delete(`/playlist/${id}`)
 }
 
+/**
+ * 收藏歌单
+ * @param {number} id 歌单ID
+ * @returns {Promise<any>}
+ */
+export function collectPlaylist(id) {
+  return api.post(`/playlist/${id}/collect`)
+}
+
+/**
+ * 取消收藏歌单
+ * @param {number} id 歌单ID
+ * @returns {Promise<any>}
+ */
+export function uncollectPlaylist(id) {
+  return api.delete(`/playlist/${id}/collect`)
+}
+
 /**
  * 收藏/取消收藏歌单
  * @param {number} id 歌单ID
@@ -294,9 +312,9 @@ export function deletePlaylist(id) {
  */
 export function toggleCollectPlaylist(id, isCollected) {
   if (isCollected) {
-    return api.delete(`/playlist/${id}/collect`)
+    return uncollectPlaylist(id)
   } else {
-    return api.post(`/playlist/${id}/collect`)
+    return collectPlaylist(id)
   }
 }
 

music-qianduan/src/views/Playlist.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
-import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist } from '../api/playlist'
+import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist, isPlaylistCollected, uncollectPlaylist, collectPlaylist } from '../api/playlist'
 import { getPlaylistTypeList } from '../api/playlistType'
 
 const router = useRouter()
@@ -89,6 +89,7 @@ const fetchPlaylists = async () => {
     if (res.code === 200) {
       playlists.value = res.data.list || res.data.records || []
       total.value = res.data.total || 0
+      updatePlaylistStatuses(playlists.value)
     } else {
       ElMessage.error(res.message || '获取歌单列表失败')
     }
@@ -107,6 +108,7 @@ const fetchHotPlaylists = async () => {
     const res = await getHotPlaylist(8) // 获取8个热门歌单
     if (res.code === 200) {
       hotPlaylists.value = res.data || []
+      updatePlaylistStatuses(hotPlaylists.value)
     } else {
       ElMessage.error(res.message || '获取热门歌单失败')
     }
@@ -143,7 +145,7 @@ const viewPlaylistDetail = (id) => {
 }
 
 // 收藏/取消收藏歌单
-const toggleCollect = async (id) => {
+const toggleCollect = async (playlist) => {
   if (!userStore.isLoggedIn) {
     ElMessage.warning('请先登录')
     router.push('/login')
@@ -151,14 +153,16 @@ const toggleCollect = async (id) => {
   }
 
   try {
-    const res = await toggleCollectPlaylist(id)
+    let res
+    if (playlist.collected) {
+      res = await uncollectPlaylist(playlist.id)
+    } else {
+      res = await collectPlaylist(playlist.id)
+    }
+
     if (res.code === 200) {
-      // 更新收藏状态
-      const playlist = playlists.value.find(p => p.id === id)
-      if (playlist) {
       playlist.collected = !playlist.collected
       ElMessage.success(playlist.collected ? '收藏成功' : '已取消收藏')
-      }
     } else {
       ElMessage.error(res.message || '操作失败')
     }
@@ -168,6 +172,25 @@ const toggleCollect = async (id) => {
   }
 }
 
+// 更新歌单收藏状态
+const updatePlaylistStatuses = async (list) => {
+  if (!userStore.isLoggedIn || !list || list.length === 0) {
+    return
+  }
+
+  const promises = list.map(playlist => isPlaylistCollected(playlist.id))
+  try {
+    const results = await Promise.all(promises)
+    results.forEach((res, index) => {
+      if (res.code === 200) {
+        list[index].collected = res.data
+      }
+    })
+  } catch (error) {
+    console.error('批量获取歌单收藏状态失败:', error)
+  }
+}
+
 // 格式化播放次数
 const formatPlayCount = (count) => {
   if (count < 10000) {
@@ -246,7 +269,7 @@ onMounted(() => {
                   circle
                   :icon="playlist.collected ? 'StarFilled' : 'Star'"
                   :type="playlist.collected ? 'warning' : ''"
-                  @click.stop="toggleCollect(playlist.id)"
+                  @click.stop="toggleCollect(playlist)"
                 ></el-button>
               </div>
             </div>
@@ -290,7 +313,7 @@ onMounted(() => {
                   circle
                   :icon="playlist.collected ? 'StarFilled' : 'Star'"
                   :type="playlist.collected ? 'warning' : ''"
-                  @click.stop="toggleCollect(playlist.id)"
+                  @click.stop="toggleCollect(playlist)"
                 ></el-button>
               </div>
             </div>

music-qianduan/src/views/SingerDetail.vue

@@ -195,7 +195,13 @@ const toggleCollect = async () => {
   }
 
   try {
-    const res = await toggleCollectSinger(singerId.value, isCollected.value)
+    let res
+    if (isCollected.value) {
+      res = await uncollectSinger(singerId.value)
+    } else {
+      res = await collectSinger(singerId.value)
+    }
+
     if (res.code === 200) {
       isCollected.value = !isCollected.value
       // 更新收藏数