feat: 灯箱支持下载、底部缩略图居中、关闭后保留滚动位置

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -147,34 +147,36 @@ function Filmstrip({
       className="shrink-0 bg-gradient-to-t from-black/90 to-transparent pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-3"
       onClick={(e) => e.stopPropagation()}
     >
-      <div className="mx-auto flex max-w-[920px] gap-2 overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {images.map((image, i) => {
-          const active = i === index;
-          return (
-            <button
-              key={image.id}
-              ref={active ? activeRef : null}
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                onSelect(i);
-              }}
-              className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black transition duration-200 md:h-16 md:w-16 ${
-                active
-                  ? "opacity-100 ring-2 ring-white"
-                  : "opacity-45 hover:opacity-80"
-              }`}
-              aria-label={`Image ${i + 1}`}
-              aria-current={active}
-            >
-              <BubbleImage
-                src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
-                fallbackSrc={[image.thumbUrl, image.url]}
-                className="h-full w-full object-cover"
-              />
-            </button>
-          );
-        })}
+      <div className="overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="mx-auto flex w-fit max-w-[920px] gap-2">
+          {images.map((image, i) => {
+            const active = i === index;
+            return (
+              <button
+                key={image.id}
+                ref={active ? activeRef : null}
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelect(i);
+                }}
+                className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black transition duration-200 md:h-16 md:w-16 ${
+                  active
+                    ? "opacity-100 ring-2 ring-white"
+                    : "opacity-45 hover:opacity-80"
+                }`}
+                aria-label={`Image ${i + 1}`}
+                aria-current={active}
+              >
+                <BubbleImage
+                  src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
+                  fallbackSrc={[image.thumbUrl, image.url]}
+                  className="h-full w-full object-cover"
+                />
+              </button>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
@@ -213,13 +215,21 @@ function LightboxView({
       if (e.key === "ArrowRight") goNext();
     };
     window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [goPrev, goNext, onClose]);
+
+  // Lock background scroll while the lightbox is open, then restore the exact
+  // scroll position on close — otherwise dismissing the overlay leaves the page
+  // scrolled back to the top instead of where the user was reading.
+  useEffect(() => {
+    const scrollY = window.scrollY;
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
-      window.removeEventListener("keydown", onKey);
       document.body.style.overflow = prevOverflow;
+      window.scrollTo(0, scrollY);
     };
-  }, [goPrev, goNext, onClose]);
+  }, []);
 
   useEffect(() => {
     setIsCaptionVisible(true);