diff --git a/web/src/lib/components/photo/PhotoCard.svelte b/web/src/lib/components/photo/PhotoCard.svelte
index 222105d..0772bcc 100644
--- a/web/src/lib/components/photo/PhotoCard.svelte
+++ b/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) {
@@ -114,4 +115,4 @@
 		white-space: nowrap;
 		padding: 0 var(--space-xs);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/web/src/routes/album/[id]/+page.svelte b/web/src/routes/album/[id]/+page.svelte
index a5705a2..8e8ce0b 100644
--- a/web/src/routes/album/[id]/+page.svelte
+++ b/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++;
@@ -161,4 +162,4 @@
 			bind:loadMoreTrigger
 		/>
 	{/if}
-</Container>
+</Container>
\ No newline at end of file
diff --git a/web/src/routes/photo/[id]/+page.svelte b/web/src/routes/photo/[id]/+page.svelte
index 2874076..c340a14 100644
--- a/web/src/routes/photo/[id]/+page.svelte
+++ b/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 的复杂响应式）
-	let targetScaleRef = 1;
-	let targetTranslateXRef = 0;
-	let targetTranslateYRef = 0;
+	// 使用 $state 存储目标值
+	let targetScaleRef = $state(1);
+	let targetTranslateXRef = $state(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()}