diff --git a/music-qianduan/src/components/MusicList.vue b/music-qianduan/src/components/MusicList.vue index 8eef1ca..544003f 100644 --- a/music-qianduan/src/components/MusicList.vue +++ b/music-qianduan/src/components/MusicList.vue @@ -105,6 +105,10 @@ 下载歌词 音乐详情 分享 + + + 从歌单中删除 + @@ -181,10 +185,14 @@ const props = defineProps({ detailInMore: { type: Boolean, default: false + }, + isCreator: { + type: Boolean, + default: false } }) -const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change', 'like-change']) +const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change', 'like-change', 'command']) const router = useRouter() @@ -307,6 +315,12 @@ const toggleLike = async (music) => { // 处理下拉菜单命令 const handleCommand = (command, music) => { + // 对于某些命令,直接 emit 出去给父组件处理 + if (['deleteFromPlaylist'].includes(command)) { + emit('command', command, music) + return + } + switch (command) { case 'addToPlaylist': playerStore.addToPlaylist(music) diff --git a/music-qianduan/src/views/PlaylistDetail.vue b/music-qianduan/src/views/PlaylistDetail.vue index cbc9574..4ed2157 100644 --- a/music-qianduan/src/views/PlaylistDetail.vue +++ b/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" />