前端适配照片分页api

web/src/lib/api/client.js

@@ -37,10 +37,21 @@ export async function getAlbum(id) {
 /**
  * Get photos of an album
  * @param {number} albumId
- * @returns {Promise<import('./types').Photo[]>}
+ * @param {Object} [options]
+ * @param {number} [options.page] - 页码（从 1 开始）
+ * @param {number} [options.size] - 每页数量
+ * @returns {Promise<import('./types').Photo[] | { items: import('./types').Photo[], total: number, page: number, size: number }>}
  */
-export async function getAlbumPhotos(albumId) {
+export async function getAlbumPhotos(albumId, options = {}) {
-	return fetchApi(`/album/${albumId}/photo`);
+	const params = new URLSearchParams();
+	if (options.page) params.set('page', String(options.page));
+	if (options.size) params.set('size', String(options.size));
+	
+	const query = params.toString();
+	const endpoint = query
+		? `/album/${albumId}/photo?${query}`
+		: `/album/${albumId}/photo`;
+	return fetchApi(endpoint);
 }
 
 /**

web/src/routes/album/[id]/+page.server.js

@@ -11,8 +11,8 @@ export async function load({ params, fetch, url }) {
 	try {
 		const [album, photos] = await Promise.all([
 			fetchApi(`/album/${albumId}`, fetch),
-			// 如果后端支持分页，传递 page 和 pageSize 参数
+			// 后端使用 size 作为分页参数名
-			fetchApi(`/album/${albumId}/photo?page=${page}&pageSize=${pageSize}`, fetch)
+			fetchApi(`/album/${albumId}/photo?page=${page}&size=${pageSize}`, fetch)
 		]);
 
 		if (!album) {
@@ -25,7 +25,9 @@ export async function load({ params, fetch, url }) {
 		}
 
 		// 检测后端是否返回了分页信息
-		const hasMore = photos?.length === pageSize;
+		const hasMore = photos?.items
+			? (photos.page * photos.size) < photos.total
+			: photos?.length === pageSize;
 		const totalPhotos = photos?.total ?? photos?.length ?? 0;
 
 		return {

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

@@ -105,6 +105,7 @@
 		currentPage++;
 
 		try {
+			// 后端使用 size 作为分页参数名
 			const response = await fetch(
 				`${page.url.pathname}?page=${currentPage}&pageSize=${PAGE_SIZE}`
 			);
@@ -113,11 +114,14 @@
 			if (newData.photos) {
 				const newPhotos = newData.photos.items ?? newData.photos;
 				allPhotos = [...allPhotos, ...newPhotos];
-				hasMore = newPhotos.length === PAGE_SIZE;
+				// 根据后端返回的 total 判断是否还有更多
+				const total = newData.totalPhotos ?? 0;
+				hasMore = (currentPage * PAGE_SIZE) < total;
 				displayedCount += BATCH_SIZE;
 			}
 		} catch (error) {
 			console.error('Failed to load more photos:', error);
+			hasMore = false;
 		} finally {
 			isLoading = false;
 		}