优化

2026-10-11 15:56:37 +08:00 · 2026-09-03 19:37:29 +08:00
parent d0e29a0d8d
commit e422ecce53
7 changed files with 353 additions and 117 deletions
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

-import { libraryAPI, type LibraryWithPreview } from '../api/library'
+import { libraryAPI } from '../api/library'
 import { historyAPI } from '../api/history'
 import type { HistoryItem } from '../api/playback'
 import type { Library, Media } from '../types'
@@ -30,26 +30,17 @@ export function HomePage() {
  const [historyLoading, setHistoryLoading] = useState(true)
  const { pinnedIds } = usePinnedLibraries()

+  // 1. 媒体库元数据极速加载（不带 preview，毫秒级秒开首屏）
  useEffect(() => {
    let cancelled = false

    libraryAPI
-      .list({ withPreview: true, previewLimit: 10 })
-      .then((rows) => asArray<LibraryWithPreview>(rows))
-      .catch(() => [] as LibraryWithPreview[])
+      .list()
+      .then((rows) => asArray<Library>(rows))
+      .catch(() => [] as Library[])
      .then((libs) => {
        if (cancelled) return
        setLibraries(libs)
-
-        const mapData: Record<string, { cards: SeriesCard[]; items: Media[]; total: number }> = {}
-        for (const lib of libs) {
-          mapData[lib.id] = {
-            cards: lib.cards ?? [],
-            items: [],
-            total: lib.total ?? 0,
-          }
-        }
-        setLibraryData(mapData)
        setLibrariesLoading(false)
      })

@@ -58,6 +49,7 @@ export function HomePage() {
    }
  }, [])

+  // 2. 继续观看记录独立渐进加载
  useEffect(() => {
    let cancelled = false

@@ -85,6 +77,97 @@ export function HomePage() {
    }
  }, [])

+  const sortedLibraries = useMemo(() => sortByPinnedIds(libraries, pinnedIds), [libraries, pinnedIds])
+
+  // 按需拉取卡片预览管理
+  const [fetchedLibIds, setFetchedLibIds] = useState<Set<string>>(new Set())
+  const fetchingRef = useRef<Set<string>>(new Set())
+
+  const fetchPreviews = useCallback(async (ids: string[]) => {
+    const targets = ids.filter((id) => !fetchedLibIds.has(id) && !fetchingRef.current.has(id))
+    if (targets.length === 0) return
+    targets.forEach((id) => fetchingRef.current.add(id))
+
+    try {
+      const rows = await libraryAPI.listPreviews(targets, 10)
+      setLibraryData((prev) => {
+        const next = { ...prev }
+        for (const row of rows) {
+          next[row.id] = {
+            cards: row.cards ?? [],
+            items: [],
+            total: row.total ?? 0,
+          }
+        }
+        return next
+      })
+    } catch {
+      // 容错
+    } finally {
+      setFetchedLibIds((prev) => {
+        const next = new Set(prev)
+        targets.forEach((id) => {
+          next.add(id)
+          fetchingRef.current.delete(id)
+        })
+        return next
+      })
+    }
+  }, [fetchedLibIds])
+
+  // 3. 首屏视口媒体库：优先加载轮播图指定的库和前 3 个库
+  useEffect(() => {
+    if (sortedLibraries.length === 0) return
+    const carouselLibIds = sortedLibraries
+      .filter((l) => l.carousel_enabled === true)
+      .map((l) => l.id)
+    const topRowLibIds = sortedLibraries.slice(0, 3).map((l) => l.id)
+    const initialTargets = Array.from(new Set([...carouselLibIds, ...topRowLibIds]))
+    void fetchPreviews(initialTargets)
+  }, [sortedLibraries, fetchPreviews])
+
+  // 4. 媒体库展示行渐进流式加载：默认先检视前 3 个库，随向下滚动逐步检视后续库
+  const INITIAL_ROWS = 3
+  const STEP_ROWS = 2
+  const [visibleTargetCount, setVisibleTargetCount] = useState(INITIAL_ROWS)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+
+  // 随 visibleTargetCount 增加，按需触发后续库的预览加载
+  useEffect(() => {
+    if (sortedLibraries.length === 0) return
+    const currentTargets = sortedLibraries.slice(0, visibleTargetCount).map((l) => l.id)
+    void fetchPreviews(currentTargets)
+  }, [sortedLibraries, visibleTargetCount, fetchPreviews])
+
+  // 底部哨兵监听（触底解锁后续媒体库行）
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const scrollParent = document.getElementById('app-main-scroll')
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries
+        if (entry?.isIntersecting) {
+          setVisibleTargetCount((prev) => {
+            if (prev >= sortedLibraries.length) return prev
+            return Math.min(prev + STEP_ROWS, sortedLibraries.length)
+          })
+        }
+      },
+      {
+        root: scrollParent,
+        rootMargin: '400px 0px',
+        threshold: 0,
+      },
+    )
+
+    observer.observe(sentinel)
+    return () => {
+      observer.disconnect()
+    }
+  }, [sortedLibraries.length])
+
  // Quick lookup map for libraries
  const libraryMap = useMemo(() => {
    const map = new Map<string, Library>()
@@ -138,51 +221,14 @@ export function HomePage() {
    return candidateMedia.slice(0, 10)
  }, [libraries, libraryData])

-  const sortedLibraries = useMemo(() => sortByPinnedIds(libraries, pinnedIds), [libraries, pinnedIds])
-
-  // 过滤出有内容的媒体库，避免空库空占名额
-  const activeLibraries = useMemo(() => {
-    return sortedLibraries.filter((lib) => (libraryData[lib.id]?.cards?.length ?? 0) > 0)
-  }, [sortedLibraries, libraryData])
-
-  // 媒体库展示行支持向下滑动渐进流式加载：默认先展示前 3 个库，
-  // 随着用户向下滑动接近底部，通过 IntersectionObserver 动态解锁后续媒体库。
-  const INITIAL_ROWS = 3
-  const STEP_ROWS = 2
-  const [visibleRowCount, setVisibleRowCount] = useState(INITIAL_ROWS)
-  const sentinelRef = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    const sentinel = sentinelRef.current
-    if (!sentinel) return
-
-    const scrollParent = document.getElementById('app-main-scroll')
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries
-        if (entry?.isIntersecting) {
-          setVisibleRowCount((prev) => {
-            if (prev >= activeLibraries.length) return prev
-            return Math.min(prev + STEP_ROWS, activeLibraries.length)
-          })
-        }
-      },
-      {
-        root: scrollParent,
-        rootMargin: '400px 0px',
-        threshold: 0,
-      },
-    )
-
-    observer.observe(sentinel)
-    return () => {
-      observer.disconnect()
-    }
-  }, [activeLibraries.length])
-
+  // 当前已拉取并确认有内容的媒体库行
  const visibleLibraries = useMemo(() => {
-    return activeLibraries.slice(0, visibleRowCount)
-  }, [activeLibraries, visibleRowCount])
+    return sortedLibraries
+      .slice(0, visibleTargetCount)
+      .filter((lib) => (libraryData[lib.id]?.cards?.length ?? 0) > 0)
+  }, [sortedLibraries, visibleTargetCount, libraryData])
+
+  const hasMoreLibraries = visibleTargetCount < sortedLibraries.length

  // 库列表还没回来先展示整页 loading；库为空时再等一下播放记录，
  // 以免在"空站点"和"有观看记录"两个终态之间闪空白。
@@ -209,7 +255,7 @@ export function HomePage() {
      {historyLoading && <ContinueWatchingSkeleton />}
      {!historyLoading && history.length > 0 && <ContinueWatchingSection history={history} />}

-      {/* 3. 媒体库卡片区 */}
+      {/* 3. 媒体库卡片区（每页展示 20 个媒体库） */}
      {sortedLibraries.length > 0 && (
        <HomeLibrariesSection
          libraries={sortedLibraries}
@@ -218,7 +264,7 @@ export function HomePage() {
        />
      )}

-      {/* 4. 各媒体库内容展示行（向下滑动渐进流式加载） */}
+      {/* 4. 各媒体库内容展示行（向下滑动渐进流式加载，不受上方20个分页限制） */}
      {visibleLibraries.length > 0 && (
        <div className="space-y-10">
          {visibleLibraries.map((lib) => {
@@ -231,7 +277,7 @@ export function HomePage() {
              />
            )
          })}
-          {visibleRowCount < activeLibraries.length && (
+          {hasMoreLibraries && (
            <div ref={sentinelRef} className="flex h-10 w-full items-center justify-center py-2 opacity-60">
              <div className="flex items-center gap-2 text-xs text-[var(--app-muted)]">
                <div className="h-1.5 w-1.5 animate-ping rounded-full bg-brand-500" />