911 lines
41 KiB
TypeScript
911 lines
41 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useMemo, useEffect, useCallback } from 'react';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
LayoutGrid,
|
||
Heart,
|
||
Download,
|
||
Brush,
|
||
ImagePlus,
|
||
Video,
|
||
Film,
|
||
X,
|
||
Clock,
|
||
Cpu,
|
||
Sparkles,
|
||
Image as ImageIcon,
|
||
MessageSquare,
|
||
Copy,
|
||
Maximize2,
|
||
ArrowLeft,
|
||
Trash2,
|
||
Search,
|
||
} from 'lucide-react';
|
||
import { copyTextToClipboard, downloadFile } from '@/lib/utils';
|
||
import { usePublishedWorks, useCreationHistory, syncPublishedToSupabase, type PublishedWork } from '@/lib/creation-history-store';
|
||
import { useAuth } from '@/lib/auth-store';
|
||
import { FullscreenPreview } from '@/components/fullscreen-preview';
|
||
import { toast } from 'sonner';
|
||
|
||
const CATEGORIES = [
|
||
{ value: 'all', label: '全部', icon: LayoutGrid },
|
||
{ value: 'text2img', label: '文生图', icon: Brush },
|
||
{ value: 'img2img', label: '图生图', icon: ImagePlus },
|
||
{ value: 'text2video', label: '文生视频', icon: Video },
|
||
{ value: 'img2video', label: '图生视频', icon: Film },
|
||
];
|
||
|
||
/* ---------- Gallery Work (from API) ---------- */
|
||
interface GalleryWork {
|
||
id: string;
|
||
type: string;
|
||
title?: string | null;
|
||
prompt?: string | null;
|
||
negativePrompt?: string | null;
|
||
url: string;
|
||
thumbnailUrl?: string | null;
|
||
width?: number | null;
|
||
height?: number | null;
|
||
duration?: number | null;
|
||
likes: number;
|
||
creditsCost?: number | null;
|
||
params: Record<string, unknown>;
|
||
referenceImage?: string | null;
|
||
referenceImages?: string[];
|
||
publisherId: string;
|
||
publisherNickname: string;
|
||
publisherAvatarUrl?: string | null;
|
||
publishedAt: string;
|
||
}
|
||
|
||
function getCategoryFromWork(work: GalleryWork): string {
|
||
const mode = work.params?.creationMode || work.params?.workType || work.params?.mode;
|
||
if (
|
||
mode === 'text2img' ||
|
||
mode === 'img2img' ||
|
||
mode === 'text2video' ||
|
||
mode === 'img2video'
|
||
) {
|
||
return mode;
|
||
}
|
||
if (work.type === 'text2video' || work.type === 'img2video') {
|
||
return work.type;
|
||
}
|
||
if (work.type === 'img2img') return work.type;
|
||
const hasReference =
|
||
Boolean(work.referenceImage) ||
|
||
(Array.isArray(work.referenceImages) && work.referenceImages.length > 0) ||
|
||
Boolean(work.params?.referenceImage) ||
|
||
(Array.isArray(work.params?.referenceImages) && work.params.referenceImages.length > 0);
|
||
// Fallback: infer from type + referenceImage
|
||
if (work.type === 'video' || work.duration) {
|
||
return hasReference ? 'img2video' : 'text2video';
|
||
}
|
||
return hasReference ? 'img2img' : 'text2img';
|
||
}
|
||
|
||
function getCategoryLabel(work: GalleryWork): string {
|
||
const cat = CATEGORIES.find(c => c.value === getCategoryFromWork(work));
|
||
return cat?.label ?? work.type;
|
||
}
|
||
|
||
function formatDate(iso: string): string {
|
||
try {
|
||
return new Date(iso).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
} catch {
|
||
return iso;
|
||
}
|
||
}
|
||
|
||
function getAvatarText(nickname: string): string {
|
||
const trimmed = nickname.trim();
|
||
return trimmed ? trimmed.slice(0, 1).toUpperCase() : '匿';
|
||
}
|
||
|
||
function getWorkReferenceImages(work: GalleryWork): string[] {
|
||
const fromArray = Array.isArray(work.referenceImages) ? work.referenceImages : [];
|
||
const fromParams = Array.isArray(work.params?.referenceImages)
|
||
? (work.params.referenceImages as unknown[]).filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
|
||
: [];
|
||
const single = typeof work.referenceImage === 'string' && work.referenceImage.trim()
|
||
? [work.referenceImage]
|
||
: typeof work.params?.referenceImage === 'string' && work.params.referenceImage.trim()
|
||
? [work.params.referenceImage]
|
||
: [];
|
||
return [...new Set([...single, ...fromArray, ...fromParams].filter(url => url && !url.startsWith('data:') && !url.startsWith('[')))];
|
||
}
|
||
|
||
async function copyGalleryText(text: string, successMessage: string) {
|
||
const copied = await copyTextToClipboard(text);
|
||
if (copied) {
|
||
toast.success(successMessage);
|
||
} else {
|
||
toast.error('复制失败，请手动选择文本复制');
|
||
}
|
||
}
|
||
|
||
function getCreateUrlForCategory(category: string): string {
|
||
const type = category === 'img2img' || category === 'text2video' || category === 'img2video'
|
||
? category
|
||
: 'text2img';
|
||
return `/create?type=${type}`;
|
||
}
|
||
|
||
type MediaSize = { width: number; height: number };
|
||
|
||
function getEstimatedWorkHeight(work: GalleryWork, measuredSize?: MediaSize): number {
|
||
const width = Number(measuredSize?.width || work.width || 0);
|
||
const height = Number(measuredSize?.height || work.height || 0);
|
||
const imageHeight = width > 0 && height > 0 ? Math.max(120, (height / width) * 320) : 320;
|
||
return imageHeight + 152 + 16;
|
||
}
|
||
|
||
const galleryGlassPanel =
|
||
'liquid-glass';
|
||
const galleryGlassCard =
|
||
'liquid-surface';
|
||
const galleryGlassBlock =
|
||
'rounded-xl border border-border bg-card/40';
|
||
const detailGlassBlock =
|
||
'rounded-xl border border-white/[0.08] bg-[#12161d]/82 shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_36px_rgba(0,0,0,0.18)] backdrop-blur-xl light:border-amber-900/18 light:bg-white/36 light:text-foreground light:shadow-[inset_0_1px_0_rgba(255,255,255,0.70),0_16px_40px_rgba(83,61,27,0.12)]';
|
||
const detailGlassInner =
|
||
'rounded-md border border-white/[0.07] bg-[#0d1219]/80 light:border-amber-900/16 light:bg-white/32';
|
||
const galleryMenuItemClass =
|
||
'inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-xl border border-transparent px-5 text-base font-semibold leading-none text-foreground/75 transition-colors hover:bg-white/[0.035]';
|
||
const galleryMenuItemActiveClass =
|
||
'border-transparent bg-white/[0.075] text-primary shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_0_18px_rgba(244,166,36,0.18),0_6px_18px_rgba(0,0,0,0.18)] [&_svg]:text-primary';
|
||
|
||
export default function GalleryPage() {
|
||
const [apiWorks, setApiWorks] = useState<GalleryWork[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [syncStatus, setSyncStatus] = useState<'idle' | 'syncing' | 'done'>('idle');
|
||
const [category, setCategory] = useState('all');
|
||
const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
|
||
const [selectedWork, setSelectedWork] = useState<GalleryWork | null>(null);
|
||
const [fullscreenSrc, setFullscreenSrc] = useState<string | null>(null);
|
||
const [sortBy, setSortBy] = useState<'newest' | 'popular'>('newest');
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [masonryColumnCount, setMasonryColumnCount] = useState(4);
|
||
const [measuredMediaSizes, setMeasuredMediaSizes] = useState<Record<string, MediaSize>>({});
|
||
const [selectedGalleryIds, setSelectedGalleryIds] = useState<Set<string>>(new Set());
|
||
|
||
useEffect(() => {
|
||
const updateColumnCount = () => {
|
||
const width = window.innerWidth;
|
||
if (width >= 1280) setMasonryColumnCount(4);
|
||
else if (width >= 1024) setMasonryColumnCount(3);
|
||
else if (width >= 640) setMasonryColumnCount(2);
|
||
else setMasonryColumnCount(1);
|
||
};
|
||
|
||
updateColumnCount();
|
||
window.addEventListener('resize', updateColumnCount);
|
||
return () => window.removeEventListener('resize', updateColumnCount);
|
||
}, []);
|
||
|
||
// ESC to close detail overlay
|
||
useEffect(() => {
|
||
if (!selectedWork) return;
|
||
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') setSelectedWork(null); };
|
||
window.addEventListener('keydown', handler);
|
||
return () => window.removeEventListener('keydown', handler);
|
||
}, [selectedWork]);
|
||
|
||
// Prevent body scroll when detail is open
|
||
useEffect(() => {
|
||
if (selectedWork) {
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.body.style.overflow = '';
|
||
}
|
||
return () => { document.body.style.overflow = ''; };
|
||
}, [selectedWork]);
|
||
const { works: localPublished } = usePublishedWorks();
|
||
const { records: creationHistory } = useCreationHistory();
|
||
const { user, accessToken, isAdmin } = useAuth();
|
||
|
||
// Fetch works from API, after syncing localStorage to Supabase
|
||
const fetchWorks = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params = new URLSearchParams({ sort: sortBy, limit: '300' });
|
||
if (searchQuery.trim()) params.set('q', searchQuery.trim());
|
||
const res = await fetch(`/api/gallery?${params.toString()}`);
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
setApiWorks(data.works || []);
|
||
}
|
||
} catch { /* ignore */ }
|
||
setLoading(false);
|
||
}, [sortBy, searchQuery]);
|
||
|
||
// Sync localStorage to Supabase on first mount only
|
||
useEffect(() => {
|
||
setSyncStatus('syncing');
|
||
syncPublishedToSupabase().then(synced => {
|
||
setSyncStatus('done');
|
||
if (synced > 0) {
|
||
// Re-fetch after sync to show newly synced works
|
||
fetchWorks();
|
||
}
|
||
}).catch(() => {
|
||
setSyncStatus('done');
|
||
});
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchWorks();
|
||
}, [fetchWorks]);
|
||
|
||
// Merge API works with localStorage published works + published creation history
|
||
// This ensures previously shared works are visible even if not yet in Supabase
|
||
const works = useMemo(() => {
|
||
const apiUrls = new Set(apiWorks.map(w => w.url));
|
||
|
||
// From localStorage published gallery
|
||
const localAsGallery: GalleryWork[] = localPublished
|
||
.filter(w => !apiUrls.has(w.url))
|
||
.map(w => ({
|
||
id: w.id,
|
||
type: w.type === 'video' ? (w.referenceImage ? 'img2video' : 'text2video') : (w.referenceImage ? 'img2img' : 'text2img'),
|
||
title: null,
|
||
prompt: w.prompt,
|
||
negativePrompt: w.negativePrompt,
|
||
url: w.url,
|
||
thumbnailUrl: null,
|
||
width: null,
|
||
height: null,
|
||
duration: null,
|
||
likes: w.likes || 0,
|
||
creditsCost: null,
|
||
params: { model: w.model, modelLabel: w.modelLabel, ...w.params },
|
||
referenceImage: w.referenceImage,
|
||
referenceImages: w.referenceImages,
|
||
publisherId: w.publisherId,
|
||
publisherNickname: w.publisherNickname,
|
||
publisherAvatarUrl: null,
|
||
publishedAt: w.publishedAt,
|
||
}));
|
||
|
||
// From creation history records marked as published
|
||
const existingUrls = new Set([...apiUrls, ...localAsGallery.map(w => w.url)]);
|
||
const historyPublished: GalleryWork[] = creationHistory
|
||
.filter(r => r.published && r.url && !existingUrls.has(r.url) && !r.url.startsWith('data:') && !r.url.startsWith('['))
|
||
.map(r => ({
|
||
id: r.id,
|
||
type: r.type === 'video' ? (r.referenceImage ? 'img2video' : 'text2video') : (r.referenceImage ? 'img2img' : 'text2img'),
|
||
title: null,
|
||
prompt: r.prompt,
|
||
negativePrompt: r.negativePrompt,
|
||
url: r.url,
|
||
thumbnailUrl: null,
|
||
width: null,
|
||
height: null,
|
||
duration: null,
|
||
likes: 0,
|
||
creditsCost: null,
|
||
params: { model: r.model, modelLabel: r.modelLabel, ...r.params },
|
||
referenceImage: r.referenceImage,
|
||
referenceImages: r.referenceImages,
|
||
publisherId: user?.id || 'anonymous',
|
||
publisherNickname: user?.nickname || user?.email?.split('@')[0] || '匿名用户',
|
||
publisherAvatarUrl: user?.avatarUrl || null,
|
||
publishedAt: r.createdAt,
|
||
}));
|
||
|
||
return [...apiWorks, ...localAsGallery, ...historyPublished];
|
||
}, [apiWorks, localPublished, creationHistory, user]);
|
||
|
||
const filteredWorks = useMemo(() => {
|
||
const query = searchQuery.trim().toLowerCase();
|
||
return works.filter(work => {
|
||
if (category !== 'all' && getCategoryFromWork(work) !== category) return false;
|
||
if (!query) return true;
|
||
const haystack = [
|
||
work.title,
|
||
work.prompt,
|
||
work.negativePrompt,
|
||
work.publisherNickname,
|
||
work.params?.model,
|
||
work.params?.modelLabel,
|
||
work.type,
|
||
].map(value => String(value || '').toLowerCase()).join('\n');
|
||
return haystack.includes(query);
|
||
});
|
||
}, [works, category, searchQuery]);
|
||
|
||
const apiWorkIds = useMemo(() => new Set(apiWorks.map(work => work.id)), [apiWorks]);
|
||
|
||
const handleCardImageLoad = useCallback((workId: string, e: React.SyntheticEvent<HTMLImageElement>) => {
|
||
const img = e.currentTarget;
|
||
if (img.naturalWidth <= 0 || img.naturalHeight <= 0) return;
|
||
|
||
setMeasuredMediaSizes(prev => {
|
||
const current = prev[workId];
|
||
if (current?.width === img.naturalWidth && current?.height === img.naturalHeight) {
|
||
return prev;
|
||
}
|
||
return {
|
||
...prev,
|
||
[workId]: { width: img.naturalWidth, height: img.naturalHeight },
|
||
};
|
||
});
|
||
}, []);
|
||
|
||
const masonryColumns = useMemo(() => {
|
||
const columns = Array.from({ length: masonryColumnCount }, () => [] as GalleryWork[]);
|
||
const columnHeights = Array.from({ length: masonryColumnCount }, () => 0);
|
||
filteredWorks.forEach((work) => {
|
||
const targetIndex = columnHeights.indexOf(Math.min(...columnHeights));
|
||
columns[targetIndex].push(work);
|
||
columnHeights[targetIndex] += getEstimatedWorkHeight(work, measuredMediaSizes[work.id]);
|
||
});
|
||
return columns;
|
||
}, [filteredWorks, masonryColumnCount, measuredMediaSizes]);
|
||
|
||
const selectedReferenceImages = useMemo(
|
||
() => selectedWork ? getWorkReferenceImages(selectedWork) : [],
|
||
[selectedWork],
|
||
);
|
||
|
||
const toggleLike = (id: string, e?: React.MouseEvent) => {
|
||
e?.stopPropagation();
|
||
if (likedIds.has(id)) return;
|
||
setLikedIds(prev => new Set(prev).add(id));
|
||
};
|
||
|
||
const handleDownload = async (url: string, filename: string, e?: React.MouseEvent) => {
|
||
e?.stopPropagation();
|
||
const result = await downloadFile(url, filename);
|
||
if (!result.ok) {
|
||
window.open(url, '_blank');
|
||
}
|
||
};
|
||
|
||
const toggleSelectGalleryWork = (id: string, e?: React.MouseEvent) => {
|
||
e?.stopPropagation();
|
||
setSelectedGalleryIds(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(id)) next.delete(id);
|
||
else next.add(id);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const handleDeleteGalleryWorks = async (ids: string[], e?: React.MouseEvent) => {
|
||
e?.stopPropagation();
|
||
const targetIds = ids.filter(id => apiWorkIds.has(id));
|
||
if (targetIds.length === 0) {
|
||
toast.error('没有可删除的服务器画廊作品');
|
||
return;
|
||
}
|
||
const confirmed = window.confirm(targetIds.length === 1 ? '确认从画廊移除这个作品？' : `确认从画廊批量移除 ${targetIds.length} 个作品？`);
|
||
if (!confirmed) return;
|
||
|
||
try {
|
||
const res = await fetch('/api/gallery', {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
|
||
},
|
||
body: JSON.stringify({ ids: targetIds }),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
throw new Error(data.error || '删除失败');
|
||
}
|
||
const removedIds = new Set<string>((data.ids || targetIds) as string[]);
|
||
setApiWorks(prev => prev.filter(work => !removedIds.has(work.id)));
|
||
setSelectedGalleryIds(prev => new Set([...prev].filter(id => !removedIds.has(id))));
|
||
if (selectedWork && removedIds.has(selectedWork.id)) {
|
||
setSelectedWork(null);
|
||
}
|
||
toast.success(`已从画廊移除 ${data.removed ?? removedIds.size} 个作品`);
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : '删除失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 py-8">
|
||
{/* Header */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center gap-3">
|
||
<h1 className="font-serif text-3xl font-bold">作品画廊</h1>
|
||
{syncStatus === 'syncing' && (
|
||
<span className="text-xs text-muted-foreground animate-pulse">同步本地数据...</span>
|
||
)}
|
||
</div>
|
||
<p className="mt-2 text-muted-foreground">探索社区创作，发现灵感之美</p>
|
||
</div>
|
||
|
||
<div className={`${galleryGlassPanel} mb-4 flex items-center gap-2.5 rounded-2xl px-4 py-2`}>
|
||
<Search className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||
<input
|
||
value={searchQuery}
|
||
onChange={(event) => setSearchQuery(event.target.value)}
|
||
placeholder="搜索作品、用户、提示词、模型"
|
||
className="h-8 min-w-0 flex-1 bg-transparent text-sm font-medium outline-none placeholder:text-muted-foreground/70"
|
||
/>
|
||
{searchQuery && (
|
||
<button
|
||
onClick={() => setSearchQuery('')}
|
||
className="flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
|
||
>
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className={`${galleryGlassPanel} mb-8 flex min-h-12 flex-col items-start justify-between gap-4 rounded-2xl p-1 sm:flex-row sm:items-center`}>
|
||
<div className="flex flex-wrap gap-2">
|
||
{CATEGORIES.map((cat) => {
|
||
const Icon = cat.icon;
|
||
return (
|
||
<button
|
||
key={cat.value}
|
||
className={`${galleryMenuItemClass} ${category === cat.value ? galleryMenuItemActiveClass : ''}`}
|
||
onClick={() => setCategory(cat.value)}
|
||
>
|
||
<Icon className="h-3.5 w-3.5" />
|
||
{cat.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
className={`${galleryMenuItemClass} ${sortBy === 'newest' ? galleryMenuItemActiveClass : ''}`}
|
||
onClick={() => setSortBy('newest')}
|
||
>
|
||
最新发布
|
||
</button>
|
||
<button
|
||
className={`${galleryMenuItemClass} ${sortBy === 'popular' ? galleryMenuItemActiveClass : ''}`}
|
||
onClick={() => setSortBy('popular')}
|
||
>
|
||
最受欢迎
|
||
</button>
|
||
{isAdmin && selectedGalleryIds.size > 0 && (
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
className="h-10 rounded-xl px-4 text-sm font-semibold"
|
||
onClick={(e) => handleDeleteGalleryWorks([...selectedGalleryIds], e)}
|
||
>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
批量删除 {selectedGalleryIds.size}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Gallery Grid */}
|
||
{loading ? (
|
||
<div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
|
||
<Sparkles className="h-12 w-12 mb-4 animate-pulse opacity-30" />
|
||
<p className="text-lg font-serif">加载中...</p>
|
||
</div>
|
||
) : filteredWorks.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
|
||
<LayoutGrid className="h-16 w-16 mb-4 opacity-30" />
|
||
<p className="text-lg font-serif">暂无作品</p>
|
||
<p className="text-sm mt-1">创作并发布你的作品，让大家一起欣赏</p>
|
||
<Button
|
||
className="mt-4"
|
||
variant="outline"
|
||
onClick={() => window.location.href = getCreateUrlForCategory(category)}
|
||
>
|
||
<Sparkles className="h-4 w-4 mr-2" />
|
||
前往创作
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="grid gap-4"
|
||
style={{ gridTemplateColumns: `repeat(${masonryColumnCount}, minmax(0, 1fr))` }}
|
||
>
|
||
{masonryColumns.map((columnWorks, columnIndex) => (
|
||
<div key={columnIndex} className="flex min-w-0 flex-col gap-4">
|
||
{columnWorks.map((work) => (
|
||
<Card
|
||
key={work.id}
|
||
className={`${galleryGlassCard} group w-full overflow-hidden cursor-pointer !rounded-2xl !py-0 transition-all duration-300 hover:border-primary/25 hover:bg-slate-900/[0.52] hover:shadow-[0_18px_52px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.075)]`}
|
||
onClick={() => setSelectedWork(work)}
|
||
>
|
||
<div className="relative overflow-hidden bg-black/25">
|
||
{(work.thumbnailUrl || (work.url && !work.url.startsWith('data:'))) ? (
|
||
<img
|
||
src={work.thumbnailUrl || work.url}
|
||
alt={(work.prompt || '').slice(0, 30)}
|
||
className="block h-auto w-full object-contain"
|
||
loading="lazy"
|
||
onLoad={(e) => handleCardImageLoad(work.id, e)}
|
||
onDoubleClick={(e) => { e.stopPropagation(); setFullscreenSrc(work.url); }}
|
||
/>
|
||
) : (
|
||
<div className="flex aspect-square w-full flex-col items-center justify-center bg-gradient-to-br from-muted to-muted/50">
|
||
<Sparkles className="h-8 w-8 text-muted-foreground/20" />
|
||
</div>
|
||
)}
|
||
{isAdmin && apiWorkIds.has(work.id) && (
|
||
<button
|
||
className={`absolute left-2 top-2 z-20 flex h-7 w-7 items-center justify-center rounded-lg border text-xs font-semibold backdrop-blur-md transition-colors ${
|
||
selectedGalleryIds.has(work.id)
|
||
? 'border-primary/60 bg-primary text-primary-foreground'
|
||
: 'border-white/20 bg-black/45 text-white hover:bg-black/65'
|
||
}`}
|
||
onClick={(e) => toggleSelectGalleryWork(work.id, e)}
|
||
title={selectedGalleryIds.has(work.id) ? '取消选择' : '选择作品'}
|
||
>
|
||
{selectedGalleryIds.has(work.id) ? '✓' : ''}
|
||
</button>
|
||
)}
|
||
{(work.type === 'video' || work.type === 'text2video' || work.type === 'img2video') && (
|
||
<Badge className={`absolute left-2 ${isAdmin && apiWorkIds.has(work.id) ? 'top-11' : 'top-2'}`} variant="secondary">
|
||
<Film className="h-3 w-3 mr-1" />视频
|
||
</Badge>
|
||
)}
|
||
<Badge className="absolute top-2 right-2" variant="secondary">
|
||
{getCategoryLabel(work)}
|
||
</Badge>
|
||
{/* Hover overlay */}
|
||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors flex flex-col items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
|
||
<p className="text-white text-sm font-serif line-clamp-2 px-4 text-center">
|
||
{work.prompt}
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
className="h-8 w-8 p-0"
|
||
onClick={(e) => toggleLike(work.id, e)}
|
||
>
|
||
<Heart className={`h-4 w-4 ${likedIds.has(work.id) ? 'fill-rose-500 text-rose-500' : ''}`} />
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
className="h-8 w-8 p-0"
|
||
onClick={(e) => handleDownload(work.url, `miaojing-${work.id}.png`, e)}
|
||
>
|
||
<Download className="h-4 w-4" />
|
||
</Button>
|
||
{isAdmin && apiWorkIds.has(work.id) && (
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
className="h-8 w-8 p-0"
|
||
onClick={(e) => handleDeleteGalleryWorks([work.id], e)}
|
||
title="从画廊删除"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<CardContent className="flex h-[152px] flex-col p-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<div className="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/15 text-xs font-semibold text-primary ring-1 ring-primary/25">
|
||
{work.publisherAvatarUrl ? (
|
||
<img
|
||
src={work.publisherAvatarUrl}
|
||
alt={work.publisherNickname}
|
||
className="h-full w-full object-cover"
|
||
loading="lazy"
|
||
/>
|
||
) : (
|
||
getAvatarText(work.publisherNickname)
|
||
)}
|
||
</div>
|
||
<span className="truncate text-sm font-medium">
|
||
{work.publisherNickname}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||
<Heart className={`h-3 w-3 ${likedIds.has(work.id) ? 'fill-rose-500 text-rose-500' : ''}`} />
|
||
{work.likes + (likedIds.has(work.id) ? 1 : 0)}
|
||
</div>
|
||
</div>
|
||
<p className="mt-2 h-[100px] overflow-hidden whitespace-pre-wrap break-words text-xs leading-5 text-muted-foreground line-clamp-5">
|
||
{work.prompt}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Detail - Fullscreen Overlay */}
|
||
{selectedWork && (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md animate-in fade-in duration-200 light:bg-white/58 light:backdrop-blur-xl"
|
||
onClick={(e) => { if (e.target === e.currentTarget) setSelectedWork(null); }}
|
||
>
|
||
<div className="relative flex h-[96vh] w-[98vw] overflow-hidden rounded-2xl border border-white/[0.08] bg-[#07090d] shadow-[0_28px_80px_rgba(0,0,0,0.55)] light:border-amber-900/18 light:bg-white/30 light:shadow-[0_28px_80px_rgba(83,61,27,0.16),inset_0_1px_0_rgba(255,255,255,0.70)]">
|
||
{selectedWork.url && !selectedWork.url.startsWith('data:') && (
|
||
<>
|
||
<img
|
||
src={selectedWork.thumbnailUrl || selectedWork.url}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute inset-0 h-full w-full scale-125 object-cover opacity-48 blur-[5px]"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 bg-black/42 light:bg-white/38" />
|
||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.015),rgba(0,0,0,0.62))] light:bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.16),rgba(255,248,235,0.54))]" />
|
||
</>
|
||
)}
|
||
{/* Left: Image/Video */}
|
||
<div className="relative z-10 flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-black/22 light:bg-white/12">
|
||
{selectedWork.type === 'video' || selectedWork.type === 'text2video' || selectedWork.type === 'img2video' ? (
|
||
<video
|
||
src={selectedWork.url}
|
||
controls
|
||
className="relative z-10 h-full w-full object-contain"
|
||
/>
|
||
) : (
|
||
<img
|
||
src={selectedWork.url}
|
||
alt={(selectedWork.prompt || '').slice(0, 30)}
|
||
className="relative z-10 h-full w-full cursor-zoom-in object-contain"
|
||
onDoubleClick={() => setFullscreenSrc(selectedWork.url)}
|
||
/>
|
||
)}
|
||
{/* Fullscreen button overlay */}
|
||
{selectedWork.type !== 'video' && selectedWork.type !== 'text2video' && selectedWork.type !== 'img2video' && (
|
||
<button
|
||
onClick={() => setFullscreenSrc(selectedWork.url)}
|
||
className="absolute bottom-4 right-4 z-20 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white shadow-lg backdrop-blur-md transition-colors hover:bg-black/70"
|
||
>
|
||
<Maximize2 className="h-5 w-5 text-white" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Right: Info Panel */}
|
||
<div className="relative z-10 flex w-[410px] shrink-0 flex-col overflow-hidden border-l border-white/[0.07] bg-[#0a0d12]/74 backdrop-blur-2xl light:border-amber-900/14 light:bg-white/28">
|
||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[#0a0d12]/46 via-[#0a0d12]/72 to-[#0a0d12]/86 light:from-white/8 light:via-white/24 light:to-white/42" />
|
||
{/* Close header */}
|
||
<div className={`${detailGlassBlock} relative z-10 m-4 mb-0 flex items-center gap-2 px-4 py-3`}>
|
||
<button
|
||
onClick={() => setSelectedWork(null)}
|
||
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-white/[0.07]"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</button>
|
||
<h2 className="font-serif text-lg font-semibold">作品详情</h2>
|
||
<button
|
||
onClick={() => setSelectedWork(null)}
|
||
className="ml-auto flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-white/[0.07]"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="relative z-10 flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
|
||
{/* Publisher info */}
|
||
<div className={`${detailGlassBlock} flex shrink-0 items-center gap-3 p-4`}>
|
||
<div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-sm font-semibold text-primary ring-1 ring-primary/25">
|
||
{selectedWork.publisherAvatarUrl ? (
|
||
<img
|
||
src={selectedWork.publisherAvatarUrl}
|
||
alt={selectedWork.publisherNickname}
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : (
|
||
getAvatarText(selectedWork.publisherNickname)
|
||
)}
|
||
</div>
|
||
<div className="min-w-0">
|
||
<p className="truncate text-base font-semibold">{selectedWork.publisherNickname}</p>
|
||
<p className="flex items-center gap-1 text-xs text-slate-400 light:text-muted-foreground">
|
||
<Clock className="h-3 w-3" />
|
||
{formatDate(selectedWork.publishedAt)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Prompt */}
|
||
{(selectedWork.prompt || selectedWork.negativePrompt) && (
|
||
<div className={`${detailGlassBlock} flex min-h-0 flex-1 flex-col space-y-4 p-4`}>
|
||
{selectedWork.prompt && (
|
||
<div className="flex min-h-0 flex-1 flex-col space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<p className="flex items-center gap-2 text-sm font-medium text-slate-400 light:text-muted-foreground">
|
||
<MessageSquare className="h-4 w-4 text-primary" />
|
||
提示词
|
||
</p>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-6 gap-1 px-2 text-xs"
|
||
onClick={() => copyGalleryText(selectedWork.prompt || '', '提示词已复制')}
|
||
>
|
||
<Copy className="h-3 w-3" />复制
|
||
</Button>
|
||
</div>
|
||
<div className={`${detailGlassInner} min-h-0 flex-1 overflow-y-auto p-3`}>
|
||
<p className="whitespace-pre-wrap break-words text-sm leading-6 text-slate-100 light:text-foreground">{selectedWork.prompt}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{selectedWork.negativePrompt && (
|
||
<div className="shrink-0 space-y-2">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<p className="flex items-center gap-2 text-sm font-medium text-slate-400 light:text-muted-foreground">
|
||
<X className="h-4 w-4 text-destructive" />
|
||
负面提示词
|
||
</p>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-6 gap-1 px-2 text-xs"
|
||
onClick={() => copyGalleryText(selectedWork.negativePrompt || '', '负面提示词已复制')}
|
||
>
|
||
<Copy className="h-3 w-3" />复制
|
||
</Button>
|
||
</div>
|
||
<div className={`${detailGlassInner} max-h-28 overflow-y-auto p-3`}>
|
||
<p className="whitespace-pre-wrap break-words text-sm leading-6 text-slate-300 light:text-foreground/75">
|
||
{selectedWork.negativePrompt}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Reference Image */}
|
||
{selectedReferenceImages.length > 0 && (
|
||
<div className={`${detailGlassBlock} shrink-0 p-4`}>
|
||
<div className="mb-2 flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<ImageIcon className="h-4 w-4 text-primary" />
|
||
<p className="text-sm font-medium text-slate-100 light:text-foreground">参考图</p>
|
||
</div>
|
||
<span className="text-xs text-slate-400 light:text-muted-foreground">{selectedReferenceImages.length} 张</span>
|
||
</div>
|
||
<div className="grid max-h-[240px] grid-cols-2 gap-2 overflow-y-auto pr-1">
|
||
{selectedReferenceImages.map((url, index) => (
|
||
<div key={`${url}-${index}`} className={`${detailGlassInner} group relative overflow-hidden`}>
|
||
<img
|
||
src={url}
|
||
alt={`参考图 ${index + 1}`}
|
||
className="aspect-square w-full cursor-zoom-in object-cover"
|
||
onDoubleClick={() => setFullscreenSrc(url)}
|
||
/>
|
||
<div className="absolute inset-x-0 bottom-0 flex justify-end gap-1 bg-black/35 p-1 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100">
|
||
<button
|
||
className="flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-black"
|
||
onClick={() => setFullscreenSrc(url)}
|
||
>
|
||
<Maximize2 className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
className="flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-black"
|
||
onClick={(event) => handleDownload(url, `miaojing-reference-${selectedWork.id}-${index + 1}.png`, event)}
|
||
>
|
||
<Download className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className={`${detailGlassBlock} mt-auto shrink-0 space-y-4 p-4`}>
|
||
{/* Model & Params */}
|
||
{selectedWork.params && Object.keys(selectedWork.params).length > 0 && (
|
||
<div>
|
||
<div className="mb-3 flex items-center gap-2">
|
||
<Cpu className="h-4 w-4 text-primary" />
|
||
<p className="text-sm font-medium text-slate-100 light:text-foreground">模型与参数</p>
|
||
</div>
|
||
<div className="grid max-h-36 grid-cols-2 gap-3 overflow-y-auto text-sm">
|
||
{(!!selectedWork.params.modelLabel || !!selectedWork.params.model) && (
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">模型</p>
|
||
<p className="font-medium text-slate-100 light:text-foreground">{String(selectedWork.params.modelLabel || selectedWork.params.model || '')}</p>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">类型</p>
|
||
<Badge variant="secondary">{getCategoryLabel(selectedWork)}</Badge>
|
||
</div>
|
||
{!!selectedWork.params.size && (
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">尺寸</p>
|
||
<p className="text-slate-100 light:text-foreground">{String(selectedWork.params.size)}</p>
|
||
</div>
|
||
)}
|
||
{!!selectedWork.params.steps && (
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">步数</p>
|
||
<p className="text-slate-100 light:text-foreground">{String(selectedWork.params.steps)}</p>
|
||
</div>
|
||
)}
|
||
{!!selectedWork.params.cfg_scale && (
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">引导系数</p>
|
||
<p className="text-slate-100 light:text-foreground">{String(selectedWork.params.cfg_scale)}</p>
|
||
</div>
|
||
)}
|
||
{!!selectedWork.params.seed && (
|
||
<div>
|
||
<p className="text-xs text-slate-500 light:text-muted-foreground/80">种子</p>
|
||
<p className="text-slate-100 light:text-foreground">{String(selectedWork.params.seed)}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-between gap-3 border-t border-white/[0.07] light:border-amber-900/14 pt-4">
|
||
<Button
|
||
size="sm"
|
||
variant={likedIds.has(selectedWork.id) ? 'default' : 'outline'}
|
||
className="h-9 min-w-[92px] gap-1.5 px-3 text-sm font-semibold"
|
||
onClick={() => toggleLike(selectedWork.id)}
|
||
>
|
||
<Heart className={`h-3.5 w-3.5 ${likedIds.has(selectedWork.id) ? 'fill-current' : ''}`} />
|
||
{selectedWork.likes + (likedIds.has(selectedWork.id) ? 1 : 0)}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
className="h-9 min-w-[112px] gap-1.5 px-3 text-sm font-semibold"
|
||
onClick={() => handleDownload(selectedWork.url, `miaojing-${selectedWork.id}.png`)}
|
||
>
|
||
<Download className="h-3.5 w-3.5" />
|
||
下载图片
|
||
</Button>
|
||
{isAdmin && apiWorkIds.has(selectedWork.id) && (
|
||
<Button
|
||
size="sm"
|
||
variant="destructive"
|
||
className="h-9 min-w-[92px] gap-1.5 px-3 text-sm font-semibold"
|
||
onClick={(e) => handleDeleteGalleryWorks([selectedWork.id], e)}
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
删除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Fullscreen image preview overlay */}
|
||
<FullscreenPreview
|
||
src={fullscreenSrc || ''}
|
||
alt="全屏预览"
|
||
open={!!fullscreenSrc}
|
||
onClose={() => setFullscreenSrc(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|