| 1 | /** |
| 2 | * 生成中卡片 |
| 3 | * 显示在瀑布流中，展示正在生成的草稿数量，带 shimmer 渐变动画 |
| 4 | */ |
| 5 | |
| 6 | 'use client' |
| 7 | |
| 8 | import type { DraftGenerationResponse, DraftGenerationTask } from '@/api/ai/ai.types' |
| 9 | import { AlertCircle, ImageIcon, Loader2, Play } from 'lucide-react' |
| 10 | import { memo } from 'react' |
| 11 | import { useTransClient } from '@/app/i18n/client' |
| 12 | import { MorphingIcon } from '@/components/common/MorphingIcon' |
| 13 | import { OssImage } from '@/components/common/OssImage' |
| 14 | import { Badge } from '@/components/ui/badge' |
| 15 | import { cn } from '@/utils/className' |
| 16 | import { getDraftGenerationQueueDisplay } from '../../utils/draftGenerationQueue' |
| 17 | import styles from './GeneratingCard.module.scss' |
| 18 | |
| 19 | interface GeneratingCardProps { |
| 20 | count: number |
| 21 | onClick: () => void |
| 22 | } |
| 23 | |
| 24 | interface GeneratingTaskCardProps { |
| 25 | task: DraftGenerationTask |
| 26 | onClick: () => void |
| 27 | } |
| 28 | |
| 29 | function getResponseObject(task: DraftGenerationTask): DraftGenerationResponse | undefined { |
| 30 | return task.response && typeof task.response === 'object' ? task.response : undefined |
| 31 | } |
| 32 | |
| 33 | function getStringValue(record: Record<string, unknown> | undefined, key: string) { |
| 34 | const value = record?.[key] |
| 35 | return typeof value === 'string' && value.trim() ? value : undefined |
| 36 | } |
| 37 | |
| 38 | function getTaskTitle(task: DraftGenerationTask) { |
| 39 | const response = getResponseObject(task) |
| 40 | const plan = response?.plan |
| 41 | return response?.title || getStringValue(plan, 'title') |
| 42 | } |
| 43 | |
| 44 | function getTaskDescription(task: DraftGenerationTask) { |
| 45 | const response = getResponseObject(task) |
| 46 | const plan = response?.plan |
| 47 | return response?.description || getStringValue(plan, 'description') |
| 48 | } |
| 49 | |
| 50 | function getTaskTopics(task: DraftGenerationTask) { |
| 51 | const response = getResponseObject(task) |
| 52 | const topics = response?.topics ?? response?.plan?.topics |
| 53 | if (!Array.isArray(topics)) |
| 54 | return [] |
| 55 | return topics.filter((topic): topic is string => typeof topic === 'string' && topic.trim().length > 0) |
| 56 | } |
| 57 | |
| 58 | export function getDraftGenerationTaskTarget(task: DraftGenerationTask): 'draft' | 'video' | 'img' { |
| 59 | if (task.request?.draftType === 'video') |
| 60 | return 'video' |
| 61 | if (task.request?.draftType === 'image') |
| 62 | return 'img' |
| 63 | return 'draft' |
| 64 | } |
| 65 | |
| 66 | export function hasDraftGenerationTaskPartialResult(task: DraftGenerationTask) { |
| 67 | const response = getResponseObject(task) |
| 68 | return Boolean( |
| 69 | response?.imageUrls?.length |
| 70 | || response?.videoUrl |
| 71 | || response?.coverUrl |
| 72 | || response?.title |
| 73 | || response?.description |
| 74 | || response?.plan, |
| 75 | ) |
| 76 | } |
| 77 | |
| 78 | export function shouldShowDraftGenerationTaskCard(task: DraftGenerationTask) { |
| 79 | return task.status === 'generating' || (task.status === 'failed' && hasDraftGenerationTaskPartialResult(task)) |
| 80 | } |
| 81 | |
| 82 | export const GeneratingCard = memo(({ count, onClick }: GeneratingCardProps) => { |
| 83 | const { t } = useTransClient('brandPromotion') |
| 84 | |
| 85 | if (count <= 0) |
| 86 | return null |
| 87 | |
| 88 | return ( |
| 89 | <div |
| 90 | data-testid="draftbox-generating-card" |
| 91 | className={cn( |
| 92 | 'mb-4 h-[160px] rounded-lg border border-primary/20 bg-primary/5 overflow-hidden cursor-pointer transition-all duration-300 hover:border-primary/40', |
| 93 | styles.generatingCard, |
| 94 | )} |
| 95 | onClick={onClick} |
| 96 | > |
| 97 | <div className="flex flex-col items-center justify-center h-full gap-4 relative z-10"> |
| 98 | <MorphingIcon size={32} /> |
| 99 | <span className="text-sm text-muted-foreground"> |
| 100 | {t('detail.generatingDrafts', { count })} |
| 101 | </span> |
| 102 | </div> |
| 103 | </div> |
| 104 | ) |
| 105 | }) |
| 106 | |
| 107 | GeneratingCard.displayName = 'GeneratingCard' |
| 108 | |
| 109 | export const GeneratingTaskCard = memo(({ task, onClick }: GeneratingTaskCardProps) => { |
| 110 | const { t } = useTransClient('brandPromotion') |
| 111 | const response = getResponseObject(task) |
| 112 | const imageUrls = response?.imageUrls?.filter(Boolean) ?? [] |
| 113 | const coverUrl = response?.coverUrl || imageUrls[0] |
| 114 | const generatedCount = response?.generatedImageCount ?? imageUrls.length |
| 115 | const requestedCount = response?.requestedImageCount ?? task.request?.imageCount |
| 116 | const title = getTaskTitle(task) || t('detail.generatingTaskTitle') |
| 117 | const description = getTaskDescription(task) |
| 118 | const topics = getTaskTopics(task) |
| 119 | const modelName = task.request?.model || task.request?.imageModel |
| 120 | const isFailed = task.status === 'failed' |
| 121 | const isGenerating = task.status === 'generating' |
| 122 | const showImageGrid = imageUrls.length > 0 |
| 123 | const showVideoCover = !showImageGrid && (coverUrl || response?.videoUrl) |
| 124 | const queueDisplay = getDraftGenerationQueueDisplay(task) |
| 125 | const queueStatusText = queueDisplay |
| 126 | ? queueDisplay.type === 'queued' |
| 127 | ? t('detail.queueAhead', { count: queueDisplay.count }) |
| 128 | : t('detail.generatingDraft') |
| 129 | : '' |
| 130 | const showInlineQueueStatus = Boolean(queueStatusText && (showImageGrid || showVideoCover)) |
| 131 | |
| 132 | return ( |
| 133 | <div |
| 134 | data-testid="draftbox-generating-task-card" |
| 135 | className={cn( |
| 136 | 'mb-4 cursor-pointer overflow-hidden rounded-xl border bg-card transition-all duration-300 hover:border-primary/50', |
| 137 | isFailed ? 'border-destructive/30' : 'border-primary/20', |
| 138 | )} |
| 139 | onClick={onClick} |
| 140 | > |
| 141 | <div className="relative min-h-[132px] overflow-hidden bg-muted"> |
| 142 | {showImageGrid |
| 143 | ? ( |
| 144 | <div className={cn('grid gap-1 p-1', imageUrls.length === 1 ? 'grid-cols-1' : 'grid-cols-2')}> |
| 145 | {imageUrls.slice(0, 4).map((url, index) => ( |
| 146 | <div key={`${url}-${index}`} className="relative aspect-square overflow-hidden rounded-lg bg-background"> |
| 147 | <OssImage |
| 148 | src={url} |
| 149 | alt={t('detail.generatedImageAlt', { index: index + 1 })} |
| 150 | fill |
| 151 | className="object-cover" |
| 152 | sizes="160px" |
| 153 | /> |
| 154 | {index === 3 && imageUrls.length > 4 && ( |
| 155 | <div className="absolute inset-0 flex items-center justify-center bg-foreground/60 text-sm font-medium text-background"> |
| 156 | {t('detail.moreGeneratedImages', { count: imageUrls.length - 4 })} |
| 157 | </div> |
| 158 | )} |
| 159 | </div> |
| 160 | ))} |
| 161 | </div> |
| 162 | ) |
| 163 | : showVideoCover |
| 164 | ? ( |
| 165 | <div className="relative h-[160px]"> |
| 166 | {coverUrl |
| 167 | ? ( |
| 168 | <OssImage |
| 169 | src={coverUrl} |
| 170 | alt={title} |
| 171 | fill |
| 172 | className="object-cover" |
| 173 | sizes="240px" |
| 174 | /> |
| 175 | ) |
| 176 | : ( |
| 177 | <div className="flex h-full items-center justify-center"> |
| 178 | <ImageIcon className="h-8 w-8 text-muted-foreground" /> |
| 179 | </div> |
| 180 | )} |
| 181 | {response?.videoUrl && ( |
| 182 | <div className="absolute inset-0 flex items-center justify-center"> |
| 183 | <div className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground/60"> |
| 184 | <Play className="ml-0.5 h-5 w-5 fill-background text-background" /> |
| 185 | </div> |
| 186 | </div> |
| 187 | )} |
| 188 | </div> |
| 189 | ) |
| 190 | : ( |
| 191 | <div className={cn('flex h-[160px] flex-col items-center justify-center gap-3', styles.generatingCard)}> |
| 192 | <MorphingIcon size={32} /> |
| 193 | <span className="text-sm text-muted-foreground"> |
| 194 | {queueStatusText || t('detail.generatingDraft')} |
| 195 | </span> |
| 196 | </div> |
| 197 | )} |
| 198 | |
| 199 | <Badge |
| 200 | variant={isFailed ? 'destructive' : 'outline'} |
| 201 | className={cn( |
| 202 | 'absolute left-2 top-2 gap-1 shadow-none', |
| 203 | isGenerating && 'border-border/60 bg-background/90 font-medium text-muted-foreground backdrop-blur-sm', |
| 204 | )} |
| 205 | > |
| 206 | {isGenerating |
| 207 | ? <Loader2 className="h-3 w-3 animate-spin" /> |
| 208 | : <AlertCircle className="h-3 w-3" />} |
| 209 | {t(`detail.taskStatus.${task.status}`)} |
| 210 | </Badge> |
| 211 | </div> |
| 212 | |
| 213 | <div className="space-y-2 p-3"> |
| 214 | <div> |
| 215 | <p className="line-clamp-2 text-sm font-medium text-foreground">{title}</p> |
| 216 | {description && ( |
| 217 | <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{description}</p> |
| 218 | )} |
| 219 | </div> |
| 220 | |
| 221 | {requestedCount && requestedCount > 0 && ( |
| 222 | <div className="text-xs text-muted-foreground"> |
| 223 | {t('detail.generatedImageProgress', { |
| 224 | generated: generatedCount, |
| 225 | requested: requestedCount, |
| 226 | })} |
| 227 | </div> |
| 228 | )} |
| 229 | |
| 230 | {showInlineQueueStatus && ( |
| 231 | <div className="text-xs text-muted-foreground"> |
| 232 | {queueStatusText} |
| 233 | </div> |
| 234 | )} |
| 235 | |
| 236 | {modelName && ( |
| 237 | <Badge variant="secondary" className="rounded-full text-[11px] font-normal"> |
| 238 | {modelName} |
| 239 | </Badge> |
| 240 | )} |
| 241 | |
| 242 | {topics.length > 0 && ( |
| 243 | <div className="flex flex-wrap gap-1"> |
| 244 | {topics.slice(0, 4).map(topic => ( |
| 245 | <span key={topic} className="text-xs text-primary"> |
| 246 | # |
| 247 | {topic} |
| 248 | </span> |
| 249 | ))} |
| 250 | </div> |
| 251 | )} |
| 252 | |
| 253 | {isFailed && task.errorMessage && ( |
| 254 | <p className="line-clamp-2 text-xs text-destructive">{task.errorMessage}</p> |
| 255 | )} |
| 256 | </div> |
| 257 | </div> |
| 258 | ) |
| 259 | }) |
| 260 | |
| 261 | GeneratingTaskCard.displayName = 'GeneratingTaskCard' |
| 262 |