feat: update message page

This commit is contained in:
tim
2025-07-09 19:57:24 +08:00
parent 8fe0a086ed
commit 8baae21fb8
2 changed files with 9 additions and 5 deletions

View File

@@ -4,10 +4,13 @@
<div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
<template v-if="displayedReactions.length">
<div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
<div class="reactions-count">{{ totalCount }}</div>
</template>
<div v-else class="reactions-viewer-item placeholder">点击以表态</div>
<div v-else class="reactions-viewer-item placeholder">
<i class="far fa-smile"></i>
<span class="reactions-viewer-item-placeholder-text">点击以表态</span>
</div>
</div>
<div class="reactions-count">{{ totalCount }}</div>
</div>
<div class="make-reaction-container">
<div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')" :class="{ selected: userReacted('LIKE') }">
@@ -163,7 +166,8 @@ export default {
.reactions-viewer { display: flex; flex-direction: row; gap: 20px; align-items: center; }
.reactions-viewer-item-container { display: flex; flex-direction: row; gap: 2px; align-items: center; cursor: pointer; }
.reactions-viewer-item { font-size: 16px; }
.reactions-viewer-item.placeholder { opacity: 0.5; }
.reactions-viewer-item.placeholder { opacity: 0.5; display: flex; flex-direction: row; align-items: center; }
.reactions-viewer-item-placeholder-text { font-size: 14px; padding-left: 5px; }
.reactions-count { font-size: 16px; opacity: 0.5; }
.make-reaction-container { display: flex; flex-direction: row; gap: 10px; }
.make-reaction-item { cursor: pointer; padding: 10px; border-radius: 50%; opacity: 0.5; font-size: 20px; }

View File

@@ -53,7 +53,7 @@
{{ sanitizeDescription(item.post.title) }}
</router-link>
</span>
表达了 "{{ item.emoji }}"
进行了表态
</div>
</template>
<template v-else-if="item.type === 'REACTION' && item.comment">
@@ -64,7 +64,7 @@
{{ sanitizeDescription(item.comment.content) }}
</router-link>
</span>
表达了 "{{ item.emoji }}"
进行了表态
</div>
</template>
<template v-else>