fix: 支持回复/reactions

This commit is contained in:
Tim
2025-08-25 17:06:44 +08:00
parent 6409531a64
commit 02d366e2c7
2 changed files with 14 additions and 5 deletions

View File

@@ -19,7 +19,7 @@
</div> </div>
<div class="reactions-viewer-item placeholder" @click="openPanel"> <div class="reactions-viewer-item placeholder" @click="openPanel">
<i class="far fa-smile"></i> <i class="far fa-smile reactions-viewer-item-placeholder-icon"></i>
<!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> --> <!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> -->
</div> </div>
</template> </template>
@@ -37,7 +37,11 @@
</div> </div>
</div> </div>
<div class="make-reaction-container"> <div class="make-reaction-container">
<div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')"> <div
v-if="props.contentType !== 'message'"
class="make-reaction-item like-reaction"
@click="toggleReaction('LIKE')"
>
<i v-if="!userReacted('LIKE')" class="far fa-heart"></i> <i v-if="!userReacted('LIKE')" class="far fa-heart"></i>
<i v-else class="fas fa-heart"></i> <i v-else class="fas fa-heart"></i>
<span class="reactions-count" v-if="likeCount">{{ likeCount }}</span> <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
@@ -238,6 +242,10 @@ onMounted(async () => {
font-size: 16px; font-size: 16px;
} }
.reactions-viewer-item-placeholder-icon {
opacity: 0.5;
}
.reactions-viewer-item-placeholder-text { .reactions-viewer-item-placeholder-text {
font-size: 14px; font-size: 14px;
padding-left: 5px; padding-left: 5px;

View File

@@ -43,7 +43,7 @@
:content-id="item.id" :content-id="item.id"
@update:modelValue="(v) => (item.reactions = v)" @update:modelValue="(v) => (item.reactions = v)"
> >
<div class="reply-btn" @click="setReply(item)">回复</div> <i class="fas fa-reply reply-btn" @click="setReply(item)"> 写个回复...</i>
</ReactionsGroup> </ReactionsGroup>
</template> </template>
</BaseTimeline> </BaseTimeline>
@@ -552,7 +552,7 @@ onUnmounted(() => {
.reply-preview { .reply-preview {
padding: 5px 10px; padding: 5px 10px;
border-left: 2px solid var(--primary-color); border-left: 5px solid var(--primary-color);
margin-bottom: 5px; margin-bottom: 5px;
font-size: 13px; font-size: 13px;
} }
@@ -566,6 +566,7 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
opacity: 0.6; opacity: 0.6;
font-size: 12px;
} }
.reply-btn:hover { .reply-btn:hover {
@@ -575,7 +576,7 @@ onUnmounted(() => {
.active-reply { .active-reply {
background-color: var(--bg-color-soft); background-color: var(--bg-color-soft);
padding: 5px 10px; padding: 5px 10px;
border-left: 3px solid var(--primary-color); border-left: 5px solid var(--primary-color);
margin-bottom: 5px; margin-bottom: 5px;
font-size: 13px; font-size: 13px;
} }