281 lines
9.1 KiB
TypeScript
281 lines
9.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, useCallback } from "react";
|
||
import { toast } from "sonner";
|
||
import {
|
||
Trash2,
|
||
Upload,
|
||
Loader2,
|
||
GripVertical,
|
||
X,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Eye,
|
||
} from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
interface Screenshot {
|
||
id: string;
|
||
imageUrl: string;
|
||
sortOrder: number;
|
||
}
|
||
|
||
interface Props {
|
||
addonId: string;
|
||
initial: Screenshot[];
|
||
}
|
||
|
||
export function AddonScreenshots({ addonId, initial }: Props) {
|
||
const [items, setItems] = useState<Screenshot[]>(initial);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [previewIdx, setPreviewIdx] = useState<number | null>(null);
|
||
const [dragId, setDragId] = useState<string | null>(null);
|
||
const [dragOverId, setDragOverId] = useState<string | null>(null);
|
||
const fileRef = useRef<HTMLInputElement>(null);
|
||
const endpoint = `/api/addons/${addonId}/screenshots`;
|
||
|
||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files;
|
||
if (!files?.length) return;
|
||
setUploading(true);
|
||
|
||
try {
|
||
for (const file of Array.from(files)) {
|
||
const fd = new FormData();
|
||
fd.append("file", file);
|
||
const uploadRes = await fetch("/api/upload", { method: "POST", body: fd });
|
||
if (!uploadRes.ok) throw new Error("上传失败");
|
||
const { filePath } = await uploadRes.json();
|
||
|
||
const maxSort = items.reduce((m, it) => Math.max(m, it.sortOrder), -1);
|
||
const res = await fetch(endpoint, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ imageUrl: filePath, sortOrder: maxSort + 1 }),
|
||
});
|
||
if (!res.ok) throw new Error("保存失败");
|
||
const created = await res.json();
|
||
setItems((prev) => [...prev, created]);
|
||
}
|
||
toast.success("截图上传成功");
|
||
} catch {
|
||
toast.error("上传失败");
|
||
} finally {
|
||
setUploading(false);
|
||
if (fileRef.current) fileRef.current.value = "";
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (!confirm("确认删除该截图？")) return;
|
||
const res = await fetch(`${endpoint}/${id}`, { method: "DELETE" });
|
||
if (res.ok) {
|
||
setItems((prev) => prev.filter((it) => it.id !== id));
|
||
toast.success("已删除");
|
||
} else {
|
||
toast.error("删除失败");
|
||
}
|
||
};
|
||
|
||
const persistSortOrder = useCallback(
|
||
async (reordered: Screenshot[]) => {
|
||
try {
|
||
await Promise.all(
|
||
reordered.map((item, idx) =>
|
||
fetch(`${endpoint}/${item.id}`, {
|
||
method: "PUT",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ sortOrder: idx }),
|
||
})
|
||
)
|
||
);
|
||
} catch {
|
||
toast.error("排序保存失败");
|
||
}
|
||
},
|
||
[endpoint]
|
||
);
|
||
|
||
const handleDragStart = (e: React.DragEvent, id: string) => {
|
||
setDragId(id);
|
||
e.dataTransfer.effectAllowed = "move";
|
||
};
|
||
|
||
const handleDragOver = (e: React.DragEvent, id: string) => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = "move";
|
||
if (dragId && dragId !== id) setDragOverId(id);
|
||
};
|
||
|
||
const handleDrop = (e: React.DragEvent, targetId: string) => {
|
||
e.preventDefault();
|
||
if (!dragId || dragId === targetId) {
|
||
setDragId(null);
|
||
setDragOverId(null);
|
||
return;
|
||
}
|
||
|
||
const fromIdx = items.findIndex((it) => it.id === dragId);
|
||
const toIdx = items.findIndex((it) => it.id === targetId);
|
||
if (fromIdx === -1 || toIdx === -1) return;
|
||
|
||
const newItems = [...items];
|
||
const [moved] = newItems.splice(fromIdx, 1);
|
||
newItems.splice(toIdx, 0, moved);
|
||
|
||
const updated = newItems.map((item, i) => ({ ...item, sortOrder: i }));
|
||
setItems(updated);
|
||
setDragId(null);
|
||
setDragOverId(null);
|
||
persistSortOrder(updated);
|
||
toast.success("排序已更新");
|
||
};
|
||
|
||
const handleDragEnd = () => {
|
||
setDragId(null);
|
||
setDragOverId(null);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-4">
|
||
<Button
|
||
type="button"
|
||
onClick={() => fileRef.current?.click()}
|
||
disabled={uploading}
|
||
className="gap-2"
|
||
variant="outline"
|
||
size="sm"
|
||
>
|
||
{uploading ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Upload className="h-4 w-4" />
|
||
)}
|
||
上传截图
|
||
</Button>
|
||
<input
|
||
ref={fileRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={handleUpload}
|
||
/>
|
||
<span className="text-xs text-muted-foreground">
|
||
共 {items.length} 张 · 拖拽可调整顺序
|
||
</span>
|
||
</div>
|
||
|
||
{items.length === 0 ? (
|
||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||
暂无截图，点击上方按钮上传
|
||
</p>
|
||
) : (
|
||
<div className="space-y-1">
|
||
{items.map((item, idx) => (
|
||
<div
|
||
key={item.id}
|
||
draggable
|
||
onDragStart={(e) => handleDragStart(e, item.id)}
|
||
onDragOver={(e) => handleDragOver(e, item.id)}
|
||
onDrop={(e) => handleDrop(e, item.id)}
|
||
onDragEnd={handleDragEnd}
|
||
className={`flex items-center gap-3 rounded-lg border p-2 transition-all ${
|
||
dragId === item.id
|
||
? "scale-[0.98] bg-muted/50 opacity-40"
|
||
: dragOverId === item.id
|
||
? "bg-primary/5 ring-2 ring-primary"
|
||
: "bg-card hover:bg-muted/30"
|
||
}`}
|
||
>
|
||
<div className="cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing">
|
||
<GripVertical className="h-4 w-4" />
|
||
</div>
|
||
<span className="w-5 text-center font-mono text-xs text-muted-foreground">
|
||
{idx + 1}
|
||
</span>
|
||
<div
|
||
className="relative h-12 w-20 shrink-0 cursor-pointer overflow-hidden rounded border bg-muted"
|
||
onClick={() => setPreviewIdx(idx)}
|
||
>
|
||
<img
|
||
src={item.imageUrl}
|
||
alt=""
|
||
className="h-full w-full object-cover"
|
||
draggable={false}
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-all hover:bg-black/30 hover:opacity-100">
|
||
<Eye className="h-4 w-4 text-white" />
|
||
</div>
|
||
</div>
|
||
<span className="hidden flex-1 truncate text-xs text-muted-foreground/60 md:block">
|
||
{item.imageUrl}
|
||
</span>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="ml-auto h-8 w-8 text-destructive hover:bg-destructive/10"
|
||
onClick={() => handleDelete(item.id)}
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Lightbox */}
|
||
{previewIdx !== null && items[previewIdx] && (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm"
|
||
onClick={() => setPreviewIdx(null)}
|
||
>
|
||
<button
|
||
className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"
|
||
onClick={() => setPreviewIdx(null)}
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
{items.length > 1 && (
|
||
<>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPreviewIdx((previewIdx - 1 + items.length) % items.length);
|
||
}}
|
||
className="absolute left-4 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"
|
||
>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</button>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPreviewIdx((previewIdx + 1) % items.length);
|
||
}}
|
||
className="absolute right-4 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"
|
||
>
|
||
<ChevronRight className="h-5 w-5" />
|
||
</button>
|
||
</>
|
||
)}
|
||
<div
|
||
className="flex flex-col items-center px-16"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<img
|
||
src={items[previewIdx].imageUrl}
|
||
alt=""
|
||
className="max-h-[85vh] max-w-[90vw] rounded-lg object-contain"
|
||
/>
|
||
<span className="mt-2 text-xs text-white/40">
|
||
{previewIdx + 1} / {items.length}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|