From e024184bbdd499f9686280ffa84a1f92fcc8197c Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Sun, 27 Jul 2025 15:55:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(playlist):=20=E6=B7=BB=E5=8A=A0=E6=AD=8C?=
=?UTF-8?q?=E5=8D=95=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 在前端 PlaylistDetail组件中添加编辑歌单的对话框和相关逻辑
- 在后端 PlaylistServiceImpl 中实现更新歌单信息和封面的方法
- 优化封面上传逻辑，将物理路径转换为相对路径
---
.../service/impl/PlaylistServiceImpl.java | 7 +-
music-qianduan/src/views/PlaylistDetail.vue | 96 ++++++++++++++++++-
2 files changed, 98 insertions(+), 5 deletions(-)
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(() => {
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+