重构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,56 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface ImageNavigationButtonsProps {
+  onPrev: () => void;
+  onNext: () => void;
+  currentIndex: number;
+  totalImages: number;
+}
+
+export function ImageNavigationButtons({
+  onPrev,
+  onNext,
+  currentIndex,
+  totalImages,
+}: ImageNavigationButtonsProps) {
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < totalImages - 1;
+
+  return (
+    <>
+      {/* 左侧按钮 */}
+      <button
+        className={`
+          absolute left-4 top-7/16 -translate-y-1/2 z-20
+          w-12 h-12 rounded-full
+          bg-black/40 backdrop-blur-sm border border-white/20
+          flex items-center justify-center
+          text-white transition-all
+          ${hasPrev ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
+        `}
+        onClick={onPrev}
+        disabled={!hasPrev}
+        aria-label="上一张图片"
+      >
+        <ChevronLeft size={24} />
+      </button>
+
+      {/* 右侧按钮 */}
+      <button
+        className={`
+          absolute right-4 top-7/16 -translate-y-1/2 z-20
+          w-12 h-12 rounded-full
+          bg-black/40 backdrop-blur-sm border border-white/20
+          flex items-center justify-center
+          text-white transition-all
+          ${hasNext ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
+        `}
+        onClick={onNext}
+        disabled={!hasNext}
+        aria-label="下一张图片"
+      >
+        <ChevronRight size={24} />
+      </button>
+    </>
+  );
+}