From 23e3e68fa9a0738b69bfcf878983250b09d9bb50 Mon Sep 17 00:00:00 2001
From: taiyi <shuobo1224@qq.com>
Date: Sun, 12 Apr 2026 15:30:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E6=89=8B=E6=9C=BA=E7=AB=AF=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/BackgroundsView.vue | 102 ++++++++++++++++++++++++
 frontend/src/views/ProfileView.vue     | 105 +++++++++++++++++++++++++
 2 files changed, 207 insertions(+)

diff --git a/frontend/src/views/BackgroundsView.vue b/frontend/src/views/BackgroundsView.vue
index c2925da..56faa81 100644
--- a/frontend/src/views/BackgroundsView.vue
+++ b/frontend/src/views/BackgroundsView.vue
@@ -40,10 +40,13 @@
             <video
               v-if="background.resource_type === 2"
               :src="background.resource_url || defaultThumbnail"
+              :poster="getVideoPoster(background)"
               :alt="background.name"
               class="background-video"
               muted
               loop
+              preload="metadata"
+              playsinline
               @mouseenter="handleVideoHover(true)"
               @mouseleave="handleVideoHover(false)"
             />
@@ -252,6 +255,7 @@ export default {
     return {
       backgrounds: [],
       filteredBackgrounds: [],
+      videoPosterMap: {},
       showCreateDialog: false,
       showPreviewDialog: false,
       previewBackgroundData: null,
@@ -286,6 +290,7 @@ export default {
         const responseData = response.data;
         this.backgrounds = (responseData && responseData.data) ? responseData.data : [];
         this.filterBackgrounds();
+        await this.ensureVideoPosters(this.filteredBackgrounds);
       } catch (error) {
         console.error('Failed to load backgrounds:', error)
         this.backgrounds = [];
@@ -321,6 +326,103 @@ export default {
       this.showPreviewDialog = true
     },
 
+    async generateVideoPoster(background) {
+      return new Promise((resolve) => {
+        if (!background?.id || !background?.resource_url) {
+          resolve('')
+          return
+        }
+
+        const cacheKey = String(background.id)
+        if (this.videoPosterMap[cacheKey]) {
+          resolve(this.videoPosterMap[cacheKey])
+          return
+        }
+
+        const video = document.createElement('video')
+        video.crossOrigin = 'anonymous'
+        video.muted = true
+        video.playsInline = true
+        video.preload = 'metadata'
+
+        let settled = false
+        let timeoutId = null
+
+        const cleanUp = () => {
+          video.pause()
+          video.removeAttribute('src')
+          video.load()
+        }
+
+        const done = (value = '') => {
+          if (settled) return
+          settled = true
+          if (timeoutId) {
+            window.clearTimeout(timeoutId)
+          }
+          cleanUp()
+          resolve(value)
+        }
+
+        const captureFrame = () => {
+          try {
+            const canvas = document.createElement('canvas')
+            canvas.width = video.videoWidth || 360
+            canvas.height = video.videoHeight || 640
+            const ctx = canvas.getContext('2d')
+            if (!ctx) {
+              done('')
+              return
+            }
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            const poster = canvas.toDataURL('image/jpeg', 0.82)
+            this.videoPosterMap[cacheKey] = poster
+            done(poster)
+          } catch (error) {
+            done('')
+          }
+        }
+
+        timeoutId = window.setTimeout(() => done(''), 5000)
+
+        video.addEventListener('loadeddata', () => {
+          if (video.readyState >= 2) {
+            video.currentTime = 0
+          } else {
+            captureFrame()
+          }
+        }, { once: true })
+
+        video.addEventListener('seeked', () => {
+          captureFrame()
+        }, { once: true })
+
+        video.addEventListener('error', () => {
+          done('')
+        }, { once: true })
+
+        video.src = background.resource_url
+      })
+    },
+
+    async ensureVideoPosters(backgrounds) {
+      const videoList = (backgrounds || []).filter(bg => bg.resource_type === 2)
+      await Promise.all(videoList.map(async (bg) => {
+        const key = String(bg.id)
+        if (!this.videoPosterMap[key]) {
+          const generatedPoster = await this.generateVideoPoster(bg)
+          if (generatedPoster) {
+            this.videoPosterMap[key] = generatedPoster
+          }
+        }
+      }))
+    },
+
+    getVideoPoster(background) {
+      const key = String(background?.id || '')
+      return background?.thumbnail || this.videoPosterMap[key] || background?.resource_url || this.defaultThumbnail
+    },
+
     handleVideoHover(isHover) {
       // 鼠标悬停时播放/暂停视频
       const videoElements = document.querySelectorAll('.background-video')
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 85d785c..8c244b5 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -116,10 +116,13 @@
                 <video
                   v-if="background.resource_type === 2"
                   :src="background.resource_url"
+                  :poster="getVideoPoster(background)"
                   :alt="background.name"
                   class="background-video"
                   muted
                   loop
+                  preload="metadata"
+                  playsinline
                   @mouseenter="handleVideoHover(true, $event)"
                   @mouseleave="handleVideoHover(false, $event)"
                 />
@@ -445,6 +448,7 @@ export default {
     // 响应式数据
     const userInfo = ref({})
     const userBackgrounds = ref([])
+    const videoPosterMap = ref({})
     const loading = ref(false)
     const showPreviewDialog = ref(false)
     const previewBackgroundData = ref(null)
@@ -557,6 +561,7 @@ export default {
           ...bg,
           is_default: false
         }))
+        await ensureVideoPosters(userBackgrounds.value)
       } catch (error) {
         console.error('Failed to load user backgrounds:', error)
         if (error.response?.status === 401 || error.response?.status === 403) {
@@ -579,6 +584,105 @@ export default {
       ElMessage.success('刷新完成')
     }
 
+    // 生成视频首帧封面（移动端兜底）
+    const generateVideoPoster = (background) => {
+      return new Promise((resolve) => {
+        if (!background?.id || !background?.resource_url) {
+          resolve('')
+          return
+        }
+
+        const cacheKey = String(background.id)
+        if (videoPosterMap.value[cacheKey]) {
+          resolve(videoPosterMap.value[cacheKey])
+          return
+        }
+
+        const video = document.createElement('video')
+        video.crossOrigin = 'anonymous'
+        video.muted = true
+        video.playsInline = true
+        video.preload = 'metadata'
+
+        let settled = false
+        let timeoutId = null
+        const done = (value = '') => {
+          if (settled) return
+          settled = true
+          if (timeoutId) {
+            window.clearTimeout(timeoutId)
+          }
+          cleanUp()
+          resolve(value)
+        }
+
+        const cleanUp = () => {
+          video.pause()
+          video.removeAttribute('src')
+          video.load()
+        }
+
+        const captureFrame = () => {
+          try {
+            const canvas = document.createElement('canvas')
+            canvas.width = video.videoWidth || 360
+            canvas.height = video.videoHeight || 640
+            const ctx = canvas.getContext('2d')
+            if (!ctx) {
+              done('')
+              return
+            }
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            const poster = canvas.toDataURL('image/jpeg', 0.82)
+            videoPosterMap.value[cacheKey] = poster
+            done(poster)
+          } catch (e) {
+            done('')
+          }
+        }
+
+        timeoutId = window.setTimeout(() => done(''), 5000)
+
+        video.addEventListener('loadeddata', () => {
+          if (video.readyState >= 2) {
+            video.currentTime = 0
+          } else {
+            captureFrame()
+          }
+        }, { once: true })
+
+        video.addEventListener('seeked', () => {
+          captureFrame()
+        }, { once: true })
+
+        video.addEventListener('error', () => {
+          done('')
+        }, { once: true })
+
+        video.src = background.resource_url
+      })
+    }
+
+    // 批量预生成视频封面
+    const ensureVideoPosters = async (backgrounds) => {
+      const videoList = (backgrounds || []).filter(bg => bg.resource_type === 2)
+      await Promise.all(videoList.map(async (bg) => {
+        const key = String(bg.id)
+        if (!videoPosterMap.value[key]) {
+          const generatedPoster = await generateVideoPoster(bg)
+          if (generatedPoster) {
+            videoPosterMap.value[key] = generatedPoster
+          }
+        }
+      }))
+    }
+
+    // 获取视频封面图，优先使用后端thumbnail，其次使用首帧兜底
+    const getVideoPoster = (background) => {
+      const key = String(background?.id || '')
+      return background?.thumbnail || videoPosterMap.value[key] || background?.resource_url || ''
+    }
+
     // 视频悬停处理
     const handleVideoHover = (isHover, event) => {
       const video = event.target
@@ -708,6 +812,7 @@ export default {
       handleMenuSelect,
       handleAvatarClick,
       refreshBackgrounds,
+      getVideoPoster,
       handleVideoHover,
       enterChat,
       previewBackground,