优化

web/src/hooks/useListPositionMemory.test.ts

@@ -0,0 +1,62 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import {
+  forgetListPosition,
+  normalizeListPosition,
+  readListPosition,
+  useRememberedListPosition,
+  writeListPosition,
+} from './useListPositionMemory.ts'
+
+function check(name: string, condition: boolean) {
+  if (!condition) throw new Error(`useListPositionMemory: ${name}`)
+}
+
+check('unknown key falls back', readListPosition('unknown-key', 3) === 3)
+check('missing value uses default fallback', readListPosition('unknown-key') === 1)
+
+writeListPosition('demo', 4)
+check('round trip keeps value', readListPosition('demo') === 4)
+
+writeListPosition('demo', 9)
+check('rewrite keeps latest value', readListPosition('demo') === 9)
+
+forgetListPosition('demo')
+check('forget resets to fallback', readListPosition('demo', 2) === 2)
+
+check('normalize parses numeric string', normalizeListPosition('7', 1) === 7)
+check('normalize floors decimals', normalizeListPosition(3.8, 1) === 3)
+check('normalize rejects zero', normalizeListPosition(0, 2) === 2)
+check('normalize rejects negatives', normalizeListPosition(-5, 2) === 2)
+check('normalize rejects NaN input', normalizeListPosition('abc', 2) === 2)
+check('normalize rejects infinity', normalizeListPosition(Number.POSITIVE_INFINITY, 2) === 2)
+check('normalize clamps to max', normalizeListPosition(99, 1, 8) === 8)
+check('normalize keeps value under max', normalizeListPosition(6, 1, 8) === 6)
+
+// 详情页返回时列表组件会重新挂载：挂载即可读到上次页码，而不是先回第一页。
+function PageProbe({ positionKey, max }: { positionKey: string; max?: number }) {
+  const [position] = useRememberedListPosition(positionKey, 1, max)
+  return createElement('span', null, String(position))
+}
+
+writeListPosition('grid:/libraries', 3)
+check(
+  'remount restores remembered page',
+  renderToStaticMarkup(createElement(PageProbe, { positionKey: 'grid:/libraries' })) === '<span>3</span>',
+)
+check(
+  'remount restores independent key',
+  renderToStaticMarkup(createElement(PageProbe, { positionKey: 'grid:/' })) === '<span>1</span>',
+)
+writeListPosition('shelves', 40)
+check(
+  'remount clamps to restore cap',
+  renderToStaticMarkup(createElement(PageProbe, { positionKey: 'shelves', max: 15 })) === '<span>15</span>',
+)
+check(
+  'live state can grow past restore cap',
+  readListPosition('shelves') === 40,
+)
+
+console.log('useListPositionMemory.test.ts ok')

web/src/hooks/useListPositionMemory.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react'
+
+// 列表分页位置（媒体库入口当前页、媒体库已加载页数、货架解锁数量）需要在
+// 进入详情页再返回后依然生效，所以用 sessionStorage 记录，并在内存里留一份
+// 兜底缓存；同一标签页内刷新也仍然记得。
+const LIST_POSITION_PREFIX = 'mebox.listpos.'
+const positions = new Map<string, number>()
+
+/**
+ * 详情页返回时最多自动补拉的分页数量：滚动到很深的用户重新进入列表时
+ * 依次补拉这些页，剩下的继续由底部哨兵按需加载，避免一次打太多请求。
+ */
+export const MAX_RESTORE_PAGES = 8
+
+/** 把存储里的任意值收敛成 >= 1 的整数分页位置。 */
+export function normalizeListPosition(
+  value: unknown,
+  fallback = 1,
+  max = Number.MAX_SAFE_INTEGER,
+): number {
+  const numeric = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numeric)) return fallback
+  const rounded = Math.floor(numeric)
+  if (rounded < 1) return fallback
+  return Math.min(rounded, max)
+}
+
+export function readListPosition(key: string, fallback = 1, max = Number.MAX_SAFE_INTEGER): number {
+  const cached = positions.get(key)
+  if (cached !== undefined) return Math.min(cached, max)
+  if (typeof window === 'undefined') return fallback
+  try {
+    const raw = window.sessionStorage.getItem(LIST_POSITION_PREFIX + key)
+    if (raw === null) return fallback
+    const value = normalizeListPosition(raw, fallback, max)
+    positions.set(key, value)
+    return value
+  } catch {
+    return fallback
+  }
+}
+
+export function writeListPosition(key: string, value: number): void {
+  const next = normalizeListPosition(value)
+  positions.set(key, next)
+  if (typeof window === 'undefined') return
+  try {
+    window.sessionStorage.setItem(LIST_POSITION_PREFIX + key, String(next))
+  } catch {
+    // 私密模式等场景忽略存储失败，不影响分页。
+  }
+}
+
+export function forgetListPosition(key: string): void {
+  positions.delete(key)
+  if (typeof window === 'undefined') return
+  try {
+    window.sessionStorage.removeItem(LIST_POSITION_PREFIX + key)
+  } catch {
+    // 同上，存储不可用时无需处理。
+  }
+}
+
+/**
+ * 记住列表当前分页位置。key 需要在一份挂载生命周期内保持稳定：路由切换会
+ * 让列表重新挂载，因此每次挂载都能直接读到上次记录的位置（不会先闪回第一页）。
+ */
+export function useRememberedListPosition(
+  key: string,
+  fallback = 1,
+  max = Number.MAX_SAFE_INTEGER,
+): [number, (next: number | ((prev: number) => number)) => void] {
+  const [position, setPosition] = useState(() => readListPosition(key, fallback, max))
+
+  useEffect(() => {
+    writeListPosition(key, position)
+  }, [key, position])
+
+  const remember = useCallback((next: number | ((prev: number) => number)) => {
+    setPosition((prev) => {
+      const value = typeof next === 'function' ? next(prev) : next
+      return normalizeListPosition(value, prev)
+    })
+  }, [])
+
+  return [position, remember]
+}

web/src/pages/HomePageSections.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import {
   ArrowRight,
   ChevronLeft,
@@ -20,6 +20,7 @@ import {
 import { imageURL } from '../api/client'
 import { useInViewOnce } from '../hooks/useInViewOnce'
 import { useLazyPreviewBatch } from '../hooks/useLazyPreviewBatch'
+import { useRememberedListPosition } from '../hooks/useListPositionMemory'
 import { MediaCard } from '../components/MediaCard'
 import type { HistoryItem } from '../api/playback'
 import type { Library, Media } from '../types'
@@ -371,7 +372,13 @@ export function HomeLibrariesSection({
   title?: string
 }) {
   const PAGE_SIZE = 20
-  const [currentPage, setCurrentPage] = useState(1)
+  // 分页位置按路由分别记忆：首页「媒体库」和 /libraries 的「媒体库入口」
+  // 各自保留自己的页码，进入媒体库详情再返回时不会掉回第一页。
+  const { pathname } = useLocation()
+  const [currentPage, setCurrentPage] = useRememberedListPosition(
+    `libraries-grid:${pathname}`,
+    1,
+  )
   const totalPages = Math.max(1, Math.ceil(libraries.length / PAGE_SIZE))
   const effectivePage = Math.min(currentPage, totalPages)
   const queuePreview = useLazyPreviewBatch((ids) => onNeedPreviews?.(ids, 2))

web/src/pages/LibrariesPageSections.tsx

@@ -1,11 +1,16 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import { Library as LibraryIcon, RefreshCw, Sparkles } from 'lucide-react'
 
 import { EpisodeArtworkToggle } from '../components/EpisodeArtworkToggle'
+import { useRememberedListPosition } from '../hooks/useListPositionMemory'
 import { HomeLibrariesSection, HomeLibraryRowSection } from './HomePageSections'
 import type { LibraryPreview } from './librariesPageModel'
 
+// 返回媒体库列表时最多一次性解锁的货架数量：滚动到很深的位置后回来
+// 仍能落到原处，同时避免一次渲染过多货架。上限之外的继续按需解锁。
+const MAX_RESTORED_SHELVES = 15
+
 export function LibrariesHeader({
   previewCount,
   total,
@@ -100,7 +105,12 @@ export function LibrariesContent({
   // 下方媒体库货架继续按需解锁：首屏先展示前 3 个，滚动接近底部再加载 2 个。
   const INITIAL_SHELVES = 3
   const STEP_SHELVES = 2
-  const [visibleCount, setVisibleCount] = useState(INITIAL_SHELVES)
+  // 货架解锁数量同样跨路由记忆：进入媒体库详情再返回不会从头解锁。
+  const [visibleCount, setVisibleCount] = useRememberedListPosition(
+    'libraries-shelves',
+    INITIAL_SHELVES,
+    MAX_RESTORED_SHELVES,
+  )
   const sentinelRef = useRef<HTMLButtonElement | null>(null)
   const userScrolledRef = useRef(false)
 
@@ -109,7 +119,7 @@ export function LibrariesContent({
       if (prev >= previews.length) return prev
       return Math.min(prev + STEP_SHELVES, previews.length)
     })
-  }, [previews.length])
+  }, [previews.length, setVisibleCount])
 
   useEffect(() => {
     const currentTargets = previews.slice(0, visibleCount).map((preview) => preview.library.id)

web/src/pages/useLibraryData.ts

@@ -6,6 +6,7 @@ import type { Library, Media } from '../types'
 import { peekLibrary, resolveLibrary } from '../utils/libraryCache'
 import { groupSeries, isEpisodeLike, type SeriesCard } from '../utils/groupSeries'
 import type { SortField, SortOrder } from '../utils/mediaSort'
+import { MAX_RESTORE_PAGES, readListPosition, writeListPosition } from '../hooks/useListPositionMemory'
 
 export function useLibraryData(
   libraryID: string,
@@ -43,6 +44,84 @@ export function useLibraryData(
   const modeRef = useRef<'media' | 'series'>('media')
   const moreInFlightRef = useRef(false)
 
+  // 分页位置按「媒体库 + 排序」记忆：详情页返回、甚至换完排序再切回来，
+  // 都能回到上次加载到的页数。
+  const positionKey = `library:${libraryID}:${sortField}:${sortOrder}`
+
+  // 拉取并追加下一页。滚动哨兵、按钮和首屏分页恢复共用这一条路径，
+  // 避免两套分页逻辑各自算页码。
+  const appendNextPage = useCallback(async (options?: { remember?: boolean }) => {
+    const lib = libraryRef.current
+    if (!lib || !hasMoreRef.current) return false
+    const seq = requestSeqRef.current
+    const page = nextPageRef.current
+    try {
+      if (modeRef.current === 'series') {
+        const data = await libraryAPI.listSeries(libraryID, page, pageSizeFor(lib), {
+          sort: sortField,
+          order: sortOrder,
+        })
+        if (seq !== requestSeqRef.current) return false
+        const pageItems = data.items ?? []
+        setServerSeriesCards((prev) => [...prev, ...pageItems])
+        loadedCountRef.current += pageItems.length
+        totalRef.current = data.total ?? totalRef.current
+        nextPageRef.current = page + 1
+        hasMoreRef.current = pageItems.length > 0 && loadedCountRef.current < totalRef.current
+      } else {
+        const data = await libraryAPI.listMedia(libraryID, page, pageSizeFor(lib), {
+          sort: sortField,
+          order: sortOrder,
+        })
+        if (seq !== requestSeqRef.current) return false
+        const pageItems = data.items ?? []
+        setItems((prev) => [...prev, ...pageItems])
+        loadedCountRef.current += pageItems.length
+        totalRef.current = data.total ?? totalRef.current
+        nextPageRef.current = page + 1
+        hasMoreRef.current = pageItems.length > 0 && loadedCountRef.current < totalRef.current
+      }
+      setTotal(totalRef.current)
+      setHasMore(hasMoreRef.current)
+      if (options?.remember !== false) writeListPosition(positionKey, page)
+      return true
+    } catch {
+      if (seq === requestSeqRef.current) {
+        toast.error('媒体库加载失败')
+        hasMoreRef.current = false
+        setHasMore(false)
+      }
+      return false
+    }
+  }, [libraryID, positionKey, sortField, sortOrder])
+
+  const loadMore = useCallback(async (options?: { remember?: boolean }) => {
+    if (moreInFlightRef.current || !hasMoreRef.current) return
+    moreInFlightRef.current = true
+    setLoadingMore(true)
+    try {
+      await appendNextPage(options)
+    } finally {
+      moreInFlightRef.current = false
+      setLoadingMore(false)
+    }
+  }, [appendNextPage])
+
+  const loadAll = useCallback(async () => {
+    const seq = requestSeqRef.current
+    setLoadingMore(true)
+    try {
+      while (seq === requestSeqRef.current && hasMoreRef.current) {
+        // 一次拉全量（random 排序前的准备）不代表用户的分页位置，不写入记忆。
+        await loadMore({ remember: false })
+        if (seq !== requestSeqRef.current || !hasMoreRef.current) break
+        await yieldToBrowser()
+      }
+    } finally {
+      if (seq === requestSeqRef.current) setLoadingMore(false)
+    }
+  }, [loadMore])
+
   useEffect(() => {
     if (!libraryID) return
     const seq = ++requestSeqRef.current
@@ -106,6 +185,19 @@ export function useLibraryData(
         setTotal(totalRef.current)
         hasMoreRef.current = loadedCountRef.current < totalRef.current
         setHasMore(hasMoreRef.current)
+
+        // 按记忆的分页位置把后续页补回来：从详情页返回时直接回到上次翻到的
+        // 位置，而不是只剩第一页。超出上限的部分继续交给底部哨兵按需加载。
+        const restoreTarget = Math.min(readListPosition(positionKey, 1), MAX_RESTORE_PAGES)
+        while (
+          !cancelled &&
+          seq === requestSeqRef.current &&
+          hasMoreRef.current &&
+          nextPageRef.current <= restoreTarget
+        ) {
+          const advanced = await appendNextPage()
+          if (!advanced) break
+        }
       } catch {
         if (!cancelled && seq === requestSeqRef.current) {
           toast.error('媒体库加载失败')
@@ -122,7 +214,7 @@ export function useLibraryData(
       cancelled = true
       requestSeqRef.current += 1
     }
-  }, [libraryID, reloadTick, sortField, sortOrder])
+  }, [appendNextPage, libraryID, positionKey, reloadTick, sortField, sortOrder])
 
   useEffect(() => {
     if (!libraryID || !isSeriesLibrary || !selectedSeries) {
@@ -146,65 +238,6 @@ export function useLibraryData(
     return () => { cancelled = true }
   }, [libraryID, isSeriesLibrary, selectedSeries])
 
-  const loadMore = useCallback(async () => {
-    const lib = libraryRef.current
-    if (!lib || moreInFlightRef.current || !hasMoreRef.current) return
-    const seq = requestSeqRef.current
-    moreInFlightRef.current = true
-    setLoadingMore(true)
-    try {
-      const page = nextPageRef.current
-      if (modeRef.current === 'series') {
-        const data = await libraryAPI.listSeries(libraryID, page, pageSizeFor(lib), {
-          sort: sortField,
-          order: sortOrder,
-        })
-        if (seq !== requestSeqRef.current) return
-        const pageItems = data.items ?? []
-        setServerSeriesCards((prev) => [...prev, ...pageItems])
-        loadedCountRef.current += pageItems.length
-        totalRef.current = data.total ?? totalRef.current
-        nextPageRef.current = page + 1
-        hasMoreRef.current = pageItems.length > 0 && loadedCountRef.current < totalRef.current
-      } else {
-        const data = await libraryAPI.listMedia(libraryID, page, pageSizeFor(lib), {
-          sort: sortField,
-          order: sortOrder,
-        })
-        if (seq !== requestSeqRef.current) return
-        const pageItems = data.items ?? []
-        setItems((prev) => [...prev, ...pageItems])
-        loadedCountRef.current += pageItems.length
-        totalRef.current = data.total ?? totalRef.current
-        nextPageRef.current = page + 1
-        hasMoreRef.current = pageItems.length > 0 && loadedCountRef.current < totalRef.current
-      }
-      setTotal(totalRef.current)
-      setHasMore(hasMoreRef.current)
-    } catch {
-      toast.error('媒体库加载失败')
-      hasMoreRef.current = false
-      setHasMore(false)
-    } finally {
-      moreInFlightRef.current = false
-      setLoadingMore(false)
-    }
-  }, [libraryID, sortField, sortOrder])
-
-  const loadAll = useCallback(async () => {
-    const seq = requestSeqRef.current
-    setLoadingMore(true)
-    try {
-      while (seq === requestSeqRef.current && hasMoreRef.current) {
-        await loadMore()
-        if (seq !== requestSeqRef.current || !hasMoreRef.current) break
-        await yieldToBrowser()
-      }
-    } finally {
-      if (seq === requestSeqRef.current) setLoadingMore(false)
-    }
-  }, [loadMore])
-
   const reloadCurrentLibrary = useCallback(() => {
     setReloadTick((tick) => tick + 1)
   }, [])