feat: improve friend circle media and detail rendering

admin/dashboard/templates/friend_circle.html

@@ -90,9 +90,25 @@
 
                     <div class="post-content">{% raw %}{{ post.content || '这条朋友圈没有解析出文字内容' }}{% endraw %}</div>
 
+                    <div v-if="post.location && (post.location.poi_name || post.location.poi_address || post.location.city)" class="post-location">
+                        <i class="el-icon-location-outline"></i>
+                        <span>
+                            {% raw %}{{ post.location.poi_name || post.location.poi_address || post.location.city }}{% endraw %}
+                        </span>
+                    </div>
+
                     <div v-if="post.media && post.media.length" class="post-media-grid">
-                        <div v-for="(media, index) in post.media" :key="`${post.id}-${index}`" class="post-media-item">
-                            <img :src="media.thumb || media.url" :alt="post.content || '朋友圈图片'" @click="previewImage(media)">
+                        <div
+                            v-for="(media, index) in post.media"
+                            :key="`${post.id}-${index}`"
+                            class="post-media-item"
+                            :class="{ 'is-video': media.is_video }"
+                            @click="openMediaPreview(media)">
+                            <img :src="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>
+                            </div>
                         </div>
                     </div>
 
@@ -195,7 +211,16 @@
     </el-dialog>
 
     <el-dialog :visible.sync="imagePreviewVisible" width="70%" class="image-preview-dialog">
-        <img v-if="previewImageUrl" :src="previewImageUrl" class="large-preview" alt="朋友圈图片预览">
+        <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"
+            class="large-video"
+            controls
+            playsinline
+            webkit-playsinline>
+        </video>
     </el-dialog>
 </div>
 {% endblock %}
@@ -229,6 +254,7 @@
                 rawDialogVisible: false,
                 imagePreviewVisible: false,
                 previewImageUrl: '',
+                previewMedia: null,
                 rawDialogContent: '',
                 selectedPost: null,
                 commentForm: {
@@ -373,10 +399,18 @@
                 this.rawDialogContent = JSON.stringify(post.raw || post, null, 2);
                 this.rawDialogVisible = true;
             },
-            previewImage(media) {
-                this.previewImageUrl = media.url || media.thumb || '';
+            openMediaPreview(media) {
+                this.previewMedia = media;
+                this.previewImageUrl = media.hd || media.url || media.thumb || '';
                 this.imagePreviewVisible = true;
             },
+            formatVideoDuration(value) {
+                const seconds = Math.round(parseFloat(value || 0));
+                if (!seconds || Number.isNaN(seconds)) return '视频';
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins}:${String(secs).padStart(2, '0')}`;
+            },
             resetFilters() {
                 this.viewMode = 'home';
                 this.selectedTowxid = '';
@@ -413,11 +447,28 @@
     .post-meta { font-size: 12px; color: #64748b; margin-top: 3px; }
     .post-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
     .post-content { color: #0f172a; line-height: 1.8; margin-bottom: 14px; white-space: pre-wrap; word-break: break-word; }
+    .post-location {
+        display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px;
+        border-radius: 999px; background: rgba(14,165,233,0.08); color: #0369a1; font-size: 13px; font-weight: 600;
+        border: 1px solid rgba(14,165,233,0.12);
+    }
     .post-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-bottom: 14px; }
     .post-media-item img, .upload-preview-item img {
         width: 100%; height: 108px; object-fit: cover; border-radius: 16px; cursor: pointer;
         border: 1px solid rgba(148,163,184,0.14); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
     }
+    .post-media-item { position: relative; }
+    .post-media-item.is-video::after {
+        content: ''; position: absolute; inset: 0; border-radius: 16px;
+        background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.3));
+        pointer-events: none;
+    }
+    .video-badge {
+        position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
+        padding: 6px 10px; border-radius: 999px; background: rgba(15,23,42,0.72); color: #fff;
+        font-size: 12px; font-weight: 600; z-index: 2;
+        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
+    }
     .post-feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
     .feedback-block {
         padding: 14px; border-radius: 18px; background: rgba(248,250,252,0.88);
@@ -448,6 +499,7 @@
         border: 1px solid rgba(148,163,184,0.12);
     }
     .large-preview { width: 100%; border-radius: 18px; }
+    .large-video { width: 100%; max-height: 75vh; border-radius: 18px; background: #000; }
     @media (max-width: 1100px) {
         .friend-circle-grid { grid-template-columns: 1fr; }
         .post-feedback { grid-template-columns: 1fr; }