split admin library panel

web/src/pages/AdminLibraryPanel.tsx

@@ -1,322 +1,36 @@
-import { FormEvent, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
-import { Plus, RefreshCw, Save, Trash2 } from 'lucide-react'
-
-import { libraryAPI, type LibraryRootInput } from '../api/library'
-import type { Library, LibraryRoot } from '../types'
-import { confirmAction } from '../components/confirmAction'
-
-type RootDraft = LibraryRootInput
-
-const emptyRootDraft = (): RootDraft => ({ name: '', path: '', enabled: true })
+import { AdminLibraryCreateForm, AdminLibraryTable } from './AdminLibraryPanelSections'
+import { useAdminLibraryPanel } from './useAdminLibraryPanel'
 
 export function AdminLibraryPanel() {
-  const [libs, setLibs] = useState<Library[]>([])
-  const [name, setName] = useState('')
-  const [roots, setRoots] = useState<RootDraft[]>([emptyRootDraft()])
-  const [type, setType] = useState('movie')
-  const [newRootByLibrary, setNewRootByLibrary] = useState<Record<string, RootDraft>>({})
-  const [rootDrafts, setRootDrafts] = useState<Record<string, RootDraft>>({})
-
-  const refresh = () => libraryAPI.list({ includeHidden: true }).then(setLibs)
-  useEffect(() => {
-    refresh().catch(() => undefined)
-  }, [])
-
-  const handleCreate = async (e: FormEvent) => {
-    e.preventDefault()
-    try {
-      const payload = roots
-        .map((root, index) => ({ ...root, path: root.path.trim(), name: root.name?.trim(), sort_order: index }))
-        .filter((root) => root.path)
-      if (payload.length === 0) {
-        toast.error('请至少填写一个路径')
-        return
-      }
-      await libraryAPI.createWithRoots(name, type, payload)
-      toast.success('媒体库已创建')
-      setName('')
-      setRoots([emptyRootDraft()])
-      await refresh()
-    } catch (err: unknown) {
-      const msg =
-        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
-        '创建失败'
-      toast.error(msg)
-    }
-  }
-
-  const updateCreateRoot = (index: number, patch: Partial<RootDraft>) => {
-    setRoots((prev) => prev.map((root, i) => (i === index ? { ...root, ...patch } : root)))
-  }
-
-  const addCreateRoot = () => setRoots((prev) => [...prev, emptyRootDraft()])
-
-  const removeCreateRoot = (index: number) => {
-    setRoots((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)))
-  }
-
-  const newRootDraft = (libraryID: string) => newRootByLibrary[libraryID] ?? emptyRootDraft()
-
-  const setNewRootDraft = (libraryID: string, patch: Partial<RootDraft>) => {
-    setNewRootByLibrary((prev) => ({ ...prev, [libraryID]: { ...newRootDraft(libraryID), ...patch } }))
-  }
-
-  const addLibraryRoot = async (libraryID: string) => {
-    const draft = newRootDraft(libraryID)
-    if (!draft.path?.trim()) {
-      toast.error('请填写路径')
-      return
-    }
-    await libraryAPI.addRoot(libraryID, { ...draft, path: draft.path.trim(), name: draft.name?.trim() })
-    setNewRootByLibrary((prev) => ({ ...prev, [libraryID]: emptyRootDraft() }))
-    toast.success('路径已添加')
-    await refresh()
-  }
-
-  const rootDraftKey = (libraryID: string, rootID: string) => `${libraryID}:${rootID}`
-
-  const editableRootDraft = (libraryID: string, root: LibraryRoot): RootDraft => {
-    const key = rootDraftKey(libraryID, root.id)
-    return rootDrafts[key] ?? {
-      name: root.name ?? '',
-      path: root.path,
-      enabled: root.enabled,
-      sort_order: root.sort_order,
-    }
-  }
-
-  const setEditableRootDraft = (libraryID: string, root: LibraryRoot, patch: Partial<RootDraft>) => {
-    const key = rootDraftKey(libraryID, root.id)
-    setRootDrafts((prev) => ({ ...prev, [key]: { ...editableRootDraft(libraryID, root), ...patch } }))
-  }
-
-  const saveLibraryRoot = async (libraryID: string, root: LibraryRoot) => {
-    const draft = editableRootDraft(libraryID, root)
-    if (!draft.path?.trim()) {
-      toast.error('请填写路径')
-      return
-    }
-    await libraryAPI.updateRoot(libraryID, root.id, {
-      name: draft.name?.trim(),
-      path: draft.path.trim(),
-      enabled: draft.enabled,
-      sort_order: draft.sort_order,
-    })
-    setRootDrafts((prev) => {
-      const next = { ...prev }
-      delete next[rootDraftKey(libraryID, root.id)]
-      return next
-    })
-    toast.success('路径已保存')
-    await refresh()
-  }
+  const { libs, createForm, newRoots, editableRoots, rootActions, libraryActions } = useAdminLibraryPanel()
 
   return (
     <div className="space-y-6">
-      <form onSubmit={handleCreate} className="glass-panel grid gap-3 md:grid-cols-4">
-        <input
-          required
-          className="input-base"
-          placeholder="名称"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <select className="input-base" value={type} onChange={(e) => setType(e.target.value)}>
-          <option value="movie">电影</option>
-          <option value="tv">电视剧</option>
-          <option value="variety">综艺</option>
-          <option value="anime">动漫</option>
-          <option value="music">音乐</option>
-        </select>
-        <div className="md:col-span-4 space-y-2">
-          {roots.map((root, index) => (
-            <div key={index} className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]">
-              <input
-                className="input-base"
-                placeholder="路径名称"
-                value={root.name ?? ''}
-                onChange={(e) => updateCreateRoot(index, { name: e.target.value })}
-              />
-              <input
-                required={index === 0}
-                className="input-base"
-                placeholder="容器路径，如 /media/电视剧/国产剧"
-                value={root.path}
-                onChange={(e) => updateCreateRoot(index, { path: e.target.value })}
-              />
-              <button
-                type="button"
-                className="rounded-lg border border-red-400/40 px-3 text-red-400 hover:bg-red-400/10 disabled:opacity-40"
-                disabled={roots.length <= 1}
-                onClick={() => removeCreateRoot(index)}
-                title="删除路径"
-              >
-                <Trash2 size={16} />
-              </button>
-            </div>
-          ))}
-          <button type="button" className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm" onClick={addCreateRoot}>
-            <Plus size={16} /> 添加路径
-          </button>
-        </div>
-        <p className="md:col-span-4 -mt-2 text-xs text-sand-500">
-          Docker 部署时请优先填写容器内路径，例如 /media/电影、/media/电视剧/国产剧；如果误填 NAS
-          宿主机路径，系统会尝试按 compose 挂载自动转换。
-        </p>
-        <button type="submit" className="neon-button md:col-span-4">
-          新建媒体库
-        </button>
-      </form>
-
-      <div className="glass-panel">
-        <table className="w-full text-left text-sm">
-          <thead className="text-xs uppercase tracking-wider text-sand-500">
-            <tr>
-              <th className="py-2">名称</th>
-              <th>路径</th>
-              <th>类型</th>
-              <th className="text-right">操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            {libs.map((l) => (
-              <tr key={l.id} className="border-t border-gray-200">
-                <td className="py-2 text-ink-600">{l.name}</td>
-                <td className="text-ink-100">
-                  <div className="space-y-2">
-                    {(l.roots?.length
-                      ? l.roots
-                      : [{
-                          id: '',
-                          library_id: l.id,
-                          path: l.path,
-                          enabled: l.enabled,
-                          name: '',
-                          sort_order: 0,
-                          created_at: l.created_at,
-                          updated_at: l.updated_at,
-                        }]).map((root) => (
-                      <div key={root.id || root.path} className="rounded border border-gray-200/70 p-2">
-                        <div className="grid gap-2 xl:grid-cols-[minmax(120px,0.8fr)_minmax(220px,2fr)_auto]">
-                          {root.id ? (
-                            <>
-                              <input
-                                className="input-base"
-                                placeholder="路径名称"
-                                value={editableRootDraft(l.id, root).name ?? ''}
-                                onChange={(e) => setEditableRootDraft(l.id, root, { name: e.target.value })}
-                              />
-                              <input
-                                className="input-base"
-                                placeholder="真实路径"
-                                value={editableRootDraft(l.id, root).path}
-                                onChange={(e) => setEditableRootDraft(l.id, root, { path: e.target.value })}
-                              />
-                            </>
-                          ) : (
-                            <span className="min-w-0 break-all xl:col-span-2">{root.name ? `${root.name}：${root.path}` : root.path}</span>
-                          )}
-                          <div className="flex flex-wrap items-center gap-2">
-                            {root.id && (
-                              <button
-                                className="rounded border border-primary-400/40 p-1 text-brand-500 hover:bg-primary-400/10"
-                                title="保存路径"
-                                onClick={() => saveLibraryRoot(l.id, root)}
-                              >
-                                <Save size={14} />
-                              </button>
-                            )}
-                          <button
-                            className="rounded border border-primary-400/40 p-1 text-brand-500 hover:bg-primary-400/10"
-                            title="扫描路径"
-                            onClick={async () => {
-                              if (!root.id) return
-                              await libraryAPI.scanRoot(l.id, root.id)
-                              toast.success('路径扫描已加入后台任务')
-                            }}
-                          >
-                            <RefreshCw size={14} />
-                          </button>
-                          {root.id && (
-                            <button
-                              className="rounded border border-gray-300 px-2 py-1 text-xs"
-                              onClick={async () => {
-                                const enabled = !editableRootDraft(l.id, root).enabled
-                                setEditableRootDraft(l.id, root, { enabled })
-                                await libraryAPI.updateRoot(l.id, root.id, { enabled })
-                                await refresh()
-                              }}
-                            >
-                              {editableRootDraft(l.id, root).enabled ? '启用' : '禁用'}
-                            </button>
-                          )}
-                          {root.id && (
-                            <button
-                              className="rounded border border-red-400/40 p-1 text-red-400 hover:bg-red-400/10"
-                              title="删除路径"
-                              onClick={async () => {
-                                if (!(await confirmAction({ title: '删除媒体库路径', message: `确定删除「${root.path}」?`, confirmText: '删除' }))) return
-                                await libraryAPI.removeRoot(l.id, root.id)
-                                toast.success('路径已删除')
-                                await refresh()
-                              }}
-                            >
-                              <Trash2 size={14} />
-                            </button>
-                          )}
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                    <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]">
-                      <input
-                        className="input-base"
-                        placeholder="路径名称"
-                        value={newRootDraft(l.id).name ?? ''}
-                        onChange={(e) => setNewRootDraft(l.id, { name: e.target.value })}
-                      />
-                      <input
-                        className="input-base"
-                        placeholder="新增路径"
-                        value={newRootDraft(l.id).path}
-                        onChange={(e) => setNewRootDraft(l.id, { path: e.target.value })}
-                      />
-                      <button className="rounded-lg border px-3 py-2 text-sm" onClick={() => addLibraryRoot(l.id)}>
-                        <Plus size={14} />
-                      </button>
-                    </div>
-                  </div>
-                </td>
-                <td className="text-ink-100">{l.type}</td>
-                <td className="space-x-2 py-2 text-right">
-                  <button
-                    className="rounded-lg border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
-                    onClick={async () => {
-                      const r = await libraryAPI.scan(l.id)
-                      if (r.queued) toast.success('云盘扫描已加入后台队列，会自动入库')
-                      else toast.success(`扫描完成，新增 ${r.added}，更新 ${r.updated ?? 0}`)
-                    }}
-                  >
-                    扫描
-                  </button>
-                  <button
-                    className="rounded-lg border border-red-400/40 px-2 py-1 text-xs text-red-400 hover:bg-red-400/10"
-                    onClick={async () => {
-                      if (!(await confirmAction({ title: '删除媒体库', message: `确定删除「${l.name}」?`, confirmText: '删除' }))) return
-                      await libraryAPI.remove(l.id)
-                      toast.success('已删除')
-                      await refresh()
-                    }}
-                  >
-                    <Trash2 size={12} />
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <AdminLibraryCreateForm
+        name={createForm.name}
+        type={createForm.type}
+        roots={createForm.roots}
+        onNameChange={createForm.setName}
+        onTypeChange={createForm.setType}
+        onRootChange={createForm.updateRoot}
+        onAddRoot={createForm.addRoot}
+        onRemoveRoot={createForm.removeRoot}
+        onSubmit={createForm.handleCreate}
+      />
+      <AdminLibraryTable
+        libs={libs}
+        newRootDraft={newRoots.newRootDraft}
+        editableRootDraft={editableRoots.editableRootDraft}
+        onNewRootChange={newRoots.setNewRootDraft}
+        onEditableRootChange={editableRoots.setEditableRootDraft}
+        onAddRoot={newRoots.addLibraryRoot}
+        onSaveRoot={rootActions.saveLibraryRoot}
+        onScanRoot={rootActions.scanLibraryRoot}
+        onToggleRoot={rootActions.toggleLibraryRoot}
+        onRemoveRoot={rootActions.removeLibraryRoot}
+        onScanLibrary={libraryActions.scanLibrary}
+        onRemoveLibrary={libraryActions.removeLibrary}
+      />
     </div>
   )
 }

web/src/pages/AdminLibraryPanelSections.tsx

@@ -0,0 +1,295 @@
+import { FormEvent } from 'react'
+import { Plus, RefreshCw, Save, Trash2 } from 'lucide-react'
+
+import type { Library, LibraryRoot } from '../types'
+import type { RootDraft } from './adminLibraryPanelModel'
+import { fallbackLibraryRoot } from './adminLibraryPanelModel'
+
+type CreateFormProps = {
+  name: string
+  type: string
+  roots: RootDraft[]
+  onNameChange: (value: string) => void
+  onTypeChange: (value: string) => void
+  onRootChange: (index: number, patch: Partial<RootDraft>) => void
+  onAddRoot: () => void
+  onRemoveRoot: (index: number) => void
+  onSubmit: (e: FormEvent) => void
+}
+
+export function AdminLibraryCreateForm({
+  name,
+  type,
+  roots,
+  onNameChange,
+  onTypeChange,
+  onRootChange,
+  onAddRoot,
+  onRemoveRoot,
+  onSubmit,
+}: CreateFormProps) {
+  return (
+    <form onSubmit={onSubmit} className="glass-panel grid gap-3 md:grid-cols-4">
+      <input
+        required
+        className="input-base"
+        placeholder="名称"
+        value={name}
+        onChange={(e) => onNameChange(e.target.value)}
+      />
+      <select className="input-base" value={type} onChange={(e) => onTypeChange(e.target.value)}>
+        <option value="movie">电影</option>
+        <option value="tv">电视剧</option>
+        <option value="variety">综艺</option>
+        <option value="anime">动漫</option>
+        <option value="music">音乐</option>
+      </select>
+      <div className="md:col-span-4 space-y-2">
+        {roots.map((root, index) => (
+          <CreateRootRow
+            key={index}
+            root={root}
+            index={index}
+            canRemove={roots.length > 1}
+            onChange={onRootChange}
+            onRemove={onRemoveRoot}
+          />
+        ))}
+        <button type="button" className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm" onClick={onAddRoot}>
+          <Plus size={16} /> 添加路径
+        </button>
+      </div>
+      <p className="md:col-span-4 -mt-2 text-xs text-sand-500">
+        Docker 部署时请优先填写容器内路径，例如 /media/电影、/media/电视剧/国产剧；如果误填 NAS
+        宿主机路径，系统会尝试按 compose 挂载自动转换。
+      </p>
+      <button type="submit" className="neon-button md:col-span-4">
+        新建媒体库
+      </button>
+    </form>
+  )
+}
+
+type CreateRootRowProps = {
+  root: RootDraft
+  index: number
+  canRemove: boolean
+  onChange: (index: number, patch: Partial<RootDraft>) => void
+  onRemove: (index: number) => void
+}
+
+function CreateRootRow({ root, index, canRemove, onChange, onRemove }: CreateRootRowProps) {
+  return (
+    <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]">
+      <input
+        className="input-base"
+        placeholder="路径名称"
+        value={root.name ?? ''}
+        onChange={(e) => onChange(index, { name: e.target.value })}
+      />
+      <input
+        required={index === 0}
+        className="input-base"
+        placeholder="容器路径，如 /media/电视剧/国产剧"
+        value={root.path}
+        onChange={(e) => onChange(index, { path: e.target.value })}
+      />
+      <button
+        type="button"
+        className="rounded-lg border border-red-400/40 px-3 text-red-400 hover:bg-red-400/10 disabled:opacity-40"
+        disabled={!canRemove}
+        onClick={() => onRemove(index)}
+        title="删除路径"
+      >
+        <Trash2 size={16} />
+      </button>
+    </div>
+  )
+}
+
+type LibraryTableProps = {
+  libs: Library[]
+  newRootDraft: (libraryID: string) => RootDraft
+  editableRootDraft: (libraryID: string, root: LibraryRoot) => RootDraft
+  onNewRootChange: (libraryID: string, patch: Partial<RootDraft>) => void
+  onEditableRootChange: (libraryID: string, root: LibraryRoot, patch: Partial<RootDraft>) => void
+  onAddRoot: (libraryID: string) => void
+  onSaveRoot: (libraryID: string, root: LibraryRoot) => void
+  onScanRoot: (libraryID: string, root: LibraryRoot) => void
+  onToggleRoot: (libraryID: string, root: LibraryRoot) => void
+  onRemoveRoot: (library: Library, root: LibraryRoot) => void
+  onScanLibrary: (library: Library) => void
+  onRemoveLibrary: (library: Library) => void
+}
+
+export function AdminLibraryTable({ libs, ...actions }: LibraryTableProps) {
+  return (
+    <div className="glass-panel">
+      <table className="w-full text-left text-sm">
+        <thead className="text-xs uppercase tracking-wider text-sand-500">
+          <tr>
+            <th className="py-2">名称</th>
+            <th>路径</th>
+            <th>类型</th>
+            <th className="text-right">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {libs.map((library) => (
+            <LibraryTableRow key={library.id} library={library} {...actions} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+type LibraryTableRowProps = Omit<LibraryTableProps, 'libs'> & {
+  library: Library
+}
+
+function LibraryTableRow({ library, ...actions }: LibraryTableRowProps) {
+  return (
+    <tr className="border-t border-gray-200">
+      <td className="py-2 text-ink-600">{library.name}</td>
+      <td className="text-ink-100">
+        <LibraryRootsCell library={library} {...actions} />
+      </td>
+      <td className="text-ink-100">{library.type}</td>
+      <td className="space-x-2 py-2 text-right">
+        <LibraryActionsCell library={library} {...actions} />
+      </td>
+    </tr>
+  )
+}
+
+function LibraryRootsCell({ library, ...actions }: LibraryTableRowProps) {
+  const roots = library.roots?.length ? library.roots : [fallbackLibraryRoot(library)]
+  return (
+    <div className="space-y-2">
+      {roots.map((root) => (
+        <ExistingRootEditor key={root.id || root.path} library={library} root={root} {...actions} />
+      ))}
+      <AddRootRow library={library} {...actions} />
+    </div>
+  )
+}
+
+type RootEditorProps = Omit<LibraryTableRowProps, 'library'> & {
+  library: Library
+  root: LibraryRoot
+}
+
+function ExistingRootEditor({ library, root, ...actions }: RootEditorProps) {
+  const draft = actions.editableRootDraft(library.id, root)
+  return (
+    <div className="rounded border border-gray-200/70 p-2">
+      <div className="grid gap-2 xl:grid-cols-[minmax(120px,0.8fr)_minmax(220px,2fr)_auto]">
+        {root.id ? (
+          <EditableRootFields library={library} root={root} draft={draft} {...actions} />
+        ) : (
+          <span className="min-w-0 break-all xl:col-span-2">{root.name ? `${root.name}：${root.path}` : root.path}</span>
+        )}
+        <RootActionButtons library={library} root={root} draft={draft} {...actions} />
+      </div>
+    </div>
+  )
+}
+
+function EditableRootFields({ library, root, draft, onEditableRootChange }: RootEditorProps & { draft: RootDraft }) {
+  return (
+    <>
+      <input
+        className="input-base"
+        placeholder="路径名称"
+        value={draft.name ?? ''}
+        onChange={(e) => onEditableRootChange(library.id, root, { name: e.target.value })}
+      />
+      <input
+        className="input-base"
+        placeholder="真实路径"
+        value={draft.path}
+        onChange={(e) => onEditableRootChange(library.id, root, { path: e.target.value })}
+      />
+    </>
+  )
+}
+
+function RootActionButtons({ library, root, draft, ...actions }: RootEditorProps & { draft: RootDraft }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {root.id && (
+        <button
+          className="rounded border border-primary-400/40 p-1 text-brand-500 hover:bg-primary-400/10"
+          title="保存路径"
+          onClick={() => actions.onSaveRoot(library.id, root)}
+        >
+          <Save size={14} />
+        </button>
+      )}
+      <button
+        className="rounded border border-primary-400/40 p-1 text-brand-500 hover:bg-primary-400/10"
+        title="扫描路径"
+        onClick={() => actions.onScanRoot(library.id, root)}
+      >
+        <RefreshCw size={14} />
+      </button>
+      {root.id && (
+        <button className="rounded border border-gray-300 px-2 py-1 text-xs" onClick={() => actions.onToggleRoot(library.id, root)}>
+          {draft.enabled ? '启用' : '禁用'}
+        </button>
+      )}
+      {root.id && (
+        <button
+          className="rounded border border-red-400/40 p-1 text-red-400 hover:bg-red-400/10"
+          title="删除路径"
+          onClick={() => actions.onRemoveRoot(library, root)}
+        >
+          <Trash2 size={14} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+function AddRootRow({ library, ...actions }: LibraryTableRowProps) {
+  const draft = actions.newRootDraft(library.id)
+  return (
+    <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]">
+      <input
+        className="input-base"
+        placeholder="路径名称"
+        value={draft.name ?? ''}
+        onChange={(e) => actions.onNewRootChange(library.id, { name: e.target.value })}
+      />
+      <input
+        className="input-base"
+        placeholder="新增路径"
+        value={draft.path}
+        onChange={(e) => actions.onNewRootChange(library.id, { path: e.target.value })}
+      />
+      <button className="rounded-lg border px-3 py-2 text-sm" onClick={() => actions.onAddRoot(library.id)}>
+        <Plus size={14} />
+      </button>
+    </div>
+  )
+}
+
+function LibraryActionsCell({ library, onScanLibrary, onRemoveLibrary }: LibraryTableRowProps) {
+  return (
+    <>
+      <button
+        className="rounded-lg border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
+        onClick={() => onScanLibrary(library)}
+      >
+        扫描
+      </button>
+      <button
+        className="rounded-lg border border-red-400/40 px-2 py-1 text-xs text-red-400 hover:bg-red-400/10"
+        onClick={() => onRemoveLibrary(library)}
+      >
+        <Trash2 size={12} />
+      </button>
+    </>
+  )
+}

web/src/pages/adminLibraryPanelModel.ts

@@ -0,0 +1,36 @@
+import type { Library, LibraryRoot } from '../types'
+import type { LibraryRootInput } from '../api/library'
+
+export type RootDraft = LibraryRootInput
+
+export const emptyRootDraft = (): RootDraft => ({ name: '', path: '', enabled: true })
+
+export const rootDraftKey = (libraryID: string, rootID: string) => `${libraryID}:${rootID}`
+
+export function createRootPayload(roots: RootDraft[]) {
+  return roots
+    .map((root, index) => ({
+      ...root,
+      path: root.path.trim(),
+      name: root.name?.trim(),
+      sort_order: index,
+    }))
+    .filter((root) => root.path)
+}
+
+export function fallbackLibraryRoot(library: Library): LibraryRoot {
+  return {
+    id: '',
+    library_id: library.id,
+    path: library.path,
+    enabled: library.enabled,
+    name: '',
+    sort_order: 0,
+    created_at: library.created_at,
+    updated_at: library.updated_at,
+  }
+}
+
+export function apiErrorMessage(err: unknown, fallback: string) {
+  return (err as { response?: { data?: { error?: string } } })?.response?.data?.error ?? fallback
+}

web/src/pages/useAdminLibraryPanel.ts

@@ -0,0 +1,181 @@
+import { FormEvent, useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+
+import { libraryAPI } from '../api/library'
+import type { Library, LibraryRoot } from '../types'
+import { confirmAction } from '../components/confirmAction'
+import { apiErrorMessage, createRootPayload, emptyRootDraft, rootDraftKey, type RootDraft } from './adminLibraryPanelModel'
+
+export function useAdminLibraryPanel() {
+  const { libs, refresh } = useAdminLibraryList()
+  const createForm = useCreateLibraryForm(refresh)
+  const newRoots = useNewLibraryRootDrafts(refresh)
+  const editableRoots = useEditableRootDrafts()
+  const rootActions = useEditableLibraryRootActions(refresh, editableRoots)
+  const libraryActions = useLibraryActions(refresh)
+
+  return { libs, createForm, newRoots, editableRoots, rootActions, libraryActions }
+}
+
+function useAdminLibraryList() {
+  const [libs, setLibs] = useState<Library[]>([])
+  const refresh = () => libraryAPI.list({ includeHidden: true }).then(setLibs)
+
+  useEffect(() => {
+    refresh().catch(() => undefined)
+  }, [])
+
+  return { libs, refresh }
+}
+
+function useCreateLibraryForm(refresh: () => Promise<void>) {
+  const [name, setName] = useState('')
+  const [roots, setRoots] = useState<RootDraft[]>([emptyRootDraft()])
+  const [type, setType] = useState('movie')
+
+  const handleCreate = async (e: FormEvent) => {
+    e.preventDefault()
+    try {
+      const payload = createRootPayload(roots)
+      if (payload.length === 0) {
+        toast.error('请至少填写一个路径')
+        return
+      }
+      await libraryAPI.createWithRoots(name, type, payload)
+      toast.success('媒体库已创建')
+      setName('')
+      setRoots([emptyRootDraft()])
+      await refresh()
+    } catch (err: unknown) {
+      toast.error(apiErrorMessage(err, '创建失败'))
+    }
+  }
+
+  const updateRoot = (index: number, patch: Partial<RootDraft>) => {
+    setRoots((prev) => prev.map((root, i) => (i === index ? { ...root, ...patch } : root)))
+  }
+
+  return {
+    name,
+    type,
+    roots,
+    setName,
+    setType,
+    updateRoot,
+    addRoot: () => setRoots((prev) => [...prev, emptyRootDraft()]),
+    removeRoot: (index: number) => setRoots((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index))),
+    handleCreate,
+  }
+}
+
+function useNewLibraryRootDrafts(refresh: () => Promise<void>) {
+  const [newRootByLibrary, setNewRootByLibrary] = useState<Record<string, RootDraft>>({})
+  const newRootDraft = (libraryID: string) => newRootByLibrary[libraryID] ?? emptyRootDraft()
+
+  const setNewRootDraft = (libraryID: string, patch: Partial<RootDraft>) => {
+    setNewRootByLibrary((prev) => ({ ...prev, [libraryID]: { ...newRootDraft(libraryID), ...patch } }))
+  }
+
+  const addLibraryRoot = async (libraryID: string) => {
+    const draft = newRootDraft(libraryID)
+    if (!draft.path?.trim()) {
+      toast.error('请填写路径')
+      return
+    }
+    await libraryAPI.addRoot(libraryID, { ...draft, path: draft.path.trim(), name: draft.name?.trim() })
+    setNewRootByLibrary((prev) => ({ ...prev, [libraryID]: emptyRootDraft() }))
+    toast.success('路径已添加')
+    await refresh()
+  }
+
+  return { newRootDraft, setNewRootDraft, addLibraryRoot }
+}
+
+function useEditableRootDrafts() {
+  const [rootDrafts, setRootDrafts] = useState<Record<string, RootDraft>>({})
+
+  const editableRootDraft = (libraryID: string, root: LibraryRoot): RootDraft => {
+    const key = rootDraftKey(libraryID, root.id)
+    return rootDrafts[key] ?? {
+      name: root.name ?? '',
+      path: root.path,
+      enabled: root.enabled,
+      sort_order: root.sort_order,
+    }
+  }
+
+  const setEditableRootDraft = (libraryID: string, root: LibraryRoot, patch: Partial<RootDraft>) => {
+    const key = rootDraftKey(libraryID, root.id)
+    setRootDrafts((prev) => ({ ...prev, [key]: { ...editableRootDraft(libraryID, root), ...patch } }))
+  }
+
+  const clearEditableRootDraft = (libraryID: string, rootID: string) => {
+    setRootDrafts((prev) => {
+      const next = { ...prev }
+      delete next[rootDraftKey(libraryID, rootID)]
+      return next
+    })
+  }
+
+  return { editableRootDraft, setEditableRootDraft, clearEditableRootDraft }
+}
+
+type EditableRootDrafts = ReturnType<typeof useEditableRootDrafts>
+
+function useEditableLibraryRootActions(refresh: () => Promise<void>, drafts: EditableRootDrafts) {
+  const saveLibraryRoot = async (libraryID: string, root: LibraryRoot) => {
+    const draft = drafts.editableRootDraft(libraryID, root)
+    if (!draft.path?.trim()) {
+      toast.error('请填写路径')
+      return
+    }
+    await libraryAPI.updateRoot(libraryID, root.id, {
+      name: draft.name?.trim(),
+      path: draft.path.trim(),
+      enabled: draft.enabled,
+      sort_order: draft.sort_order,
+    })
+    drafts.clearEditableRootDraft(libraryID, root.id)
+    toast.success('路径已保存')
+    await refresh()
+  }
+
+  const scanLibraryRoot = async (libraryID: string, root: LibraryRoot) => {
+    if (!root.id) return
+    await libraryAPI.scanRoot(libraryID, root.id)
+    toast.success('路径扫描已加入后台任务')
+  }
+
+  const toggleLibraryRoot = async (libraryID: string, root: LibraryRoot) => {
+    const enabled = !drafts.editableRootDraft(libraryID, root).enabled
+    drafts.setEditableRootDraft(libraryID, root, { enabled })
+    await libraryAPI.updateRoot(libraryID, root.id, { enabled })
+    await refresh()
+  }
+
+  const removeLibraryRoot = async (library: Library, root: LibraryRoot) => {
+    if (!(await confirmAction({ title: '删除媒体库路径', message: `确定删除「${root.path}」?`, confirmText: '删除' }))) return
+    await libraryAPI.removeRoot(library.id, root.id)
+    toast.success('路径已删除')
+    await refresh()
+  }
+
+  return { saveLibraryRoot, scanLibraryRoot, toggleLibraryRoot, removeLibraryRoot }
+}
+
+function useLibraryActions(refresh: () => Promise<void>) {
+  const scanLibrary = async (library: Library) => {
+    const result = await libraryAPI.scan(library.id)
+    if (result.queued) toast.success('云盘扫描已加入后台队列，会自动入库')
+    else toast.success(`扫描完成，新增 ${result.added}，更新 ${result.updated ?? 0}`)
+  }
+
+  const removeLibrary = async (library: Library) => {
+    if (!(await confirmAction({ title: '删除媒体库', message: `确定删除「${library.name}」?`, confirmText: '删除' }))) return
+    await libraryAPI.remove(library.id)
+    toast.success('已删除')
+    await refresh()
+  }
+
+  return { scanLibrary, removeLibrary }
+}