From 8612b2dbded3c09e5e551055e673a886ab210097 Mon Sep 17 00:00:00 2001
From: lzw-723 <lzw-723@qq.com>
Date: Fri, 13 Mar 2026 15:03:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=89=8D=E7=AB=AF=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/caches/deviceStreaming.xml       |  12 +
 bin/router.dart                        |  35 ++-
 test/server_test.dart                  |  60 ++---
 web/README.md                          |  25 +-
 web/messages/en.json                   |  10 +-
 web/messages/zh.json                   |  10 +-
 web/src/lib/api/client.js              |  60 +++++
 web/src/lib/api/types.js               |  22 ++
 web/src/routes/+page.svelte            | 126 ++++++++++-
 web/src/routes/album/[id]/+page.svelte | 302 +++++++++++++++++++++++++
 web/src/routes/photo/[id]/+page.svelte | 273 ++++++++++++++++++++++
 web/vite.config.js                     |   5 +
 12 files changed, 897 insertions(+), 43 deletions(-)
 create mode 100644 web/src/lib/api/client.js
 create mode 100644 web/src/lib/api/types.js
 create mode 100644 web/src/routes/album/[id]/+page.svelte
 create mode 100644 web/src/routes/photo/[id]/+page.svelte

diff --git a/.idea/caches/deviceStreaming.xml b/.idea/caches/deviceStreaming.xml
index 23267a6..3c002e5 100644
--- a/.idea/caches/deviceStreaming.xml
+++ b/.idea/caches/deviceStreaming.xml
@@ -784,6 +784,18 @@
           <option name="screenX" value="720" />
           <option name="screenY" value="1600" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="motorola" />
+          <option name="codename" value="fogorow" />
+          <option name="id" value="fogorow" />
+          <option name="labId" value="google" />
+          <option name="manufacturer" value="Motorola" />
+          <option name="name" value="moto g24" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1612" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="motorola" />
diff --git a/bin/router.dart b/bin/router.dart
index 3c8b4d7..2dc5eae 100644
--- a/bin/router.dart
+++ b/bin/router.dart
@@ -18,7 +18,8 @@ Response jsonResponse(dynamic data) {
   );
 }
 
-Router createRouter() {
+/// 创建 API v1 版本的路由
+Router createApiV1Router() {
   final router = Router()
     ..get('/', _rootHandler)
     ..get("/album", _listAlbumHandler)
@@ -31,6 +32,16 @@ Router createRouter() {
   return router;
 }
 
+/// 创建主路由器，将 API v1 挂载到 /api/v1 路径下
+Router createRouter() {
+  final router = Router();
+  
+  // 将 API v1 路由挂载到 /api/v1 路径下
+  router.mount('/api/v1', createApiV1Router().call);
+  
+  return router;
+}
+
 Response _rootHandler(Request req) {
   return Response.ok('Hello, World!\n');
 }
@@ -113,8 +124,26 @@ Future<Response> _getPhotoFileHandler(Request req) async {
     return Response.notFound('File not found');
   }
 
+  // ✅ 修复：使用 StreamController 包装，确保在客户端断开时关闭文件流
+  final streamController = StreamController<List<int>>();
+  final fileStream = file.openRead();
+  
+  // 订阅文件流，并将数据转发到响应流
+  final subscription = fileStream.listen(
+    streamController.add,
+    onError: streamController.addError,
+    onDone: streamController.close,
+    cancelOnError: true,
+  );
+  
+  // 当客户端取消订阅时（断开连接），取消文件流订阅并关闭文件
+  streamController.onCancel = () {
+    subscription.cancel();
+    return Future.value();
+  };
+
   return Response.ok(
-    file.openRead(),
+    streamController.stream,
     headers: {
       'Content-Type': photo.mimeType,
       'Content-Length': photo.fileSize.toString(),
@@ -122,8 +151,6 @@ Future<Response> _getPhotoFileHandler(Request req) async {
   );
 }
 
-
-
 Future<Response> _getPhotosOfAlbumHander(Request req) async {
   final idParam = req.params['id'];
   if (idParam == null) {
diff --git a/test/server_test.dart b/test/server_test.dart
index 741f55b..bbc4210 100644
--- a/test/server_test.dart
+++ b/test/server_test.dart
@@ -28,30 +28,30 @@ void main() {
   });
 
   group('Root endpoint', () {
-    test('GET / returns Hello World', () async {
-      final response = await http.get(Uri.parse('$host/'));
+    test('GET /api/v1/ returns Hello World', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/'));
       expect(response.statusCode, 200);
       expect(response.body, 'Hello, World!\n');
     });
   });
 
   group('Echo endpoint', () {
-    test('GET /echo/<message> returns the message', () async {
-      final response = await http.get(Uri.parse('$host/echo/hello'));
+    test('GET /api/v1/echo/<message> returns the message', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/echo/hello'));
       expect(response.statusCode, 200);
       expect(response.body, 'hello\n');
     });
 
-    test('GET /echo/<message> with special characters', () async {
-      final response = await http.get(Uri.parse('$host/echo/test%20message'));
+    test('GET /api/v1/echo/<message> with special characters', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/echo/test%20message'));
       expect(response.statusCode, 200);
       expect(response.body, contains('test'));
     });
   });
 
   group('Album endpoints', () {
-    test('GET /album returns list of albums', () async {
-      final response = await http.get(Uri.parse('$host/album'));
+    test('GET /api/v1/album returns list of albums', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/album'));
       expect(response.statusCode, 200);
       expect(response.headers['content-type'], contains('application/json'));
       final albums = jsonDecode(response.body) as List;
@@ -62,27 +62,27 @@ void main() {
       }
     });
 
-    test('GET /album/<id> with invalid id returns 400', () async {
-      final response = await http.get(Uri.parse('$host/album/invalid_id'));
+    test('GET /api/v1/album/<id> with invalid id returns 400', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/album/invalid_id'));
       expect(response.statusCode, 400);
       expect(response.body, contains('Invalid album id'));
     });
 
-    test('GET /album/<id> with non-existent id returns 404', () async {
-      final response = await http.get(Uri.parse('$host/album/999999'));
+    test('GET /api/v1/album/<id> with non-existent id returns 404', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/album/999999'));
       expect(response.statusCode, 404);
       expect(response.body, contains('Album not found'));
     });
 
-    test('GET /album/<id>/photo with invalid id returns 400', () async {
-      final response = await http.get(Uri.parse('$host/album/invalid_id/photo'));
+    test('GET /api/v1/album/<id>/photo with invalid id returns 400', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/album/invalid_id/photo'));
       expect(response.statusCode, 400);
       expect(response.body, contains('Invalid album id'));
     });
 
-    test('GET /album/<id>/photo with valid id returns photos', () async {
+    test('GET /api/v1/album/<id>/photo with valid id returns photos', () async {
       // First get the list to find a valid album id
-      final listResponse = await http.get(Uri.parse('$host/album'));
+      final listResponse = await http.get(Uri.parse('$host/api/v1/album'));
       expect(listResponse.statusCode, 200);
       final albums = jsonDecode(listResponse.body) as List;
       
@@ -94,7 +94,7 @@ void main() {
       final album = albums.first as Map<String, dynamic>;
       final albumId = album['id'];
       
-      final response = await http.get(Uri.parse('$host/album/$albumId/photo'));
+      final response = await http.get(Uri.parse('$host/api/v1/album/$albumId/photo'));
       expect(response.statusCode, 200);
       expect(response.headers['content-type'], contains('application/json'));
       final photos = jsonDecode(response.body) as List;
@@ -103,35 +103,35 @@ void main() {
   });
 
   group('Photo endpoints', () {
-    test('GET /photo/<id> with invalid id returns 400', () async {
-      final response = await http.get(Uri.parse('$host/photo/abc'));
+    test('GET /api/v1/photo/<id> with invalid id returns 400', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/photo/abc'));
       expect(response.statusCode, 400);
       expect(response.body, contains('Invalid photo id'));
     });
 
-    test('GET /photo/<id> with non-existent id returns 404', () async {
+    test('GET /api/v1/photo/<id> with non-existent id returns 404', () async {
       // Use a hash that won't match any file
-      final response = await http.get(Uri.parse('$host/photo/12345'));
+      final response = await http.get(Uri.parse('$host/api/v1/photo/12345'));
       expect(response.statusCode, 404);
       expect(response.body, contains('Photo not found'));
     });
 
-    test('GET /photo/<id>/file with invalid id returns 400', () async {
-      final response = await http.get(Uri.parse('$host/photo/abc/file'));
+    test('GET /api/v1/photo/<id>/file with invalid id returns 400', () async {
+      final response = await http.get(Uri.parse('$host/api/v1/photo/abc/file'));
       expect(response.statusCode, 400);
       expect(response.body, contains('Invalid photo id'));
     });
 
-    test('GET /photo/<id>/file with non-existent id returns 404', () async {
+    test('GET /api/v1/photo/<id>/file with non-existent id returns 404', () async {
       // Use a hash that won't match any file
-      final response = await http.get(Uri.parse('$host/photo/12345/file'));
+      final response = await http.get(Uri.parse('$host/api/v1/photo/12345/file'));
       expect(response.statusCode, 404);
       expect(response.body, contains('Photo not found'));
     });
 
-    test('GET /photo/<id>/file with valid id returns file', () async {
+    test('GET /api/v1/photo/<id>/file with valid id returns file', () async {
       // First get a valid photo id from an album
-      final albumResponse = await http.get(Uri.parse('$host/album'));
+      final albumResponse = await http.get(Uri.parse('$host/api/v1/album'));
       expect(albumResponse.statusCode, 200);
       final albums = jsonDecode(albumResponse.body) as List;
       
@@ -144,7 +144,7 @@ void main() {
       final albumId = album['id'];
       
       final photosResponse = await http.get(
-        Uri.parse('$host/album/$albumId/photo'),
+        Uri.parse('$host/api/v1/album/$albumId/photo'),
       );
       expect(photosResponse.statusCode, 200);
       final photos = jsonDecode(photosResponse.body) as List;
@@ -158,7 +158,7 @@ void main() {
       final photoId = photo['id'];
       
       final response = await http.get(
-        Uri.parse('$host/photo/$photoId/file'),
+        Uri.parse('$host/api/v1/photo/$photoId/file'),
       );
       expect(response.statusCode, 200);
       expect(response.contentLength, greaterThan(0));
@@ -172,7 +172,7 @@ void main() {
     });
 
     test('Unknown nested route returns 404', () async {
-      final response = await http.get(Uri.parse('$host/api/v1/unknown'));
+      final response = await http.get(Uri.parse('$host/api/v2/unknown'));
       expect(response.statusCode, 404);
     });
   });
diff --git a/web/README.md b/web/README.md
index 97dabcd..a6f799f 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,6 +1,14 @@
-# sv
+# Loongyan Photo Album Web
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+网页相册前端，基于 SvelteKit 构建，支持中英文国际化。
+
+## 功能特性
+
+- 📁 相册列表展示
+- 🖼️ 照片浏览
+- 🌍 中英文国际化支持
+- 📱 响应式设计
+- ⌨️ 键盘导航支持（左右键切换照片，ESC 关闭）
 
 ## Creating a project
 
@@ -18,17 +26,24 @@ To recreate this project with the same configuration:
 pnpm dlx sv@0.12.6 create --template minimal --types jsdoc --add prettier vitest="usages:unit,component" eslint sveltekit-adapter="adapter:auto" devtools-json better-auth="demo:password" mdsvex paraglide="languageTags:en, zh+demo:yes" drizzle="database:sqlite+sqlite:better-sqlite3" --install pnpm web/
 ```
 
-## Developing
+## 开发
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+安装依赖并启动开发服务器：
 
 ```sh
+pnpm install
 npm run dev
 
-# or start the server and open the app in a new browser tab
+# 或自动打开浏览器
 npm run dev -- --open
 ```
 
+## API 配置
+
+本项目需要配合后端 API 使用。默认情况下，API 请求会发送到同源服务器。
+
+如果需要配置 API 地址，请修改 `src/lib/api/client.js` 中的 `API_BASE` 常量。
+
 ## Building
 
 To create a production version of your app:
diff --git a/web/messages/en.json b/web/messages/en.json
index 37a9894..499ec22 100644
--- a/web/messages/en.json
+++ b/web/messages/en.json
@@ -1,4 +1,12 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"hello_world": "Hello, {name} from en!"
+	"hello_world": "Hello, {name} from en!",
+	"albums": "Albums",
+	"loading": "Loading...",
+	"no_albums": "No albums yet",
+	"error": "Error",
+	"back": "Back",
+	"photo_count": "{count} photos",
+	"view_photo": "View Photo",
+	"load_more": "All loaded"
 }
diff --git a/web/messages/zh.json b/web/messages/zh.json
index 79ece0c..9a8476e 100644
--- a/web/messages/zh.json
+++ b/web/messages/zh.json
@@ -1,4 +1,12 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"hello_world": "Hello, {name} from zh!"
+	"hello_world": "Hello, {name} from zh!",
+	"albums": "相册",
+	"loading": "加载中...",
+	"no_albums": "暂无相册",
+	"error": "错误",
+	"back": "返回",
+	"photo_count": "{count} 张照片",
+	"view_photo": "查看照片",
+	"load_more": "已全部加载"
 }
diff --git a/web/src/lib/api/client.js b/web/src/lib/api/client.js
new file mode 100644
index 0000000..b69f688
--- /dev/null
+++ b/web/src/lib/api/client.js
@@ -0,0 +1,60 @@
+const API_BASE = '/api/v1';
+
+/**
+ * @param {string} endpoint
+ * @returns {Promise<any>}
+ */
+async function fetchApi(endpoint) {
+	const response = await fetch(`${API_BASE}${endpoint}`);
+	if (!response.ok) {
+		if (response.status === 404) {
+			return null;
+		}
+		throw new Error(`API Error: ${response.status}`);
+	}
+	return response.json();
+}
+
+/**
+ * Get all albums
+ * @returns {Promise<import('./types').Album[]>}
+ */
+export async function getAlbums() {
+	return fetchApi('/album');
+}
+
+/**
+ * Get album by id
+ * @param {number} id
+ * @returns {Promise<import('./types').Album|null>}
+ */
+export async function getAlbum(id) {
+	return fetchApi(`/album/${id}`);
+}
+
+/**
+ * Get photos of an album
+ * @param {number} albumId
+ * @returns {Promise<import('./types').Photo[]>}
+ */
+export async function getAlbumPhotos(albumId) {
+	return fetchApi(`/album/${albumId}/photo`);
+}
+
+/**
+ * Get photo by id
+ * @param {number} id
+ * @returns {Promise<import('./types').Photo|null>}
+ */
+export async function getPhoto(id) {
+	return fetchApi(`/photo/${id}`);
+}
+
+/**
+ * Get photo file URL
+ * @param {number} id
+ * @returns {string}
+ */
+export function getPhotoFileUrl(id) {
+	return `${API_BASE}/photo/${id}/file`;
+}
diff --git a/web/src/lib/api/types.js b/web/src/lib/api/types.js
new file mode 100644
index 0000000..b6acbc0
--- /dev/null
+++ b/web/src/lib/api/types.js
@@ -0,0 +1,22 @@
+/**
+ * @typedef {Object} Album
+ * @property {number} id
+ * @property {string} name
+ * @property {string} createdAt
+ * @property {string} updatedAt
+ */
+
+/**
+ * @typedef {Object} Photo
+ * @property {number} id
+ * @property {number} albumId
+ * @property {string} filePath
+ * @property {string} fileName
+ * @property {number} fileSize
+ * @property {string} mimeType
+ * @property {number|null} width
+ * @property {number|null} height
+ * @property {string} createdAt
+ */
+
+export const types = {};
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index cc88df0..d5436a6 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,2 +1,124 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import { onMount } from 'svelte';
+	import { localizeHref } from '$lib/paraglide/runtime';
+	import { getAlbums } from '$lib/api/client';
+	import { albums, loading, no_albums } from '$lib/paraglide/messages';
+
+	/** @type {import('$lib/api/types').Album[]} */
+	let albums_list = $state([]);
+	let loading_state = $state(true);
+	let error = $state(/** @type {string|null} */ (null));
+
+	onMount(async () => {
+		try {
+			albums_list = await getAlbums();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error';
+		} finally {
+			loading_state = false;
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{albums()}</title>
+</svelte:head>
+
+<div class="container">
+	<header class="header">
+		<h1>{albums()}</h1>
+	</header>
+
+	{#if loading_state}
+		<div class="loading">{loading()}</div>
+	{:else if error}
+		<div class="error">{error}</div>
+	{:else if albums_list.length === 0}
+		<div class="empty">{no_albums()}</div>
+	{:else}
+		<div class="album-grid">
+			{#each albums_list as album (album.id)}
+				<a href="/album/{album.id}" class="album-card">
+					<div class="album-icon">📁</div>
+					<h3 class="album-name">{album.name}</h3>
+					<p class="album-date">
+						{new Date(album.createdAt).toLocaleDateString()}
+					</p>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 2rem;
+	}
+
+	.header {
+		margin-bottom: 2rem;
+	}
+
+	.header h1 {
+		font-size: 2rem;
+		font-weight: 700;
+		color: #1a1a1a;
+	}
+
+	.loading,
+	.empty,
+	.error {
+		text-align: center;
+		padding: 4rem 2rem;
+		color: #666;
+	}
+
+	.error {
+		color: #dc2626;
+	}
+
+	.album-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 1.5rem;
+	}
+
+	.album-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 2rem;
+		background: #f9fafb;
+		border-radius: 12px;
+		text-decoration: none;
+		color: inherit;
+		transition:
+			transform 0.2s,
+			box-shadow 0.2s;
+	}
+
+	.album-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+	}
+
+	.album-icon {
+		font-size: 4rem;
+		margin-bottom: 1rem;
+	}
+
+	.album-name {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0 0 0.5rem 0;
+		color: #1a1a1a;
+	}
+
+	.album-date {
+		font-size: 0.875rem;
+		color: #6b7280;
+		margin: 0;
+	}
+</style>
diff --git a/web/src/routes/album/[id]/+page.svelte b/web/src/routes/album/[id]/+page.svelte
new file mode 100644
index 0000000..844e237
--- /dev/null
+++ b/web/src/routes/album/[id]/+page.svelte
@@ -0,0 +1,302 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { page } from '$app/state';
+	import { getAlbum, getAlbumPhotos, getPhotoFileUrl } from '$lib/api/client';
+	import { albums, loading, no_albums, back, photo_count } from '$lib/paraglide/messages';
+
+	/** @type {import('$lib/api/types').Album|null} */
+	let album = $state(null);
+	/** @type {import('$lib/api/types').Photo[]} */
+	let photos = $state([]);
+	let loading_state = $state(true);
+	let error = $state(/** @type {string|null} */ (null));
+
+	// 分批加载配置
+	const BATCH_SIZE = 100;
+	let displayedCount = $state(BATCH_SIZE);
+
+	/** @type {HTMLDivElement|null} */
+	let scrollContainer = $state(null);
+	/** @type {IntersectionObserver|null} */
+	let observer = $state(null);
+	/** @type {HTMLDivElement|null} */
+	let loadMoreTrigger = $state(null);
+
+	onMount(async () => {
+		const albumId = parseInt(page.params.id ?? '');
+		if (isNaN(albumId)) {
+			error = 'Invalid album id';
+			loading_state = false;
+			return;
+		}
+
+		try {
+			[album, photos] = await Promise.all([getAlbum(albumId), getAlbumPhotos(albumId)]);
+
+			if (!album) {
+				error = 'Album not found';
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error';
+		} finally {
+			loading_state = false;
+		}
+	});
+
+	onMount(() => {
+		// 设置 Intersection Observer 监听加载更多
+		observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0].isIntersecting && displayedCount < photos.length) {
+					loadMore();
+				}
+			},
+			{
+				root: scrollContainer,
+				rootMargin: '200px',
+				threshold: 0
+			}
+		);
+
+		return () => {
+			if (observer) {
+				observer.disconnect();
+			}
+		};
+	});
+
+	onMount(() => {
+		if (loadMoreTrigger && observer) {
+			observer.observe(loadMoreTrigger);
+		}
+	});
+
+	function loadMore() {
+		if (displayedCount >= photos.length) return;
+		displayedCount = Math.min(displayedCount + BATCH_SIZE, photos.length);
+	}
+
+	function getVisiblePhotos() {
+		return photos.slice(0, displayedCount);
+	}
+</script>
+
+<svelte:head>
+	<title>{album ? `${album.name} - ${albums()}` : loading()}</title>
+</svelte:head>
+
+<div class="container">
+	<header class="header">
+		<a href="/" class="back-link">← {back()}</a>
+		{#if album}
+			<h1>{album.name}</h1>
+			<p class="photo-count">
+				{photo_count({ count: photos.length })}
+			</p>
+		{/if}
+	</header>
+
+	{#if loading_state}
+		<div class="loading">{loading()}</div>
+	{:else if error}
+		<div class="error">{error}</div>
+	{:else if photos.length === 0}
+		<div class="empty">{no_albums()}</div>
+	{:else}
+		<div class="photo-scroll-container" bind:this={scrollContainer}>
+			<div class="photo-grid">
+				{#each getVisiblePhotos() as photo (photo.id)}
+					<a href="/photo/{photo.id}" class="photo-card">
+						<div class="photo-wrapper">
+							{#if photo.mimeType.startsWith('video/')}
+								<div class="video-indicator">🎬</div>
+								<div class="photo-placeholder">
+									<span>{photo.fileName}</span>
+								</div>
+							{:else}
+								<img
+									src={getPhotoFileUrl(photo.id)}
+									alt={photo.fileName}
+									loading="lazy"
+									decoding="async"
+								/>
+							{/if}
+						</div>
+						<p class="photo-name">{photo.fileName}</p>
+					</a>
+				{/each}
+			</div>
+
+			{#if displayedCount < photos.length}
+				<div class="load-more-trigger" bind:this={loadMoreTrigger}>
+					<div class="loading-more">{loading()}</div>
+				</div>
+			{:else}
+				<div class="load-complete">
+					✓ 已加载全部 {photos.length} 张照片
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		max-width: 1400px;
+		margin: 0 auto;
+		padding: 2rem;
+		height: calc(100vh - 4rem);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.header {
+		margin-bottom: 1rem;
+		flex-shrink: 0;
+	}
+
+	.back-link {
+		display: inline-block;
+		margin-bottom: 1rem;
+		color: #3b82f6;
+		text-decoration: none;
+		font-size: 1rem;
+	}
+
+	.back-link:hover {
+		text-decoration: underline;
+	}
+
+	.header h1 {
+		font-size: 2rem;
+		font-weight: 700;
+		color: #1a1a1a;
+		margin: 0 0 0.5rem 0;
+	}
+
+	.photo-count {
+		font-size: 1rem;
+		color: #6b7280;
+		margin: 0;
+	}
+
+	.loading,
+	.empty,
+	.error {
+		text-align: center;
+		padding: 4rem 2rem;
+		color: #666;
+	}
+
+	.error {
+		color: #dc2626;
+	}
+
+	.photo-scroll-container {
+		flex: 1;
+		overflow-y: auto;
+		scroll-behavior: smooth;
+	}
+
+	.photo-scroll-container::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.photo-scroll-container::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 4px;
+	}
+
+	.photo-scroll-container::-webkit-scrollbar-thumb {
+		background: #c1c1c1;
+		border-radius: 4px;
+	}
+
+	.photo-scroll-container::-webkit-scrollbar-thumb:hover {
+		background: #a1a1a1;
+	}
+
+	.photo-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 1rem;
+		padding-bottom: 2rem;
+	}
+
+	.photo-card {
+		display: block;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.photo-wrapper {
+		position: relative;
+		aspect-ratio: 1;
+		background: #f3f4f6;
+		border-radius: 8px;
+		overflow: hidden;
+		margin-bottom: 0.5rem;
+	}
+
+	.photo-wrapper img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s;
+		background: #e5e7eb;
+	}
+
+	.photo-card:hover .photo-wrapper img {
+		transform: scale(1.05);
+	}
+
+	.photo-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #6b7280;
+		font-size: 0.875rem;
+		padding: 1rem;
+		text-align: center;
+	}
+
+	.video-indicator {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: 0.25rem 0.5rem;
+		border-radius: 4px;
+		font-size: 0.875rem;
+		z-index: 1;
+	}
+
+	.photo-name {
+		font-size: 0.875rem;
+		color: #374151;
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.load-more-trigger {
+		text-align: center;
+		padding: 2rem;
+	}
+
+	.loading-more {
+		display: inline-block;
+		color: #6b7280;
+	}
+
+	.load-complete {
+		text-align: center;
+		padding: 2rem;
+		color: #10b981;
+		font-size: 0.875rem;
+	}
+</style>
diff --git a/web/src/routes/photo/[id]/+page.svelte b/web/src/routes/photo/[id]/+page.svelte
new file mode 100644
index 0000000..b8c245e
--- /dev/null
+++ b/web/src/routes/photo/[id]/+page.svelte
@@ -0,0 +1,273 @@
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { getPhoto, getPhotoFileUrl, getAlbumPhotos } from '$lib/api/client';
+	import { m, loading } from '$lib/paraglide/messages';
+
+	/** @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));
+
+	onMount(async () => {
+		const photoId = parseInt(page.params.id ?? '');
+		if (isNaN(photoId)) {
+			error = 'Invalid photo id';
+			loading_state = false;
+			return;
+		}
+
+		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;
+		}
+	});
+
+	function goToPrevious() {
+		if (currentIndex > 0) {
+			const prevPhoto = albumPhotos[currentIndex - 1];
+			history.pushState({}, '', `/photo/${prevPhoto.id}`);
+			photo = albumPhotos[currentIndex - 1];
+			currentIndex--;
+		}
+	}
+
+	function goToNext() {
+		if (currentIndex < albumPhotos.length - 1) {
+			const nextPhoto = albumPhotos[currentIndex + 1];
+			history.pushState({}, '', `/photo/${nextPhoto.id}`);
+			photo = albumPhotos[currentIndex + 1];
+			currentIndex++;
+		}
+	}
+
+	function handleClose() {
+		if (photo) {
+			history.back();
+		}
+	}
+
+	onMount(() => {
+		/** @param {Event} event */
+		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();
+			}
+		}
+
+		const container = /** @type {HTMLElement|null} */ (document.querySelector('.viewer-container'));
+		if (container) {
+			container.addEventListener('keydown', handleKeydown);
+			container.focus();
+		}
+
+		return () => {
+			if (container) {
+				container.removeEventListener('keydown', handleKeydown);
+			}
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>{photo ? photo.fileName : loading()}</title>
+</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-header">
+			<a href="/album/{photo.albumId}" class="back-link">← {m.back()}</a>
+			<span class="photo-index">
+				{currentIndex + 1} / {albumPhotos.length}
+			</span>
+		</div>
+
+		<div class="viewer-content">
+			<button
+				class="nav-button prev"
+				onclick={goToPrevious}
+				disabled={currentIndex === 0}
+				aria-label="Previous photo"
+			>
+				‹
+			</button>
+
+			<div class="image-wrapper">
+				{#if photo.mimeType.startsWith('video/')}
+					<video controls>
+						<source src={getPhotoFileUrl(photo.id)} type={photo.mimeType} />
+					</video>
+				{:else}
+					<img src={getPhotoFileUrl(photo.id)} alt={photo.fileName} />
+				{/if}
+			</div>
+
+			<button
+				class="nav-button next"
+				onclick={goToNext}
+				disabled={currentIndex === albumPhotos.length - 1}
+				aria-label="Next photo"
+			>
+				›
+			</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>
+	{/if}
+</div>
+
+<style>
+	.viewer-container {
+		position: fixed;
+		inset: 0;
+		background: #000;
+		color: white;
+		display: flex;
+		flex-direction: column;
+		z-index: 1000;
+		outline: none;
+	}
+
+	.viewer-container:focus {
+		outline: none;
+	}
+
+	.loading,
+	.error {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		font-size: 1.25rem;
+	}
+
+	.error {
+		color: #ef4444;
+	}
+
+	.viewer-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 1rem 1.5rem;
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.back-link {
+		color: white;
+		text-decoration: none;
+		font-size: 1rem;
+	}
+
+	.back-link:hover {
+		text-decoration: underline;
+	}
+
+	.photo-index {
+		color: #9ca3af;
+		font-size: 0.875rem;
+	}
+
+	.viewer-content {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.image-wrapper {
+		max-width: 100%;
+		max-height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.image-wrapper img,
+	.image-wrapper video {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+	}
+
+	.nav-button {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: rgba(255, 255, 255, 0.1);
+		color: white;
+		border: none;
+		font-size: 3rem;
+		padding: 1rem;
+		cursor: pointer;
+		transition: background 0.2s;
+	}
+
+	.nav-button:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.nav-button:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+
+	.nav-button.prev {
+		left: 1rem;
+	}
+
+	.nav-button.next {
+		right: 1rem;
+	}
+
+	.photo-info {
+		padding: 1rem 1.5rem;
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.photo-info h2 {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0 0 0.5rem 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.photo-info .meta {
+		font-size: 0.875rem;
+		color: #9ca3af;
+		margin: 0;
+	}
+</style>
diff --git a/web/vite.config.js b/web/vite.config.js
index 20f7de4..9bdb625 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -10,6 +10,11 @@ export default defineConfig({
 		devtoolsJson(),
 		paraglideVitePlugin({ project: './project.inlang', outdir: './src/lib/paraglide' })
 	],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:8080'
+		}
+	},
 	test: {
 		expect: { requireAssertions: true },
 		projects: [