生成数量添加

2026-07-15 17:10:49 +08:00
parent b1a8c3ed5a 51673453d8
commit 3188d77b88
72 changed files with 4628 additions and 1561 deletions
@@ -0,0 +1,119 @@
+import React from 'react';
+import { LoadingOutlined, PlayCircleFilled, WarningOutlined } from '@ant-design/icons';
+
+export interface GenerationTaskResourceItem {
+  id?: string;
+  genType?: string;
+  status?: string;
+  displayStatus?: string | null;
+  pipelineStage?: string | null;
+  imageUrl?: string | null;
+  videoUrl?: string | null;
+  videoCoverUrl?: string | null;
+  errorMessage?: string | null;
+  generationIndex?: number | null;
+}
+
+export interface GenerationTaskResourceGroup extends GenerationTaskResourceItem {
+  generationCount?: number | null;
+  childItems?: GenerationTaskResourceItem[] | null;
+}
+
+interface Props {
+  task: GenerationTaskResourceGroup;
+  onPreview: (url: string, type: 'image' | 'video') => void;
+  resolveUrl?: (url?: string | null) => string;
+}
+
+const spanByCount = (count: number, index: number): number => {
+  if (count <= 1) return 6;
+  if (count === 2 || count === 4) return 3;
+  if (count === 3) return 3;
+  return 2;
+};
+
+const statusText = (item: GenerationTaskResourceItem): string => {
+  const status = item.displayStatus || item.pipelineStage || item.status || 'generating';
+  const labels: Record<string, string> = {
+    pending: '待处理', queued: '排队中', preparing: '准备中', generating: '生成中',
+    creating_provider_task: '创建任务中', waiting_remote: '等待生成', polling: '轮询中',
+    result_ready: '结果就绪', download_queued: '等待下载', downloading: '下载中',
+    retry_waiting: '等待重试', completed: '已完成', failed: '生成失败',
+    download_failed: '下载失败', deleted: '已删除',
+  };
+  return labels[status] || status;
+};
+
+const isPending = (item: GenerationTaskResourceItem): boolean => {
+  const status = item.displayStatus || item.pipelineStage || item.status;
+  return !status || ['pending', 'queued', 'preparing', 'generating', 'creating_provider_task', 'waiting_remote', 'polling', 'result_ready', 'download_queued', 'downloading', 'retry_waiting'].includes(status);
+};
+
+const GenerationTaskResourceGrid: React.FC<Props> = ({ task, onPreview, resolveUrl = (url) => url || '' }) => {
+  const count = Math.max(1, Math.min(5, Number(task.generationCount || task.childItems?.length || 1)));
+  const children = [...(task.childItems || [])].sort((a, b) => Number(a.generationIndex || 0) - Number(b.generationIndex || 0));
+  const items: GenerationTaskResourceItem[] = children.length > 0
+    ? children
+    : (count > 1 ? Array.from({ length: count }, (_, index) => ({
+        id: `${task.id || 'task'}-placeholder-${index + 1}`,
+        genType: task.genType,
+        status: task.status,
+        displayStatus: task.displayStatus,
+        pipelineStage: task.pipelineStage,
+        generationIndex: index + 1,
+        errorMessage: task.errorMessage,
+      })) : [task]);
+
+  return (
+    <div style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', gridAutoRows: 'minmax(0, 1fr)', gap: count > 1 ? 6 : 0 }}>
+      {items.slice(0, 5).map((item, index) => {
+        const displayStatus = item.displayStatus || item.pipelineStage || item.status || 'generating';
+        const imageUrl = resolveUrl(`/static${item.imageUrl}&w=300&q=50`);
+        const videoUrl = resolveUrl(item.videoUrl);
+        const coverUrl = resolveUrl(`/static${item.videoCoverUrl}&w=300&q=50`);
+        const isVideo = (item.genType || task.genType) === 'video';
+        const hasResource = isVideo ? !!videoUrl : !!imageUrl;
+        return (
+          <div
+            key={item.id || `${index}`}
+            style={{
+              gridColumn: `span ${spanByCount(items.length, index)}`,
+              minWidth: 0,
+              minHeight: 0,
+              position: 'relative',
+              overflow: 'hidden',
+              borderRadius: items.length === 1 ? 12 : 8,
+              background: '#ffffff',
+              border: '1px solid #E7EAF0',
+            }}
+          >
+            {hasResource && displayStatus !== 'deleted' && displayStatus !== 'failed' && displayStatus !== 'download_failed' && !isPending(item) ? (
+              <button
+                type="button"
+                onClick={() => onPreview(isVideo ? videoUrl : imageUrl, isVideo ? 'video' : 'image')}
+                style={{ width: '100%', height: '100%', border: 0, padding: 0, background: 'transparent', cursor: 'pointer', position: 'relative' }}
+              >
+                {isVideo ? (
+                  coverUrl ? <img src={coverUrl} alt={`生成结果${item.generationIndex || index + 1}`} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+                    : <video src={videoUrl} muted preload="metadata" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+                ) : (
+                  <img src={imageUrl} alt={`生成结果${item.generationIndex || index + 1}`} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+                )}
+                {isVideo ? <PlayCircleFilled style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', fontSize: items.length > 2 ? 28 : 46, color: 'rgba(255,255,255,.92)', filter: 'drop-shadow(0 4px 10px rgba(0,0,0,.28))' }} /> : null}
+              </button>
+            ) : (
+              <div style={{ width: '100%', height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7, padding: 8, textAlign: 'center' }}>
+                {isPending(item) ? <LoadingOutlined spin style={{ color: '#8b5cf6', fontSize: items.length > 2 ? 20 : 34 }} /> : <WarningOutlined style={{ color: displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B', fontSize: items.length > 2 ? 20 : 34 }} />}
+                <span style={{ fontSize: items.length > 2 ? 10 : 12, color: isPending(item) ? '#8b5cf6' : (displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B'), fontWeight: 500 }}>{statusText(item)}</span>
+                {!isPending(item) && item.errorMessage && items.length <= 2 ? <span style={{ fontSize: 10, color: '#A45B5B', lineHeight: 1.3, maxHeight: 28, overflow: 'hidden' }}>{item.errorMessage}</span> : null}
+              </div>
+            )}
+            {items.length > 1 ? <span style={{ position: 'absolute', top: 5, left: 5, zIndex: 2, padding: '1px 6px', borderRadius: 10, background: 'rgba(17,24,39,.58)', color: '#fff', fontSize: 10 }}>#{item.generationIndex || index + 1}</span> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default GenerationTaskResourceGrid;