✨ 添加截图大图预览功能

spark-store-private/spark-store#3

src/components/ScreenshotCarousel/index.tsx

@@ -1,4 +1,5 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
+import { Portal } from 'solid-js/web';
 import { Skeleton } from "@/components/ui/skeleton";
 import BaseCarousel from "@/components/ui/base-carousel";
 
@@ -11,8 +12,10 @@ interface ScreenshotCarouselProps {
 }
 
 const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
+  const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);
+
   const renderItem = (screenshot: NonNullable<ScreenshotCarouselProps['screenshots']>[0]) => (
-    <div class="w-full h-full aspect-[16/9]">
+    <div class="w-full h-full aspect-[16/9] cursor-pointer" onClick={() => setPreviewUrl(screenshot.url)}>
       <img 
         src={screenshot.url} 
         alt={screenshot.title} 
@@ -28,12 +31,29 @@ const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
   );
 
   return (
-    <BaseCarousel
+    <>
-      items={props.screenshots}
+      <BaseCarousel
-      loading={props.loading}
+        items={props.screenshots}
-      renderItem={renderItem}
+        loading={props.loading}
-      renderSkeleton={renderSkeleton}
+        renderItem={renderItem}
-    />
+        renderSkeleton={renderSkeleton}
+      />
+      
+      {previewUrl() && (
+        <Portal>
+          <div 
+            class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+            onClick={() => setPreviewUrl(null)}
+          >
+            <img 
+              src={previewUrl() || undefined}
+              alt="Preview" 
+              class="max-w-[90vw] max-h-[90vh] object-contain"
+            />
+          </div>
+        </Portal>
+      )}
+    </>
   );
 };