From 395d167fd80cd8833ce932cfbd40fe7fa2190b1c Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 12 Sep 2026 08:13:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20Fancybox=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=8E=E7=AB=96=E5=90=91=E7=BC=A9=E7=95=A5?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                                | 57 +++-------------------
 src/lib/components/MarkdownRenderer.svelte | 29 +++--------
 2 files changed, 16 insertions(+), 70 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4b5259d..0544474 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1599,54 +1599,13 @@ footer section p:first-child {
 	}
 }
 
-/* 优化文章详情页灯箱 (Fancybox) 布局 */
+/*
+ * 文章详情页灯箱 (Fancybox) 微调
+ *
+ * 说明：Fancybox v6 在 Thumbs 使用 `type: 'scrollable'` 时会自动给容器加上
+ * `.has-vertical-thumbs`，并铺展成 `flex-direction: row-reverse`（竖向缩略图条默认在左侧）。
+ * 这里只覆盖一处：把它改到右侧。其余布局全部交给官方样式，避免与库自身逻辑冲突。
+ */
 .fancybox__container.has-vertical-thumbs {
-	flex-direction: row-reverse !important;
-}
-
-.fancybox__container.has-vertical-thumbs .f-thumbs {
-	width: var(--f-thumb-width, 94px) !important;
-	height: 100% !important;
-	flex-direction: column !important;
-}
-
-.fancybox__container.has-vertical-thumbs .f-thumbs__viewport {
-	flex-direction: column !important;
-	width: 100% !important;
-	height: 100% !important;
-	display: flex !important;
-	gap: 8px !important;
-}
-
-.fancybox__container.has-vertical-thumbs .f-thumbs__track {
-	flex-direction: column !important;
-}
-
-/* 确保图片上下有更多留白，避免顶头 */
-.fancybox__slide {
-	padding: 60px 40px !important;
-}
-
-@media (max-width: 768px) {
-	/* 在移动端恢复默认的底部导航 */
-	.fancybox__container.has-vertical-thumbs {
-		flex-direction: column !important;
-	}
-	.fancybox__container.has-vertical-thumbs .f-thumbs {
-		width: 100% !important;
-		height: auto !important;
-		flex-direction: row !important;
-	}
-	.fancybox__container.has-vertical-thumbs .f-thumbs__viewport {
-		flex-direction: row !important;
-		width: 100% !important;
-		height: 100% !important;
-		display: flex !important;
-	}
-	.fancybox__container.has-vertical-thumbs .f-thumbs__track {
-		flex-direction: row !important;
-	}
-	.fancybox__slide {
-		padding: 40px 10px !important;
-	}
+	flex-direction: row !important;
 }
diff --git a/src/lib/components/MarkdownRenderer.svelte b/src/lib/components/MarkdownRenderer.svelte
index d517432..f745f86 100644
--- a/src/lib/components/MarkdownRenderer.svelte
+++ b/src/lib/components/MarkdownRenderer.svelte
@@ -372,29 +372,16 @@
 		if (typeof window !== 'undefined' && document.querySelector('[data-fancybox]')) {
 			const { Fancybox } = await import('@fancyapps/ui/dist/index.js');
 			await import('@fancyapps/ui/dist/fancybox/fancybox.css');
-			// @ts-expect-error FancyboxOptions types may lack plugin properties like Toolbar/Thumbs in v6
+			// 注意：Toolbar / Thumbs 是「Carousel」这一层的选项，必须嵌在 Carousel 下面，
+			// 放到顶层会被 Fancybox 直接忽略。
 			Fancybox.bind('[data-fancybox]', {
-				Toolbar: {
-					display: {
-						left: [],
-						middle: [],
-						right: ['thumbs', 'zoomIn', 'zoomOut', 'fullscreen', 'close']
-					}
-				},
-				Thumbs: {
-					autoStart: false, // 默认不显示导航
-					type: 'classic'
-				},
 				Carousel: {
-					// 确保主图周围有留白，不顶边
-				},
-				on: {
-					ready: (fancybox: any) => {
-						// 强制添加 vertical thumbs 相关 class 以让导航靠右显示
-						const container = fancybox.getContainer();
-						if (container) {
-							container.classList.add('has-vertical-thumbs');
-						}
+					Thumbs: {
+						// 'scrollable' 让缩略图成为竖向侧边导航；
+						// 库会自动加上 .has-vertical-thumbs（方向由 app.css 覆盖为右侧）。
+						type: 'scrollable',
+						// 默认收起，由工具栏右上角的缩略图按钮展开/收起。
+						showOnStart: false
 					}
 				}
 			});