feat: 列表图片传递到详情页面

Author: Taois

dashboard/src/components/SearchResults.vue

@@ -390,7 +390,9 @@ const handleVideoClick = (video) => {
           sourceRouteName: props.sourceRoute?.name,
           sourceRouteParams: JSON.stringify(props.sourceRoute?.params || {}),
           sourceRouteQuery: JSON.stringify(props.sourceRoute?.query || {}),
-          fromSearch: 'true' // 标识来自搜索结果
+          fromSearch: 'true', // 标识来自搜索结果
+          // 添加来源图片信息，用于详情页图片备用
+          sourcePic: video.vod_pic
         }
       });
   }

dashboard/src/components/VideoGrid.vue

@@ -167,7 +167,9 @@ const handleVideoClick = async (video) => {
       // 添加来源页面信息
       sourceRouteName: props.sourceRoute?.name || '',
       sourceRouteParams: JSON.stringify(props.sourceRoute?.params || {}),
-      sourceRouteQuery: JSON.stringify(props.sourceRoute?.query || {})
+      sourceRouteQuery: JSON.stringify(props.sourceRoute?.query || {}),
+      // 添加来源图片信息，用于详情页图片备用
+      sourcePic: video.vod_pic
     }
     
     router.push({

dashboard/src/components/actions/InputAction.vue

@@ -555,7 +555,9 @@ export default {
             tempSiteExt: site.ext,
             // 标识从专项动作进入
             fromSpecialAction: 'true',
-            actionType: '__detail__'
+            actionType: '__detail__',
+            // 添加来源图片信息，用于详情页图片备用（专项动作通常没有图片）
+            sourcePic: ''
           }
         })
         

dashboard/src/views/BookGallery.vue

@@ -429,7 +429,9 @@ const goToDetail = async (item) => {
           // 添加来源页面信息
           sourceRouteName: 'BookGallery',
           sourceRouteParams: JSON.stringify({}),
-          sourceRouteQuery: JSON.stringify({})
+          sourceRouteQuery: JSON.stringify({}),
+          // 添加来源图片信息，用于详情页图片备用
+          sourcePic: item.pic
         }
       })
     

dashboard/src/views/Collection.vue

@@ -378,7 +378,9 @@ const goToDetail = async (item) => {
           // 添加来源页面信息
           sourceRouteName: 'Collection',
           sourceRouteParams: JSON.stringify({}),
-          sourceRouteQuery: JSON.stringify({})
+          sourceRouteQuery: JSON.stringify({}),
+          // 添加来源图片信息，用于详情页图片备用
+          sourcePic: item.pic
         }
       })
     

dashboard/src/views/History.vue

@@ -372,7 +372,9 @@ const goToDetail = async (item) => {
           // 添加来源页面信息
           sourceRouteName: 'History',
           sourceRouteParams: JSON.stringify({}),
-          sourceRouteQuery: JSON.stringify({})
+          sourceRouteQuery: JSON.stringify({}),
+          // 添加来源图片信息，用于详情页图片备用
+          sourcePic: item.pic
         }
     })
   } catch (error) {

dashboard/src/views/Video.vue

@@ -441,7 +441,9 @@ const handleRefreshList = () => {
            sourceRouteName: route.name,
            sourceRouteParams: JSON.stringify(route.params),
            sourceRouteQuery: JSON.stringify({ ...route.query, activeKey: currentActiveKey.value }),
-           fromSearch: fromSearch // 标识是否来自搜索
+           fromSearch: fromSearch, // 标识是否来自搜索
+           // 添加来源图片信息，用于详情页图片备用
+           sourcePic: video.vod_pic
          }
        });
   }
@@ -504,7 +506,9 @@ const handlePush = async (vodId) => {
         // 传递来源页面信息
         sourceRouteName: route.name,
         sourceRouteParams: JSON.stringify(route.params),
-        sourceRouteQuery: JSON.stringify(route.query)
+        sourceRouteQuery: JSON.stringify(route.query),
+        // 添加来源图片信息，用于详情页图片备用（推送时通常没有图片）
+        sourcePic: ''
       }
     });
     

dashboard/src/views/VideoDetail.vue

@@ -118,7 +118,7 @@
       <a-card class="video-info-card" :class="{ 'collapsed-when-playing': showVideoPlayer || showBookReader }">
         <div class="video-header">
           <div class="video-poster" @click="showImageModal">
-            <img :src="videoDetail.vod_pic" :alt="videoDetail.vod_name" @error="handleImageError" />
+            <img :src="finalPosterImage" :alt="videoDetail.vod_name" @error="handleImageError" />
             <div class="poster-overlay">
               <icon-eye class="view-icon" />
               <span>查看大图</span>
@@ -318,6 +318,7 @@ const descriptionExpanded = ref(false)
 const currentRoute = ref(0)
 const currentEpisode = ref(0)
 const favoriteLoading = ref(false)
+const imageErrorCount = ref(0) // 图片加载失败计数器
 // 当前使用的站源信息（可能是全局站源或临时站源）
 const currentSiteInfo = ref({
   name: '',
@@ -413,6 +414,20 @@ const viewerOptions = ref({
 })
 
 // 计算属性
+// 最终显示的海报图片
+const finalPosterImage = computed(() => {
+  // 优先使用详情页接口返回的图片
+  if (videoDetail.value?.vod_pic) {
+    return videoDetail.value.vod_pic
+  }
+  // 其次使用来源页面传递的图片
+  if (originalVideoInfo.value?.sourcePic) {
+    return originalVideoInfo.value.sourcePic
+  }
+  // 最后使用默认图片
+  return '/src/assets/default-poster.svg'
+})
+
 const playRoutes = computed(() => {
   if (!videoDetail.value?.vod_play_from || !videoDetail.value?.vod_play_url) {
     return []
@@ -491,6 +506,9 @@ const loadVideoDetail = async () => {
     return
   }
 
+  // 重置图片错误计数器
+  imageErrorCount.value = 0
+
   // 从路由参数中获取原始视频信息
   originalVideoInfo.value = {
     id: route.params.id,
@@ -503,7 +521,8 @@ const loadVideoDetail = async () => {
     remarks: route.query.remarks || '',
     content: route.query.content || '',
     actor: route.query.actor || '',
-    director: route.query.director || ''
+    director: route.query.director || '',
+    sourcePic: route.query.sourcePic || '' // 来源页面的图片，用于备用
   }
 
   // 检查是否有当前站点
@@ -753,20 +772,32 @@ const handleImageError = (event) => {
   if (event.target.src.includes('default-poster.svg')) {
     return
   }
-  // 使用BASE_URL确保在任何路由层级和部署环境下都能正确访问
+  
+  imageErrorCount.value++
+  
+  // 第一次失败：如果当前显示的是详情页接口返回的图片，尝试使用来源页面的图片
+  if (imageErrorCount.value === 1 && originalVideoInfo.value?.sourcePic && 
+      videoDetail.value?.vod_pic && event.target.src === videoDetail.value.vod_pic) {
+    event.target.src = originalVideoInfo.value.sourcePic
+    return
+  }
+  
+  // 第二次失败或没有备用图片：使用默认图片
   const basePath = import.meta.env.BASE_URL || '/'
   event.target.src = `${basePath}default-poster.svg`
   event.target.style.objectFit = 'contain'
   event.target.style.backgroundColor = '#f7f8fa'
 }
 
 const showImageModal = () => {
-  if (videoDetail.value?.vod_pic) {
+  const currentImage = finalPosterImage.value
+  // 只有当不是默认图片时才显示大图查看
+  if (currentImage && !currentImage.includes('default-poster.svg')) {
     // 设置当前图片到 viewer，包含图片URL和名称
-    viewerImages.value = [videoDetail.value.vod_pic]
+    viewerImages.value = [currentImage]
     viewerImageData.value = [{
-      src: videoDetail.value.vod_pic,
-      name: videoDetail.value.vod_name || '未知标题'
+      src: currentImage,
+      name: videoDetail.value?.vod_name || originalVideoInfo.value?.name || '未知标题'
     }]
     
     // 等待下一个 tick 后显示 viewer