v 1.0.9.2 更新评论结构

Author: yyyCode

frontend/src/assets/blog.css

@@ -373,6 +373,13 @@ body {
   border-left: 2px solid rgba(170, 59, 255, 0.18);
 }
 
+.comment-replies-title {
+  font-size: 12px;
+  font-weight: 750;
+  color: var(--muted);
+  margin: 6px 0 6px;
+}
+
 .comment-reply-box {
   margin-top: 10px;
 }

frontend/src/components/CommentItem.vue

@@ -28,30 +28,15 @@
           </button>
         </div>
       </div>
-
-      <div v-if="comment.replies?.length" class="comment-replies">
-        <CommentItem
-          v-for="c in comment.replies"
-          :key="c.id"
-          :comment="c"
-          :depth="depth + 1"
-          :me="me"
-          @reply="$emit('reply', $event)"
-          @delete="$emit('delete', $event)"
-          @submit-reply="$emit('submit-reply', $event)"
-        />
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import CommentItem from './CommentItem.vue'
 
 const props = defineProps({
   comment: { type: Object, required: true },
-  depth: { type: Number, default: 1 },
   me: { type: Object, default: null }
 })
 

frontend/src/components/CommentSection.vue

@@ -42,6 +42,21 @@
           @delete="onDelete"
           @submit-reply="onSubmitReply"
         />
+
+        <div v-for="p in items" :key="'replies-' + p.id">
+          <div v-if="p.replies?.length" class="comment-replies">
+            <div class="comment-replies-title">回复</div>
+            <CommentItem
+              v-for="r in p.replies"
+              :key="r.id"
+              :comment="r"
+              :me="me"
+              @reply="onReplyClick"
+              @delete="onDelete"
+              @submit-reply="onSubmitReply"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>

frontend/src/views/HomeView.vue

@@ -14,27 +14,59 @@
           <div class="card-body" style="padding: 22px">加载中...</div>
         </div>
 
-        <div v-else class="card">
-          <div class="article-content">
-            <div v-if="!article?.id" style="padding: 20px 0">暂无文章</div>
-
-            <div v-else>
-              <div style="margin-bottom: 14px">
-                <img
-                  v-if="article.coverMediaKey"
-                  :src="coverUrl(article.coverMediaKey)"
-                  alt="cover"
-                  style="width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px"
-                />
+        <div v-else>
+          <div class="card">
+            <div class="article-content">
+              <div v-if="!article?.id" style="padding: 20px 0">暂无文章</div>
+
+              <div v-else>
+                <div style="margin-bottom: 14px">
+                  <img
+                    v-if="article.coverMediaKey"
+                    :src="coverUrl(article.coverMediaKey)"
+                    alt="cover"
+                    style="width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px"
+                  />
+                </div>
+
+                <h1 class="article-hero-title">{{ article.title }}</h1>
+                <div class="article-hero-meta">
+                  发布于 {{ formatDate(article.publishedAt) }} · 作者 {{ article.authorNickname || '' }} · 阅读
+                  {{ article.viewCount ?? 0 }}
+                </div>
+
+                <div class="markdown-body article-markdown" v-html="html" />
               </div>
+            </div>
+          </div>
 
-              <h1 class="article-hero-title">{{ article.title }}</h1>
-              <div class="article-hero-meta">
-                发布于 {{ formatDate(article.publishedAt) }} · 作者 {{ article.authorNickname || '' }} · 阅读
-                {{ article.viewCount ?? 0 }}
+          <div v-if="article?.id" class="card" style="margin-top: 18px">
+            <div class="card-body">
+              <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px">
+                <div style="font-weight: 900">最新评论</div>
+                <button type="button" class="btn" @click="go(article.id)">进入文章</button>
               </div>
 
-              <div class="markdown-body article-markdown" v-html="html" />
+              <div v-if="commentsLoading" style="color: var(--muted); margin-top: 10px">加载中…</div>
+              <div v-else-if="commentPreviews.length === 0" style="color: var(--muted); margin-top: 10px">
+                暂无评论
+              </div>
+              <div v-else class="mini-list" style="margin-top: 12px">
+                <div v-for="c in commentPreviews" :key="c.id" class="mini-item" style="grid-template-columns: 44px 1fr">
+                  <div class="mini-cover" style="width: 44px; height: 44px; border-radius: 999px">
+                    <img :src="c.user?.avatarUrl || 'https://www.gravatar.com/avatar/?d=mp&s=96'" alt="avatar" />
+                  </div>
+                  <div>
+                    <div style="display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap">
+                      <div style="font-weight: 850; font-size: 13px">{{ c.user?.nickname || '匿名' }}</div>
+                      <div style="color: var(--muted); font-size: 12px">{{ formatRelative(c.createdAt) }}</div>
+                    </div>
+                    <div style="margin-top: 4px; color: var(--text); font-size: 13px; line-height: 1.6">
+                      {{ c.content }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -48,18 +80,21 @@ import { computed, onMounted, ref } from 'vue'
 import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 
-import { fetchArticles, fetchArticleDetail } from '../api/article'
+import { fetchArticles, fetchArticleDetail, coverUrl } from '../api/article'
 import ProfileCard from '../components/ProfileCard.vue'
 import BlogInfoCard from '../components/BlogInfoCard.vue'
 import AdminEntryCard from '../components/AdminEntryCard.vue'
 import { useRouter } from 'vue-router'
 import { fetchPublicProfile } from '../api/profile'
+import { listComments } from '../api/comment'
 
 const router = useRouter()
 
 const loading = ref(true)
 const article = ref({})
 const profile = ref(null)
+const commentsLoading = ref(false)
+const commentPreviews = ref([])
 
 onMounted(async () => {
   loading.value = true
@@ -69,6 +104,18 @@ onMounted(async () => {
     article.value = first?.id ? await fetchArticleDetail(first.id) : {}
 
     profile.value = await fetchPublicProfile()
+
+    if (article.value?.id) {
+      commentsLoading.value = true
+      try {
+        const resp = await listComments(article.value.id, 0, 3)
+        const top = resp?.items || []
+        // 首页预览只展示顶层评论
+        commentPreviews.value = top.slice(0, 3)
+      } finally {
+        commentsLoading.value = false
+      }
+    }
   } finally {
     loading.value = false
   }
@@ -92,5 +139,21 @@ function formatDate(v) {
     return ''
   }
 }
+
+function formatRelative(v) {
+  if (!v) return ''
+  const t = new Date(v).getTime()
+  if (Number.isNaN(t)) return ''
+  let diff = Date.now() - t
+  if (diff < 0) diff = 0
+  if (diff < 60_000) return '刚刚'
+  const m = Math.floor(diff / 60_000)
+  if (m < 60) return `${m} 分钟前`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h} 小时前`
+  const d = Math.floor(h / 24)
+  if (d < 7) return `${d} 天前`
+  return new Date(t).toISOString().slice(0, 10)
+}
 </script>
 

src/main/java/com/yqz/openblog/comment/service/CommentService.java

@@ -100,13 +100,21 @@ public PageResult<CommentThreadResponse> listComments(Long articleId, int page,
         }
 
         // 挂载 replies
+        // 两层结构：所有后代评论都折叠挂到“顶层评论”的 replies 下
+        Map<Long, Long> parentById = new HashMap<>();
+        for (Comment c : all) {
+            parentById.put(c.getId(), c.getParentId());
+        }
+        Set<Long> topIds = new HashSet<>(top.stream().map(Comment::getId).toList());
         for (Comment c : descendants) {
-            Long pid = c.getParentId();
-            if (pid == null) continue;
-            CommentThreadResponse parent = nodeById.get(pid);
+            Long topId = findTopAncestorId(c.getId(), parentById, topIds);
+            if (topId == null) continue;
+            CommentThreadResponse topNode = nodeById.get(topId);
             CommentThreadResponse child = nodeById.get(c.getId());
-            if (parent == null || child == null) continue;
-            parent.getReplies().add(child);
+            if (topNode == null || child == null) continue;
+            // 强制让前端按两层渲染
+            child.setReplies(List.of());
+            topNode.getReplies().add(child);
         }
 
         // 每个节点的 replies 按时间排序（稳定）
@@ -123,6 +131,16 @@ public PageResult<CommentThreadResponse> listComments(Long articleId, int page,
         return new PageResult<>(items, page, size, p.getTotal());
     }
 
+    private Long findTopAncestorId(Long id, Map<Long, Long> parentById, Set<Long> topIds) {
+        Long cur = id;
+        int guard = 0;
+        while (cur != null && guard++ < 16) {
+            if (topIds.contains(cur)) return cur;
+            cur = parentById.get(cur);
+        }
+        return null;
+    }
+
     private CommentThreadResponse toNode(Comment c) {
         CommentThreadResponse resp = new CommentThreadResponse();
         resp.setId(c.getId());