389 lines
15 KiB
TypeScript
389 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
|
import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Sparkles, User, Building2, Clock, Bot } from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
import Image from "next/image";
|
|
|
|
type FeaturedImage = {
|
|
id: string;
|
|
thumbnailUrl: string;
|
|
originalUrl: string;
|
|
imageSize: string;
|
|
prompt: string;
|
|
modelId: string;
|
|
modelName: string;
|
|
createdAt: string;
|
|
featuredAt: string;
|
|
user: {
|
|
id: string;
|
|
name: string;
|
|
department: string;
|
|
};
|
|
};
|
|
|
|
type Pagination = {
|
|
page: number;
|
|
pageSize: number;
|
|
total: number;
|
|
totalPages: number;
|
|
};
|
|
|
|
export default function FeaturedPage() {
|
|
const router = useRouter();
|
|
const [images, setImages] = useState<FeaturedImage[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [pagination, setPagination] = useState<Pagination>({
|
|
page: 1,
|
|
pageSize: 24,
|
|
total: 0,
|
|
totalPages: 0,
|
|
});
|
|
const [selectedImage, setSelectedImage] = useState<FeaturedImage | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [pageInput, setPageInput] = useState("");
|
|
|
|
const fetchImages = async (page: number) => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/featured?page=${page}&pageSize=24`);
|
|
const data = await res.json();
|
|
if (data.images) {
|
|
setImages(data.images);
|
|
setPagination(data.pagination);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch featured images:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchImages(1);
|
|
}, []);
|
|
|
|
const handleImageClick = (image: FeaturedImage) => {
|
|
setSelectedImage(image);
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const handleDownload = async (url: string, prompt: string) => {
|
|
try {
|
|
const response = await fetch(url);
|
|
const blob = await response.blob();
|
|
const blobUrl = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = blobUrl;
|
|
link.download = `featured-${Date.now()}.png`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(blobUrl);
|
|
} catch (error) {
|
|
console.error("Download failed:", error);
|
|
}
|
|
};
|
|
|
|
const goToPage = (page: number) => {
|
|
if (page >= 1 && page <= pagination.totalPages) {
|
|
fetchImages(page);
|
|
setPageInput("");
|
|
}
|
|
};
|
|
|
|
const handlePageInputSubmit = () => {
|
|
const pageNum = Number.parseInt(pageInput);
|
|
if (!Number.isNaN(pageNum) && pageNum >= 1 && pageNum <= pagination.totalPages) {
|
|
goToPage(pageNum);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 h-full flex flex-col">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold flex items-center gap-2">
|
|
<Sparkles className="h-6 w-6 text-yellow-500" />
|
|
AI智能精选
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
共 {pagination.total} 张优秀AI作品
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="text-center py-10 text-muted-foreground">
|
|
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
|
|
加载中...
|
|
</div>
|
|
</div>
|
|
) : images.length === 0 ? (
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="text-center py-10 text-muted-foreground">
|
|
<Sparkles className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
|
<p>暂无精选作品</p>
|
|
<p className="text-sm mt-2">管理员可以在后台标记优秀作品</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="flex flex-wrap justify-center gap-6 px-4">
|
|
{images.map((img) => (
|
|
<div
|
|
key={img.id}
|
|
className="group relative cursor-pointer rounded-lg border bg-muted overflow-hidden transition-all hover:shadow-xl hover:scale-105"
|
|
style={{ width: "220px", height: "320px", flexShrink: 0 }}
|
|
onClick={() => handleImageClick(img)}
|
|
>
|
|
{/* 精选图标 */}
|
|
<div className="absolute top-2 right-2 z-10">
|
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center gap-1 shadow-lg">
|
|
<Sparkles className="h-3 w-3" />
|
|
精选
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-[200px]">
|
|
<Image
|
|
src={img.thumbnailUrl || img.originalUrl}
|
|
alt={img.prompt || "精选作品"}
|
|
width={220}
|
|
height={200}
|
|
className="object-cover w-full h-full"
|
|
sizes="220px"
|
|
quality={75}
|
|
loading="lazy"
|
|
placeholder="blur"
|
|
blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSIvPjwvc3ZnPg=="
|
|
/>
|
|
</div>
|
|
|
|
{/* 底部信息区域 */}
|
|
<div className="absolute bottom-0 left-0 right-0 bg-white dark:bg-gray-900 p-3 h-[120px]">
|
|
{/* 用户信息 */}
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
|
|
<User className="h-3 w-3 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{img.user.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate flex items-center gap-1">
|
|
<Building2 className="h-3 w-3" />
|
|
{img.user.department}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 提示词 */}
|
|
<p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2 mb-2" title={img.prompt}>
|
|
{img.prompt || "无提示词"}
|
|
</p>
|
|
|
|
{/* 底部元信息 */}
|
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<Bot className="h-3 w-3" />
|
|
{img.modelName}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />
|
|
{new Date(img.createdAt).toLocaleDateString("zh-CN", {
|
|
month: "short",
|
|
day: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 分页 */}
|
|
<div className="mt-6">
|
|
<div className="text-center text-sm text-muted-foreground mb-3">
|
|
第 {pagination.page} 页 / 共 {pagination.totalPages} 页
|
|
</div>
|
|
|
|
{pagination.totalPages > 1 && (
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => goToPage(1)}
|
|
disabled={pagination.page === 1}
|
|
title="第一页"
|
|
>
|
|
<ChevronsLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => goToPage(pagination.page - 1)}
|
|
disabled={pagination.page === 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
上一页
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{Array.from({ length: pagination.totalPages }, (_, i) => i + 1)
|
|
.filter((p) => {
|
|
return (
|
|
p === 1 ||
|
|
p === pagination.totalPages ||
|
|
Math.abs(p - pagination.page) <= 1
|
|
);
|
|
})
|
|
.map((p, idx, arr) => {
|
|
const showEllipsis = idx > 0 && p - arr[idx - 1] > 1;
|
|
return (
|
|
<div key={p} className="flex items-center">
|
|
{showEllipsis && (
|
|
<span className="px-2 text-muted-foreground">...</span>
|
|
)}
|
|
<Button
|
|
variant={p === pagination.page ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => goToPage(p)}
|
|
>
|
|
{p}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => goToPage(pagination.page + 1)}
|
|
disabled={pagination.page === pagination.totalPages}
|
|
>
|
|
下一页
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => goToPage(pagination.totalPages)}
|
|
disabled={pagination.page === pagination.totalPages}
|
|
title="最后一页"
|
|
>
|
|
<ChevronsRight className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={pagination.totalPages}
|
|
value={pageInput}
|
|
onChange={(e) => setPageInput(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handlePageInputSubmit()}
|
|
placeholder="跳转"
|
|
className="w-20 h-8 text-sm"
|
|
/>
|
|
<Button size="sm" onClick={handlePageInputSubmit}>
|
|
GO
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 图片预览对话框 */}
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent className="max-w-4xl p-0 overflow-hidden">
|
|
{selectedImage && (
|
|
<div className="flex flex-col">
|
|
{/* 图片 */}
|
|
<div className="relative bg-black flex items-center justify-center min-h-[400px] max-h-[70vh]">
|
|
<Image
|
|
src={selectedImage.originalUrl}
|
|
alt={selectedImage.prompt || "精选作品"}
|
|
width={800}
|
|
height={600}
|
|
className="object-contain max-h-[70vh]"
|
|
quality={90}
|
|
/>
|
|
{/* 精选标记 */}
|
|
<div className="absolute top-4 right-4">
|
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1.5 rounded-full text-sm font-bold flex items-center gap-1.5 shadow-lg">
|
|
<Sparkles className="h-4 w-4" />
|
|
精选作品
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 信息区域 */}
|
|
<div className="p-6 bg-white dark:bg-gray-900">
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
|
|
<User className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{selectedImage.user.name}</p>
|
|
<p className="text-sm text-muted-foreground flex items-center gap-1">
|
|
<Building2 className="h-3 w-3" />
|
|
{selectedImage.user.department}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm text-muted-foreground">生成时间</p>
|
|
<p className="font-medium">
|
|
{new Date(selectedImage.createdAt).toLocaleString("zh-CN")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-muted-foreground mb-1">提示词</p>
|
|
<p className="text-sm bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
|
|
{selectedImage.prompt || "无提示词"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<Bot className="h-4 w-4" />
|
|
{selectedImage.modelName}
|
|
</span>
|
|
<span>尺寸: {selectedImage.imageSize || "2K"}</span>
|
|
</div>
|
|
<Button
|
|
onClick={() => handleDownload(selectedImage.originalUrl, selectedImage.prompt)}
|
|
>
|
|
<Download className="h-4 w-4 mr-2" />
|
|
下载原图
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|