fix(web): 任务中心 - 资源失效时显示预览占位 (#286)

2026-08-21 13:26:27 +08:00
parent 8be5334d9c
commit 38f596e28a
7 changed files with 138 additions and 21 deletions
--- a/web/src/pages/tasks/index.tsx
+++ b/web/src/pages/tasks/index.tsx
@@ -19,6 +19,7 @@ import { listProjects, type ProjectSummary } from "@/services/api/projects";
 import { TaskGridCard } from "./task-grid-card";
 import { TaskGroupHeader, type TaskGroup } from "./task-group-header";
 import { TaskListRow } from "./task-list-row";
+import { TaskMediaPreview } from "./task-media-preview";
 import { formatModelName, getTaskCanvasContext, isTaskFailed, providerCancelStatusLabel, taskMediaKind } from "./task-shared";
 import { TaskStatusFilterBar, type TaskStatusFilter } from "./task-status-filter";

@@ -585,9 +586,16 @@ export default function TasksPage() {
                destroyOnHidden
                className="library-modal task-media-preview-modal"
            >
-                {mediaPreview?.kind === "video"
-                    ? <video src={mediaPreview.url} className="max-h-[76vh] w-full bg-black object-contain" controls playsInline preload="metadata" />
-                    : mediaPreview ? <img src={mediaPreview.url} alt={mediaPreview.title} className="max-h-[76vh] w-full bg-black object-contain" /> : null}
+                {mediaPreview ? (
+                    <TaskMediaPreview
+                        src={mediaPreview.url}
+                        kind={mediaPreview.kind}
+                        alt={mediaPreview.title}
+                        controls={mediaPreview.kind === "video"}
+                        className="max-h-[76vh] w-full bg-black object-contain"
+                        fallbackClassName="task-media-preview-unavailable"
+                    />
+                ) : null}
            </Modal>
        </>
    );
@@ -617,9 +625,20 @@ function TaskResultMedia({ value, taskType }: { value?: string; taskType: string
        <div>
            <Typography.Text strong>生成结果</Typography.Text>
            <div className="mt-2 grid max-h-[360px] grid-cols-2 gap-2 overflow-auto rounded-lg bg-stone-950 p-2 md:grid-cols-3">
-                {urls.map((url, index) => isVideoResult(url, taskType)
-                    ? <video key={`${url}-${index}`} src={url} className="aspect-video w-full rounded-md bg-black object-contain" controls preload="metadata" />
-                    : <img key={`${url}-${index}`} src={url} alt={`生成结果 ${index + 1}`} className="aspect-square w-full rounded-md bg-black object-contain" />)}
+                {urls.map((url, index) => {
+                    const isVideo = isVideoResult(url, taskType);
+                    return (
+                        <TaskMediaPreview
+                            key={`${url}-${index}`}
+                            src={url}
+                            kind={isVideo ? "video" : "image"}
+                            alt={`生成结果 ${index + 1}`}
+                            controls={isVideo}
+                            className={isVideo ? "task-result-media is-video" : "task-result-media"}
+                            fallbackClassName={isVideo ? "task-result-media is-video" : "task-result-media"}
+                        />
+                    );
+                })}
            </div>
        </div>
    );
--- a/web/src/pages/tasks/task-grid-card.tsx
+++ b/web/src/pages/tasks/task-grid-card.tsx
@@ -4,6 +4,7 @@ import { Eye, FileText, Image as ImageIcon, RotateCcw, Video, X } from "lucide-r
 import { CONTENT_MODERATION_ERROR_CODE, isContentModerationError } from "@/lib/generation-error";
 import { statusLabel } from "@/lib/generation-task-display";
 import type { GenerationTask } from "@/services/api/task-center";
+import { TaskMediaPreview } from "./task-media-preview";
 import { isTaskFailed, statusDotClassName, TaskDate } from "./task-shared";

 export function TaskGridCard({ task, actingId, onOpen, onRetry, onCancel }: { task: GenerationTask; actingId: string; onOpen: () => void; onRetry: () => void; onCancel: () => void }) {
@@ -16,11 +17,7 @@ export function TaskGridCard({ task, actingId, onOpen, onRetry, onCancel }: { ta
        <article className={`task-grid-card${isFailed ? " is-attention" : ""}`}>
            <div className="task-grid-thumb">
                {task.previewUrl ? (
-                    isVideo ? (
-                        <video src={task.previewUrl} muted playsInline preload="metadata" className="h-full w-full object-cover" />
-                    ) : (
-                        <img src={task.previewUrl} alt="" loading="lazy" className="h-full w-full object-cover" />
-                    )
+                    <TaskMediaPreview src={task.previewUrl} kind={isVideo ? "video" : "image"} loading="lazy" className="h-full w-full object-cover" />
                ) : (
                    <Icon />
                )}
--- a/web/src/pages/tasks/task-list-row.tsx
+++ b/web/src/pages/tasks/task-list-row.tsx
@@ -1,10 +1,12 @@
 import { Button, Tooltip } from "antd";
 import { Eye, FileText, FolderKanban, Image as ImageIcon, Play, RotateCcw, Video, X } from "lucide-react";
+import { useState } from "react";

 import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerationError } from "@/lib/generation-error";
 import { formatTaskKind, statusLabel } from "@/lib/generation-task-display";
 import type { GenerationTask } from "@/services/api/task-center";
 import type { AiConfig } from "@/stores/use-config-store";
+import { TaskMediaPreview } from "./task-media-preview";
 import { formatModelName, getTaskCanvasContext, isTaskFailed, statusDotClassName, taskAttentionReason, TaskBilling, TaskDate } from "./task-shared";

 export function TaskListRow({
@@ -105,6 +107,8 @@ export function TaskListRow({
 function TaskPreviewThumbnail({ task, onOpen }: { task: GenerationTask; onOpen: () => void }) {
    const isVideo = task.previewKind === "video";
    const fallbackVideo = task.type.includes("video");
+    const [unavailableUrl, setUnavailableUrl] = useState("");
+    const previewUnavailable = Boolean(task.previewUrl && unavailableUrl === task.previewUrl);
    if (!task.previewUrl) {
        const Icon = fallbackVideo ? Video : task.type.includes("image") ? ImageIcon : FileText;
        return (
@@ -114,15 +118,20 @@ function TaskPreviewThumbnail({ task, onOpen }: { task: GenerationTask; onOpen:
        );
    }
    return (
-        <button type="button" onClick={onOpen} className="task-record-thumb group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label={isVideo ? "放大预览生成视频" : "放大预览生成图片"}>
-            {isVideo ? (
-                <video src={task.previewUrl} width={68} height={48} muted playsInline preload="metadata" className="h-full w-full object-cover" />
-            ) : (
-                <img src={task.previewUrl} alt="" width={68} height={48} loading="lazy" className="h-full w-full object-cover" />
-            )}
-            <span className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition-[background-color,opacity] duration-150 group-hover:bg-black/30 group-hover:opacity-100 group-focus-visible:bg-black/30 group-focus-visible:opacity-100">
-                {isVideo ? <Play className="size-4 fill-current" /> : <Eye className="size-4" />}
-            </span>
+        <button
+            type="button"
+            onClick={onOpen}
+            disabled={previewUnavailable}
+            className="task-record-thumb group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={previewUnavailable ? "预览不可用，素材可能已删除" : isVideo ? "放大预览生成视频" : "放大预览生成图片"}
+            title={previewUnavailable ? "预览不可用，素材可能已删除" : undefined}
+        >
+            <TaskMediaPreview src={task.previewUrl} kind={isVideo ? "video" : "image"} width={68} height={48} loading="lazy" className="h-full w-full object-cover" fallbackLabel="预览不可用" onUnavailable={() => setUnavailableUrl(task.previewUrl || "")} />
+            {!previewUnavailable ? (
+                <span className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition-[background-color,opacity] duration-150 group-hover:bg-black/30 group-hover:opacity-100 group-focus-visible:bg-black/30 group-focus-visible:opacity-100">
+                    {isVideo ? <Play className="size-4 fill-current" /> : <Eye className="size-4" />}
+                </span>
+            ) : null}
        </button>
    );
 }
--- a/web/src/pages/tasks/task-media-preview.tsx
+++ b/web/src/pages/tasks/task-media-preview.tsx
@@ -0,0 +1,55 @@
+import { ImageOff } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const DEFAULT_UNAVAILABLE_LABEL = "预览不可用，素材可能已删除";
+
+export function TaskMediaPreview({
+    src,
+    kind,
+    alt = "",
+    className,
+    fallbackClassName,
+    fallbackLabel = DEFAULT_UNAVAILABLE_LABEL,
+    controls = false,
+    loading,
+    width,
+    height,
+    onUnavailable,
+}: {
+    src: string;
+    kind: "image" | "video";
+    alt?: string;
+    className?: string;
+    fallbackClassName?: string;
+    fallbackLabel?: string;
+    controls?: boolean;
+    loading?: "eager" | "lazy";
+    width?: number;
+    height?: number;
+    onUnavailable?: () => void;
+}) {
+    const [failedSrc, setFailedSrc] = useState("");
+    const unavailable = failedSrc === src;
+
+    const handleUnavailable = () => {
+        setFailedSrc(src);
+        onUnavailable?.();
+    };
+
+    if (unavailable) {
+        return (
+            <span className={cn("task-media-unavailable", fallbackClassName)} role="img" aria-label={fallbackLabel} title={fallbackLabel}>
+                <ImageOff aria-hidden="true" />
+                <span>{fallbackLabel}</span>
+            </span>
+        );
+    }
+
+    if (kind === "video") {
+        return <video src={src} width={width} height={height} muted={!controls} playsInline controls={controls} preload="metadata" className={className} onError={handleUnavailable} />;
+    }
+
+    return <img src={src} alt={alt} width={width} height={height} loading={loading} className={className} onError={handleUnavailable} />;
+}