重构核心模块并同步更新项目配置与相关实现

web/src/pages/LibraryMediaSections.tsx

@@ -1,4 +1,4 @@
-import { memo, type ReactNode } from 'react'
+import { memo, useEffect, useRef, type ReactNode } from 'react'
 import { Film } from 'lucide-react'
 
 import { MediaCard } from '../components/MediaCard'
@@ -15,6 +15,9 @@ type LibraryMediaSectionsProps = {
   seriesCards: SeriesCard[]
   selectedSeries: SeriesCard | null
   loading: boolean
+  hasMore: boolean
+  loadingMore: boolean
+  onLoadMore: () => void
   cardActions: (media: Media) => ReactNode
   onSeriesClick: (series: SeriesCard) => void
 }
@@ -25,6 +28,9 @@ export function LibraryMediaSections({
   seriesCards,
   selectedSeries,
   loading,
+  hasMore,
+  loadingMore,
+  onLoadMore,
   cardActions,
   onSeriesClick,
 }: LibraryMediaSectionsProps) {
@@ -60,10 +66,58 @@ export function LibraryMediaSections({
       {isSeries && seriesCards.length === 0 && !loading && (
         <LibraryEmptyState message="该库尚未发现任何剧集，触发一次扫描后再来看看" />
       )}
+
+      <LoadMoreSentinel
+        hasMore={hasMore}
+        loadingMore={loadingMore}
+        onLoadMore={onLoadMore}
+      />
     </>
   )
 }
 
+function LoadMoreSentinel({
+  hasMore,
+  loadingMore,
+  onLoadMore,
+}: {
+  hasMore: boolean
+  loadingMore: boolean
+  onLoadMore: () => void
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element || !hasMore) return
+    const root = document.getElementById('app-main-scroll')
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!loadingMore && entries.some((entry) => entry.isIntersecting)) {
+          onLoadMore()
+        }
+      },
+      { root, rootMargin: '600px 0px', threshold: 0 },
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [hasMore, loadingMore, onLoadMore])
+
+  if (!hasMore) return null
+  return (
+    <div ref={ref} className="flex justify-center py-8">
+      <button
+        type="button"
+        disabled={loadingMore}
+        onClick={onLoadMore}
+        className="rounded-xl border border-[var(--app-border)] bg-[var(--app-panel)] px-4 py-2 text-sm font-bold text-[var(--app-subtle)] transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)] disabled:cursor-wait disabled:opacity-60"
+      >
+        {loadingMore ? '加载中…' : '加载更多'}
+      </button>
+    </div>
+  )
+}
+
 // 独立 memo 组件：onClick 闭包在其内部创建，props 均为稳定引用，
 // 父级重渲染不会穿透到每张剧集卡片。
 const SeriesCardItem = memo(function SeriesCardItem({
@@ -99,4 +153,4 @@ function LibraryEmptyState({ message }: { message: string }) {
       <p className="text-ink-50">{message}</p>
     </div>
   )
-}
+}