feat(comment): 添加评论删除功能- 在 SingerDetail 组件中实现评论删除功能

- 添加删除评论的 API 调用和相关逻辑
- 在评论列表中增加删除按钮，仅管理员和评论作者可见
- 优化评论列表的样式，增加评论头部区域

music-qianduan/src/views/SingerDetail.vue

@@ -3,9 +3,9 @@ import { ref, onMounted, computed, onUnmounted } from 'vue' // 添加 onUnmounte
 import { useRoute, useRouter } from 'vue-router'
 import { usePlayerStore } from '../stores/player'
 import { useUserStore } from '../stores/user'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSingerById, toggleCollectSinger } from '../api/singer'
-import { getCommentList, addComment } from '../api/comment'
+import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { processImageUrl } from '../utils/imageUtils'
 import { processMusicUrl, getMusicBySinger } from '../api/music'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
@@ -212,6 +212,30 @@ const submitComment = async () => {
   }
 }
 
+// 删除评论
+const deleteComment = async (commentId) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    const res = await apiDeleteComment(commentId)
+    if (res.code === 200) {
+      comments.value = comments.value.filter(c => c.id !== commentId)
+      ElMessage.success('评论已删除')
+    } else {
+      ElMessage.error(res.message || '删除失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除评论失败:', error)
+      ElMessage.error('删除失败，请稍后重试')
+    }
+  }
+}
+
 
 
 // 格式化时间
@@ -410,6 +434,7 @@ onUnmounted(() => {
             <el-button type="primary" @click="submitComment">发表评论</el-button>
           </div>
 
+          <!-- 评论列表 -->
           <!-- 评论列表 -->
           <div class="comment-list">
             <div v-for="comment in comments" :key="comment.id" class="comment-item">
@@ -417,7 +442,19 @@ onUnmounted(() => {
                 <el-avatar :src="comment.user.avatar" :size="40" />
               </div>
               <div class="comment-content">
+                <div class="comment-header">
                   <div class="comment-user">{{ comment.user.username }}</div>
+                  <div class="comment-actions">
+                    <el-button
+                      v-if="userStore.isAdmin || comment.user.id === userStore.user?.id"
+                      type="danger"
+                      size="small"
+                      @click="deleteComment(comment.id)"
+                    >
+                      删除
+                    </el-button>
+                  </div>
+                </div>
                 <div class="comment-text">{{ comment.content }}</div>
                 <div class="comment-time">{{ comment.createTime }}</div>
               </div>
@@ -563,9 +600,15 @@ onUnmounted(() => {
   flex: 1;
 }
 
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
 .comment-user {
   font-weight: bold;
-  margin-bottom: 5px;
 }
 
 .comment-text {