feat: improve friend circle like state handling

This commit is contained in:
liuwei
2026-04-07 13:08:12 +08:00
parent dd8c5b1829
commit 4423f64272
2 changed files with 82 additions and 9 deletions

View File

@@ -83,8 +83,19 @@
<div class="post-actions">
<el-button type="text" @click="openRawDialog(post)">原始数据</el-button>
<el-button type="text" @click="openCommentDialog(post)">评论</el-button>
<el-button type="text" @click="toggleLike(post, false)">点赞</el-button>
<el-button type="text" class="danger-text" @click="toggleLike(post, true)">取消赞</el-button>
<el-button
v-if="!post.is_liked"
type="text"
@click="toggleLike(post, false)">
点赞
</el-button>
<el-button
v-else
type="text"
class="danger-text"
@click="toggleLike(post, true)">
取消点赞
</el-button>
</div>
</div>
@@ -104,7 +115,7 @@
class="post-media-item"
:class="{ 'is-video': media.is_video }"
@click="openMediaPreview(media)">
<img :src="media.thumb || media.hd || media.url" :alt="post.content || '朋友圈媒体'">
<img :src="getMediaProxyUrl(media.thumb || media.hd || media.url)" :alt="post.content || '朋友圈媒体'">
<div v-if="media.is_video" class="video-badge">
<i class="el-icon-video-play"></i>
<span>{% raw %}{{ formatVideoDuration(media.video_duration) }}{% endraw %}</span>
@@ -114,7 +125,7 @@
<div class="post-feedback">
<div class="feedback-block">
<div class="feedback-title">点赞 {% raw %}{{ post.likes.length }}{% endraw %}</div>
<div class="feedback-title">点赞 {% raw %}{{ post.likes.length || post.like_count || 0 }}{% endraw %}</div>
<div v-if="post.likes.length" class="feedback-list">
<span v-for="(like, index) in post.likes" :key="`${post.id}-like-${index}`" class="feedback-chip">
{% raw %}{{ like.author_name || like.author_wxid }}{% endraw %}
@@ -214,8 +225,8 @@
<img v-if="previewMedia && !previewMedia.is_video && previewImageUrl" :src="previewImageUrl" class="large-preview" alt="朋友圈图片预览">
<video
v-if="previewMedia && previewMedia.is_video"
:src="previewMedia.url"
:poster="previewMedia.thumb || previewMedia.hd || previewMedia.url"
:src="getMediaProxyUrl(previewMedia.url)"
:poster="getMediaProxyUrl(previewMedia.thumb || previewMedia.hd || previewMedia.url)"
class="large-video"
controls
playsinline
@@ -401,9 +412,16 @@
},
openMediaPreview(media) {
this.previewMedia = media;
this.previewImageUrl = media.hd || media.url || media.thumb || '';
this.previewImageUrl = this.getMediaProxyUrl(media.hd || media.url || media.thumb || '');
this.imagePreviewVisible = true;
},
getMediaProxyUrl(url) {
if (!url) return '';
if (url.startsWith('/api/friend_circle/media_proxy')) {
return url;
}
return `/api/friend_circle/media_proxy?url=${encodeURIComponent(url)}`;
},
formatVideoDuration(value) {
const seconds = Math.round(parseFloat(value || 0));
if (!seconds || Number.isNaN(seconds)) return '视频';