fix(aigc): correct generated media preview handling

update ResultPreview component to use proper image and video result URLs
refine isVideo detection logic across detail and shared work pages
add pointer-events none to preview elements to avoid blocking user interactions
standardize media URL usage between AIGC detail and shared work components
This commit is contained in:
duanshuwen
2026-07-16 21:24:38 +08:00
parent 487caf9dbe
commit 38dbf7afc8
4 changed files with 21 additions and 8 deletions

View File

@@ -3,11 +3,12 @@
<video <video
v-if="result.mediaType === 'video'" v-if="result.mediaType === 'video'"
class="result-preview-image" class="result-preview-image"
:src="result.cover" :src="result.videoResultUrl"
:poster="result.imageResultUrl"
controls controls
object-fit="cover" object-fit="cover"
/> />
<image v-else class="result-preview-image" :src="result.cover" mode="aspectFill" /> <image v-else class="result-preview-image" :src="result.imageResultUrl" mode="aspectFill" />
<view class="result-preview-shade" /> <view class="result-preview-shade" />
<view class="result-preview-caption"> <view class="result-preview-caption">

View File

@@ -31,6 +31,7 @@
rgba(0, 0, 0, 0.16) 48%, rgba(0, 0, 0, 0.16) 48%,
rgba(0, 0, 0, 0.74) 100% rgba(0, 0, 0, 0.74) 100%
); );
pointer-events: none;
} }
.result-preview-caption { .result-preview-caption {
@@ -38,6 +39,7 @@
right: 18px; right: 18px;
bottom: 18px; bottom: 18px;
left: 18px; left: 18px;
pointer-events: none;
} }
.result-preview-badge { .result-preview-badge {

View File

@@ -65,7 +65,7 @@ const result = computed(() => {
const imageUrl = record.imageResultUrl || ""; const imageUrl = record.imageResultUrl || "";
const videoUrl = record.videoResultUrl || ""; const videoUrl = record.videoResultUrl || "";
const isVideo = Boolean(videoUrl) && (record.generatorType === 1 || !imageUrl); const isVideo = Number(record.generatorType) === 1;
const typeText = getMappedText(GENERATOR_TYPE_TEXT, record.generatorType, "类型"); const typeText = getMappedText(GENERATOR_TYPE_TEXT, record.generatorType, "类型");
const statusText = getMappedText(TASK_STATUS_TEXT, record.taskStatus, "状态"); const statusText = getMappedText(TASK_STATUS_TEXT, record.taskStatus, "状态");
const consumedText = const consumedText =
@@ -76,7 +76,9 @@ const result = computed(() => {
return { return {
id: record.taskId, id: record.taskId,
title: record.itemTitle || record.taskId || "生成结果", title: record.itemTitle || record.taskId || "生成结果",
cover: isVideo ? videoUrl : imageUrl || videoUrl, cover: isVideo ? videoUrl : imageUrl,
imageResultUrl: imageUrl,
videoResultUrl: videoUrl,
mediaType: isVideo ? "video" : "image", mediaType: isVideo ? "video" : "image",
accent: "#0a4d46", accent: "#0a4d46",
variantLabel: typeText, variantLabel: typeText,

View File

@@ -7,9 +7,9 @@
<view class="shared-work-scroll"> <view class="shared-work-scroll">
<template v-if="shareDetail"> <template v-if="shareDetail">
<video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl" <video v-if="isVideo" class="shared-work-media is-video" :src="videoResultUrl"
:poster="shareDetail.imageUrl" controls object-fit="cover" /> :poster="imageResultUrl" controls object-fit="cover" />
<image v-else-if="shareDetail.imageUrl" class="shared-work-media" :src="shareDetail.imageUrl" <image v-else-if="imageResultUrl" class="shared-work-media" :src="imageResultUrl"
mode="aspectFill" /> mode="aspectFill" />
<view class="shared-work-meta"> <view class="shared-work-meta">
@@ -37,8 +37,16 @@ import { getAigcGeneratorTaskShareDetail } from "@/request/api/AigcApi.js";
const shareKey = ref(""); const shareKey = ref("");
const shareDetail = ref(null); const shareDetail = ref(null);
const imageResultUrl = computed(() => {
return shareDetail.value?.imageResultUrl || shareDetail.value?.imageUrl || "";
});
const videoResultUrl = computed(() => {
return shareDetail.value?.videoResultUrl || shareDetail.value?.videoUrl || "";
});
const isVideo = computed(() => { const isVideo = computed(() => {
return Number(shareDetail.value?.generatorType) === 1 && Boolean(shareDetail.value?.videoUrl); return Number(shareDetail.value?.generatorType) === 1 && Boolean(videoResultUrl.value);
}); });
const generatorTypeText = computed(() => { const generatorTypeText = computed(() => {