From 78f065ad083561937253de7654e1cd82ce09d894 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Mon, 21 Sep 2026 19:44:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E7=AE=A1=E7=90=86=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E7=81=AF=E7=AE=B1=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/files/+page.svelte | 38 ++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/routes/admin/files/+page.svelte b/src/routes/admin/files/+page.svelte
index 7da9460..347bedd 100644
--- a/src/routes/admin/files/+page.svelte
+++ b/src/routes/admin/files/+page.svelte
@@ -17,6 +17,33 @@
 		}
 	});
 
+	$effect(() => {
+		if (
+			typeof window !== 'undefined' &&
+			data.files.some((f: any) => f.mime_type?.startsWith('image/'))
+		) {
+			(async () => {
+				const { Fancybox } = await import('@fancyapps/ui/dist/index.js');
+				await import('@fancyapps/ui/dist/fancybox/fancybox.css');
+				Fancybox.bind('[data-fancybox="gallery"]', {
+					mainStyle: { '--f-carousel-slide-padding': '24px 0' },
+					Carousel: {
+						Toolbar: { absolute: false },
+						Thumbs: { type: 'scrollable', showOnStart: false }
+					}
+				});
+			})();
+		}
+		return () => {
+			if (typeof window !== 'undefined') {
+				import('@fancyapps/ui/dist/index.js').then(({ Fancybox }) => {
+					Fancybox.unbind('[data-fancybox="gallery"]');
+					Fancybox.close();
+				});
+			}
+		};
+	});
+
 	let isUploading = $state(false);
 	let fileInput: HTMLInputElement;
 
@@ -95,7 +122,10 @@
 		<div class="file-card">
 			<div class="file-preview">
 				{#if isImage}
-					<img src={url} alt={file.filename} loading="lazy" />
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+					<a data-fancybox="gallery" data-caption={file.filename} href={url}>
+						<img src={url} alt={file.filename} loading="lazy" />
+					</a>
 				{:else}
 					<div class="file-icon">
 						<File size={48} stroke-width={1.5} aria-hidden="true" />
@@ -242,6 +272,12 @@
 		overflow: hidden;
 	}
 
+	.file-preview a {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
 	.file-preview img {
 		width: 100%;
 		height: 100%;