542 lines
21 KiB
TypeScript
542 lines
21 KiB
TypeScript
import { useRef, useState, useEffect, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import type { GenerationTask } from '../types';
|
|
import { useGenerationStore } from '../store/generation';
|
|
import { showToast } from './Toast';
|
|
import { ConfirmModal } from './ConfirmModal';
|
|
import { tosThumb } from '../lib/api';
|
|
import styles from './GenerationCard.module.css';
|
|
|
|
const EditIcon = () => (
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
|
</svg>
|
|
);
|
|
|
|
const RefreshIcon = () => (
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<polyline points="23 4 23 10 17 10" />
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
|
|
</svg>
|
|
);
|
|
|
|
const VideoIcon = () => (
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<polygon points="23 7 16 12 23 17 23 7" />
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
|
|
</svg>
|
|
);
|
|
|
|
const DownloadIcon = () => (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</svg>
|
|
);
|
|
|
|
// Mention tag with thumbnail + hover preview
|
|
function MentionTag({ label, thumbUrl, assetType }: { label: string; thumbUrl?: string; assetType?: string }) {
|
|
const [hover, setHover] = useState(false);
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const [pos, setPos] = useState({ top: 0, left: 0 });
|
|
const isAudio = assetType === 'Audio' || assetType === 'audio';
|
|
|
|
return (
|
|
<>
|
|
<span
|
|
ref={ref}
|
|
className={styles.mentionTag}
|
|
onMouseEnter={() => {
|
|
if (!isAudio && thumbUrl && ref.current) {
|
|
const rect = ref.current.getBoundingClientRect();
|
|
setPos({ top: rect.top - 8, left: rect.left + rect.width / 2 });
|
|
setHover(true);
|
|
}
|
|
}}
|
|
onMouseLeave={() => setHover(false)}
|
|
>
|
|
{isAudio ? (
|
|
<span style={{ marginRight: 3, fontSize: 13, verticalAlign: 'middle' }}>♫</span>
|
|
) : thumbUrl ? (
|
|
<img
|
|
src={tosThumb(thumbUrl, 28)}
|
|
alt=""
|
|
style={{ width: 14, height: 14, borderRadius: 3, objectFit: 'cover', verticalAlign: 'middle', marginRight: 3 }}
|
|
/>
|
|
) : null}
|
|
{label}
|
|
</span>
|
|
{hover && thumbUrl && createPortal(
|
|
<div className={styles.mentionPreview} style={{ top: pos.top, left: pos.left }}>
|
|
<img src={tosThumb(thumbUrl, 200)} alt={label} className={styles.mentionPreviewImg} />
|
|
<div className={styles.mentionPreviewLabel}>{label}</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Render prompt text with @mentions as styled tags (thumbnail + hover preview)
|
|
export function renderPromptWithMentions(
|
|
text: string,
|
|
assetMentions: Record<string, unknown>[],
|
|
references: { label: string; previewUrl?: string }[]
|
|
) {
|
|
// Build lookup: label → { thumbUrl, assetType }
|
|
const thumbMap = new Map<string, { thumbUrl: string; assetType: string }>();
|
|
for (const am of assetMentions) {
|
|
if (am.label) thumbMap.set(am.label as string, {
|
|
thumbUrl: (am.thumbUrl as string) || '',
|
|
assetType: (am.assetType as string) || 'image',
|
|
});
|
|
}
|
|
for (const r of references) {
|
|
if (r.label && !thumbMap.has(r.label)) thumbMap.set(r.label, {
|
|
thumbUrl: r.previewUrl || '',
|
|
assetType: (r as Record<string, unknown>).type as string || 'image',
|
|
});
|
|
}
|
|
|
|
const labels = [...thumbMap.keys()];
|
|
if (labels.length === 0) return text;
|
|
|
|
// Build regex: match @label patterns, longest first
|
|
labels.sort((a, b) => b.length - a.length);
|
|
const escaped = labels.map((l) => l.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
|
|
const regex = new RegExp(`(@(?:${escaped.join('|')}))`, 'g');
|
|
|
|
const parts = text.split(regex);
|
|
if (parts.length === 1) return text;
|
|
|
|
return parts.map((part, i) => {
|
|
if (regex.test(part)) {
|
|
regex.lastIndex = 0;
|
|
const label = part.slice(1); // remove @
|
|
const info = thumbMap.get(label);
|
|
return <MentionTag key={i} label={label} thumbUrl={info?.thumbUrl} assetType={info?.assetType} />;
|
|
}
|
|
regex.lastIndex = 0;
|
|
return part;
|
|
});
|
|
}
|
|
|
|
interface Props {
|
|
task: GenerationTask;
|
|
onOpenDetail?: (task: GenerationTask) => void;
|
|
}
|
|
|
|
export function GenerationCard({ task, onOpenDetail }: Props) {
|
|
const removeTask = useGenerationStore((s) => s.removeTask);
|
|
const reEdit = useGenerationStore((s) => s.reEdit);
|
|
const regenerate = useGenerationStore((s) => s.regenerate);
|
|
const toggleFavorite = useGenerationStore((s) => s.toggleFavorite);
|
|
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const moreRef = useRef<HTMLDivElement>(null);
|
|
const promptLineRef = useRef<HTMLDivElement>(null);
|
|
const promptWrapperRef = useRef<HTMLDivElement>(null);
|
|
const labelsRef = useRef<HTMLSpanElement>(null);
|
|
const refColumnRef = useRef<HTMLDivElement>(null);
|
|
const [videoHover, setVideoHover] = useState(false);
|
|
const [promptHover, setPromptHover] = useState(false);
|
|
const [showMore, setShowMore] = useState(false);
|
|
const [truncatedPrompt, setTruncatedPrompt] = useState(task.prompt);
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
const [detailHover, setDetailHover] = useState(false);
|
|
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 startDetailLeave = useCallback(() => {
|
|
if (detailLeaveTimer.current) clearTimeout(detailLeaveTimer.current);
|
|
detailLeaveTimer.current = setTimeout(() => setDetailHover(false), 200);
|
|
}, []);
|
|
const cancelDetailLeave = useCallback(() => {
|
|
if (detailLeaveTimer.current) clearTimeout(detailLeaveTimer.current);
|
|
}, []);
|
|
|
|
// Close more menu on click outside
|
|
useEffect(() => {
|
|
if (!showMore) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (moreRef.current && !moreRef.current.contains(e.target as Node)) {
|
|
setShowMore(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [showMore]);
|
|
|
|
// JS-level prompt truncation: ensure labels always visible at end of line 2
|
|
const computeTruncation = useCallback(() => {
|
|
const container = promptLineRef.current;
|
|
const labelsEl = labelsRef.current;
|
|
if (!container || !labelsEl) return;
|
|
|
|
const containerWidth = container.offsetWidth;
|
|
if (containerWidth === 0) return;
|
|
|
|
const style = getComputedStyle(container);
|
|
const font = `${style.fontSize} ${style.fontFamily}`;
|
|
const labelsWidth = labelsEl.offsetWidth + 8;
|
|
// Account for mention tags (thumbnails) taking extra width vs plain text
|
|
const mentionCount = (task.assetMentions?.length || 0) + (task.references?.length || 0);
|
|
const mentionExtraWidth = mentionCount * 24; // ~24px extra per mention (thumbnail + padding)
|
|
const totalAvailable = containerWidth * 2 - labelsWidth - 24 - mentionExtraWidth;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d')!;
|
|
ctx.font = font;
|
|
|
|
const prompt = task.prompt || '';
|
|
const fullWidth = ctx.measureText(prompt).width;
|
|
if (fullWidth <= totalAvailable) {
|
|
setTruncatedPrompt(prompt);
|
|
return;
|
|
}
|
|
|
|
let truncated = '';
|
|
let totalWidth = 0;
|
|
const ellipsisWidth = ctx.measureText('…').width;
|
|
for (const char of prompt) {
|
|
const charWidth = ctx.measureText(char).width;
|
|
if (totalWidth + charWidth + ellipsisWidth > totalAvailable) {
|
|
break;
|
|
}
|
|
truncated += char;
|
|
totalWidth += charWidth;
|
|
}
|
|
setTruncatedPrompt(truncated + '…');
|
|
}, [task.prompt]);
|
|
|
|
useEffect(() => {
|
|
computeTruncation();
|
|
const container = promptLineRef.current;
|
|
if (!container) return;
|
|
const ro = new ResizeObserver(() => computeTruncation());
|
|
ro.observe(container);
|
|
return () => ro.disconnect();
|
|
}, [computeTruncation]);
|
|
|
|
const isGenerating = task.status === 'generating';
|
|
const hasResult = task.status === 'completed' && !!task.resultUrl;
|
|
|
|
const handleVideoMouseEnter = () => {
|
|
setVideoHover(true);
|
|
const v = videoRef.current;
|
|
if (!v) return;
|
|
v.muted = false;
|
|
v.play().catch(() => {
|
|
// Browser blocks unmuted autoplay — fallback to muted
|
|
v.muted = true;
|
|
v.play().catch(() => {});
|
|
});
|
|
};
|
|
|
|
const handleVideoMouseLeave = () => {
|
|
setVideoHover(false);
|
|
const v = videoRef.current;
|
|
if (!v) return;
|
|
v.pause();
|
|
v.currentTime = 0;
|
|
};
|
|
|
|
const handleDownload = async (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (!task.resultUrl) return;
|
|
try {
|
|
const res = await fetch(task.resultUrl);
|
|
const blob = await res.blob();
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = blobUrl;
|
|
a.download = `airdrama-${task.id}.mp4`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
setTimeout(() => URL.revokeObjectURL(blobUrl), 10000);
|
|
} catch {
|
|
const a = document.createElement('a');
|
|
a.href = task.resultUrl;
|
|
a.download = `airdrama-${task.id}.mp4`;
|
|
a.click();
|
|
}
|
|
};
|
|
|
|
const handleCopyPrompt = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
navigator.clipboard.writeText(task.prompt).then(() => {
|
|
showToast('已复制');
|
|
});
|
|
};
|
|
|
|
const handleVideoClick = () => {
|
|
if (hasResult && onOpenDetail) {
|
|
onOpenDetail(task);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.card}>
|
|
{/* Header: reference thumbnails + prompt + meta labels */}
|
|
<div className={styles.header}>
|
|
{/* Left: reference thumbnails */}
|
|
{task.references.length > 0 && (
|
|
<div ref={refColumnRef} className={styles.refColumn}>
|
|
{task.references.map((ref) => (
|
|
<div
|
|
key={ref.id}
|
|
className={styles.refThumb}
|
|
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 });
|
|
}}
|
|
onMouseLeave={() => setRefPreview(null)}
|
|
>
|
|
{ref.type === 'video' ? (
|
|
<video src={ref.previewUrl} className={styles.refMedia} muted />
|
|
) : ref.type === 'audio' ? (
|
|
<div className={styles.audioThumb}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
|
<path d="M9 18V5l12-2v13" />
|
|
<circle cx="6" cy="18" r="3" />
|
|
<circle cx="18" cy="16" r="3" />
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<img src={tosThumb(ref.previewUrl, 112)} alt={ref.label} className={styles.refMedia} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* Right: prompt + inline labels */}
|
|
<div className={styles.headerRight}>
|
|
<div
|
|
ref={promptWrapperRef}
|
|
className={styles.promptWrapper}
|
|
onMouseLeave={() => { setPromptHover(false); startDetailLeave(); }}
|
|
>
|
|
{/* 默认状态：截断提示词 + inline 标签 */}
|
|
<div ref={promptLineRef} className={styles.promptLine}>
|
|
<span onMouseEnter={() => setPromptHover(true)}>
|
|
{renderPromptWithMentions(truncatedPrompt || '(无文字描述)', task.assetMentions || [], task.references)}
|
|
</span>
|
|
<span
|
|
ref={labelsRef}
|
|
className={styles.labelsInline}
|
|
onMouseEnter={() => setPromptHover(false)}
|
|
>
|
|
<span className={styles.label}>
|
|
{task.model === 'seedance_2.0' ? 'AirDrama' : 'AirDrama Fast'}
|
|
</span>
|
|
<span className={styles.label}>{task.duration}s</span>
|
|
<span className={styles.label}>{task.aspectRatio}</span>
|
|
<span
|
|
ref={detailLinkRef}
|
|
className={styles.detailLink}
|
|
onMouseEnter={() => {
|
|
cancelDetailLeave();
|
|
const el = detailLinkRef.current;
|
|
if (el) {
|
|
const rect = el.getBoundingClientRect();
|
|
setDetailPos({
|
|
top: rect.bottom + 8,
|
|
right: window.innerWidth - rect.right,
|
|
});
|
|
}
|
|
setDetailHover(true);
|
|
}}
|
|
onMouseLeave={startDetailLeave}
|
|
>
|
|
详细信息 ⓘ
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/* 详细信息弹窗 — 放在 promptWrapper 外，鼠标可以移到弹窗上 */}
|
|
{detailHover && (
|
|
<div
|
|
className={styles.detailTooltip}
|
|
style={{ top: detailPos.top, right: detailPos.right }}
|
|
onMouseEnter={() => { cancelDetailLeave(); setDetailHover(true); }}
|
|
onMouseLeave={startDetailLeave}
|
|
>
|
|
<div className={styles.detailRow}>
|
|
<span>视频比例</span><span>{task.aspectRatio}</span>
|
|
</div>
|
|
<div className={styles.detailRow}>
|
|
<span>时长</span><span>{task.duration}s</span>
|
|
</div>
|
|
<div className={styles.detailRow}>
|
|
<span>分辨率</span><span>720p</span>
|
|
</div>
|
|
<div className={styles.detailRow}>
|
|
<span>模型</span>
|
|
<span>{task.model === 'seedance_2.0' ? 'AirDrama' : 'AirDrama Fast'}</span>
|
|
</div>
|
|
<div className={styles.detailRow}>
|
|
<span>生成时间</span>
|
|
<span>{new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
|
</div>
|
|
{(task.tokensConsumed ?? 0) > 0 && (
|
|
<>
|
|
<div className={styles.detailRow}>
|
|
<span>消耗 Tokens</span>
|
|
<span>{(task.tokensConsumed ?? 0).toLocaleString()}</span>
|
|
</div>
|
|
<div className={styles.detailRow}>
|
|
<span>费用</span>
|
|
<span>¥{(task.costAmount ?? 0).toFixed(2)}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
{(task.seed ?? -1) > 0 && (
|
|
<div className={styles.detailRow}>
|
|
<span>种子值</span>
|
|
<span>{task.seed}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* hover 展开黑底：基于 header 定位，左边距图片 4px */}
|
|
{promptHover && task.prompt && (
|
|
<div
|
|
className={styles.promptExpanded}
|
|
style={{ left: refColumnRef.current ? refColumnRef.current.offsetWidth + 4 : 0 }}
|
|
onMouseEnter={() => setPromptHover(true)}
|
|
onMouseLeave={() => setPromptHover(false)}
|
|
>
|
|
{renderPromptWithMentions(task.prompt, task.assetMentions || [], task.references)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Reference thumbnail hover preview */}
|
|
{refPreview && createPortal(
|
|
<div className={styles.mentionPreview} style={{ top: refPreview.top, left: refPreview.left }}>
|
|
{refPreview.type === 'video' ? (
|
|
<video src={refPreview.url} className={styles.mentionPreviewImg} autoPlay loop muted playsInline />
|
|
) : (
|
|
<img src={tosThumb(refPreview.url, 300)} alt={refPreview.label} className={styles.mentionPreviewImg} />
|
|
)}
|
|
<div className={styles.mentionPreviewLabel}>{refPreview.label}</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
|
|
{/* Video / result area */}
|
|
<div className={styles.content}>
|
|
{isGenerating ? (
|
|
<div className={styles.resultArea}>
|
|
<div className={styles.shimmerBg} />
|
|
<div className={styles.generating}>
|
|
<div className={styles.loadingSpinner} />
|
|
<span className={styles.loadingText}>视频生成中…</span>
|
|
<div className={styles.progressBar}>
|
|
<div
|
|
className={styles.progressFill}
|
|
style={{ width: `${task.progress}%` }}
|
|
/>
|
|
</div>
|
|
<span className={styles.progressText}>{Math.round(task.progress)}%</span>
|
|
</div>
|
|
</div>
|
|
) : task.status === 'failed' ? (
|
|
<p className={styles.errorText}>{task.errorMessage || '生成失败，请重试'}</p>
|
|
) : task.resultUrl ? (
|
|
<div
|
|
className={styles.resultArea}
|
|
onMouseEnter={handleVideoMouseEnter}
|
|
onMouseLeave={handleVideoMouseLeave}
|
|
onClick={handleVideoClick}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<video
|
|
ref={videoRef}
|
|
src={task.resultUrl}
|
|
className={styles.resultMedia}
|
|
loop
|
|
preload="metadata"
|
|
/>
|
|
{videoHover && (
|
|
<div className={styles.videoOverlay}>
|
|
<button className={styles.downloadBtn} onClick={handleDownload}>
|
|
<DownloadIcon />
|
|
</button>
|
|
<button className={styles.downloadBtn} onClick={(e) => { e.stopPropagation(); toggleFavorite(task.id); }}>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill={task.isFavorited ? '#faad14' : 'none'} stroke={task.isFavorited ? '#faad14' : 'currentColor'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className={styles.resultArea}>
|
|
<div className={styles.resultPlaceholder}>
|
|
<VideoIcon />
|
|
<span>视频已生成</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom action buttons */}
|
|
{isGenerating && (
|
|
<div className={styles.actions}>
|
|
<button className={styles.actionBtn} onClick={() => reEdit(task.id)}>
|
|
<EditIcon /> <span>重新编辑</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{!isGenerating && (
|
|
<div className={styles.actions}>
|
|
<button className={styles.actionBtn} onClick={() => reEdit(task.id)}>
|
|
<EditIcon /> <span>重新编辑</span>
|
|
</button>
|
|
<button className={styles.actionBtn} onClick={() => regenerate(task.id)}>
|
|
<RefreshIcon /> <span>再次生成</span>
|
|
</button>
|
|
<div className={styles.moreMenu} ref={moreRef}>
|
|
<button className={styles.moreBtn} onClick={() => setShowMore(!showMore)}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="5" cy="12" r="2" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
<circle cx="19" cy="12" r="2" />
|
|
</svg>
|
|
</button>
|
|
{showMore && (
|
|
<div className={styles.moreDropdown}>
|
|
<button onClick={() => { setConfirmDelete(true); setShowMore(false); }}>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<polyline points="3 6 5 6 21 6" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
</svg>
|
|
删除
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ConfirmModal
|
|
open={confirmDelete}
|
|
title="删除视频"
|
|
message="确定要删除这条生成记录吗？此操作不可撤销。"
|
|
confirmText="删除"
|
|
danger
|
|
onConfirm={() => { removeTask(task.id); setConfirmDelete(false); }}
|
|
onCancel={() => setConfirmDelete(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|