feat: 为管理后台文件列表添加图片预览灯箱功能

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%;