From edcf251945b5fc586a4531802802ab845ddd222e Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Thu, 6 Aug 2026 12:51:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E7=89=B9=E8=89=B2=E5=9B=BE?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=A2=9E=E5=8A=A0=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=8E=E8=87=AA=E9=80=82=E5=BA=94=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/FeaturedImagePicker.svelte          | 66 +++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/admin/FeaturedImagePicker.svelte b/src/lib/components/admin/FeaturedImagePicker.svelte
index 8eec101..8c158b6 100644
--- a/src/lib/components/admin/FeaturedImagePicker.svelte
+++ b/src/lib/components/admin/FeaturedImagePicker.svelte
@@ -1,19 +1,32 @@
 <script lang="ts">
 	import { addToast } from '$lib/stores/toast.svelte';
+	import { Fancybox } from '@fancyapps/ui/dist/index.js';
+	import '@fancyapps/ui/dist/fancybox/fancybox.css';
+	import { onMount } from 'svelte';
 	import Tabs from './Tabs.svelte';
 
 	let {
 		cover = $bindable(''),
 		title = '特色图',
 		inputName = 'cover',
-		aspectRatio = '16/9'
+		aspectRatio = '16/9',
+		adaptiveHeight = false,
+		previewable = false
 	} = $props<{
 		cover?: string | null;
 		title?: string;
 		inputName?: string;
 		aspectRatio?: string;
+		adaptiveHeight?: boolean;
+		previewable?: boolean;
 	}>();
 
+	let pickerElement = $state<HTMLDivElement>();
+	let previewHeightRatio = $derived((() => {
+		const [width, height] = aspectRatio.split('/').map(Number);
+		return width > 0 && height > 0 ? height / width : 9 / 16;
+	})());
+
 	let activeTab = $state('url');
 	let isUploading = $state(false);
 	
@@ -22,6 +35,16 @@
 	let hasMore = $state(true);
 	let isLoadingLibrary = $state(false);
 
+	onMount(() => {
+		if (!previewable || !pickerElement) return;
+
+		const selector = '[data-fancybox="featured-image-preview"]';
+		const container = pickerElement;
+		Fancybox.bind(container, selector, {});
+
+		return () => Fancybox.unbind(container, selector);
+	});
+
 	async function loadLibrary(reset = false) {
 		if (reset) {
 			page = 1;
@@ -89,14 +112,31 @@
 	}
 </script>
 
-<div class="sidebar-box">
+<div class="sidebar-box" bind:this={pickerElement}>
 	{#if title}
 		<h3>{title}</h3>
 	{/if}
 	
 	{#if cover}
-		<div class="cover-preview">
-			<img src={cover} alt="图片预览" style:aspect-ratio={aspectRatio} />
+		<div
+			class="cover-preview"
+			class:adaptive-height={adaptiveHeight}
+			style={`--preview-aspect-ratio: ${aspectRatio}; --preview-height-ratio: ${previewHeightRatio}`}
+		>
+			{#if previewable}
+				<a
+					class="cover-preview-link"
+					href={cover}
+					data-fancybox="featured-image-preview"
+					data-caption={title || '特色图'}
+					aria-label="查看特色图大图"
+					title="点击查看大图"
+				>
+					<img src={cover} alt="图片预览" />
+				</a>
+			{:else}
+				<img src={cover} alt="图片预览" />
+			{/if}
 			<button type="button" class="btn-clear" onclick={() => cover = ''}>移除</button>
 		</div>
 	{/if}
@@ -166,6 +206,16 @@
 		overflow: hidden;
 	}
 
+	.cover-preview.adaptive-height {
+		container-type: inline-size;
+	}
+
+	.cover-preview-link {
+		display: block;
+		background: #f5f5f5;
+		cursor: zoom-in;
+	}
+
 	.cover-preview img {
 		width: 100%;
 		height: auto;
@@ -174,6 +224,14 @@
 		max-height: 280px;
 	}
 
+	.cover-preview:not(.adaptive-height) img {
+		aspect-ratio: var(--preview-aspect-ratio);
+	}
+
+	.cover-preview.adaptive-height img {
+		max-height: min(280px, calc(100cqw * var(--preview-height-ratio)));
+	}
+
 	.btn-clear {
 		position: absolute;
 		top: 8px;