From 5972f457846f1c67591ae62d3fefd6af5402bd52 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Mon, 13 Apr 2026 11:11:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B4=A0=E6=9D=90=E5=BA=93=E5=BC=95?=
 =?UTF-8?q?=E7=94=A8=E7=BC=A9=E7=95=A5=E5=9B=BE=E7=83=82=E5=9B=BE=20+=20po?=
 =?UTF-8?q?llStatus=20=E8=B7=A8=E9=A1=B9=E7=9B=AE=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E4=BF=9D=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MentionTag: onError fallback，缩略图加载失败显示视频/图片占位图标
- createMentionSpan/VideoDetailModal: img onError 隐藏烂图
- buildReferenceSnapshots: 素材库引用用 thumb_url 做 previewUrl
- isAssetRef 标记防止视频缩略图被 <video> 渲染、重编辑防重复
- pollStatus: 已 active 的素材跳过远程查询，防止跨项目素材被误删

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 backend/apps/generation/views.py        |  3 +-
 web/src/components/GenerationCard.tsx   | 37 +++++++++++++++++--------
 web/src/components/PromptInput.tsx      |  1 +
 web/src/components/VideoDetailModal.tsx |  8 +++---
 web/src/store/generation.ts             | 26 +++++++++++------
 web/src/types/index.ts                  |  1 +
 6 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/backend/apps/generation/views.py b/backend/apps/generation/views.py
index cbe718f..92774d0 100644
--- a/backend/apps/generation/views.py
+++ b/backend/apps/generation/views.py
@@ -3446,7 +3446,8 @@ def asset_poll_status_view(request, asset_id):
     except Asset.DoesNotExist:
         return Response({'error': '素材不存在'}, status=status.HTTP_404_NOT_FOUND)
 
-    if asset.remote_asset_id:
+    # 已经 active 且有 URL 的素材跳过远程查询（避免跨项目素材被误删）
+    if asset.remote_asset_id and asset.status != 'active':
         from utils import assets_client
         from utils.assets_client import AssetsAPIError
         try:
diff --git a/web/src/components/GenerationCard.tsx b/web/src/components/GenerationCard.tsx
index 8e3a3e8..3ba65d9 100644
--- a/web/src/components/GenerationCard.tsx
+++ b/web/src/components/GenerationCard.tsx
@@ -39,9 +39,12 @@ const DownloadIcon = () => (
 // Mention tag with thumbnail + hover preview
 function MentionTag({ label, thumbUrl, assetType }: { label: string; thumbUrl?: string; assetType?: string }) {
   const [hover, setHover] = useState(false);
+  const [thumbBroken, setThumbBroken] = useState(false);
   const ref = useRef<HTMLSpanElement>(null);
   const [pos, setPos] = useState({ top: 0, left: 0 });
   const isAudio = assetType === 'Audio' || assetType === 'audio';
+  const isVideo = assetType === 'Video' || assetType === 'video';
+  const showThumb = thumbUrl && !thumbBroken;
 
   return (
     <>
@@ -49,7 +52,7 @@ function MentionTag({ label, thumbUrl, assetType }: { label: string; thumbUrl?:
         ref={ref}
         className={styles.mentionTag}
         onMouseEnter={() => {
-          if (!isAudio && thumbUrl && ref.current) {
+          if (!isAudio && showThumb && ref.current) {
             const rect = ref.current.getBoundingClientRect();
             setPos({ top: rect.top - 8, left: rect.left + rect.width / 2 });
             setHover(true);
@@ -59,18 +62,30 @@ function MentionTag({ label, thumbUrl, assetType }: { label: string; thumbUrl?:
       >
         {isAudio ? (
           <span style={{ marginRight: 3, fontSize: 13, verticalAlign: 'middle' }}>♫</span>
-        ) : thumbUrl ? (
+        ) : showThumb ? (
           <img
             src={tosThumb(thumbUrl, 28)}
             alt=""
             style={{ width: 14, height: 14, borderRadius: 3, objectFit: 'cover', verticalAlign: 'middle', marginRight: 3 }}
+            onError={() => setThumbBroken(true)}
           />
-        ) : null}
+        ) : isVideo ? (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ verticalAlign: 'middle', marginRight: 3, opacity: 0.6 }}>
+            <rect x="2" y="4" width="20" height="16" rx="2" />
+            <path d="M10 9l5 3-5 3V9z" fill="currentColor" stroke="none" />
+          </svg>
+        ) : (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ verticalAlign: 'middle', marginRight: 3, opacity: 0.6 }}>
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" stroke="none" />
+            <path d="M21 15l-5-5L5 21" />
+          </svg>
+        )}
         {label}
       </span>
-      {hover && thumbUrl && createPortal(
+      {hover && showThumb && createPortal(
         <div className={styles.mentionPreview} style={{ top: pos.top, left: pos.left }}>
-          <img src={tosThumb(thumbUrl, 200)} alt={label} className={styles.mentionPreviewImg} />
+          <img src={tosThumb(thumbUrl, 200)} alt={label} className={styles.mentionPreviewImg} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
           <div className={styles.mentionPreviewLabel}>{label}</div>
         </div>,
         document.body
@@ -149,7 +164,7 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
   const [detailPos, setDetailPos] = useState({ top: 0, right: 0 });
   const detailLinkRef = useRef<HTMLSpanElement>(null);
   const detailLeaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [refPreview, setRefPreview] = useState<{ url: string; label: string; type: string; top: number; left: number } | null>(null);
+  const [refPreview, setRefPreview] = useState<{ url: string; label: string; type: string; top: number; left: number; isAssetRef?: boolean } | null>(null);
 
   const startDetailLeave = useCallback(() => {
     if (detailLeaveTimer.current) clearTimeout(detailLeaveTimer.current);
@@ -294,11 +309,11 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
                 onMouseEnter={(e) => {
                   if (ref.type === 'audio') return;
                   const rect = e.currentTarget.getBoundingClientRect();
-                  setRefPreview({ url: ref.previewUrl, label: ref.label, type: ref.type, top: rect.top - 8, left: rect.left + rect.width / 2 });
+                  setRefPreview({ url: ref.previewUrl, label: ref.label, type: ref.type, top: rect.top - 8, left: rect.left + rect.width / 2, isAssetRef: ref.isAssetRef });
                 }}
                 onMouseLeave={() => setRefPreview(null)}
               >
-                {ref.type === 'video' ? (
+                {ref.type === 'video' && !ref.isAssetRef ? (
                   <video src={ref.previewUrl} className={styles.refMedia} muted />
                 ) : ref.type === 'audio' ? (
                   <div className={styles.audioThumb}>
@@ -309,7 +324,7 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
                     </svg>
                   </div>
                 ) : (
-                  <img src={tosThumb(ref.previewUrl, 112)} alt={ref.label} className={styles.refMedia} />
+                  <img src={tosThumb(ref.previewUrl, 112)} alt={ref.label} className={styles.refMedia} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
                 )}
               </div>
             ))}
@@ -421,10 +436,10 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
       {/* Reference thumbnail hover preview */}
       {refPreview && createPortal(
         <div className={styles.mentionPreview} style={{ top: refPreview.top, left: refPreview.left }}>
-          {refPreview.type === 'video' ? (
+          {refPreview.type === 'video' && !refPreview.isAssetRef ? (
             <video src={refPreview.url} className={styles.mentionPreviewImg} autoPlay loop muted playsInline />
           ) : (
-            <img src={tosThumb(refPreview.url, 300)} alt={refPreview.label} className={styles.mentionPreviewImg} />
+            <img src={tosThumb(refPreview.url, 300)} alt={refPreview.label} className={styles.mentionPreviewImg} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
           )}
           <div className={styles.mentionPreviewLabel}>{refPreview.label}</div>
         </div>,
diff --git a/web/src/components/PromptInput.tsx b/web/src/components/PromptInput.tsx
index 834e016..b949cd7 100644
--- a/web/src/components/PromptInput.tsx
+++ b/web/src/components/PromptInput.tsx
@@ -98,6 +98,7 @@ export function PromptInput() {
       img.setAttribute('width', '16');
       img.setAttribute('height', '16');
       img.style.cssText = 'width:16px;height:16px;border-radius:3px;object-fit:cover;vertical-align:middle;margin-right:3px;display:inline-block;pointer-events:none';
+      img.onerror = () => { img.style.display = 'none'; };
       span.appendChild(img);
     }
     // @ 前缀隐藏（textContent 保留用于模式匹配，视觉上不显示）
diff --git a/web/src/components/VideoDetailModal.tsx b/web/src/components/VideoDetailModal.tsx
index 249a9ad..9780a50 100644
--- a/web/src/components/VideoDetailModal.tsx
+++ b/web/src/components/VideoDetailModal.tsx
@@ -220,9 +220,9 @@ export function VideoDetailModal({ task, onClose, onReEdit, onRegenerate, onDele
       if (task.model) store.setModel(task.model as 'seedance_2.0' | 'seedance_2.0_fast');
       if (task.aspectRatio) store.setAspectRatio(task.aspectRatio as any);
       if (task.duration) store.setDuration(task.duration);
-      // Load references from task
+      // Load references from task (exclude asset library refs — they restore via @mentions in editorHtml)
       if (task.references && task.references.length > 0) {
-        const refs = task.references.filter(r => r.previewUrl).map(r => ({
+        const refs = task.references.filter(r => r.previewUrl && !r.isAssetRef).map(r => ({
           id: r.id,
           file: null as unknown as File,
           previewUrl: r.previewUrl,
@@ -485,7 +485,7 @@ export function VideoDetailModal({ task, onClose, onReEdit, onRegenerate, onDele
                   {task.references.map((ref) => (
                     <div key={ref.id} className={styles.refItem}>
                       <div style={{ position: 'relative', width: 56, height: 56 }}>
-                        {ref.type === 'video' ? (
+                        {ref.type === 'video' && !ref.isAssetRef ? (
                           <video src={ref.previewUrl} className={styles.refImg} muted style={{ cursor: 'pointer' }} onClick={() => ref.previewUrl && setRefMediaPreview({ url: ref.previewUrl, type: 'video' })} />
                         ) : ref.type === 'audio' ? (
                           <div className={styles.refAudioPlaceholder} style={{ cursor: 'pointer' }} onClick={() => ref.previewUrl && setRefMediaPreview({ url: ref.previewUrl, type: 'audio' })}>
@@ -496,7 +496,7 @@ export function VideoDetailModal({ task, onClose, onReEdit, onRegenerate, onDele
                             </svg>
                           </div>
                         ) : ref.previewUrl ? (
-                          <img src={tosThumb(ref.previewUrl, 300)} alt={ref.label} className={styles.refImg} style={{ cursor: 'zoom-in' }} onClick={() => setLightboxSrc(ref.previewUrl)} />
+                          <img src={tosThumb(ref.previewUrl, 300)} alt={ref.label} className={styles.refImg} style={{ cursor: 'zoom-in' }} onClick={() => setLightboxSrc(ref.previewUrl)} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
                         ) : (
                           <div className={styles.refAudioPlaceholder} style={{ fontSize: 12, color: 'var(--color-text-disabled)' }}>无预览</div>
                         )}
diff --git a/web/src/store/generation.ts b/web/src/store/generation.ts
index 2d48416..fb75e0f 100644
--- a/web/src/store/generation.ts
+++ b/web/src/store/generation.ts
@@ -59,7 +59,7 @@ function isAssetUrl(url: string): boolean {
   return url.startsWith('asset://') || url.startsWith('Asset://');
 }
 
-/** Build ReferenceSnapshot[] from raw reference_urls, excluding asset refs. */
+/** Build ReferenceSnapshot[] from raw reference_urls (including asset refs with thumb_url). */
 function buildReferenceSnapshots(
   refs: Array<Record<string, string>>,
   taskId: string,
@@ -67,15 +67,23 @@ function buildReferenceSnapshots(
   return refs
     .filter((ref) => {
       const url = ref.url || '';
-      return !isAssetUrl(url) && url.trim() !== '';
+      // 素材库引用必须有 thumb_url 才能显示缩略图
+      if (isAssetUrl(url)) return !!(ref.thumb_url);
+      return url.trim() !== '';
     })
-    .map((ref, i) => ({
-      id: `ref_${taskId}_${i}`,
-      type: (ref.type || 'image') as 'image' | 'video' | 'audio',
-      previewUrl: ref.url || '',
-      label: ref.label || `素材${i + 1}`,
-      role: ref.role,
-    }));
+    .map((ref, i) => {
+      const url = ref.url || '';
+      const assetRef = isAssetUrl(url);
+      return {
+        id: `ref_${taskId}_${i}`,
+        type: (ref.type || 'image') as 'image' | 'video' | 'audio',
+        // 素材库引用用 thumb_url，直接上传用原始 url
+        previewUrl: assetRef ? ref.thumb_url : url,
+        label: ref.label || `素材${i + 1}`,
+        role: ref.role,
+        isAssetRef: assetRef || undefined,
+      };
+    });
 }
 
 /** Extract asset mention metadata from raw reference_urls. */
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index f93c579..ecbe496 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -32,6 +32,7 @@ export interface ReferenceSnapshot {
   previewUrl: string;
   label: string;
   role?: string;
+  isAssetRef?: boolean;
 }
 
 export interface GenerationTask {