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:
@@ -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">
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user