diff --git a/frontend/src/components/CommentItem.vue b/frontend/src/components/CommentItem.vue index 5050c5e6b..6c06771d9 100644 --- a/frontend/src/components/CommentItem.vue +++ b/frontend/src/components/CommentItem.vue @@ -10,7 +10,11 @@
-
{{ comment.userName }}
+ {{ comment.userName }} + + + {{ comment.parentUserName }} +
{{ comment.time }}
@@ -33,33 +37,23 @@
- +
-
+
{{ replyCount }}条回复
-
- +
+ -
- +
@@ -118,6 +112,27 @@ const CommentItem = { const toggleEditor = () => { showEditor.value = !showEditor.value } + + // 合并所有子回复为一个扁平数组 + const flattenReplies = (list) => { + let result = [] + for (const r of list) { + result.push(r) + if (r.reply && r.reply.length > 0) { + result = result.concat(flattenReplies(r.reply)) + } + } + return result + } + + const replyList = computed(() => { + if (props.level < 1) { + return props.comment.reply + } + + return flattenReplies(props.comment.reply || []) + }) + const isAuthor = computed(() => authState.username === props.comment.userName) const isAdmin = computed(() => authState.role === 'ADMIN') const commentMenuItems = computed(() => @@ -208,7 +223,7 @@ const CommentItem = { lightboxVisible.value = true } } - return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount } + return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList } } } @@ -249,6 +264,15 @@ export default CommentItem justify-content: space-between; } +.reply-icon { + margin-right: 10px; + margin-left: 10px; + opacity: 0.5; +} + +.reply-user-name { + opacity: 0.3; +} @keyframes highlight { from { diff --git a/frontend/src/views/PostPageView.vue b/frontend/src/views/PostPageView.vue index 01afe2316..89d6967ce 100644 --- a/frontend/src/views/PostPageView.vue +++ b/frontend/src/views/PostPageView.vue @@ -216,17 +216,18 @@ export default { } } - const mapComment = (c, level = 0) => ({ + const mapComment = (c, parentUserName = '', level = 0) => ({ id: c.id, userName: c.author.username, time: TimeManager.format(c.createdAt), avatar: c.author.avatar, text: c.content, reactions: c.reactions || [], - reply: (c.replies || []).map(r => mapComment(r, level + 1)), + reply: (c.replies || []).map(r => mapComment(r, c.author.username, level + 1)), openReplies: level === 0, src: c.author.avatar, - iconClick: () => router.push(`/users/${c.author.id}`) + iconClick: () => router.push(`/users/${c.author.id}`), + parentUserName: parentUserName }) const getTopRelativeTo = (el, container) => {