xinyin025/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-07-16 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement reaction panel with backend support

Browse Source
This commit is contained in:
Tim
2025-07-09 18:17:35 +08:00
parent 5554594123
commit 4627d34dbe
7 changed files with 213 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
open-isle-cli/src/components/CommentItem.vue
+8 -18
View File
@@ -18,27 +18,14 @@
</div>
<div class="info-content-text" v-html="renderMarkdown(comment.text)"></div>
<div class="article-footer-container">
<div class="reactions-container">
<div class="reactions-viewer">
<div class="reactions-viewer-item-container">
<div class="reactions-viewer-item">🤣</div>
<div class="reactions-viewer-item">❤️</div>
<div class="reactions-viewer-item">👏</div>
</div>
<div class="reactions-count">1882</div>
</div>
<div class="make-reaction-container">
<ReactionsGroup v-model="comment.reactions" content-type="comment" :content-id="comment.id">
<div class="make-reaction-item comment-reaction" @click="toggleEditor">
<i class="far fa-comment"></i>
</div>
<div class="make-reaction-item like-reaction">
<i class="far fa-heart"></i>
</div>
<div class="make-reaction-item copy-link" @click="copyCommentLink">
<i class="fas fa-link"></i>
</div>
<div class="make-reaction-item copy-link" @click="copyCommentLink">
<i class="fas fa-link"></i>
</div>
</div>
</ReactionsGroup>
</div>
<CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" />
<div
@@ -81,6 +68,7 @@ import { renderMarkdown } from '../utils/markdown'
import BaseTimeline from './BaseTimeline.vue'
import { API_BASE_URL, toast } from '../main'
import { getToken } from '../utils/auth'
import ReactionsGroup from './ReactionsGroup.vue'
const CommentItem = {
name: 'CommentItem',
props: {
@@ -137,12 +125,14 @@ const CommentItem = {
time: new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
avatar: data.avatar.username,
text: data.content,
reactions: [],
reply: (data.replies || []).map(r => ({
id: r.id,
userName: r.author.username,
time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
avatar: r.avatar,
text: r.content,
reactions: r.reactions || [],
reply: [],
openReplies: false
})),
@@ -168,7 +158,7 @@ const CommentItem = {
return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
}
}
CommentItem.components = { CommentItem, CommentEditor, BaseTimeline }
CommentItem.components = { CommentItem, CommentEditor, BaseTimeline, ReactionsGroup }
export default CommentItem
</script>