mirror of
https://github.com/wgh136/nysoure.git
synced 2025-12-16 07:51:14 +00:00
feat: add Gallery component for image display and navigation
This commit is contained in:
367
frontend/src/components/gallery.tsx
Normal file
367
frontend/src/components/gallery.tsx
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
MdOutlineChevronLeft,
|
||||||
|
MdOutlineChevronRight,
|
||||||
|
MdOutlineClose,
|
||||||
|
} from "react-icons/md";
|
||||||
|
import { network } from "../network/network.ts";
|
||||||
|
import Badge from "./badge.tsx";
|
||||||
|
|
||||||
|
export default function Gallery({
|
||||||
|
images,
|
||||||
|
nsfw,
|
||||||
|
}: {
|
||||||
|
images: number[];
|
||||||
|
nsfw: number[];
|
||||||
|
}) {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const [direction, setDirection] = useState(0); // 方向：1=向右，-1=向左
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
const [width, setWidth] = useState(0);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateWidth = () => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
setWidth(containerRef.current.clientWidth);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateWidth();
|
||||||
|
window.addEventListener("resize", updateWidth);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", updateWidth);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 预加载下一张图片
|
||||||
|
useEffect(() => {
|
||||||
|
if (!images || images.length <= 1) return;
|
||||||
|
|
||||||
|
const nextIndex = (currentIndex + 1) % images.length;
|
||||||
|
const nextImageUrl = network.getImageUrl(images[nextIndex]);
|
||||||
|
|
||||||
|
const img = new Image();
|
||||||
|
img.src = nextImageUrl;
|
||||||
|
}, [currentIndex, images]);
|
||||||
|
|
||||||
|
if (!images || images.length === 0) {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const goToPrevious = () => {
|
||||||
|
setDirection(-1);
|
||||||
|
setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToNext = () => {
|
||||||
|
setDirection(1);
|
||||||
|
setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToIndex = (index: number) => {
|
||||||
|
setDirection(index > currentIndex ? 1 : -1);
|
||||||
|
setCurrentIndex(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (nsfw == null) {
|
||||||
|
nsfw = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果图片数量超过8张，显示数字而不是圆点
|
||||||
|
const showDots = images.length <= 8;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<GalleryFullscreen
|
||||||
|
dialogRef={dialogRef}
|
||||||
|
images={images}
|
||||||
|
currentIndex={currentIndex}
|
||||||
|
direction={direction}
|
||||||
|
isHovered={isHovered}
|
||||||
|
setIsHovered={setIsHovered}
|
||||||
|
goToPrevious={goToPrevious}
|
||||||
|
goToNext={goToNext}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="relative w-full overflow-hidden rounded-xl bg-base-100-tr82 shadow-sm"
|
||||||
|
style={{ aspectRatio: "16/9" }}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
>
|
||||||
|
{/* 图片区域 */}
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="w-full h-full relative"
|
||||||
|
onClick={() => {
|
||||||
|
dialogRef.current?.showModal();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{width > 0 && (
|
||||||
|
<AnimatePresence initial={false} custom={direction} mode="sync">
|
||||||
|
<motion.div
|
||||||
|
key={currentIndex}
|
||||||
|
className="absolute inset-0 w-full h-full"
|
||||||
|
variants={{
|
||||||
|
enter: (dir: number) => ({
|
||||||
|
x: dir > 0 ? width : -width,
|
||||||
|
}),
|
||||||
|
center: {
|
||||||
|
x: 0,
|
||||||
|
transition: { duration: 0.3, ease: "linear" },
|
||||||
|
},
|
||||||
|
exit: (dir: number) => ({
|
||||||
|
x: dir > 0 ? -width : width,
|
||||||
|
transition: { duration: 0.3, ease: "linear" },
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
initial="enter"
|
||||||
|
animate="center"
|
||||||
|
exit="exit"
|
||||||
|
custom={direction}
|
||||||
|
>
|
||||||
|
<GalleryImage
|
||||||
|
src={network.getImageUrl(images[currentIndex])}
|
||||||
|
nfsw={nsfw.includes(currentIndex)}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 左右按钮 */}
|
||||||
|
{images.length > 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className={`absolute left-2 top-1/2 -translate-y-1/2 transition-opacity hover:cursor-pointer ${
|
||||||
|
isHovered ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
onClick={goToPrevious}
|
||||||
|
>
|
||||||
|
<MdOutlineChevronLeft size={28} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`absolute right-2 top-1/2 -translate-y-1/2 transition-opacity hover:cursor-pointer ${
|
||||||
|
isHovered ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
onClick={goToNext}
|
||||||
|
>
|
||||||
|
<MdOutlineChevronRight size={28} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 底部指示器 */}
|
||||||
|
{images.length > 1 && (
|
||||||
|
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
|
||||||
|
{showDots ? (
|
||||||
|
/* 圆点指示器 */
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{images.map((_, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
className={`w-2 h-2 rounded-full transition-all ${
|
||||||
|
index === currentIndex
|
||||||
|
? "bg-primary w-4"
|
||||||
|
: "bg-base-content/30 hover:bg-base-content/50"
|
||||||
|
}`}
|
||||||
|
onClick={() => goToIndex(index)}
|
||||||
|
aria-label={`Go to image ${index + 1}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* 数字指示器 */
|
||||||
|
<div className="bg-base-100/20 px-2 py-1 rounded-full text-xs">
|
||||||
|
{currentIndex + 1} / {images.length}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GalleryFullscreen({
|
||||||
|
dialogRef,
|
||||||
|
images,
|
||||||
|
currentIndex,
|
||||||
|
direction,
|
||||||
|
isHovered,
|
||||||
|
setIsHovered,
|
||||||
|
goToPrevious,
|
||||||
|
goToNext,
|
||||||
|
}: {
|
||||||
|
dialogRef: React.RefObject<HTMLDialogElement | null>;
|
||||||
|
images: number[];
|
||||||
|
currentIndex: number;
|
||||||
|
direction: number;
|
||||||
|
isHovered: boolean;
|
||||||
|
setIsHovered: (hovered: boolean) => void;
|
||||||
|
goToPrevious: () => void;
|
||||||
|
goToNext: () => void;
|
||||||
|
}) {
|
||||||
|
const [width, setWidth] = useState(0);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateWidth = () => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
console.log(containerRef.current.clientWidth);
|
||||||
|
setWidth(containerRef.current.clientWidth);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
updateWidth();
|
||||||
|
window.addEventListener("resize", updateWidth);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", updateWidth);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (dialogRef.current?.open) {
|
||||||
|
if (e.key === "ArrowLeft") {
|
||||||
|
e.preventDefault();
|
||||||
|
goToPrevious();
|
||||||
|
} else if (e.key === "ArrowRight") {
|
||||||
|
e.preventDefault();
|
||||||
|
goToNext();
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
|
dialogRef.current?.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeyDown);
|
||||||
|
};
|
||||||
|
}, [dialogRef, goToPrevious, goToNext]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog
|
||||||
|
ref={dialogRef}
|
||||||
|
onClick={() => {
|
||||||
|
dialogRef.current?.close();
|
||||||
|
}}
|
||||||
|
className="modal"
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="modal-box w-full h-full max-h-screen max-w-screen p-4 bg-transparent shadow-none relative overflow-clip"
|
||||||
|
>
|
||||||
|
{width > 0 && (
|
||||||
|
<AnimatePresence initial={false} custom={direction} mode="sync">
|
||||||
|
<motion.div
|
||||||
|
key={`fullscreen-${currentIndex}`}
|
||||||
|
className="absolute inset-0 w-full h-full"
|
||||||
|
variants={{
|
||||||
|
enter: (dir: number) => ({
|
||||||
|
x: dir > 0 ? width : -width,
|
||||||
|
}),
|
||||||
|
center: {
|
||||||
|
x: 0,
|
||||||
|
transition: { duration: 0.3, ease: "linear" },
|
||||||
|
},
|
||||||
|
exit: (dir: number) => ({
|
||||||
|
x: dir > 0 ? -width : width,
|
||||||
|
transition: { duration: 0.3, ease: "linear" },
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
initial="enter"
|
||||||
|
animate="center"
|
||||||
|
exit="exit"
|
||||||
|
custom={direction}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={network.getImageUrl(images[currentIndex])}
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-contain rounded-xl p-4 sm:p-6"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 全屏模式下的左右切换按钮 */}
|
||||||
|
{images.length > 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className={`absolute left-4 top-1/2 -translate-y-1/2 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors focus:border-none focus:outline-none`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goToPrevious();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdOutlineChevronLeft size={24} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors focus:border-none focus:outline-none`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goToNext();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdOutlineChevronRight size={24} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 全屏模式下的指示器 */}
|
||||||
|
<div
|
||||||
|
className={`absolute bottom-4 left-1/2 -translate-x-1/2 transition-opacity ${
|
||||||
|
isHovered ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="bg-base-100/20 px-2 py-1 rounded-full text-xs">
|
||||||
|
{currentIndex + 1} / {images.length}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<button
|
||||||
|
className={`absolute top-4 right-4 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dialogRef.current?.close();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdOutlineClose size={24} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GalleryImage({ src, nfsw }: { src: string; nfsw: boolean }) {
|
||||||
|
const [show, setShow] = useState(!nfsw);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full h-full">
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt=""
|
||||||
|
className={`w-full h-full object-contain transition-all duration-300 ${!show ? "blur-xl" : ""}`}
|
||||||
|
/>
|
||||||
|
{!show && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-base-content/20 cursor-pointer"
|
||||||
|
onClick={(event) => {
|
||||||
|
setShow(true);
|
||||||
|
event.stopPropagation();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="absolute top-4 left-4">
|
||||||
|
<Badge className="badge-error shadow-lg">NSFW</Badge>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -32,9 +32,6 @@ import {
|
|||||||
MdOutlineAdd,
|
MdOutlineAdd,
|
||||||
MdOutlineArchive,
|
MdOutlineArchive,
|
||||||
MdOutlineArticle,
|
MdOutlineArticle,
|
||||||
MdOutlineChevronLeft,
|
|
||||||
MdOutlineChevronRight,
|
|
||||||
MdOutlineClose,
|
|
||||||
MdOutlineCloud,
|
MdOutlineCloud,
|
||||||
MdOutlineComment,
|
MdOutlineComment,
|
||||||
MdOutlineContentCopy,
|
MdOutlineContentCopy,
|
||||||
@@ -71,7 +68,7 @@ import KunApi, {
|
|||||||
} from "../network/kun.ts";
|
} from "../network/kun.ts";
|
||||||
import { Debounce } from "../utils/debounce.ts";
|
import { Debounce } from "../utils/debounce.ts";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import Gallery from "../components/gallery.tsx";
|
||||||
|
|
||||||
export default function ResourcePage() {
|
export default function ResourcePage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@@ -2050,346 +2047,6 @@ function CollectionSelector({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Gallery({ images, nsfw }: { images: number[], nsfw: number[] }) {
|
|
||||||
const [currentIndex, setCurrentIndex] = useState(0);
|
|
||||||
const [direction, setDirection] = useState(0); // 方向：1=向右，-1=向左
|
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
|
||||||
const [width, setWidth] = useState(0);
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const updateWidth = () => {
|
|
||||||
if (containerRef.current) {
|
|
||||||
setWidth(containerRef.current.clientWidth);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
updateWidth();
|
|
||||||
window.addEventListener("resize", updateWidth);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("resize", updateWidth);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 预加载下一张图片
|
|
||||||
useEffect(() => {
|
|
||||||
if (!images || images.length <= 1) return;
|
|
||||||
|
|
||||||
const nextIndex = (currentIndex + 1) % images.length;
|
|
||||||
const nextImageUrl = network.getImageUrl(images[nextIndex]);
|
|
||||||
|
|
||||||
const img = new Image();
|
|
||||||
img.src = nextImageUrl;
|
|
||||||
}, [currentIndex, images]);
|
|
||||||
|
|
||||||
if (!images || images.length === 0) {
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const goToPrevious = () => {
|
|
||||||
setDirection(-1);
|
|
||||||
setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToNext = () => {
|
|
||||||
setDirection(1);
|
|
||||||
setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToIndex = (index: number) => {
|
|
||||||
setDirection(index > currentIndex ? 1 : -1);
|
|
||||||
setCurrentIndex(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (nsfw == null) {
|
|
||||||
nsfw = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果图片数量超过8张，显示数字而不是圆点
|
|
||||||
const showDots = images.length <= 8;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<GalleryFullscreen
|
|
||||||
dialogRef={dialogRef}
|
|
||||||
images={images}
|
|
||||||
currentIndex={currentIndex}
|
|
||||||
direction={direction}
|
|
||||||
isHovered={isHovered}
|
|
||||||
setIsHovered={setIsHovered}
|
|
||||||
goToPrevious={goToPrevious}
|
|
||||||
goToNext={goToNext}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="relative w-full overflow-hidden rounded-xl bg-base-100-tr82 shadow-sm"
|
|
||||||
style={{ aspectRatio: "16/9" }}
|
|
||||||
onMouseEnter={() => setIsHovered(true)}
|
|
||||||
onMouseLeave={() => setIsHovered(false)}
|
|
||||||
>
|
|
||||||
{/* 图片区域 */}
|
|
||||||
<div ref={containerRef} className="w-full h-full relative" onClick={() => {
|
|
||||||
dialogRef.current?.showModal();
|
|
||||||
}}>
|
|
||||||
{width > 0 && (
|
|
||||||
<AnimatePresence initial={false} custom={direction} mode="sync">
|
|
||||||
<motion.div
|
|
||||||
key={currentIndex}
|
|
||||||
className="absolute w-full h-full object-contain"
|
|
||||||
variants={{
|
|
||||||
enter: (dir: number) => ({
|
|
||||||
x: dir > 0 ? width : -width,
|
|
||||||
}),
|
|
||||||
center: {
|
|
||||||
x: 0,
|
|
||||||
transition: { duration: 0.3, ease: "linear" },
|
|
||||||
},
|
|
||||||
exit: (dir: number) => ({
|
|
||||||
x: dir > 0 ? -width : width,
|
|
||||||
transition: { duration: 0.3, ease: "linear" },
|
|
||||||
}),
|
|
||||||
}}
|
|
||||||
initial="enter"
|
|
||||||
animate="center"
|
|
||||||
exit="exit"
|
|
||||||
custom={direction}
|
|
||||||
>
|
|
||||||
<GalleryImage
|
|
||||||
src={network.getImageUrl(images[currentIndex])}
|
|
||||||
nfsw={nsfw.includes(images[currentIndex])}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</AnimatePresence>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 左右按钮 */}
|
|
||||||
{images.length > 1 && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
className={`absolute left-2 top-1/2 -translate-y-1/2 transition-opacity hover:cursor-pointer ${
|
|
||||||
isHovered ? "opacity-100" : "opacity-0"
|
|
||||||
}`}
|
|
||||||
onClick={goToPrevious}
|
|
||||||
>
|
|
||||||
<MdOutlineChevronLeft size={28} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`absolute right-2 top-1/2 -translate-y-1/2 transition-opacity hover:cursor-pointer ${
|
|
||||||
isHovered ? "opacity-100" : "opacity-0"
|
|
||||||
}`}
|
|
||||||
onClick={goToNext}
|
|
||||||
>
|
|
||||||
<MdOutlineChevronRight size={28} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 底部指示器 */}
|
|
||||||
{images.length > 1 && (
|
|
||||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
|
|
||||||
{showDots ? (
|
|
||||||
/* 圆点指示器 */
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{images.map((_, index) => (
|
|
||||||
<button
|
|
||||||
key={index}
|
|
||||||
className={`w-2 h-2 rounded-full transition-all ${
|
|
||||||
index === currentIndex
|
|
||||||
? "bg-primary w-4"
|
|
||||||
: "bg-base-content/30 hover:bg-base-content/50"
|
|
||||||
}`}
|
|
||||||
onClick={() => goToIndex(index)}
|
|
||||||
aria-label={`Go to image ${index + 1}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
/* 数字指示器 */
|
|
||||||
<div className="bg-base-100/20 px-2 py-1 rounded-full text-xs">
|
|
||||||
{currentIndex + 1} / {images.length}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function GalleryFullscreen({
|
|
||||||
dialogRef,
|
|
||||||
images,
|
|
||||||
currentIndex,
|
|
||||||
direction,
|
|
||||||
isHovered,
|
|
||||||
setIsHovered,
|
|
||||||
goToPrevious,
|
|
||||||
goToNext,
|
|
||||||
}: {
|
|
||||||
dialogRef: React.RefObject<HTMLDialogElement | null>;
|
|
||||||
images: number[];
|
|
||||||
currentIndex: number;
|
|
||||||
direction: number;
|
|
||||||
isHovered: boolean;
|
|
||||||
setIsHovered: (hovered: boolean) => void;
|
|
||||||
goToPrevious: () => void;
|
|
||||||
goToNext: () => void;
|
|
||||||
}) {
|
|
||||||
const [width, setWidth] = useState(0);
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const updateWidth = () => {
|
|
||||||
if (containerRef.current) {
|
|
||||||
console.log(containerRef.current.clientWidth);
|
|
||||||
setWidth(containerRef.current.clientWidth);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
updateWidth();
|
|
||||||
window.addEventListener("resize", updateWidth);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("resize", updateWidth);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
|
||||||
if (dialogRef.current?.open) {
|
|
||||||
if (e.key === "ArrowLeft") {
|
|
||||||
e.preventDefault();
|
|
||||||
goToPrevious();
|
|
||||||
} else if (e.key === "ArrowRight") {
|
|
||||||
e.preventDefault();
|
|
||||||
goToNext();
|
|
||||||
} else if (e.key === "Escape") {
|
|
||||||
dialogRef.current?.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("keydown", handleKeyDown);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("keydown", handleKeyDown);
|
|
||||||
};
|
|
||||||
}, [dialogRef, goToPrevious, goToNext]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<dialog
|
|
||||||
ref={dialogRef}
|
|
||||||
onClick={() => {
|
|
||||||
dialogRef.current?.close();
|
|
||||||
}}
|
|
||||||
className="modal"
|
|
||||||
onMouseEnter={() => setIsHovered(true)}
|
|
||||||
onMouseLeave={() => setIsHovered(false)}
|
|
||||||
>
|
|
||||||
<div ref={containerRef} className="modal-box w-full h-full max-h-screen max-w-screen p-4 bg-transparent shadow-none relative overflow-clip">
|
|
||||||
{width > 0 && <AnimatePresence initial={false} custom={direction} mode="sync">
|
|
||||||
<motion.div
|
|
||||||
key={`fullscreen-${currentIndex}`}
|
|
||||||
className="absolute inset-0 w-full h-full"
|
|
||||||
variants={{
|
|
||||||
enter: (dir: number) => ({
|
|
||||||
x: dir > 0 ? width : -width,
|
|
||||||
}),
|
|
||||||
center: {
|
|
||||||
x: 0,
|
|
||||||
transition: { duration: 0.3, ease: "linear" },
|
|
||||||
},
|
|
||||||
exit: (dir: number) => ({
|
|
||||||
x: dir > 0 ? -width : width,
|
|
||||||
transition: { duration: 0.3, ease: "linear" },
|
|
||||||
}),
|
|
||||||
}}
|
|
||||||
initial="enter"
|
|
||||||
animate="center"
|
|
||||||
exit="exit"
|
|
||||||
custom={direction}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={network.getImageUrl(images[currentIndex])}
|
|
||||||
alt=""
|
|
||||||
className="w-full h-full object-contain rounded-xl p-4 sm:p-6"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</AnimatePresence>}
|
|
||||||
|
|
||||||
{/* 全屏模式下的左右切换按钮 */}
|
|
||||||
{images.length > 1 && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
className={`absolute left-4 top-1/2 -translate-y-1/2 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors focus:border-none focus:outline-none`}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
goToPrevious();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MdOutlineChevronLeft size={24} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors focus:border-none focus:outline-none`}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
goToNext();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MdOutlineChevronRight size={24} />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* 全屏模式下的指示器 */}
|
|
||||||
<div className={`absolute bottom-4 left-1/2 -translate-x-1/2 transition-opacity ${
|
|
||||||
isHovered ? "opacity-100" : "opacity-0"
|
|
||||||
}`}>
|
|
||||||
<div className="bg-base-100/60 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm font-medium select-none">
|
|
||||||
{currentIndex + 1} / {images.length}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 关闭按钮 */}
|
|
||||||
<button
|
|
||||||
className={`absolute top-4 right-4 cursor-pointer hover:bg-base-100/60 rounded-full p-2 transition-colors`}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
dialogRef.current?.close();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MdOutlineClose size={24} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function GalleryImage({src, nfsw}: {src: string, nfsw: boolean}) {
|
|
||||||
const [show, setShow] = useState(!nfsw);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative w-full h-full">
|
|
||||||
<img
|
|
||||||
src={src}
|
|
||||||
alt=""
|
|
||||||
className={`w-full h-full object-contain transition-all duration-300 ${!show ? 'blur-xl' : ''}`}
|
|
||||||
/>
|
|
||||||
{!show && (
|
|
||||||
<>
|
|
||||||
<div className="absolute inset-0 bg-base-content/20 cursor-pointer" onClick={(event) => {
|
|
||||||
setShow(true)
|
|
||||||
event.stopPropagation();
|
|
||||||
}} />
|
|
||||||
<div className="absolute top-4 left-4">
|
|
||||||
<Badge className="badge-error shadow-lg">
|
|
||||||
NSFW
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Characters({ characters }: { characters: CharacterParams[] }) {
|
function Characters({ characters }: { characters: CharacterParams[] }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user