diff --git a/music-qianduan/src/views/PlaylistDetail.vue b/music-qianduan/src/views/PlaylistDetail.vue
index 2821a9f..920ca72 100644
--- a/music-qianduan/src/views/PlaylistDetail.vue
+++ b/music-qianduan/src/views/PlaylistDetail.vue
@@ -7,6 +7,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { getPlaylistById, toggleCollectPlaylist, deletePlaylist as apiDeletePlaylist } from '../api/playlist'
import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
+import { processImageUrl } from '../utils/imageUtils'
const route = useRoute()
const router = useRouter()
@@ -25,6 +26,18 @@ const comments = ref([])
// 评论内容
const commentContent = ref('')
+// 回复内容
+const replyContent = ref('')
+
+// 回复对象
+const replyTo = ref(null)
+
+// 正在回复的评论
+const replyingTo = ref(null)
+
+// 展开的评论
+const expandedComments = ref([])
+
// 加载状态
const loading = ref(false)
@@ -158,15 +171,48 @@ const deleteComment = async (commentId) => {
}
}
+// 切换回复可见性
+const toggleReplies = (comment) => {
+ const commentId = comment.id;
+ const index = expandedComments.value.indexOf(commentId);
+ if (index > -1) {
+ expandedComments.value.splice(index, 1);
+ if (replyingTo.value === commentId) {
+ cancelReply();
+ }
+ } else {
+ expandedComments.value.push(commentId);
+ setReplyTo(comment);
+ }
+};
+
+// 设置回复
+const setReplyTo = (comment) => {
+ replyingTo.value = comment.id;
+ replyTo.value = comment;
+ replyContent.value = `@${comment.user.username} `;
+ if (!expandedComments.value.includes(comment.id)) {
+ expandedComments.value.push(comment.id);
+ }
+}
+
+// 取消回复
+const cancelReply = () => {
+ replyingTo.value = null
+ replyTo.value = null
+ replyContent.value = ''
+}
+
// 提交评论
-const submitComment = async () => {
+const submitComment = async (isReply = false) => {
if (!userStore.isLoggedIn) {
ElMessage.warning('请先登录')
router.push('/login')
return
}
- if (!commentContent.value.trim()) {
+ const content = isReply ? replyContent.value : commentContent.value
+ if (!content.trim()) {
ElMessage.warning('评论内容不能为空')
return
}
@@ -175,14 +221,17 @@ const submitComment = async () => {
const res = await addComment({
targetId: playlistId.value,
targetType: 2, // 2表示歌单
- content: commentContent.value
+ content: content,
+ parentId: isReply ? replyingTo.value : null
})
if (res.code === 200) {
- // 添加成功，评论将通过 WebSocket 推送，无需手动刷新
- // await fetchComments() // 移除手动刷新
- commentContent.value = ''
- ElMessage.success('评论已发送') // 提示语可以调整
+ if (isReply) {
+ replyContent.value = ''
+ } else {
+ commentContent.value = ''
+ }
+ ElMessage.success('评论已发送')
} else {
ElMessage.error(res.message || '评论失败')
}
@@ -259,15 +308,26 @@ onMounted(() => {
connect(() => {
const destination = `/topic/comments/2/${playlistId.value}`; // 2 代表歌单类型
commentSubscription = subscribe(destination, (newComment) => {
- // 收到新评论，添加到列表开头
if (newComment && newComment.id) {
- // 检查是否已存在（防止重复添加，虽然理论上不应发生）
- if (!comments.value.some(c => c.id === newComment.id)) {
- comments.value.unshift(newComment); // 添加到开头
- console.log('New comment received via WebSocket:', newComment);
- }
+ if (newComment.user && newComment.user.avatar) {
+ newComment.user.avatar = processImageUrl(newComment.user.avatar);
+ }
+
+ if (newComment.parentId) {
+ const parentComment = comments.value.find(c => c.id === newComment.parentId);
+ if (parentComment) {
+ if (!parentComment.children) {
+ parentComment.children = [];
+ }
+ parentComment.children.push(newComment);
+ }
+ } else {
+ if (!comments.value.some(c => c.id === newComment.id)) {
+ comments.value.unshift(newComment);
+ }
+ }
} else {
- console.warn("Received invalid comment data via WebSocket:", newComment);
+ console.warn("Received invalid comment data via WebSocket:", newComment);
}
});
}, (error) => {
@@ -413,7 +473,9 @@ onUnmounted(() => {
:rows="3"
placeholder="发表你的评论..."
/>
- 发表评论
+
@@ -426,6 +488,7 @@ onUnmounted(() => {
-
+
+
+
+