fix: 更新评论项组件，添加回复用户头像和样式优化

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;

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) => {