diff --git a/music-houduan/src/main/java/com/test/musichouduan/service/impl/PlaylistServiceImpl.java b/music-houduan/src/main/java/com/test/musichouduan/service/impl/PlaylistServiceImpl.java index 5903750..545c941 100644 --- a/music-houduan/src/main/java/com/test/musichouduan/service/impl/PlaylistServiceImpl.java +++ b/music-houduan/src/main/java/com/test/musichouduan/service/impl/PlaylistServiceImpl.java @@ -36,6 +36,7 @@ import org.springframework.util.StringUtils; import org.springframework.web.multipart.MultipartFile; import jakarta.persistence.criteria.Predicate; +import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors; @@ -237,7 +238,8 @@ public class PlaylistServiceImpl implements PlaylistService { // 上传封面 String coverUrl = null; if (cover != null && !cover.isEmpty()) { - coverUrl = fileService.uploadImage(cover); + String coverPhysicalPath = fileService.uploadImage(cover); + coverUrl = coverPhysicalPath.replace(System.getProperty("user.dir") + File.separator + "music-houduan", "").replace(File.separator, "/"); } // 创建歌单实体 @@ -286,7 +288,8 @@ public class PlaylistServiceImpl implements PlaylistService { } // 上传新封面 - String coverUrl = fileService.uploadImage(cover); + String coverPhysicalPath = fileService.uploadImage(cover); + String coverUrl = coverPhysicalPath.replace(System.getProperty("user.dir") + File.separator + "music-houduan", "").replace(File.separator, "/"); playlist.setCover(coverUrl); } diff --git a/music-qianduan/src/views/PlaylistDetail.vue b/music-qianduan/src/views/PlaylistDetail.vue index f26af6d..cf9d3f6 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 } from '../api/playlist' +import { getPlaylistById, toggleCollectPlaylist, deletePlaylist as apiDeletePlaylist, isPlaylistCollected, updatePlaylist } 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 工具 @@ -49,6 +49,20 @@ const isCollected = ref(false) // 是否是创建者 const isCreator = ref(false) +// 编辑模态框可见性 +const editDialogVisible = ref(false) + +// 编辑表单数据 +const editForm = ref({ + id: null, + name: '', + description: '', + cover: null +}) + +// 封面预览 URL +const coverPreview = ref('') + // 获取歌单详情 const fetchPlaylistDetail = async () => { loading.value = true @@ -297,8 +311,42 @@ const editPlaylist = () => { return } - // 实际应用中,这里应该跳转到编辑页面或打开编辑对话框 - ElMessage.info('编辑歌单功能开发中') + // 初始化编辑表单 + editForm.value = { + id: playlist.value.id, + name: playlist.value.name, + description: playlist.value.description, + cover: null + } + coverPreview.value = playlist.value.cover + editDialogVisible.value = true +} + +// 处理封面选择 +const handleCoverChange = (file) => { + editForm.value.cover = file.raw + coverPreview.value = URL.createObjectURL(file.raw) +} + +// 提交编辑 +const submitEdit = async () => { + try { + const res = await updatePlaylist(editForm.value.id, { + name: editForm.value.name, + description: editForm.value.description + }, editForm.value.cover) + + if (res.code === 200) { + ElMessage.success('歌单更新成功') + editDialogVisible.value = false + fetchPlaylistDetail() + } else { + ElMessage.error(res.message || '更新失败') + } + } catch (error) { + console.error('更新歌单失败:', error) + ElMessage.error('更新失败,请稍后重试') + } } // 删除歌单 @@ -599,10 +647,52 @@ onUnmounted(() => { + + + + + + + + + + + + + + + + + + +