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) }}
-
+
- {{ comment.parentUserName }}
+
+
+ {{ comment.parentUserName }}
+
{{ comment.time }}
@@ -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) => {