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>
   )
 }