优化前端显示

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

@@ -1,75 +1,112 @@
 <script>
-	import { onMount } from 'svelte';
 	import { page } from '$app/state';
-	import { getPhoto, getPhotoFileUrl, getAlbumPhotos, getPhotoPreviewUrl } from '$lib/api/client';
-	import { m, loading } from '$lib/paraglide/messages';
+	import { m } from '$lib/paraglide/messages';
+	import { resolve } from '$app/paths';
+	import { getPhotoPreviewUrl, getPhotoFileUrl } from '$lib/api/client';
+	import { goto } from '$app/navigation';
+
+	let { data } = $props();
 
 	/** @type {import('$lib/api/types').Photo|null} */
-	let photo = $state(null);
-	/** @type {import('$lib/api/types').Photo[]} */
-	let albumPhotos = $state([]);
-	let currentIndex = $state(0);
-	let loading_state = $state(true);
-	let error = $state(/** @type {string|null} */ (null));
+	let photo = $derived(data.photo);
+	let currentIndex = $derived(data.currentIndex ?? 0);
+	let totalPhotos = $derived(data.totalPhotos ?? 0);
+	let hasPrev = $derived(data.hasPrev ?? false);
+	let hasNext = $derived(data.hasNext ?? false);
+	let prevPhotoId = $derived(data.prevPhotoId);
+	let nextPhotoId = $derived(data.nextPhotoId);
 
-	onMount(async () => {
-		const photoId = parseInt(page.params.id ?? '');
-		if (isNaN(photoId)) {
-			error = 'Invalid photo id';
-			loading_state = false;
-			return;
-		}
+	// 导航加载状态（切换照片时）
+	let isNavigating = $state(false);
+	let loadError = $state(false);
 
-		try {
-			photo = await getPhoto(photoId);
-
-			if (!photo) {
-				error = 'Photo not found';
-			} else {
-				albumPhotos = await getAlbumPhotos(photo.albumId);
-				currentIndex = albumPhotos.findIndex((p) => p.id === photoId);
-			}
-		} catch (e) {
-			error = e instanceof Error ? e.message : 'Unknown error';
-		} finally {
-			loading_state = false;
-		}
-	});
+	// 触摸滑动支持
+	let touchStartX = 0;
+	let touchEndX = 0;
+	const SWIPE_THRESHOLD = 50;
 
 	function goToPrevious() {
-		if (currentIndex > 0) {
-			const prevPhoto = albumPhotos[currentIndex - 1];
-			history.pushState({}, '', `/photo/${prevPhoto.id}`);
-			photo = albumPhotos[currentIndex - 1];
-			currentIndex--;
-		}
+		if (!hasPrev || isNavigating) return;
+		navigateToPhoto(prevPhotoId);
 	}
 
 	function goToNext() {
-		if (currentIndex < albumPhotos.length - 1) {
-			const nextPhoto = albumPhotos[currentIndex + 1];
-			history.pushState({}, '', `/photo/${nextPhoto.id}`);
-			photo = albumPhotos[currentIndex + 1];
-			currentIndex++;
+		if (!hasNext || isNavigating) return;
+		navigateToPhoto(nextPhotoId);
+	}
+
+	async function navigateToPhoto(photoId) {
+		if (isNavigating) return;
+		
+		isNavigating = true;
+		loadError = false;
+		
+		try {
+			await goto(`/photo/${photoId}`, { keepFocus: true });
+		} catch (error) {
+			console.error('Failed to navigate:', error);
+			loadError = true;
+		} finally {
+			isNavigating = false;
 		}
 	}
 
 	function handleClose() {
-		if (photo) {
+		if (photo?.albumId) {
+			goto(resolve(`/album/${photo.albumId}`));
+		} else {
 			history.back();
 		}
 	}
 
-	onMount(() => {
-		/** @param {Event} event */
+	// 触摸事件处理
+	function handleTouchStart(event) {
+		touchStartX = event.touches[0].clientX;
+	}
+
+	function handleTouchMove(event) {
+		touchEndX = event.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (!touchStartX || !touchEndX) return;
+		
+		const diff = touchStartX - touchEndX;
+		
+		if (Math.abs(diff) > SWIPE_THRESHOLD) {
+			if (diff > 0) {
+				goToNext();
+			} else {
+				goToPrevious();
+			}
+		}
+		
+		touchStartX = 0;
+		touchEndX = 0;
+	}
+
+	// 键盘导航
+	$effect(() => {
 		function handleKeydown(event) {
 			const keyboardEvent = /** @type {KeyboardEvent} */ (event);
-			if (keyboardEvent.key === 'ArrowLeft') {
-				goToPrevious();
-			} else if (keyboardEvent.key === 'ArrowRight') {
-				goToNext();
-			} else if (keyboardEvent.key === 'Escape') {
-				handleClose();
+			
+			if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+				return;
+			}
+			
+			switch (keyboardEvent.key) {
+				case 'ArrowLeft':
+					event.preventDefault();
+					goToPrevious();
+					break;
+				case 'ArrowRight':
+					event.preventDefault();
+					goToNext();
+					break;
+				case 'Escape':
+					event.preventDefault();
+					handleClose();
+					break;
 			}
 		}
 
@@ -85,22 +122,86 @@
 			}
 		};
 	});
+
+	// 智能预加载
+	$effect(() => {
+		let cancelled = false;
+		let preloadTimeout;
+
+		preloadTimeout = setTimeout(() => {
+			if (cancelled) return;
+
+			if (hasNext && nextPhotoId) {
+				const nextImg = new Image();
+				nextImg.src = getPhotoPreviewUrl(nextPhotoId);
+				nextImg.fetchPriority = 'low';
+			}
+
+			if (hasPrev && prevPhotoId) {
+				const prevImg = new Image();
+				prevImg.src = getPhotoPreviewUrl(prevPhotoId);
+				prevImg.fetchPriority = 'low';
+			}
+		}, 300);
+
+		return () => {
+			cancelled = true;
+			clearTimeout(preloadTimeout);
+		};
+	});
+
+	// 图片加载完成
+	function handleImageLoad() {
+		isNavigating = false;
+	}
+
+	function handleImageError() {
+		isNavigating = false;
+		loadError = true;
+	}
 </script>
 
 <svelte:head>
-	<title>{photo ? photo.fileName : loading()}</title>
+	<title>{photo ? photo.fileName : m.loading()}</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 </svelte:head>
 
-<div class="viewer-container" role="application" tabindex="0">
-	{#if loading_state}
-		<div class="loading">{m.loading()}</div>
-	{:else if error}
-		<div class="error">{m.error()}</div>
-	{:else if photo}
+<div 
+	class="viewer-container" 
+	role="application" 
+	tabindex="0"
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+>
+	{#if !photo}
+		<div class="loading">
+			<div class="loading-spinner"></div>
+			<p>{m.loading()}</p>
+		</div>
+	{:else}
+		<!-- 导航加载指示器 -->
+		{#if isNavigating}
+			<div class="loading-indicator">
+				<div class="loading-spinner small"></div>
+			</div>
+		{/if}
+
+		<!-- 错误提示 -->
+		{#if loadError}
+			<div class="error-toast">
+				<span>加载失败</span>
+				<button onclick={() => loadError = false}>重试</button>
+			</div>
+		{/if}
+
 		<div class="viewer-header">
-			<a href="/album/{photo.albumId}" class="back-link">← {m.back()}</a>
+			<a href={resolve(`/album/${photo.albumId}`)} class="back-link">
+				<span class="back-icon">←</span>
+				<span class="back-text">{m.back()}</span>
+			</a>
 			<span class="photo-index">
-				{currentIndex + 1} / {albumPhotos.length}
+				{currentIndex + 1} / {totalPhotos}
 			</span>
 		</div>
 
@@ -108,39 +209,67 @@
 			<button
 				class="nav-button prev"
 				onclick={goToPrevious}
-				disabled={currentIndex === 0}
+				disabled={!hasPrev || isNavigating}
 				aria-label="Previous photo"
+				type="button"
 			>
-				‹
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<path d="M15 18l-6-6 6-6" />
+				</svg>
 			</button>
 
 			<div class="image-wrapper">
-				{#if photo.mimeType.startsWith('video/')}
-					<video controls>
+				{#if photo.mimeType?.startsWith('video/')}
+					<video 
+						controls 
+						playsinline
+						onloadeddata={handleImageLoad}
+						onerror={handleImageError}
+					>
 						<source src={getPhotoFileUrl(photo.id)} type={photo.mimeType} />
 					</video>
 				{:else}
-					<img src={getPhotoPreviewUrl(photo.id)} alt={photo.fileName} />
+					{@const previewSrc = getPhotoPreviewUrl(photo.id)}
+					<img 
+						src={previewSrc}
+						srcset="{previewSrc}?w=800 800w, {previewSrc}?w=1200 1200w, {previewSrc}?w=1600 1600w"
+						sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 60vw"
+						alt={photo.fileName}
+						onload={handleImageLoad}
+						onerror={handleImageError}
+						decoding="async"
+					/>
 				{/if}
 			</div>
 
 			<button
 				class="nav-button next"
 				onclick={goToNext}
-				disabled={currentIndex === albumPhotos.length - 1}
+				disabled={!hasNext || isNavigating}
 				aria-label="Next photo"
+				type="button"
 			>
-				›
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<path d="M9 18l6-6-6-6" />
+				</svg>
 			</button>
 		</div>
 
 		<div class="photo-info">
-			<h2>{photo.fileName}</h2>
-			<p class="meta">
-				{Math.round(photo.fileSize / 1024)} KB •
-				{photo.width && photo.height ? `${photo.width}×${photo.height}` : ''} •
-				{new Date(photo.createdAt).toLocaleDateString()}
-			</p>
+			<div class="photo-details">
+				<h2>{photo.fileName}</h2>
+				<p class="meta">
+					{#if photo.fileSize}
+						<span>{Math.round(photo.fileSize / 1024)} KB</span>
+					{/if}
+					{#if photo.width && photo.height}
+						<span>{photo.width}×{photo.height}</span>
+					{/if}
+					{#if photo.createdAt}
+						<span>{new Date(photo.createdAt).toLocaleDateString()}</span>
+					{/if}
+				</p>
+			</div>
 		</div>
 	{/if}
 </div>
@@ -155,48 +284,140 @@
 		flex-direction: column;
 		z-index: 1000;
 		outline: none;
+		overflow: hidden;
+		touch-action: pan-y;
 	}
 
 	.viewer-container:focus {
 		outline: none;
 	}
 
-	.loading,
-	.error {
+	/* 加载状态 */
+	.loading {
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		font-size: 1.25rem;
+		gap: 1rem;
 	}
 
-	.error {
-		color: #ef4444;
+	.loading-spinner {
+		width: 48px;
+		height: 48px;
+		border: 3px solid rgba(255, 255, 255, 0.3);
+		border-top-color: white;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
 	}
 
+	.loading-spinner.small {
+		width: 24px;
+		height: 24px;
+		border-width: 2px;
+	}
+
+	@keyframes spin {
+		to { transform: rotate(360deg); }
+	}
+
+	.loading p {
+		color: #9ca3af;
+		font-size: 1rem;
+		margin: 0;
+	}
+
+	.loading-indicator {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 100;
+		pointer-events: none;
+	}
+
+	/* 错误提示 */
+	.error-toast {
+		position: absolute;
+		top: 80px;
+		left: 50%;
+		transform: translateX(-50%);
+		background: rgba(239, 68, 68, 0.9);
+		color: white;
+		padding: 0.75rem 1.5rem;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		z-index: 101;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	}
+
+	.error-toast button {
+		background: rgba(255, 255, 255, 0.2);
+		border: none;
+		color: white;
+		padding: 0.25rem 0.75rem;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.875rem;
+	}
+
+	.error-toast button:hover {
+		background: rgba(255, 255, 255, 0.3);
+	}
+
+	/* 头部 */
 	.viewer-header {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 1rem 1.5rem;
-		background: rgba(0, 0, 0, 0.5);
+		padding: 0.75rem 1rem;
+		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
 	}
 
 	.back-link {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 		color: white;
 		text-decoration: none;
-		font-size: 1rem;
+		font-size: 0.95rem;
+		padding: 0.5rem 0.75rem;
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 6px;
+		transition: background 0.2s;
 	}
 
 	.back-link:hover {
-		text-decoration: underline;
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.back-icon {
+		font-size: 1.25rem;
+		line-height: 1;
+	}
+
+	@media (max-width: 640px) {
+		.back-text {
+			display: none;
+		}
 	}
 
 	.photo-index {
-		color: #9ca3af;
+		color: #d1d5db;
 		font-size: 0.875rem;
+		background: rgba(255, 255, 255, 0.1);
+		padding: 0.35rem 0.75rem;
+		border-radius: 6px;
 	}
 
+	/* 内容区域 */
 	.viewer-content {
 		flex: 1;
 		display: flex;
@@ -212,6 +433,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		position: relative;
 	}
 
 	.image-wrapper img,
@@ -221,6 +443,7 @@
 		object-fit: contain;
 	}
 
+	/* 导航按钮 */
 	.nav-button {
 		position: absolute;
 		top: 50%;
@@ -228,18 +451,32 @@
 		background: rgba(255, 255, 255, 0.1);
 		color: white;
 		border: none;
-		font-size: 3rem;
-		padding: 1rem;
+		padding: 0.75rem;
 		cursor: pointer;
-		transition: background 0.2s;
+		transition: all 0.2s;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 5;
+	}
+
+	.nav-button svg {
+		width: 24px;
+		height: 24px;
 	}
 
 	.nav-button:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.2);
+		background: rgba(255, 255, 255, 0.25);
+		transform: translateY(-50%) scale(1.1);
+	}
+
+	.nav-button:active:not(:disabled) {
+		transform: translateY(-50%) scale(0.95);
 	}
 
 	.nav-button:disabled {
-		opacity: 0.3;
+		opacity: 0.2;
 		cursor: not-allowed;
 	}
 
@@ -251,9 +488,39 @@
 		right: 1rem;
 	}
 
+	@media (max-width: 768px) {
+		.nav-button {
+			padding: 0.5rem;
+		}
+		
+		.nav-button svg {
+			width: 20px;
+			height: 20px;
+		}
+		
+		.nav-button.prev {
+			left: 0.5rem;
+		}
+		
+		.nav-button.next {
+			right: 0.5rem;
+		}
+	}
+
+	/* 照片信息 */
 	.photo-info {
-		padding: 1rem 1.5rem;
-		background: rgba(0, 0, 0, 0.5);
+		padding: 1rem;
+		background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+	}
+
+	.photo-details {
+		max-width: 800px;
+		margin: 0 auto;
 	}
 
 	.photo-info h2 {
@@ -263,11 +530,19 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		color: white;
 	}
 
 	.photo-info .meta {
-		font-size: 0.875rem;
+		font-size: 0.8rem;
 		color: #9ca3af;
-		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+	}
+
+	.photo-info .meta span {
+		display: inline-flex;
+		align-items: center;
 	}
 </style>