优化

优化

web/src/pages/LibrariesPage.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { libraryAPI } from '../api/library'
 import { toolsAPI } from '../api/tools'
+import { openManageLibrariesDialog } from '../components/manageLibrariesDialog'
 import {
   LibrariesContent,
   LibrariesEmptyState,
@@ -16,6 +17,32 @@ export function LibrariesPage() {
   const [repairEpisodeArtwork, setRepairEpisodeArtwork] = useState(false)
   const [repairMsg, setRepairMsg] = useState('')
 
+  const loadLibraries = useCallback(async () => {
+    setLoading(true)
+    try {
+      const libs = await libraryAPI.list()
+      const rows = await Promise.all(libs.map(async (library) => {
+        try {
+          if (isSeriesLibraryType(library.type)) {
+            const [seriesPage, mediaPage] = await Promise.all([
+              libraryAPI.listSeries(library.id, 1, 10),
+              libraryAPI.listMedia(library.id, 1, 1, { groupVersions: false }),
+            ])
+            return { library, items: [], total: mediaPage.total, cards: seriesPage.items ?? [] } satisfies LibraryPreview
+          }
+          const page = await libraryAPI.listMedia(library.id, 1, 160, { groupVersions: false })
+          const cards = latestLibraryCards(page.items)
+          return { library, items: page.items, total: page.total, cards } satisfies LibraryPreview
+        } catch {
+          return { library, items: [], total: 0, cards: [] } satisfies LibraryPreview
+        }
+      }))
+      setPreviews(rows)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
   async function handleRepairRescrape() {
     if (repairing) return
     setRepairing(true)
@@ -30,36 +57,14 @@ export function LibrariesPage() {
     }
   }
 
+  const handleManageLibraries = async () => {
+    await openManageLibrariesDialog()
+    await loadLibraries()
+  }
+
   useEffect(() => {
-    let cancelled = false
-    async function load() {
-      setLoading(true)
-      try {
-        const libs = await libraryAPI.list()
-        const rows = await Promise.all(libs.map(async (library) => {
-          try {
-            if (isSeriesLibraryType(library.type)) {
-              const [seriesPage, mediaPage] = await Promise.all([
-                libraryAPI.listSeries(library.id, 1, 10),
-                libraryAPI.listMedia(library.id, 1, 1, { groupVersions: false }),
-              ])
-              return { library, items: [], total: mediaPage.total, cards: seriesPage.items ?? [] } satisfies LibraryPreview
-            }
-            const page = await libraryAPI.listMedia(library.id, 1, 160, { groupVersions: false })
-            const cards = latestLibraryCards(page.items)
-            return { library, items: page.items, total: page.total, cards } satisfies LibraryPreview
-          } catch {
-            return { library, items: [], total: 0, cards: [] } satisfies LibraryPreview
-          }
-        }))
-        if (!cancelled) setPreviews(rows)
-      } finally {
-        if (!cancelled) setLoading(false)
-      }
-    }
-    load()
-    return () => { cancelled = true }
-  }, [])
+    loadLibraries().catch(() => undefined)
+  }, [loadLibraries])
 
   const total = useMemo(() => previews.reduce((sum, preview) => sum + preview.total, 0), [previews])
 
@@ -77,6 +82,7 @@ export function LibrariesPage() {
         repairing={repairing}
         onRepairEpisodeArtworkChange={setRepairEpisodeArtwork}
         onRepairRescrape={handleRepairRescrape}
+        onManageLibraries={handleManageLibraries}
       />
 
       {previews.length === 0 ? (

web/src/pages/LibrariesPageSections.tsx

@@ -6,7 +6,6 @@ import { ArrowRight, Film, FolderOpen, Library as LibraryIcon, Music, PlayCircle
 import { imageURL } from '../api/client'
 import { EpisodeArtworkToggle } from '../components/EpisodeArtworkToggle'
 import { MediaCard } from '../components/MediaCard'
-import { openManageLibrariesDialog } from '../components/manageLibrariesDialog'
 import { seriesCardLink } from '../utils/groupSeries'
 import { libraryDisplayPath } from './libraryDisplayModel'
 import { libraryArtworkItems, type LibraryPreview } from './librariesPageModel'
@@ -37,6 +36,7 @@ export function LibrariesHeader({
   repairing,
   onRepairEpisodeArtworkChange,
   onRepairRescrape,
+  onManageLibraries,
 }: {
   previewCount: number
   total: number
@@ -45,6 +45,7 @@ export function LibrariesHeader({
   repairing: boolean
   onRepairEpisodeArtworkChange: (value: boolean) => void
   onRepairRescrape: () => void
+  onManageLibraries: () => void
 }) {
   return (
     <div className="flex flex-wrap items-end justify-between gap-4">
@@ -72,7 +73,7 @@ export function LibrariesHeader({
           <RefreshCw size={14} className={repairing ? 'animate-spin' : ''} />
           {repairing ? '正在启动…' : '全库修复+重刮'}
         </button>
-        <button type="button" onClick={() => openManageLibrariesDialog()} className="btn-outline">
+        <button type="button" onClick={onManageLibraries} className="btn-outline">
           管理媒体库
         </button>
       </div>