feat(life): add infinite scroll pagination to feed

Implement cursor-based pagination in backend API Add IntersectionObserver to frontend for automatic loading on scroll
2026-05-01 23:29:05 +08:00
parent 71b7e838ed
commit c03d4271e1
6 changed files with 240 additions and 27 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -377,7 +377,8 @@ Life Post 可配置：
 - 每条 Life Post 默认只展示评论入口与评论数量；评论列表、回复和评论输入默认折叠，用户点击后展开。
 - 已注册并完成邮箱验证的用户可以对每条 Life Post 选择一个 Reaction；普通点击默认设置 `like`，再次点击 `like` 会取消，当前为其他 Reaction 时普通点击会替换为 `like`。
 - Life Reaction 的其他类型通过右键 / context menu 打开 Popup 选择；再次选择当前 Reaction 会取消，选择其他 Reaction 会替换原 Reaction。
- 当前没有图片上传、转发、分页、置顶或单独审核流程。
+- 信息流分页加载，初始展示最新一页，滚动到底部自动加载更多。
+- 当前没有图片上传、转发、置顶或单独审核流程。
 - Life Post 是用户生成内容，正文按作者输入展示，不进入 `entity_translations`。

 API 暴露边界：
@@ -385,6 +386,7 @@ API 暴露边界：
 - Life Post 作者信息只返回 `id` 和 `displayName`。
 - Life Comment 作者信息只返回 `id` 和 `displayName`。
 - Life Reaction 对外只返回按类型汇总的数量和当前用户自己的 Reaction，不返回其他用户的 Reaction 明细。
+- Life Post 列表 API 返回分页结果：`items`、`nextCursor`、`hasMore`；`cursor` 是不透明分页令牌。
 - API 不返回邮箱、token/hash、内部调试字段或不必要的审计 payload。
 - 非作者不能编辑或删除其他用户的 Life Post。
 - 非作者不能删除其他用户的 Life Comment。
@@ -426,7 +428,7 @@ API 暴露边界：
 - `GET /api/items/:id`
 - `GET /api/recipes`
 - `GET /api/recipes/:id`
- `GET /api/life-posts`
+- `GET /api/life-posts`：支持 `cursor` / `limit` 分页读取。

 认证 API：

--- a/backend/src/queries.ts
+++ b/backend/src/queries.ts
@@ -1,5 +1,6 @@
 import { parseIdList, parseMatchMode, sqlForRelationFilter } from './filter.ts';
 import { pool, query, queryOne } from './db.ts';
+import { Buffer } from 'node:buffer';
 import type { PoolClient } from 'pg';

 type QueryValue = string | string[] | undefined;
@@ -134,17 +135,29 @@ type LifePostRow = {
  id: number;
  body: string;
  createdAt: Date;
+  createdAtCursor: string;
  updatedAt: Date;
  author: { id: number; displayName: string } | null;
  updatedBy: { id: number; displayName: string } | null;
 };

-type LifePost = LifePostRow & {
+type LifePost = Omit<LifePostRow, 'createdAtCursor'> & {
  comments: LifeComment[];
  reactionCounts: LifeReactionCounts;
  myReaction: LifeReactionType | null;
 };

+type LifePostCursor = {
+  createdAt: string;
+  id: number;
+};
+
+type LifePostsPage = {
+  items: LifePost[];
+  nextCursor: string | null;
+  hasMore: boolean;
+};
+
 type HabitatPayload = {
  name: string;
  translations: TranslationInput;
@@ -215,6 +228,8 @@ const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
 const weathers = ['晴天', '阴天', '雨天'];
 const defaultLocale = 'en';
 const localePattern = /^[a-z]{2}(-[A-Z]{2})?$/;
+const defaultLifePostLimit = 20;
+const maxLifePostLimit = 50;
 const lifeReactionTypes = ['like', 'helpful', 'fun', 'thanks'] as const;
 const pokemonStatLabels: Array<{ key: keyof PokemonStats; label: string }> = [
  { key: 'hp', label: 'HP' },
@@ -1255,6 +1270,7 @@ function lifePostProjection(): string {
      lp.id,
      lp.body,
      lp.created_at AS "createdAt",
+      lp.created_at::text AS "createdAtCursor",
      lp.updated_at AS "updatedAt",
      CASE
        WHEN created_user.id IS NULL THEN NULL
@@ -1270,6 +1286,63 @@ function lifePostProjection(): string {
  `;
 }

+function cleanLifePostLimit(value: QueryValue): number {
+  const rawLimit = asString(value);
+  if (rawLimit === undefined || rawLimit === '') {
+    return defaultLifePostLimit;
+  }
+
+  const limit = Number(rawLimit);
+  return Number.isInteger(limit) && limit > 0 ? Math.min(limit, maxLifePostLimit) : defaultLifePostLimit;
+}
+
+function decodeLifePostCursor(value: QueryValue): LifePostCursor | null {
+  const rawCursor = asString(value);
+  if (!rawCursor) {
+    return null;
+  }
+
+  try {
+    const cursor = JSON.parse(Buffer.from(rawCursor, 'base64url').toString('utf8')) as Partial<LifePostCursor>;
+    const createdAt = typeof cursor.createdAt === 'string' ? cursor.createdAt : '';
+    const id = Number(cursor.id);
+
+    if (!createdAt || Number.isNaN(new Date(createdAt).getTime()) || !Number.isInteger(id) || id <= 0) {
+      throw validationError('Cursor is invalid');
+    }
+
+    return { createdAt, id };
+  } catch (error) {
+    if (error instanceof Error && 'statusCode' in error) {
+      throw error;
+    }
+    throw validationError('Cursor is invalid');
+  }
+}
+
+function encodeLifePostCursor(post: LifePostRow): string {
+  return Buffer.from(JSON.stringify({ createdAt: post.createdAtCursor, id: post.id }), 'utf8').toString('base64url');
+}
+
+function hydrateLifePost(
+  post: LifePostRow,
+  commentsByPost: Map<number, LifeComment[]>,
+  countsByPost: Map<number, LifeReactionCounts>,
+  myReactionsByPost: Map<number, LifeReactionType>
+): LifePost {
+  return {
+    id: post.id,
+    body: post.body,
+    createdAt: post.createdAt,
+    updatedAt: post.updatedAt,
+    author: post.author,
+    updatedBy: post.updatedBy,
+    comments: commentsByPost.get(post.id) ?? [],
+    reactionCounts: countsByPost.get(post.id) ?? emptyLifeReactionCounts(),
+    myReaction: myReactionsByPost.get(post.id) ?? null
+  };
+}
+
 function lifeCommentProjection(whereClause: string): string {
  return `
    SELECT
@@ -1406,22 +1479,41 @@ async function getLifeCommentById(id: number): Promise<LifeComment | null> {
  return row ? { ...row, replies: [] } : null;
 }

-export async function listLifePosts(userId: number | null = null): Promise<LifePost[]> {
-  const posts = await query<LifePostRow>(`
+export async function listLifePosts(paramsQuery: QueryParams = {}, userId: number | null = null): Promise<LifePostsPage> {
+  const cursor = decodeLifePostCursor(paramsQuery.cursor);
+  const limit = cleanLifePostLimit(paramsQuery.limit);
+  const params: unknown[] = [];
+  let cursorClause = '';
+
+  if (cursor) {
+    params.push(cursor.createdAt, cursor.id);
+    cursorClause = `
+      WHERE (lp.created_at, lp.id) < ($${params.length - 1}::timestamptz, $${params.length}::integer)
+    `;
+  }
+
+  params.push(limit + 1);
+  const rows = await query<LifePostRow>(
+    `
      ${lifePostProjection()}
+      ${cursorClause}
      ORDER BY lp.created_at DESC, lp.id DESC
-  `);
+      LIMIT $${params.length}
+    `,
+    params
+  );
+  const hasMore = rows.length > limit;
+  const posts = hasMore ? rows.slice(0, limit) : rows;

  const postIds = posts.map((post) => post.id);
  const commentsByPost = await lifeCommentsForPosts(postIds);
  const { countsByPost, myReactionsByPost } = await lifeReactionsForPosts(postIds, userId);

-  return posts.map((post) => ({
-    ...post,
-    comments: commentsByPost.get(post.id) ?? [],
-    reactionCounts: countsByPost.get(post.id) ?? emptyLifeReactionCounts(),
-    myReaction: myReactionsByPost.get(post.id) ?? null
-  }));
+  return {
+    items: posts.map((post) => hydrateLifePost(post, commentsByPost, countsByPost, myReactionsByPost)),
+    nextCursor: hasMore && posts.length > 0 ? encodeLifePostCursor(posts[posts.length - 1]) : null,
+    hasMore
+  };
 }

 async function getLifePostById(id: number, userId: number | null = null): Promise<LifePost | null> {
@@ -1439,12 +1531,7 @@ async function getLifePostById(id: number, userId: number | null = null): Promis

  const commentsByPost = await lifeCommentsForPosts([post.id]);
  const { countsByPost, myReactionsByPost } = await lifeReactionsForPosts([post.id], userId);
-  return {
-    ...post,
-    comments: commentsByPost.get(post.id) ?? [],
-    reactionCounts: countsByPost.get(post.id) ?? emptyLifeReactionCounts(),
-    myReaction: myReactionsByPost.get(post.id) ?? null
-  };
+  return hydrateLifePost(post, commentsByPost, countsByPost, myReactionsByPost);
 }

 export async function createLifePost(payload: Record<string, unknown>, userId: number) {
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -195,7 +195,7 @@ app.get('/api/daily-checklist', async (request) => listDailyChecklistItems(reque

 app.get('/api/life-posts', async (request) => {
  const user = await optionalUser(request);
-  return listLifePosts(user?.id ?? null);
+  return listLifePosts(request.query as Record<string, string | string[] | undefined>, user?.id ?? null);
 });

 app.post('/api/life-posts', async (request, reply) => {
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -188,6 +188,17 @@ export interface LifePost {
  myReaction: LifeReactionType | null;
 }

+export interface LifePostsPage {
+  items: LifePost[];
+  nextCursor: string | null;
+  hasMore: boolean;
+}
+
+export interface LifePostsParams {
+  cursor?: string | null;
+  limit?: number;
+}
+
 export interface LifeComment {
  id: number;
  postId: number;
@@ -452,7 +463,10 @@ export const api = {
  logout: () => postEmpty('/api/auth/logout'),
  options: () => getJson<Options>('/api/options'),
  dailyChecklist: () => getJson<DailyChecklistItem[]>('/api/daily-checklist'),
-  lifePosts: () => getJson<LifePost[]>('/api/life-posts'),
+  lifePosts: (params: LifePostsParams = {}) =>
+    getJson<LifePostsPage>(
+      `/api/life-posts${buildQuery({ cursor: params.cursor ?? undefined, limit: params.limit })}`
+    ),
  createLifePost: (payload: LifePostPayload) => sendJson<LifePost>('/api/life-posts', 'POST', payload),
  updateLifePost: (id: string | number, payload: LifePostPayload) =>
    sendJson<LifePost>(`/api/life-posts/${id}`, 'PUT', payload),
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1219,6 +1219,10 @@ button:disabled,
  gap: 14px;
 }

+.life-feed__sentinel {
+  min-height: 1px;
+}
+
 .life-form__counter {
  justify-self: end;
 }
--- a/frontend/src/views/LifeView.vue
+++ b/frontend/src/views/LifeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
@@ -33,6 +33,7 @@ const { locale, t } = useI18n();
 const posts = ref<LifePost[]>([]);
 const currentUser = ref<AuthUser | null>(null);
 const loading = ref(true);
+const loadingMore = ref(false);
 const authReady = ref(false);
 const busy = ref(false);
 const body = ref('');
@@ -49,8 +50,16 @@ const reactionPickerPostId = ref<number | null>(null);
 const reactionBusyPostId = ref<number | null>(null);
 const reactionErrors = ref<Record<number, string>>({});
 const bodyInput = ref<HTMLTextAreaElement | null>(null);
+const loadMoreSentinel = ref<HTMLElement | null>(null);
+const lifePostPageSize = 20;
 const skeletonPostCount = 3;
+const loadingMoreSkeletonCount = 2;
 let removeAuthListener: (() => void) | null = null;
+let feedObserver: IntersectionObserver | null = null;
+let postsRequestId = 0;
+const nextCursor = ref<string | null>(null);
+const hasMorePosts = ref(false);
+const loadMorePaused = ref(false);

 const reactionOptions = [
  { type: 'like', icon: iconReactionLike, labelKey: 'pages.life.reactionLike' },
@@ -88,15 +97,66 @@ async function loadCurrentUser() {
 }

 async function loadPosts() {
+  const requestId = ++postsRequestId;
  loading.value = true;
  loadError.value = '';
+  nextCursor.value = null;
+  hasMorePosts.value = false;
+  loadMorePaused.value = false;
+
+  try {
+    const page = await api.lifePosts({ limit: lifePostPageSize });
+    if (requestId !== postsRequestId) {
+      return;
+    }
+    posts.value = page.items;
+    nextCursor.value = page.nextCursor;
+    hasMorePosts.value = page.hasMore;
+  } catch (error) {
+    if (requestId === postsRequestId) {
+      loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
+    }
+  } finally {
+    if (requestId === postsRequestId) {
+      loading.value = false;
+    }
+  }
+}
+
+async function loadMorePosts() {
+  if (loading.value || loadingMore.value || loadMorePaused.value || !hasMorePosts.value) {
+    return;
+  }
+
+  const cursor = nextCursor.value;
+  if (!cursor) {
+    hasMorePosts.value = false;
+    return;
+  }
+
+  const requestId = postsRequestId;
+  loadingMore.value = true;
+  loadError.value = '';

  try {
-    posts.value = await api.lifePosts();
+    const page = await api.lifePosts({ cursor, limit: lifePostPageSize });
+    if (requestId !== postsRequestId) {
+      return;
+    }
+
+    const existingIds = new Set(posts.value.map((post) => post.id));
+    posts.value = [...posts.value, ...page.items.filter((post) => !existingIds.has(post.id))];
+    nextCursor.value = page.nextCursor;
+    hasMorePosts.value = page.hasMore;
  } catch (error) {
+    if (requestId === postsRequestId) {
      loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
+      loadMorePaused.value = true;
+    }
  } finally {
-    loading.value = false;
+    if (requestId === postsRequestId) {
+      loadingMore.value = false;
+    }
  }
 }

@@ -434,6 +494,36 @@ function authorInitial(post: LifePost) {
  return name.slice(0, 1).toUpperCase();
 }

+function disconnectFeedObserver() {
+  feedObserver?.disconnect();
+  feedObserver = null;
+}
+
+function observeLoadMore() {
+  disconnectFeedObserver();
+
+  if (loading.value || loadingMore.value || loadMorePaused.value || !hasMorePosts.value || !loadMoreSentinel.value) {
+    return;
+  }
+
+  if (typeof IntersectionObserver === 'undefined') {
+    void loadMorePosts();
+    return;
+  }
+
+  feedObserver = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void loadMorePosts();
+      }
+    },
+    { rootMargin: '360px 0px' }
+  );
+  feedObserver.observe(loadMoreSentinel.value);
+}
+
+watch([loadMoreSentinel, hasMorePosts, loading, loadingMore, loadMorePaused], observeLoadMore, { flush: 'post' });
+
 onMounted(() => {
  void loadCurrentUser();
  void loadPosts();
@@ -444,6 +534,7 @@ onMounted(() => {
 });

 onUnmounted(() => {
+  disconnectFeedObserver();
  removeAuthListener?.();
 });
 </script>
@@ -503,7 +594,7 @@ onUnmounted(() => {
      </div>
    </section>

-    <section class="life-feed" :aria-busy="loading" :aria-label="t('pages.life.kicker')">
+    <section class="life-feed" :aria-busy="loading || loadingMore" :aria-label="t('pages.life.kicker')">
      <div v-if="loading" class="life-feed__list" :aria-label="t('pages.life.loading')">
        <article v-for="index in skeletonPostCount" :key="index" class="life-post life-post--skeleton">
          <div class="life-post__header">
@@ -777,6 +868,21 @@ onUnmounted(() => {
            <p v-else class="life-comments__empty">{{ t('pages.life.noComments') }}</p>
          </section>
        </article>
+
+        <article v-for="index in loadingMore ? loadingMoreSkeletonCount : 0" :key="`life-more-${index}`" class="life-post life-post--skeleton">
+          <div class="life-post__header">
+            <Skeleton variant="box" width="46px" height="46px" />
+            <div class="life-post__byline">
+              <Skeleton width="138px" />
+              <Skeleton width="96px" />
+            </div>
+          </div>
+          <Skeleton width="94%" />
+          <Skeleton width="76%" />
+          <Skeleton width="52%" />
+        </article>
+
+        <div v-if="hasMorePosts" ref="loadMoreSentinel" class="life-feed__sentinel" aria-hidden="true"></div>
      </div>

      <p v-else class="status">{{ t('pages.life.empty') }}</p>