From 4cc2800f096df986860a75f0d208df0b5ec6d5d9 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Thu, 18 Sep 2025 20:48:46 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20timeline=20=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/openisle/mapper/UserMapper.java  |   2 +-
 .../com/openisle/service/SearchService.java   |   2 +-
 .../src/main/resources/application.properties |   2 +-
 frontend_nuxt/assets/global.css               |   1 +
 frontend_nuxt/pages/users/[id].vue            | 147 +++++++++++++++++-
 frontend_nuxt/plugins/iconpark.client.ts      |   2 +
 6 files changed, 147 insertions(+), 9 deletions(-)

diff --git a/backend/src/main/java/com/openisle/mapper/UserMapper.java b/backend/src/main/java/com/openisle/mapper/UserMapper.java
index ea5e85b67..43aaf8ef0 100644
--- a/backend/src/main/java/com/openisle/mapper/UserMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/UserMapper.java
@@ -24,7 +24,7 @@ public class UserMapper {
   private final LevelService levelService;
   private final MedalService medalService;
 
-  @Value("${app.snippet-length:50}")
+  @Value("${app.snippet-length}")
   private int snippetLength;
 
   public AuthorDto toAuthorDto(User user) {
diff --git a/backend/src/main/java/com/openisle/service/SearchService.java b/backend/src/main/java/com/openisle/service/SearchService.java
index 5b9485f42..dee83fed9 100644
--- a/backend/src/main/java/com/openisle/service/SearchService.java
+++ b/backend/src/main/java/com/openisle/service/SearchService.java
@@ -28,7 +28,7 @@ public class SearchService {
   private final CategoryRepository categoryRepository;
   private final TagRepository tagRepository;
 
-  @org.springframework.beans.factory.annotation.Value("${app.snippet-length:50}")
+  @org.springframework.beans.factory.annotation.Value("${app.snippet-length}")
   private int snippetLength;
 
   public List<User> searchUsers(String keyword) {
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index 1d5e4844e..00ccc0302 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -43,7 +43,7 @@ app.avatar.base-url=${AVATAR_BASE_URL:https://api.dicebear.com/6.x}
 app.user.posts-limit=${USER_POSTS_LIMIT:10}
 app.user.replies-limit=${USER_REPLIES_LIMIT:50}
 # Length of extracted snippets for posts and search (-1 to disable truncation)
-app.snippet-length=${SNIPPET_LENGTH:50}
+app.snippet-length=${SNIPPET_LENGTH:200}
 
 # Captcha configuration
 app.captcha.enabled=${CAPTCHA_ENABLED:false}
diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 2cf617fa1..be5108a00 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -94,6 +94,7 @@ body {
   font-family: 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
+  text-underline-offset: 4px;
   /* 禁止滚动 */
   /* overflow: hidden;  */
 }
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index b78aa56f6..49b66cdcd 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -212,26 +212,85 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <template v-if="item.type === 'post'">
+                  <!-- <template v-if="item.type === 'post'">
                     发布了文章
                     <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
                       {{ item.post.title }}
                     </NuxtLink>
                     <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template> -->
+                  <template v-if="item.type === 'post'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了文章</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="article-container">
+                        <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-article-link">
+                          {{ item.post.title }}
+                        </NuxtLink>
+                        <div class="timeline-snippet">
+                          {{ stripMarkdown(item.post.snippet) }}
+                        </div>
+                      </div>
+                    </div>
                   </template>
-                  <template v-else-if="item.type === 'comment'">
+                  <!-- <template v-else-if="item.type === 'comment'">
                     在
                     <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
                       {{ item.comment.post.title }}
                     </NuxtLink>
                     下评论了
-                    <NuxtLink
-                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                      class="timeline-link"
-                    >
+                    <NuxtLink :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
                       {{ stripMarkdownLength(item.comment.content, 200) }}
                     </NuxtLink>
                     <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template> -->
+                  <template v-else-if="item.type === 'comment'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了4条评论</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="comment-content">
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                      </div>
+                    </div>
                   </template>
                   <template v-else-if="item.type === 'reply'">
                     在
@@ -903,6 +962,7 @@ watch(selectedTab, async (val) => {
   font-size: 12px;
   color: gray;
   margin-top: 5px;
+  white-space: nowrap;
 }
 
 .timeline-snippet {
@@ -939,6 +999,81 @@ watch(selectedTab, async (val) => {
   padding: 40px 0;
 }
 
+.ttimeline-container {
+  margin-top: 2px;
+  padding-bottom: 30px;
+}
+
+.timeline-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.timeline-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  gap: 5px;
+}
+
+.comment-content-item-main {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: flex-start;
+}
+
+.comment-content-item-icon {
+  width: 20px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comment-content-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.timeline-comment-link {
+  color: var(--text-color);
+  word-break: break-word;
+  text-decoration: underline;
+}
+
+.timeline-comment-link:hover {
+  color: var(--primary-color);
+}
+
+.timeline-article-link {
+  color: var(--text-color);
+  font-weight: bold;
+  font-size: 20px;
+  word-break: break-word;
+  text-decoration: underline;
+}
+
+.timeline-article-link:hover {
+  color: var(--primary-color);
+}
+
+.article-container {
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid var(--normal-border-color);
+  margin-top: 10px;
+}
+
 .follow-container {
 }
 
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index b9dce953f..985cfa6ac 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -22,6 +22,7 @@ import {
   Moon,
   ComputerOne,
   Comment,
+  CommentOne,
   Link,
   SlyFaceWhitSmile,
   Like,
@@ -103,6 +104,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Moon', Moon)
   nuxtApp.vueApp.component('ComputerOne', ComputerOne)
   nuxtApp.vueApp.component('CommentIcon', Comment)
+  nuxtApp.vueApp.component('CommentOne', CommentOne)
   nuxtApp.vueApp.component('LinkIcon', Link)
   nuxtApp.vueApp.component('SlyFaceWhitSmile', SlyFaceWhitSmile)
   nuxtApp.vueApp.component('Like', Like)

From b6c2471bc3f5b16ef90bc1e43d9f163e0fafaddf Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Fri, 19 Sep 2025 00:22:34 +0800
Subject: [PATCH 2/8] Enhance user timeline grouping and post metadata

---
 .../java/com/openisle/dto/PostMetaDto.java    |   5 +-
 .../java/com/openisle/mapper/UserMapper.java  |  10 +-
 .../ProfileTimelineCommentGroup.vue           | 168 ++++++++++++++++++
 .../components/ProfileTimelinePostItem.vue    |  79 ++++++++
 frontend_nuxt/pages/users/[id].vue            | 149 +++++-----------
 5 files changed, 307 insertions(+), 104 deletions(-)
 create mode 100644 frontend_nuxt/components/ProfileTimelineCommentGroup.vue
 create mode 100644 frontend_nuxt/components/ProfileTimelinePostItem.vue

diff --git a/backend/src/main/java/com/openisle/dto/PostMetaDto.java b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
index 1667b047f..81df37a9f 100644
--- a/backend/src/main/java/com/openisle/dto/PostMetaDto.java
+++ b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
@@ -1,6 +1,7 @@
 package com.openisle.dto;
 
 import java.time.LocalDateTime;
+import java.util.List;
 import lombok.Data;
 
 /** Lightweight post metadata used in user profile lists. */
@@ -11,6 +12,8 @@ public class PostMetaDto {
   private String title;
   private String snippet;
   private LocalDateTime createdAt;
-  private String category;
+  private CategoryDto category;
+  private List<TagDto> tags;
   private long views;
+  private long commentCount;
 }
diff --git a/backend/src/main/java/com/openisle/mapper/UserMapper.java b/backend/src/main/java/com/openisle/mapper/UserMapper.java
index 43aaf8ef0..50ad6cb27 100644
--- a/backend/src/main/java/com/openisle/mapper/UserMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/UserMapper.java
@@ -5,6 +5,7 @@ import com.openisle.model.Comment;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import com.openisle.service.*;
+import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.Authentication;
@@ -23,6 +24,8 @@ public class UserMapper {
   private final PostReadService postReadService;
   private final LevelService levelService;
   private final MedalService medalService;
+  private final TagMapper tagMapper;
+  private final CategoryMapper categoryMapper;
 
   @Value("${app.snippet-length}")
   private int snippetLength;
@@ -88,7 +91,12 @@ public class UserMapper {
       dto.setSnippet(content);
     }
     dto.setCreatedAt(post.getCreatedAt());
-    dto.setCategory(post.getCategory().getName());
+    dto.setCategory(categoryMapper.toDto(post.getCategory()));
+    dto.setTags(post.getTags().stream().map(tagMapper::toDto).collect(Collectors.toList()));
+    if (post.getLastReplyAt() == null) {
+      commentService.updatePostCommentStats(post);
+    }
+    dto.setCommentCount(post.getCommentCount());
     dto.setViews(post.getViews());
     return dto;
   }
diff --git a/frontend_nuxt/components/ProfileTimelineCommentGroup.vue b/frontend_nuxt/components/ProfileTimelineCommentGroup.vue
new file mode 100644
index 000000000..3db68815e
--- /dev/null
+++ b/frontend_nuxt/components/ProfileTimelineCommentGroup.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">{{ headerText }}</div>
+      <div class="timeline-date">{{ headerDate }}</div>
+    </div>
+    <div class="comment-content">
+      <div v-for="entry in entries" :key="entry.comment.id" class="comment-content-item">
+        <div class="comment-content-item-main">
+          <comment-one class="comment-content-item-icon" />
+          <template v-if="!entry.comment.parentComment">
+            <span class="comment-prefix">
+              在
+              <NuxtLink :to="entry.postLink" class="timeline-link">
+                {{ entry.comment.post.title }}
+              </NuxtLink>
+              下评论了
+            </span>
+            <NuxtLink :to="entry.commentLink" class="timeline-comment-link">
+              {{ stripContent(entry.comment.content) }}
+            </NuxtLink>
+          </template>
+          <template v-else>
+            <span class="comment-prefix">
+              在
+              <NuxtLink :to="entry.postLink" class="timeline-link">
+                {{ entry.comment.post.title }}
+              </NuxtLink>
+              下对
+              <NuxtLink :to="entry.parentLink" class="timeline-link">
+                {{ stripContent(entry.comment.parentComment.content) }}
+              </NuxtLink>
+              回复了
+            </span>
+            <NuxtLink :to="entry.commentLink" class="timeline-comment-link">
+              {{ stripContent(entry.comment.content) }}
+            </NuxtLink>
+          </template>
+        </div>
+        <div class="timeline-date">{{ formatDate(entry.createdAt) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+
+const entries = computed(() =>
+  (props.item.entries || []).map((entry) => ({
+    ...entry,
+    postLink: `/posts/${entry.comment.post.id}`,
+    commentLink: `/posts/${entry.comment.post.id}#comment-${entry.comment.id}`,
+    parentLink: entry.comment.parentComment
+      ? `/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`
+      : undefined,
+  })),
+)
+
+const commentCount = computed(
+  () => entries.value.filter((entry) => !entry.comment.parentComment).length,
+)
+
+const replyCount = computed(
+  () => entries.value.filter((entry) => entry.comment.parentComment).length,
+)
+
+const headerText = computed(() => {
+  if (commentCount.value && replyCount.value) {
+    return `发布了${commentCount.value}条评论和${replyCount.value}条回复`
+  }
+  if (commentCount.value) {
+    return `发布了${commentCount.value}条评论`
+  }
+  if (replyCount.value) {
+    return `发布了${replyCount.value}条回复`
+  }
+  return '发布了评论'
+})
+
+const headerDate = computed(() => TimeManager.format(props.item.createdAt))
+
+const formatDate = (date) => TimeManager.format(date)
+
+const stripContent = (content) => stripMarkdownLength(content || '', 200)
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.timeline-date {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.comment-content-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.comment-content-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.comment-content-item-icon {
+  color: var(--primary-color);
+  font-size: 18px;
+}
+
+.comment-prefix {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.timeline-comment-link {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  color: var(--text-color);
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.timeline-comment-link:hover {
+  color: var(--primary-color);
+}
+
+.timeline-link {
+  color: var(--primary-color);
+}
+
+.timeline-link:hover {
+  color: var(--primary-color-hover);
+}
+</style>
diff --git a/frontend_nuxt/components/ProfileTimelinePostItem.vue b/frontend_nuxt/components/ProfileTimelinePostItem.vue
new file mode 100644
index 000000000..91852aa09
--- /dev/null
+++ b/frontend_nuxt/components/ProfileTimelinePostItem.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">发布了文章</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="article-container">
+      <NuxtLink :to="postLink" class="timeline-article-link">
+        {{ props.item.post.title }}
+      </NuxtLink>
+      <div class="timeline-snippet">
+        {{ postSnippet }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdown } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+
+const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+const postLink = computed(() => `/posts/${props.item.post.id}`)
+const postSnippet = computed(() => stripMarkdown(props.item.post?.snippet ?? ''))
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.timeline-date {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.article-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.timeline-article-link {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.timeline-article-link:hover {
+  color: var(--primary-color);
+}
+
+.timeline-snippet {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+  line-height: 1.6;
+}
+</style>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 49b66cdcd..c141ec7d4 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -212,107 +212,9 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <!-- <template v-if="item.type === 'post'">
-                    发布了文章
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template> -->
-                  <template v-if="item.type === 'post'">
-                    <div class="ttimeline-container">
-                      <div class="timeline-header">
-                        <div class="timeline-title">发布了文章</div>
-                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                      </div>
-                      <div class="article-container">
-                        <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-article-link">
-                          {{ item.post.title }}
-                        </NuxtLink>
-                        <div class="timeline-snippet">
-                          {{ stripMarkdown(item.post.snippet) }}
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                  <!-- <template v-else-if="item.type === 'comment'">
-                    在
-                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                      {{ item.comment.post.title }}
-                    </NuxtLink>
-                    下评论了
-                    <NuxtLink :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
-                      {{ stripMarkdownLength(item.comment.content, 200) }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template> -->
-                  <template v-else-if="item.type === 'comment'">
-                    <div class="ttimeline-container">
-                      <div class="timeline-header">
-                        <div class="timeline-title">发布了4条评论</div>
-                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                      </div>
-                      <div class="comment-content">
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                  <template v-else-if="item.type === 'reply'">
-                    在
-                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                      {{ item.comment.post.title }}
-                    </NuxtLink>
-                    下对
-                    <NuxtLink
-                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                      class="timeline-link"
-                    >
-                      {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                    </NuxtLink>
-                    回复了
-                    <NuxtLink
-                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                      class="timeline-link"
-                    >
-                      {{ stripMarkdownLength(item.comment.content, 200) }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template>
+                  <ProfileTimelinePostItem v-if="item.type === 'post'" :item="item" />
+                  <ProfileTimelineCommentGroup v-else-if="item.type === 'comment'" :item="item" />
+                  <ProfileTimelineCommentGroup v-else-if="item.type === 'reply'" :item="item" />
                   <template v-else-if="item.type === 'tag'">
                     创建了标签
                     <span class="timeline-link" @click="gotoTag(item.tag)">
@@ -385,6 +287,8 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
+import ProfileTimelineCommentGroup from '~/components/ProfileTimelineCommentGroup.vue'
+import ProfileTimelinePostItem from '~/components/ProfileTimelinePostItem.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -490,6 +394,22 @@ const fetchSummary = async () => {
   }
 }
 
+const isSameDay = (a, b) => {
+  const dateA = new Date(a)
+  const dateB = new Date(b)
+  return (
+    dateA.getFullYear() === dateB.getFullYear() &&
+    dateA.getMonth() === dateB.getMonth() &&
+    dateA.getDate() === dateB.getDate()
+  )
+}
+
+const createCommentEntry = (item) => ({
+  type: item.type,
+  comment: item.comment,
+  createdAt: item.createdAt,
+})
+
 const fetchTimeline = async () => {
   const [postsRes, repliesRes, tagsRes] = await Promise.all([
     fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
@@ -520,7 +440,32 @@ const fetchTimeline = async () => {
     })),
   ]
   mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-  timelineItems.value = mapped
+
+  const grouped = []
+  for (const item of mapped) {
+    if (item.type === 'comment') {
+      const last = grouped[grouped.length - 1]
+      if (last && last.type === 'comment' && isSameDay(last.createdAt, item.createdAt)) {
+        last.entries.push(createCommentEntry(item))
+        if (new Date(item.createdAt) > new Date(last.createdAt)) {
+          last.createdAt = item.createdAt
+        }
+      } else {
+        grouped.push({
+          ...item,
+          entries: [createCommentEntry(item)],
+        })
+      }
+    } else if (item.type === 'reply') {
+      grouped.push({
+        ...item,
+        entries: [createCommentEntry(item)],
+      })
+    } else {
+      grouped.push(item)
+    }
+  }
+  timelineItems.value = grouped
 }
 
 const fetchFollowUsers = async () => {

From bc767a6ac96291e0b3ce02c8812a492bc4d038f8 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Fri, 19 Sep 2025 00:31:24 +0800
Subject: [PATCH 3/8] Revert "Enhance user timeline grouping and post metadata"

This reverts commit b6c2471bc3f5b16ef90bc1e43d9f163e0fafaddf.
---
 .../java/com/openisle/dto/PostMetaDto.java    |   5 +-
 .../java/com/openisle/mapper/UserMapper.java  |  10 +-
 .../ProfileTimelineCommentGroup.vue           | 168 ------------------
 .../components/ProfileTimelinePostItem.vue    |  79 --------
 frontend_nuxt/pages/users/[id].vue            | 149 +++++++++++-----
 5 files changed, 104 insertions(+), 307 deletions(-)
 delete mode 100644 frontend_nuxt/components/ProfileTimelineCommentGroup.vue
 delete mode 100644 frontend_nuxt/components/ProfileTimelinePostItem.vue

diff --git a/backend/src/main/java/com/openisle/dto/PostMetaDto.java b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
index 81df37a9f..1667b047f 100644
--- a/backend/src/main/java/com/openisle/dto/PostMetaDto.java
+++ b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
@@ -1,7 +1,6 @@
 package com.openisle.dto;
 
 import java.time.LocalDateTime;
-import java.util.List;
 import lombok.Data;
 
 /** Lightweight post metadata used in user profile lists. */
@@ -12,8 +11,6 @@ public class PostMetaDto {
   private String title;
   private String snippet;
   private LocalDateTime createdAt;
-  private CategoryDto category;
-  private List<TagDto> tags;
+  private String category;
   private long views;
-  private long commentCount;
 }
diff --git a/backend/src/main/java/com/openisle/mapper/UserMapper.java b/backend/src/main/java/com/openisle/mapper/UserMapper.java
index 50ad6cb27..43aaf8ef0 100644
--- a/backend/src/main/java/com/openisle/mapper/UserMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/UserMapper.java
@@ -5,7 +5,6 @@ import com.openisle.model.Comment;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import com.openisle.service.*;
-import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.Authentication;
@@ -24,8 +23,6 @@ public class UserMapper {
   private final PostReadService postReadService;
   private final LevelService levelService;
   private final MedalService medalService;
-  private final TagMapper tagMapper;
-  private final CategoryMapper categoryMapper;
 
   @Value("${app.snippet-length}")
   private int snippetLength;
@@ -91,12 +88,7 @@ public class UserMapper {
       dto.setSnippet(content);
     }
     dto.setCreatedAt(post.getCreatedAt());
-    dto.setCategory(categoryMapper.toDto(post.getCategory()));
-    dto.setTags(post.getTags().stream().map(tagMapper::toDto).collect(Collectors.toList()));
-    if (post.getLastReplyAt() == null) {
-      commentService.updatePostCommentStats(post);
-    }
-    dto.setCommentCount(post.getCommentCount());
+    dto.setCategory(post.getCategory().getName());
     dto.setViews(post.getViews());
     return dto;
   }
diff --git a/frontend_nuxt/components/ProfileTimelineCommentGroup.vue b/frontend_nuxt/components/ProfileTimelineCommentGroup.vue
deleted file mode 100644
index 3db68815e..000000000
--- a/frontend_nuxt/components/ProfileTimelineCommentGroup.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <div class="timeline-container">
-    <div class="timeline-header">
-      <div class="timeline-title">{{ headerText }}</div>
-      <div class="timeline-date">{{ headerDate }}</div>
-    </div>
-    <div class="comment-content">
-      <div v-for="entry in entries" :key="entry.comment.id" class="comment-content-item">
-        <div class="comment-content-item-main">
-          <comment-one class="comment-content-item-icon" />
-          <template v-if="!entry.comment.parentComment">
-            <span class="comment-prefix">
-              在
-              <NuxtLink :to="entry.postLink" class="timeline-link">
-                {{ entry.comment.post.title }}
-              </NuxtLink>
-              下评论了
-            </span>
-            <NuxtLink :to="entry.commentLink" class="timeline-comment-link">
-              {{ stripContent(entry.comment.content) }}
-            </NuxtLink>
-          </template>
-          <template v-else>
-            <span class="comment-prefix">
-              在
-              <NuxtLink :to="entry.postLink" class="timeline-link">
-                {{ entry.comment.post.title }}
-              </NuxtLink>
-              下对
-              <NuxtLink :to="entry.parentLink" class="timeline-link">
-                {{ stripContent(entry.comment.parentComment.content) }}
-              </NuxtLink>
-              回复了
-            </span>
-            <NuxtLink :to="entry.commentLink" class="timeline-comment-link">
-              {{ stripContent(entry.comment.content) }}
-            </NuxtLink>
-          </template>
-        </div>
-        <div class="timeline-date">{{ formatDate(entry.createdAt) }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { stripMarkdownLength } from '~/utils/markdown'
-import TimeManager from '~/utils/time'
-
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-})
-
-const entries = computed(() =>
-  (props.item.entries || []).map((entry) => ({
-    ...entry,
-    postLink: `/posts/${entry.comment.post.id}`,
-    commentLink: `/posts/${entry.comment.post.id}#comment-${entry.comment.id}`,
-    parentLink: entry.comment.parentComment
-      ? `/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`
-      : undefined,
-  })),
-)
-
-const commentCount = computed(
-  () => entries.value.filter((entry) => !entry.comment.parentComment).length,
-)
-
-const replyCount = computed(
-  () => entries.value.filter((entry) => entry.comment.parentComment).length,
-)
-
-const headerText = computed(() => {
-  if (commentCount.value && replyCount.value) {
-    return `发布了${commentCount.value}条评论和${replyCount.value}条回复`
-  }
-  if (commentCount.value) {
-    return `发布了${commentCount.value}条评论`
-  }
-  if (replyCount.value) {
-    return `发布了${replyCount.value}条回复`
-  }
-  return '发布了评论'
-})
-
-const headerDate = computed(() => TimeManager.format(props.item.createdAt))
-
-const formatDate = (date) => TimeManager.format(date)
-
-const stripContent = (content) => stripMarkdownLength(content || '', 200)
-</script>
-
-<style scoped>
-.timeline-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.timeline-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.timeline-title {
-  font-weight: 600;
-  color: var(--primary-color);
-}
-
-.timeline-date {
-  color: var(--text-color-secondary);
-  font-size: 14px;
-}
-
-.comment-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.comment-content-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.comment-content-item-main {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.comment-content-item-icon {
-  color: var(--primary-color);
-  font-size: 18px;
-}
-
-.comment-prefix {
-  color: var(--text-color-secondary);
-  font-size: 14px;
-}
-
-.timeline-comment-link {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  color: var(--text-color);
-  font-size: 15px;
-  line-height: 1.6;
-}
-
-.timeline-comment-link:hover {
-  color: var(--primary-color);
-}
-
-.timeline-link {
-  color: var(--primary-color);
-}
-
-.timeline-link:hover {
-  color: var(--primary-color-hover);
-}
-</style>
diff --git a/frontend_nuxt/components/ProfileTimelinePostItem.vue b/frontend_nuxt/components/ProfileTimelinePostItem.vue
deleted file mode 100644
index 91852aa09..000000000
--- a/frontend_nuxt/components/ProfileTimelinePostItem.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="timeline-container">
-    <div class="timeline-header">
-      <div class="timeline-title">发布了文章</div>
-      <div class="timeline-date">{{ formattedDate }}</div>
-    </div>
-    <div class="article-container">
-      <NuxtLink :to="postLink" class="timeline-article-link">
-        {{ props.item.post.title }}
-      </NuxtLink>
-      <div class="timeline-snippet">
-        {{ postSnippet }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { stripMarkdown } from '~/utils/markdown'
-import TimeManager from '~/utils/time'
-
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-})
-
-const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
-const postLink = computed(() => `/posts/${props.item.post.id}`)
-const postSnippet = computed(() => stripMarkdown(props.item.post?.snippet ?? ''))
-</script>
-
-<style scoped>
-.timeline-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.timeline-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.timeline-title {
-  font-weight: 600;
-  color: var(--primary-color);
-}
-
-.timeline-date {
-  color: var(--text-color-secondary);
-  font-size: 14px;
-}
-
-.article-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.timeline-article-link {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.timeline-article-link:hover {
-  color: var(--primary-color);
-}
-
-.timeline-snippet {
-  color: var(--text-color-secondary);
-  font-size: 14px;
-  line-height: 1.6;
-}
-</style>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index c141ec7d4..49b66cdcd 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -212,9 +212,107 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <ProfileTimelinePostItem v-if="item.type === 'post'" :item="item" />
-                  <ProfileTimelineCommentGroup v-else-if="item.type === 'comment'" :item="item" />
-                  <ProfileTimelineCommentGroup v-else-if="item.type === 'reply'" :item="item" />
+                  <!-- <template v-if="item.type === 'post'">
+                    发布了文章
+                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                      {{ item.post.title }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template> -->
+                  <template v-if="item.type === 'post'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了文章</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="article-container">
+                        <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-article-link">
+                          {{ item.post.title }}
+                        </NuxtLink>
+                        <div class="timeline-snippet">
+                          {{ stripMarkdown(item.post.snippet) }}
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- <template v-else-if="item.type === 'comment'">
+                    在
+                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                      {{ item.comment.post.title }}
+                    </NuxtLink>
+                    下评论了
+                    <NuxtLink :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
+                      {{ stripMarkdownLength(item.comment.content, 200) }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template> -->
+                  <template v-else-if="item.type === 'comment'">
+                    <div class="ttimeline-container">
+                      <div class="timeline-header">
+                        <div class="timeline-title">发布了4条评论</div>
+                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                      </div>
+                      <div class="comment-content">
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                        <div class="comment-content-item">
+                          <div class="comment-content-item-main">
+                            <comment-one class="comment-content-item-icon" />
+                            <NuxtLink
+                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                              class="timeline-comment-link"
+                            >
+                              {{ stripMarkdownLength(item.comment.content, 200) }}
+                            </NuxtLink>
+                          </div>
+                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else-if="item.type === 'reply'">
+                    在
+                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                      {{ item.comment.post.title }}
+                    </NuxtLink>
+                    下对
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                    </NuxtLink>
+                    回复了
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 200) }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template>
                   <template v-else-if="item.type === 'tag'">
                     创建了标签
                     <span class="timeline-link" @click="gotoTag(item.tag)">
@@ -287,8 +385,6 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
-import ProfileTimelineCommentGroup from '~/components/ProfileTimelineCommentGroup.vue'
-import ProfileTimelinePostItem from '~/components/ProfileTimelinePostItem.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -394,22 +490,6 @@ const fetchSummary = async () => {
   }
 }
 
-const isSameDay = (a, b) => {
-  const dateA = new Date(a)
-  const dateB = new Date(b)
-  return (
-    dateA.getFullYear() === dateB.getFullYear() &&
-    dateA.getMonth() === dateB.getMonth() &&
-    dateA.getDate() === dateB.getDate()
-  )
-}
-
-const createCommentEntry = (item) => ({
-  type: item.type,
-  comment: item.comment,
-  createdAt: item.createdAt,
-})
-
 const fetchTimeline = async () => {
   const [postsRes, repliesRes, tagsRes] = await Promise.all([
     fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
@@ -440,32 +520,7 @@ const fetchTimeline = async () => {
     })),
   ]
   mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-
-  const grouped = []
-  for (const item of mapped) {
-    if (item.type === 'comment') {
-      const last = grouped[grouped.length - 1]
-      if (last && last.type === 'comment' && isSameDay(last.createdAt, item.createdAt)) {
-        last.entries.push(createCommentEntry(item))
-        if (new Date(item.createdAt) > new Date(last.createdAt)) {
-          last.createdAt = item.createdAt
-        }
-      } else {
-        grouped.push({
-          ...item,
-          entries: [createCommentEntry(item)],
-        })
-      }
-    } else if (item.type === 'reply') {
-      grouped.push({
-        ...item,
-        entries: [createCommentEntry(item)],
-      })
-    } else {
-      grouped.push(item)
-    }
-  }
-  timelineItems.value = grouped
+  timelineItems.value = mapped
 }
 
 const fetchFollowUsers = async () => {

From e7593c8ebf73f2fb74405bf5c4950ed4bfb8f94e Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Fri, 19 Sep 2025 00:31:52 +0800
Subject: [PATCH 4/8] Enhance user timeline post metadata and grouping

---
 .../java/com/openisle/dto/PostMetaDto.java    |   5 +-
 .../java/com/openisle/mapper/UserMapper.java  |   7 +-
 .../controller/UserControllerTest.java        |   4 +
 .../components/TimelineCommentGroup.vue       | 185 ++++++++++++++++++
 frontend_nuxt/components/TimelinePostItem.vue | 149 ++++++++++++++
 frontend_nuxt/pages/users/[id].vue            | 146 ++++++--------
 6 files changed, 405 insertions(+), 91 deletions(-)
 create mode 100644 frontend_nuxt/components/TimelineCommentGroup.vue
 create mode 100644 frontend_nuxt/components/TimelinePostItem.vue

diff --git a/backend/src/main/java/com/openisle/dto/PostMetaDto.java b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
index 1667b047f..81df37a9f 100644
--- a/backend/src/main/java/com/openisle/dto/PostMetaDto.java
+++ b/backend/src/main/java/com/openisle/dto/PostMetaDto.java
@@ -1,6 +1,7 @@
 package com.openisle.dto;
 
 import java.time.LocalDateTime;
+import java.util.List;
 import lombok.Data;
 
 /** Lightweight post metadata used in user profile lists. */
@@ -11,6 +12,8 @@ public class PostMetaDto {
   private String title;
   private String snippet;
   private LocalDateTime createdAt;
-  private String category;
+  private CategoryDto category;
+  private List<TagDto> tags;
   private long views;
+  private long commentCount;
 }
diff --git a/backend/src/main/java/com/openisle/mapper/UserMapper.java b/backend/src/main/java/com/openisle/mapper/UserMapper.java
index 43aaf8ef0..99203bf2d 100644
--- a/backend/src/main/java/com/openisle/mapper/UserMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/UserMapper.java
@@ -5,6 +5,7 @@ import com.openisle.model.Comment;
 import com.openisle.model.Post;
 import com.openisle.model.User;
 import com.openisle.service.*;
+import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.Authentication;
@@ -23,6 +24,8 @@ public class UserMapper {
   private final PostReadService postReadService;
   private final LevelService levelService;
   private final MedalService medalService;
+  private final CategoryMapper categoryMapper;
+  private final TagMapper tagMapper;
 
   @Value("${app.snippet-length}")
   private int snippetLength;
@@ -88,8 +91,10 @@ public class UserMapper {
       dto.setSnippet(content);
     }
     dto.setCreatedAt(post.getCreatedAt());
-    dto.setCategory(post.getCategory().getName());
+    dto.setCategory(categoryMapper.toDto(post.getCategory()));
+    dto.setTags(post.getTags().stream().map(tagMapper::toDto).collect(Collectors.toList()));
     dto.setViews(post.getViews());
+    dto.setCommentCount(post.getCommentCount());
     return dto;
   }
 
diff --git a/backend/src/test/java/com/openisle/controller/UserControllerTest.java b/backend/src/test/java/com/openisle/controller/UserControllerTest.java
index 6c47232d5..ec0951368 100644
--- a/backend/src/test/java/com/openisle/controller/UserControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/UserControllerTest.java
@@ -8,6 +8,7 @@ import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.
 import com.openisle.dto.CommentInfoDto;
 import com.openisle.dto.PostMetaDto;
 import com.openisle.dto.UserDto;
+import com.openisle.mapper.CategoryMapper;
 import com.openisle.mapper.TagMapper;
 import com.openisle.mapper.UserMapper;
 import com.openisle.model.User;
@@ -64,6 +65,9 @@ class UserControllerTest {
   @MockBean
   private TagMapper tagMapper;
 
+  @MockBean
+  private CategoryMapper categoryMapper;
+
   @Test
   void getCurrentUser() throws Exception {
     User u = new User();
diff --git a/frontend_nuxt/components/TimelineCommentGroup.vue b/frontend_nuxt/components/TimelineCommentGroup.vue
new file mode 100644
index 000000000..89ce08b02
--- /dev/null
+++ b/frontend_nuxt/components/TimelineCommentGroup.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">{{ headerText }}</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="comment-content" v-if="entries.length > 0">
+      <div class="comment-content-item" v-for="entry in entries" :key="entry.comment.id">
+        <div class="comment-content-item-main">
+          <comment-one class="comment-content-item-icon" />
+          <div class="comment-content-item-text">
+            <span class="comment-content-item-prefix">
+              在
+              <NuxtLink :to="`/posts/${entry.comment.post.id}`" class="timeline-link">
+                {{ entry.comment.post.title }}
+              </NuxtLink>
+              <template v-if="entry.comment.parentComment">
+                下对
+                <NuxtLink
+                  :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`"
+                  class="timeline-link"
+                >
+                  {{ parentSnippet(entry) }}
+                </NuxtLink>
+                回复了
+              </template>
+              <template v-else> 下评论了 </template>
+            </span>
+            <NuxtLink
+              :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
+              class="timeline-comment-link"
+            >
+              {{ stripContent(entry.comment.content) }}
+            </NuxtLink>
+          </div>
+        </div>
+        <div class="timeline-date">{{ formatEntryDate(entry.createdAt) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const entries = computed(() => {
+  if (Array.isArray(props.item.entries)) {
+    return props.item.entries
+  }
+  if (props.item.comment) {
+    return [
+      {
+        type: props.item.type,
+        comment: props.item.comment,
+        createdAt: props.item.createdAt,
+      },
+    ]
+  }
+  return []
+})
+
+const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+
+const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
+const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
+
+const headerText = computed(() => {
+  const count = entries.value.length
+  if (count === 0) return ''
+  if (hasComments.value && hasReplies.value) {
+    return `发布了${count}条评论/回复`
+  }
+  if (hasReplies.value) {
+    return `发布了${count}条回复`
+  }
+  return `发布了${count}条评论`
+})
+
+const formatEntryDate = (date) => TimeManager.format(date)
+const stripContent = (content) => stripMarkdownLength(content ?? '', 200)
+const parentSnippet = (entry) =>
+  stripMarkdownLength(entry.comment.parentComment?.content ?? '', 200)
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--timeline-card-background, transparent);
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: var(--timeline-date-color, #888);
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.comment-content-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--comment-item-border, rgba(0, 0, 0, 0.05));
+}
+
+.comment-content-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.comment-content-item-main {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-content-item-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
+.comment-content-item-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.comment-content-item-prefix {
+  font-size: 14px;
+  color: var(--text-color);
+}
+
+.timeline-comment-link {
+  font-size: 14px;
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-comment-link:hover {
+  text-decoration: underline;
+}
+
+.timeline-link {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .comment-content-item-prefix,
+  .timeline-comment-link {
+    font-size: 13px;
+  }
+}
+</style>
diff --git a/frontend_nuxt/components/TimelinePostItem.vue b/frontend_nuxt/components/TimelinePostItem.vue
new file mode 100644
index 000000000..ae6f92045
--- /dev/null
+++ b/frontend_nuxt/components/TimelinePostItem.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <div class="timeline-title">发布了文章</div>
+      <div class="timeline-date">{{ formattedDate }}</div>
+    </div>
+    <div class="article-container">
+      <NuxtLink :to="postLink" class="timeline-article-link">
+        {{ item.post?.title }}
+      </NuxtLink>
+      <div class="timeline-snippet">
+        {{ strippedSnippet }}
+      </div>
+      <div class="article-meta" v-if="hasMeta">
+        <ArticleCategory v-if="item.post?.category" :category="item.post.category" />
+        <div class="article-tags" v-if="(item.post?.tags?.length ?? 0) > 0">
+          <span class="article-tag" v-for="tag in item.post?.tags" :key="tag.id || tag.name">
+            #{{ tag.name }}
+          </span>
+        </div>
+        <div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
+          <comment-one class="article-comment-count-icon" />
+          <span>{{ item.post?.commentCount }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import ArticleCategory from '~/components/ArticleCategory.vue'
+import { stripMarkdown } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const postLink = computed(() => {
+  const id = props.item.post?.id
+  return id ? `/posts/${id}` : '#'
+})
+
+const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+const strippedSnippet = computed(() => stripMarkdown(props.item.post?.snippet ?? ''))
+const hasMeta = computed(() => {
+  const tags = props.item.post?.tags ?? []
+  const hasTags = Array.isArray(tags) && tags.length > 0
+  const hasCategory = !!props.item.post?.category
+  const hasCommentCount =
+    props.item.post?.commentCount !== undefined && props.item.post?.commentCount !== null
+  return hasTags || hasCategory || hasCommentCount
+})
+</script>
+
+<style scoped>
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--timeline-card-background, transparent);
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeline-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: var(--timeline-date-color, #888);
+}
+
+.article-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.timeline-article-link {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.timeline-article-link:hover {
+  text-decoration: underline;
+}
+
+.timeline-snippet {
+  color: var(--timeline-snippet-color, #666);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.article-tag {
+  background-color: var(--article-info-background-color);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.article-comment-count-icon {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width: 768px) {
+  .timeline-article-link {
+    font-size: 16px;
+  }
+
+  .timeline-snippet {
+    font-size: 13px;
+  }
+}
+</style>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 49b66cdcd..1258f8fb6 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -220,98 +220,13 @@
                     <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template> -->
                   <template v-if="item.type === 'post'">
-                    <div class="ttimeline-container">
-                      <div class="timeline-header">
-                        <div class="timeline-title">发布了文章</div>
-                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                      </div>
-                      <div class="article-container">
-                        <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-article-link">
-                          {{ item.post.title }}
-                        </NuxtLink>
-                        <div class="timeline-snippet">
-                          {{ stripMarkdown(item.post.snippet) }}
-                        </div>
-                      </div>
-                    </div>
+                    <TimelinePostItem :item="item" />
                   </template>
-                  <!-- <template v-else-if="item.type === 'comment'">
-                    在
-                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                      {{ item.comment.post.title }}
-                    </NuxtLink>
-                    下评论了
-                    <NuxtLink :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
-                      {{ stripMarkdownLength(item.comment.content, 200) }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template> -->
                   <template v-else-if="item.type === 'comment'">
-                    <div class="ttimeline-container">
-                      <div class="timeline-header">
-                        <div class="timeline-title">发布了4条评论</div>
-                        <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                      </div>
-                      <div class="comment-content">
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                        <div class="comment-content-item">
-                          <div class="comment-content-item-main">
-                            <comment-one class="comment-content-item-icon" />
-                            <NuxtLink
-                              :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                              class="timeline-comment-link"
-                            >
-                              {{ stripMarkdownLength(item.comment.content, 200) }}
-                            </NuxtLink>
-                          </div>
-                          <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                        </div>
-                      </div>
-                    </div>
+                    <TimelineCommentGroup :item="item" />
                   </template>
                   <template v-else-if="item.type === 'reply'">
-                    在
-                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                      {{ item.comment.post.title }}
-                    </NuxtLink>
-                    下对
-                    <NuxtLink
-                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                      class="timeline-link"
-                    >
-                      {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                    </NuxtLink>
-                    回复了
-                    <NuxtLink
-                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                      class="timeline-link"
-                    >
-                      {{ stripMarkdownLength(item.comment.content, 200) }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                    <TimelineCommentGroup :item="item" />
                   </template>
                   <template v-else-if="item.type === 'tag'">
                     创建了标签
@@ -385,6 +300,8 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
+import TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
+import TimelinePostItem from '~/components/TimelinePostItem.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -490,6 +407,57 @@ const fetchSummary = async () => {
   }
 }
 
+const isDiscussionItem = (item) => item && (item.type === 'comment' || item.type === 'reply')
+
+const toDateKey = (value) => {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+const combineDiscussionItems = (items) => {
+  const result = []
+  items.forEach((item) => {
+    if (!isDiscussionItem(item)) {
+      result.push(item)
+      return
+    }
+
+    const dateKey = toDateKey(item.createdAt)
+    const last = result[result.length - 1]
+    if (last && isDiscussionItem(last) && last.dateKey === dateKey) {
+      last.entries.push({
+        type: item.type,
+        comment: item.comment,
+        createdAt: item.createdAt,
+      })
+      if (item.type === 'comment' && last.type === 'reply') {
+        last.type = 'comment'
+      }
+      if (new Date(item.createdAt) > new Date(last.createdAt)) {
+        last.createdAt = item.createdAt
+      }
+    } else {
+      result.push({
+        type: item.type,
+        icon: item.icon,
+        createdAt: item.createdAt,
+        dateKey,
+        entries: [
+          {
+            type: item.type,
+            comment: item.comment,
+            createdAt: item.createdAt,
+          },
+        ],
+      })
+    }
+  })
+  return result
+}
+
 const fetchTimeline = async () => {
   const [postsRes, repliesRes, tagsRes] = await Promise.all([
     fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
@@ -520,7 +488,7 @@ const fetchTimeline = async () => {
     })),
   ]
   mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-  timelineItems.value = mapped
+  timelineItems.value = combineDiscussionItems(mapped)
 }
 
 const fetchFollowUsers = async () => {

From 9991210db245059281c7617475f424b8d2a75988 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Fri, 19 Sep 2025 11:21:27 +0800
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E9=83=A8=E5=88=86ui=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TimelineCommentGroup.vue       | 36 +++++--------------
 frontend_nuxt/components/TimelinePostItem.vue | 12 +++----
 frontend_nuxt/pages/users/[id].vue            | 28 ++++++++-------
 frontend_nuxt/utils/time.js                   | 29 +++++++++++++++
 4 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/frontend_nuxt/components/TimelineCommentGroup.vue b/frontend_nuxt/components/TimelineCommentGroup.vue
index 89ce08b02..c7b1cd2f7 100644
--- a/frontend_nuxt/components/TimelineCommentGroup.vue
+++ b/frontend_nuxt/components/TimelineCommentGroup.vue
@@ -9,23 +9,6 @@
         <div class="comment-content-item-main">
           <comment-one class="comment-content-item-icon" />
           <div class="comment-content-item-text">
-            <span class="comment-content-item-prefix">
-              在
-              <NuxtLink :to="`/posts/${entry.comment.post.id}`" class="timeline-link">
-                {{ entry.comment.post.title }}
-              </NuxtLink>
-              <template v-if="entry.comment.parentComment">
-                下对
-                <NuxtLink
-                  :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`"
-                  class="timeline-link"
-                >
-                  {{ parentSnippet(entry) }}
-                </NuxtLink>
-                回复了
-              </template>
-              <template v-else> 下评论了 </template>
-            </span>
             <NuxtLink
               :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
               class="timeline-comment-link"
@@ -65,7 +48,7 @@ const entries = computed(() => {
   return []
 })
 
-const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+const formattedDate = computed(() => TimeManager.formatWithDay(props.item.createdAt))
 
 const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
 const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
@@ -93,9 +76,8 @@ const parentSnippet = (entry) =>
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--timeline-card-background, transparent);
+  padding-top: 5px;
+  padding-bottom: 20px;
 }
 
 .timeline-header {
@@ -112,20 +94,20 @@ const parentSnippet = (entry) =>
 .timeline-date {
   font-size: 12px;
   color: var(--timeline-date-color, #888);
+  white-space: nowrap;
 }
 
 .comment-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 3px;
 }
 
 .comment-content-item {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
   gap: 6px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--comment-item-border, rgba(0, 0, 0, 0.05));
 }
 
 .comment-content-item:last-child {
@@ -160,11 +142,11 @@ const parentSnippet = (entry) =>
 .timeline-comment-link {
   font-size: 14px;
   color: var(--link-color);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 .timeline-comment-link:hover {
-  text-decoration: underline;
+  color: var(--primary-color);
 }
 
 .timeline-link {
diff --git a/frontend_nuxt/components/TimelinePostItem.vue b/frontend_nuxt/components/TimelinePostItem.vue
index ae6f92045..77dc6c69c 100644
--- a/frontend_nuxt/components/TimelinePostItem.vue
+++ b/frontend_nuxt/components/TimelinePostItem.vue
@@ -13,11 +13,7 @@
       </div>
       <div class="article-meta" v-if="hasMeta">
         <ArticleCategory v-if="item.post?.category" :category="item.post.category" />
-        <div class="article-tags" v-if="(item.post?.tags?.length ?? 0) > 0">
-          <span class="article-tag" v-for="tag in item.post?.tags" :key="tag.id || tag.name">
-            #{{ tag.name }}
-          </span>
-        </div>
+        <ArticleTags :tags="item.post?.tags" />
         <div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
           <comment-one class="article-comment-count-icon" />
           <span>{{ item.post?.commentCount }}</span>
@@ -29,7 +25,6 @@
 
 <script setup>
 import { computed } from 'vue'
-import ArticleCategory from '~/components/ArticleCategory.vue'
 import { stripMarkdown } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 
@@ -58,8 +53,8 @@ const hasMeta = computed(() => {
 .timeline-container {
   display: flex;
   flex-direction: column;
+  padding-top: 5px;
   gap: 12px;
-  padding: 10px 12px;
   border-radius: 10px;
   background: var(--timeline-card-background, transparent);
 }
@@ -83,6 +78,9 @@ const hasMeta = computed(() => {
 .article-container {
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  padding: 10px;
   gap: 6px;
 }
 
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 1258f8fb6..3bb503924 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -212,13 +212,6 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <!-- <template v-if="item.type === 'post'">
-                    发布了文章
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template> -->
                   <template v-if="item.type === 'post'">
                     <TimelinePostItem :item="item" />
                   </template>
@@ -229,13 +222,17 @@
                     <TimelineCommentGroup :item="item" />
                   </template>
                   <template v-else-if="item.type === 'tag'">
-                    创建了标签
-                    <span class="timeline-link" @click="gotoTag(item.tag)">
+                    <div class="tags-container">
+                      <div class="timeline-tag-title">创建了标签</div>
+                      <!-- <span class="timeline-link" @click="gotoTag(item.tag)">
                       {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
                     </span>
                     <div class="timeline-snippet" v-if="item.tag.description">
                       {{ item.tag.description }}
                     </div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div> -->
+                      <ArticleTags :tags="[item.tag]" />
+                    </div>
                     <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
                 </template>
@@ -979,9 +976,16 @@ watch(selectedTab, async (val) => {
   justify-content: space-between;
 }
 
-.timeline-title {
-  font-size: 18px;
-  font-weight: bold;
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .comment-content {
diff --git a/frontend_nuxt/utils/time.js b/frontend_nuxt/utils/time.js
index 3257e7fac..e9b5127c2 100644
--- a/frontend_nuxt/utils/time.js
+++ b/frontend_nuxt/utils/time.js
@@ -40,4 +40,33 @@ export default class TimeManager {
 
     return `${date.getFullYear()}.${month}.${day} ${timePart}`
   }
+
+  // 仅显示日期（不含时间）
+  static formatWithDay(input) {
+    const date = new Date(input)
+    if (Number.isNaN(date.getTime())) return ''
+
+    const now = new Date()
+
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+    const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)
+
+    if (diffDays === 0) return '今天'
+    if (diffDays === 1) return '昨天'
+    if (diffDays === 2) return '前天'
+
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+
+    if (date.getFullYear() === now.getFullYear()) {
+      return `${month}.${day}`
+    }
+
+    if (date.getFullYear() === now.getFullYear() - 1) {
+      return `去年 ${month}.${day}`
+    }
+
+    return `${date.getFullYear()}.${month}.${day}`
+  }
 }

From 8ebdcd94f5bdf458c1396fcdcafd34926579f9ad Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Fri, 19 Sep 2025 11:30:58 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20timeline=20=E7=BB=A7=E6=89=BF?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/pages/users/[id].vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 3bb503924..95fc1c959 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -223,17 +223,15 @@
                   </template>
                   <template v-else-if="item.type === 'tag'">
                     <div class="tags-container">
-                      <div class="timeline-tag-title">创建了标签</div>
-                      <!-- <span class="timeline-link" @click="gotoTag(item.tag)">
-                      {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                    </span>
+                      <div class="tags-container-item">
+                        <div class="timeline-tag-title">创建了标签</div>
+                        <ArticleTags :tags="[item.tag]" />
+                      </div>
+                      <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                    </div>
                     <div class="timeline-snippet" v-if="item.tag.description">
                       {{ item.tag.description }}
                     </div>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div> -->
-                      <ArticleTags :tags="[item.tag]" />
-                    </div>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
                 </template>
               </BaseTimeline>
@@ -981,6 +979,15 @@ watch(selectedTab, async (val) => {
   flex-direction: row;
   gap: 10px;
   padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
 }
 
 .timeline-tag-title {

From bfa57cce4445a345a53bd7e9137919342a6a9e75 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Fri, 19 Sep 2025 13:44:37 +0800
Subject: [PATCH 7/8] feat: extract timeline tag item component

---
 frontend_nuxt/components/TimelineTagItem.vue | 126 +++++++++++++++++++
 frontend_nuxt/pages/users/[id].vue           |  46 +++----
 2 files changed, 142 insertions(+), 30 deletions(-)
 create mode 100644 frontend_nuxt/components/TimelineTagItem.vue

diff --git a/frontend_nuxt/components/TimelineTagItem.vue b/frontend_nuxt/components/TimelineTagItem.vue
new file mode 100644
index 000000000..09406540e
--- /dev/null
+++ b/frontend_nuxt/components/TimelineTagItem.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="timeline-tag-item">
+    <template v-if="mode === 'timeline'">
+      <div class="tags-container">
+        <div class="tags-container-item">
+          <div class="timeline-tag-title">{{ title }}</div>
+          <ArticleTags v-if="tag" :tags="[tag]" />
+        </div>
+        <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
+      </div>
+      <div v-if="hasDescription" class="timeline-snippet">
+        {{ tag?.description }}
+      </div>
+    </template>
+    <template v-else>
+      <span class="timeline-link" :class="{ clickable: isClickable }" @click="handleTagClick">
+        {{ tag?.name }}<span v-if="tag?.count"> x{{ tag.count }}</span>
+      </span>
+      <div v-if="hasDescription" class="timeline-snippet">
+        {{ tag?.description }}
+      </div>
+      <div v-if="summaryDate" class="timeline-date">{{ summaryDate }}</div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  mode: {
+    type: String,
+    default: 'timeline',
+    validator: (value) => ['timeline', 'summary'].includes(value),
+  },
+  title: {
+    type: String,
+    default: '创建了标签',
+  },
+})
+
+const emit = defineEmits(['tag-click'])
+
+const tag = computed(() => props.item?.tag ?? null)
+const hasDescription = computed(() => {
+  const description = tag.value?.description
+  return !!description
+})
+
+const timelineDate = computed(() => {
+  const date = props.item?.createdAt ?? tag.value?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const summaryDate = computed(() => {
+  const date = tag.value?.createdAt ?? props.item?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const isClickable = computed(() => props.mode === 'summary' && !!tag.value)
+
+const handleTagClick = () => {
+  if (!isClickable.value) return
+  emit('tag-click', tag.value)
+}
+</script>
+
+<style scoped>
+.timeline-tag-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: gray;
+  margin-top: 5px;
+  white-space: nowrap;
+}
+
+.timeline-snippet {
+  font-size: 14px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.timeline-link {
+  font-weight: bold;
+  color: var(--primary-color);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: default;
+}
+
+.timeline-link.clickable {
+  cursor: pointer;
+}
+
+.timeline-link.clickable:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 95fc1c959..aef398201 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -143,15 +143,7 @@
                 <div class="summary-content" v-if="hotPosts.length > 0">
                   <BaseTimeline :items="hotPosts">
                     <template #item="{ item }">
-                      <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                        {{ item.post.title }}
-                      </NuxtLink>
-                      <div class="timeline-snippet">
-                        {{ stripMarkdown(item.post.snippet) }}
-                      </div>
-                      <div class="timeline-date">
-                        {{ formatDate(item.post.createdAt) }}
-                      </div>
+                      <TimelinePostItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -164,15 +156,7 @@
                 <div class="summary-content" v-if="hotTags.length > 0">
                   <BaseTimeline :items="hotTags">
                     <template #item="{ item }">
-                      <span class="timeline-link" @click="gotoTag(item.tag)">
-                        {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                      </span>
-                      <div class="timeline-snippet" v-if="item.tag.description">
-                        {{ item.tag.description }}
-                      </div>
-                      <div class="timeline-date">
-                        {{ formatDate(item.tag.createdAt) }}
-                      </div>
+                      <TimelineTagItem :item="item" mode="summary" @tag-click="gotoTag" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -222,16 +206,7 @@
                     <TimelineCommentGroup :item="item" />
                   </template>
                   <template v-else-if="item.type === 'tag'">
-                    <div class="tags-container">
-                      <div class="tags-container-item">
-                        <div class="timeline-tag-title">创建了标签</div>
-                        <ArticleTags :tags="[item.tag]" />
-                      </div>
-                      <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                    </div>
-                    <div class="timeline-snippet" v-if="item.tag.description">
-                      {{ item.tag.description }}
-                    </div>
+                    <TimelineTagItem :item="item" />
                   </template>
                 </template>
               </BaseTimeline>
@@ -297,6 +272,7 @@ import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
 import TimelinePostItem from '~/components/TimelinePostItem.vue'
+import TimelineTagItem from '~/components/TimelineTagItem.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -386,7 +362,12 @@ const fetchSummary = async () => {
   const postsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-posts`)
   if (postsRes.ok) {
     const data = await postsRes.json()
-    hotPosts.value = data.map((p) => ({ icon: 'file-text', post: p }))
+    hotPosts.value = data.map((p) => ({
+      icon: 'file-text',
+      type: 'post',
+      post: p,
+      createdAt: p.createdAt,
+    }))
   }
 
   const repliesRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-replies`)
@@ -398,7 +379,12 @@ const fetchSummary = async () => {
   const tagsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-tags`)
   if (tagsRes.ok) {
     const data = await tagsRes.json()
-    hotTags.value = data.map((t) => ({ icon: 'tag-one', tag: t }))
+    hotTags.value = data.map((t) => ({
+      icon: 'tag-one',
+      type: 'tag',
+      tag: t,
+      createdAt: t.createdAt,
+    }))
   }
 }
 

From a9d8181940280817cb8afbf1999d9e275a13a9f0 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Fri, 19 Sep 2025 16:21:19 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20timeline=20ui=20=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/BaseTimeline.vue    |  2 +-
 frontend_nuxt/components/TimelineTagItem.vue | 43 +++++++-------------
 frontend_nuxt/pages/users/[id].vue           | 17 +++++---
 3 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index f5d48e537..5888499db 100644
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/frontend_nuxt/components/BaseTimeline.vue
@@ -95,7 +95,7 @@ export default {
 }
 
 .timeline-item:last-child::before {
-  display: none;
+  bottom: 0px;
 }
 
 .timeline-content {
diff --git a/frontend_nuxt/components/TimelineTagItem.vue b/frontend_nuxt/components/TimelineTagItem.vue
index 09406540e..61a79dcb8 100644
--- a/frontend_nuxt/components/TimelineTagItem.vue
+++ b/frontend_nuxt/components/TimelineTagItem.vue
@@ -1,26 +1,16 @@
 <template>
   <div class="timeline-tag-item">
-    <template v-if="mode === 'timeline'">
-      <div class="tags-container">
-        <div class="tags-container-item">
-          <div class="timeline-tag-title">{{ title }}</div>
-          <ArticleTags v-if="tag" :tags="[tag]" />
-        </div>
-        <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
+    <div class="tags-container">
+      <div class="tags-container-item">
+        <div class="timeline-tag-title">创建了标签</div>
+        <ArticleTags v-if="tag" :tags="[tag]" />
+        <span class="timeline-tag-count" v-if="tag?.count"> x{{ tag.count }}</span>
       </div>
-      <div v-if="hasDescription" class="timeline-snippet">
-        {{ tag?.description }}
-      </div>
-    </template>
-    <template v-else>
-      <span class="timeline-link" :class="{ clickable: isClickable }" @click="handleTagClick">
-        {{ tag?.name }}<span v-if="tag?.count"> x{{ tag.count }}</span>
-      </span>
-      <div v-if="hasDescription" class="timeline-snippet">
-        {{ tag?.description }}
-      </div>
-      <div v-if="summaryDate" class="timeline-date">{{ summaryDate }}</div>
-    </template>
+      <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
+    </div>
+    <div v-if="hasDescription" class="timeline-snippet">
+      {{ tag?.description }}
+    </div>
   </div>
 </template>
 
@@ -30,15 +20,6 @@ import TimeManager from '~/utils/time'
 
 const props = defineProps({
   item: { type: Object, required: true },
-  mode: {
-    type: String,
-    default: 'timeline',
-    validator: (value) => ['timeline', 'summary'].includes(value),
-  },
-  title: {
-    type: String,
-    default: '创建了标签',
-  },
 })
 
 const emit = defineEmits(['tag-click'])
@@ -95,6 +76,10 @@ const handleTagClick = () => {
   font-weight: 600;
 }
 
+.timeline-tag-count {
+  font-size: 12px;
+}
+
 .timeline-date {
   font-size: 12px;
   color: gray;
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index aef398201..28fd4e6ba 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -112,19 +112,18 @@
                         {{ item.comment.post.title }}
                       </NuxtLink>
                       <template v-if="item.comment.parentComment">
-                        下对
                         <NuxtLink
                           :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                          class="timeline-link"
+                          class="timeline-comment-link"
                         >
                           {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
                         </NuxtLink>
-                        回复了
+                        <next class="reply-icon" /> 回复了
                       </template>
                       <template v-else> 下评论了 </template>
                       <NuxtLink
                         :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                        class="timeline-link"
+                        class="timeline-comment-link"
                       >
                         {{ stripMarkdownLength(item.comment.content, 200) }}
                       </NuxtLink>
@@ -156,7 +155,7 @@
                 <div class="summary-content" v-if="hotTags.length > 0">
                   <BaseTimeline :items="hotTags">
                     <template #item="{ item }">
-                      <TimelineTagItem :item="item" mode="summary" @tag-click="gotoTag" />
+                      <TimelineTagItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -670,6 +669,11 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
+.reply-icon {
+  color: var(--primary-color);
+  margin-left: 5px;
+}
+
 .profile-page-header-user-info-buttons {
   display: flex;
   flex-direction: row;
@@ -922,8 +926,8 @@ watch(selectedTab, async (val) => {
 
 .timeline-link {
   font-weight: bold;
-  color: var(--primary-color);
   text-decoration: none;
+  color: var(--text-color);
   word-break: break-word;
 }
 
@@ -1014,6 +1018,7 @@ watch(selectedTab, async (val) => {
   color: var(--text-color);
   word-break: break-word;
   text-decoration: underline;
+  margin-left: 5px;
 }
 
 .timeline-comment-link:hover {