feat(playlist): 添加歌单内删除歌曲功能

- 在 MusicList 组件中添加删除歌曲选项- 在 PlaylistDetail 组件中实现删除歌曲逻辑
- 优化用户交互，增加删除确认提示和删除成功提示
- 更新歌单歌曲数量和列表显示

music-qianduan/src/views/PlaylistDetail.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { usePlayerStore } from '../stores/player'
 import { useUserStore } from '../stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getPlaylistById, toggleCollectPlaylist, deletePlaylist as apiDeletePlaylist, isPlaylistCollected, updatePlaylist, playPlaylist } from '../api/playlist'
+import { getPlaylistById, toggleCollectPlaylist, deletePlaylist as apiDeletePlaylist, isPlaylistCollected, updatePlaylist, playPlaylist, removeMusicFromPlaylist } from '../api/playlist'
 import { getMusicStatus } from '../api/music'
 import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
@@ -453,6 +453,9 @@ const handleCommand = (command, music) => {
     case 'downloadLyric':
       downloadFile('lyric', music)
       break
+    case 'deleteFromPlaylist':
+      deleteFromPlaylist(music)
+      break
   }
 }
 
@@ -472,6 +475,46 @@ const downloadFile = (type, music) => {
   })
 }
 
+// 从歌单中删除歌曲
+const deleteFromPlaylist = async (music) => {
+  if (!isCreator.value) {
+    ElMessage.warning('只有创建者才能删除歌曲')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(`确定要从歌单中移除歌曲《${music.name}》吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    const res = await removeMusicFromPlaylist(playlistId.value, music.id)
+    if (res.code === 200) {
+      ElMessage.success('歌曲已移除')
+      // 从 UI 中移除歌曲
+      const index = playlist.value.songs.findIndex(s => s.id === music.id)
+      if (index !== -1) {
+        playlist.value.songs.splice(index, 1)
+      }
+      // 更新歌曲数量
+      if (playlist.value.musicCount > 0) {
+        playlist.value.musicCount--
+      }
+      if (playlist.value.songCount > 0) {
+        playlist.value.songCount--
+      }
+    } else {
+      ElMessage.error(res.message || '移除失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('移除歌曲失败:', error)
+      ElMessage.error('移除失败，请稍后重试')
+    }
+  }
+}
+
 // WebSocket 订阅实例
 let commentSubscription = null;
 
@@ -582,6 +625,8 @@ onUnmounted(() => {
             :loading="loading"
             :show-pagination="false"
             :detail-in-more="true"
+            :is-creator="isCreator"
+            @command="handleCommand"
           />
         </el-tab-pane>