减少前端警告

web/src/lib/components/photo/PhotoCard.svelte

@@ -10,7 +10,8 @@
 	/** @type {PhotoCardProps} */
 	let { photo, onUpgradeQuality } = $props();
 
-	const previewSrc = `/api/v1/photo/${photo.id}/preview`;
+	// 使用 $derived 确保响应式更新
+	let previewSrc = $derived(`/api/v1/photo/${photo.id}/preview`);
 
 	function handleMouseEnter() {
 		if (onUpgradeQuality) {

web/src/routes/album/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/state';
+	import { browser } from '$app/environment';
 	import { m } from '$lib/paraglide/messages';
 	import { albums, back, photo_count, loading } from '$lib/paraglide/messages';
 	import { resolve } from '$app/paths';
@@ -15,7 +16,7 @@
 	let hasMore = $derived(data.hasMore ?? false);
 
 	// 所有已加载的照片（支持分页追加）
-	let allPhotos = $state([...initialPhotos]);
+	let allPhotos = $state([]);
 
 	// 分批加载配置 - 前端虚拟滚动
 	const BATCH_SIZE = 50;
@@ -82,7 +83,7 @@
 
 	// 加载下一页（从服务器）
 	async function loadNextPage() {
-		if (isLoading) return;
+		if (!browser || isLoading) return;
 
 		isLoading = true;
 		currentPage++;

web/src/routes/photo/[id]/+page.svelte

@@ -57,7 +57,7 @@
 
 	// 动画帧 ID
 	let animationFrameId = null;
-	let initialScale = 1;
+	let initialScale = $state(1);
 
 	// 监听容器尺寸变化
 	function updateContainerSize() {
@@ -148,10 +148,10 @@
 		animationFrameId = requestAnimationFrame(animate);
 	}
 
-	// 使用普通变量存储目标值（避免 $state 的复杂响应式）
+	// 使用 $state 存储目标值
-	let targetScaleRef = 1;
+	let targetScaleRef = $state(1);
-	let targetTranslateXRef = 0;
+	let targetTranslateXRef = $state(0);
-	let targetTranslateYRef = 0;
+	let targetTranslateYRef = $state(0);
 
 	function goToPrevious() {
 		if (!hasPrev || isNavigating) return;
@@ -631,6 +631,7 @@
 	/>
 </svelte:head>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	class="viewer-container"
 	role="application"
@@ -725,6 +726,7 @@
 				</svg>
 			</button>
 
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="image-wrapper"
 				style={getImageWrapperStyle()}
@@ -744,6 +746,8 @@
 						<source src={resolve(getPhotoFileUrl(photo.id))} type={photo.mimeType} />
 					</video>
 				{:else}
+					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<img
 						src={getImageSrc()}
 						srcset={getImageSrcSet()}