jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-13 23:50:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #779 from CH-122/fix/comment

Browse Source 
更新评论项组件，添加回复用户头像和样式优化
This commit is contained in:
Tim
2025-08-29 14:01:17 +08:00
committed by GitHub
parent c5e4da5e07 d7bfeed259
commit fd6fc11630
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend_nuxt/components/CommentItem.vue
View File

@@ -23,9 +23,13 @@
>{{ getMedalTitle(comment.medal) }}</NuxtLink >{{ getMedalTitle(comment.medal) }}</NuxtLink
> >
<i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i> <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> <i class="fas fa-reply reply-icon"></i>
<span class="user-name reply-user-name">{{ comment.parentUserName }}</span> <span class="reply-info">
<BaseImage class="reply-avatar" :src="comment.parentUserAvatar || '/default-avatar.svg'" alt="avatar"
@click="comment.parentUserClick && comment.parentUserClick()" />
<span class="reply-user-name">{{ comment.parentUserName }}</span>
</span>
</span> </span>
<div class="post-time">{{ comment.time }}</div> <div class="post-time">{{ comment.time }}</div>
</div> </div>
@@ -250,6 +254,7 @@ const submitReply = async (parentUserName, text, clear) => {
medal: data.author.displayMedal, medal: data.author.displayMedal,
text: data.content, text: data.content,
parentUserName: parentUserName, parentUserName: parentUserName,
parentUserAvatar: props.comment.avatar,
reactions: [], reactions: [],
reply: (data.replies || []).map((r) => ({ reply: (data.replies || []).map((r) => ({
id: r.id, id: r.id,
@@ -376,7 +381,22 @@ const handleContentClick = (e) => {
justify-content: space-between; 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;
cursor: pointer;
}
.reply-icon { .reply-icon {
color: var(--primary-color);
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
opacity: 0.5; opacity: 0.5;

8
frontend_nuxt/pages/posts/[id]/index.vue
View File

@@ -411,7 +411,7 @@ const gatherPostItems = () => {
} }
} }
const mapComment = (c, parentUserName = '', level = 0) => ({ const mapComment = (c, parentUserName = '', parentUserAvatar = '', parentUserId = '', level = 0) => ({
id: c.id, id: c.id,
userName: c.author.username, userName: c.author.username,
medal: c.author.displayMedal, medal: c.author.displayMedal,
@@ -421,11 +421,13 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
text: c.content, text: c.content,
reactions: c.reactions || [], reactions: c.reactions || [],
pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at), 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, c.author.id, level + 1)),
openReplies: level === 0, openReplies: level === 0,
src: c.author.avatar, src: c.author.avatar,
iconClick: () => navigateTo(`/users/${c.author.id}`, { replace: true }), iconClick: () => navigateTo(`/users/${c.author.id}`),
parentUserName: parentUserName, parentUserName: parentUserName,
parentUserAvatar: parentUserAvatar,
parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
}) })
const getTop = (el) => { const getTop = (el) => {