refactor: 优化 Fancybox 配置与竖向缩略图样式布局

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

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: {
-					// 确保主图周围有留白，不顶边
+					Thumbs: {
-				},
+						// 'scrollable' 让缩略图成为竖向侧边导航；
-				on: {
+						// 库会自动加上 .has-vertical-thumbs（方向由 app.css 覆盖为右侧）。
-					ready: (fancybox: any) => {
+						type: 'scrollable',
-						// 强制添加 vertical thumbs 相关 class 以让导航靠右显示
+						// 默认收起，由工具栏右上角的缩略图按钮展开/收起。
-						const container = fancybox.getContainer();
+						showOnStart: false
-						if (container) {
-							container.classList.add('has-vertical-thumbs');
-						}
 					}
 				}
 			});