重构client，拆分组件

2025-10-22 20:14:11 +08:00
parent 5868407216
commit fe9bc8fd6c
23 changed files with 1601 additions and 1137 deletions
@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import type { ImageData } from "../types";
+
+interface ImageCarouselProps {
+  images: ImageData["images"];
+  currentIndex: number;
+  onTogglePlay: () => void;
+}
+
+export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
+  ({ images, currentIndex, onTogglePlay }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="flex h-full w-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+      >
+        {images.map((img, i) => (
+          <div
+            key={img.id}
+            className="relative h-full min-w-full snap-center flex items-center justify-center bg-black/70 cursor-pointer"
+            onClick={onTogglePlay}
+          >
+            <img
+              src={img.url}
+              alt={`image-${i + 1}`}
+              className="max-w-full max-h-full object-contain"
+              style={{
+                width: img.width ? `${img.width}px` : undefined,
+                height: img.height ? `${img.height}px` : undefined,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+ImageCarousel.displayName = "ImageCarousel";