feat(singer): 优化歌手收藏功能

- 分离收藏和未收藏状态的 API 调用
- 添加批量获取歌手收藏状态的功能
- 优化收藏/取消收藏逻辑
- 更新前端收藏状态显示

music-qianduan/src/views/Singer.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 { getSingerList, getHotSinger, toggleCollectSinger } from '../api/singer'
+import { getSingerList, getHotSinger, isSingerCollected, collectSinger, uncollectSinger } from '../api/singer'
 import { getSingerTypeList } from '../api/singerType'
 import { processImageUrl } from '../utils/imageUtils'
 
@@ -81,6 +81,7 @@ const fetchSingers = async () => {
         ...singer,
         avatar: processImageUrl(singer.avatar)
       }))
+      updateSingerStatuses(singers.value)
     } else {
       ElMessage.error(res.message || '获取歌手列表失败')
     }
@@ -105,6 +106,7 @@ const fetchHotSingers = async () => {
         ...singer,
         avatar: processImageUrl(singer.avatar)
       }))
+      updateSingerStatuses(hotSingers.value)
     } else {
       ElMessage.error(res.message || '获取热门歌手失败')
     }
@@ -141,7 +143,7 @@ const viewSingerDetail = (id) => {
 }
 
 // 收藏/取消收藏歌手
-const toggleCollect = async (id, event) => {
+const toggleCollect = async (singer, event) => {
   event.stopPropagation()
 
   if (!userStore.isLoggedIn) {
@@ -151,14 +153,16 @@ const toggleCollect = async (id, event) => {
   }
 
   try {
-    const res = await toggleCollectSinger(id)
+    let res
+    if (singer.collected) {
+      res = await uncollectSinger(singer.id)
+    } else {
+      res = await collectSinger(singer.id)
+    }
+
     if (res.code === 200) {
-      // 更新收藏状态
-      const singer = singers.value.find(s => s.id === id)
-      if (singer) {
-        singer.collected = !singer.collected
-        ElMessage.success(singer.collected ? '收藏成功' : '已取消收藏')
-      }
+      singer.collected = !singer.collected
+      ElMessage.success(singer.collected ? '收藏成功' : '已取消收藏')
     } else {
       ElMessage.error(res.message || '操作失败')
     }
@@ -168,6 +172,25 @@ const toggleCollect = async (id, event) => {
   }
 }
 
+// 更新歌手收藏状态
+const updateSingerStatuses = async (list) => {
+  if (!userStore.isLoggedIn || !list || list.length === 0) {
+    return
+  }
+
+  const promises = list.map(singer => isSingerCollected(singer.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 formatFans = (count) => {
   if (count < 10000) {
@@ -236,7 +259,7 @@ onMounted(() => {
                 circle
                 :icon="singer.collected ? 'StarFilled' : 'Star'"
                 :type="singer.collected ? 'warning' : 'primary'"
-                @click="(event) => toggleCollect(singer.id, event)"
+                @click="(event) => toggleCollect(singer, event)"
               ></el-button>
             </div>
           </div>
@@ -269,7 +292,7 @@ onMounted(() => {
                 circle
                 :icon="singer.collected ? 'StarFilled' : 'Star'"
                 :type="singer.collected ? 'warning' : 'primary'"
-                @click="(event) => toggleCollect(singer.id, event)"
+                @click="(event) => toggleCollect(singer, event)"
               ></el-button>
             </div>
           </div>