修改回复评论

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js

@@ -59,7 +59,7 @@ export const usePostDetailStore = defineStore("postDetail", {
         this.commentsLoading = false;
       }
     },
-    // 获取某条评论的子评论（多级结构，分页）
+    // 获取某条评论的子评论
     async fetchReplies(parentCommentId, commentObj) {
       if (commentObj.repliesLoading || commentObj.repliesFinished) return;
       commentObj.repliesLoading = true;
@@ -76,12 +76,7 @@ export const usePostDetailStore = defineStore("postDetail", {
         if (res.code === 200) {
           const records = (res.data.records || []).map(item => ({
             ...item,
-            replies: [],
-            repliesLastVal: 0,
-            repliesOffset: 0,
-            repliesSize: 5,
-            repliesFinished: false,
-            repliesLoading: false,
+            replyUserName: item.replyUserName, 
           }));
           commentObj.replies.push(...records);
           commentObj.repliesLastVal = res.data.lastVal;
@@ -138,7 +133,7 @@ export const usePostDetailStore = defineStore("postDetail", {
             likeCount,
             favoriteCount,
             viewCount,
-            author: { // 新增 author 字段
+            author: { 
               userId,
               userName,
               userAvatar,
@@ -173,7 +168,7 @@ export const usePostDetailStore = defineStore("postDetail", {
         id: null,
         postId: newCommentData.postId, // 帖子ID
         content: newCommentData.content, // 评论内容
-        parentCommentId: newCommentData.parentCommentId, // 如果是一级评论则为0
+        parentCommentId: newCommentData.parentCommentId, 
       };
       try {
         const res = await request.post('/comment', RequestData);
@@ -189,28 +184,25 @@ export const usePostDetailStore = defineStore("postDetail", {
             replyCount: 0,
             postId: this.post.postId,
             parentCommentId: newCommentData.parentCommentId,
+            replyUserName: newCommentData.replyUserName,
             topId: newCommentData.topId,
             isLike: 0,
-            replies: [],
-            repliesLastVal: 0,
-            repliesOffset: 0,
-            repliesSize: 5,
-            repliesFinished: false,
-            repliesLoading: false,
           };
           // 新增评论后刷新评论列表或插入到对应位置
           if (!newCommentData.parentCommentId) {
             // 一级评论，插入到最前面
+            commentObj.topId = commentObj.id; // 一级评论的顶级ID就是自己的ID
+            commentObj.replies = [];
+            commentObj.repliesLastVal = Date.now();
+            commentObj.repliesOffset = 0;
+            commentObj.repliesSize = 5;
+            commentObj.repliesLoading = false;
+            commentObj.repliesFinished = false;
             this.comments.unshift(commentObj);
             this.post.commentCount = (this.post.commentCount || 0) + 1; // 更新帖子评论数
           } else {
-            // 回复评论，插入到对应父评论的 replies
-            // 先找顶级父评论
-            let parent = this.comments.find(c => c.id === commentObj.parentCommentId || c.id === commentObj.topId);
-            // 如果是二级及以上回复，需递归查找
-            if (!parent && commentObj.topId) {
-              parent = this.comments.find(c => c.id === commentObj.topId);
-            }
+            // 回复，只插入到一级评论的 replies
+            let parent = this.comments.find(c => c.id === newCommentData.parentCommentId);
             if (parent) {
               parent.replies.unshift(commentObj);
               parent.replyCount = (parent.replyCount || 0) + 1;

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue

@@ -51,7 +51,10 @@
                             <li v-for="reply in comment.replies" :key="reply.id" class="comment-item reply-item">
                                 <img :src="reply.userAvatar || require('@/assets/default-avatar/boy_1.png')" alt="评论者头像" class="comment-avatar" />
                                 <div class="comment-content">
-                                    <p class="comment-name">{{ reply.userName || '匿名用户' }}</p>
+                                    <p class="comment-name">
+                                        {{ reply.userName || '匿名用户' }}
+                                        <span v-if="reply.replyUserName" class="reply-user">回复 @{{ reply.replyUserName }}</span>
+                                    </p>
                                     <p class="comment-text">{{ reply.content || '' }}</p>
                                     <div class="comment-meta">
                                         <span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
@@ -150,7 +153,8 @@ const sendComment = () => {
       replyCount: 0,
       postId: postDetailStore.post?.id || postDetailStore.post?.postId,
       parentCommentId: replyingComment.value ? replyingComment.value.id : null,
-      topId: null,
+      replyUserName: replyingComment.value ? replyingComment.value.userName : null,
+      topId: replyingComment.value ? replyingComment.value.topId : null,
       isLike: false,
     }
     postDetailStore.addComment(newCommentData);
@@ -410,28 +414,36 @@ onUnmounted(() => {
 
 .replies-list {
     list-style: none;
-    padding-left: 40px; /* 缩进，区分主评论 */
+    padding-left: 48px; /* 更明显的缩进 */
     margin: 8px 0 0 0;
+    border-left: 2px solid #e0e0e0;
 }
 
 .reply-item {
     display: flex;
     align-items: flex-start;
-    padding: 6px 0;
+    padding: 8px 0;
     border-bottom: 1px solid #f3f3f3;
     font-size: 13px;
     color: #444;
+    background: #f9f9f9;
+    border-radius: 4px;
+    margin-bottom: 4px;
 }
 
 .reply-user {
-    font-weight: bold;
-    margin-right: 6px;
+    font-weight: normal;
+    margin-left: 6px;
     color: #5aa76f;
+    font-size: 13px;
 }
 
 .reply-content {
     flex: 1;
     color: #333;
+    margin: 0;
+    font-size: 14px;
+    word-break: break-all;
 }
 
 .reply-loading,