From 58ff8b177e25cbba33b2e100d17b3e4fe5e0a660 Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Fri, 29 Aug 2025 08:51:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E9=A1=B9=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=9B=9E?=
 =?UTF-8?q?=E5=A4=8D=E7=94=A8=E6=88=B7=E5=A4=B4=E5=83=8F=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/CommentItem.vue | 22 ++++++++++++++++++++--
 frontend_nuxt/pages/posts/[id]/index.vue |  5 +++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index aba727162..03cb6e910 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -23,9 +23,12 @@
             >{{ getMedalTitle(comment.medal) }}</NuxtLink
           >
           <i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i>
-          <span v-if="level >= 2">
+          <span v-if="level >= 2" class="reply-item">
             <i class="fas fa-reply reply-icon"></i>
-            <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
+            <span class="reply-info">
+              <img :src="comment.parentUserAvatar || '/default-avatar.svg'" alt="" class="reply-avatar">
+              <span class="reply-user-name">{{ comment.parentUserName }}</span>
+            </span>
           </span>
           <div class="post-time">{{ comment.time }}</div>
         </div>
@@ -250,6 +253,7 @@ const submitReply = async (parentUserName, text, clear) => {
         medal: data.author.displayMedal,
         text: data.content,
         parentUserName: parentUserName,
+        parentUserAvatar: props.comment.avatar,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
@@ -376,7 +380,21 @@ const handleContentClick = (e) => {
   justify-content: space-between;
 }
 
+.reply-item, .reply-info {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.reply-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
 .reply-icon {
+  color: var(--primary-color);
   margin-right: 10px;
   margin-left: 10px;
   opacity: 0.5;
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index abfece495..d15fc75a1 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -411,7 +411,7 @@ const gatherPostItems = () => {
   }
 }
 
-const mapComment = (c, parentUserName = '', level = 0) => ({
+const mapComment = (c, parentUserName = '', parentUserAvatar = '', level = 0) => ({
   id: c.id,
   userName: c.author.username,
   medal: c.author.displayMedal,
@@ -421,11 +421,12 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
   text: c.content,
   reactions: c.reactions || [],
   pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at),
-  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
+  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, c.author.avatar, level + 1)),
   openReplies: level === 0,
   src: c.author.avatar,
   iconClick: () => navigateTo(`/users/${c.author.id}`, { replace: true }),
   parentUserName: parentUserName,
+  parentUserAvatar: parentUserAvatar,
 })
 
 const getTop = (el) => {