添加strm生成

添加strm

web/src/pages/StrmManagePage.tsx

@@ -0,0 +1,551 @@
+/* eslint-disable react-refresh/only-export-components */
+import { useCallback, useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import {
+  Ban,
+  Cloud,
+  Download,
+  FolderPlus,
+  HardDrive,
+  History,
+  Loader2,
+  Pencil,
+  Play,
+  Plus,
+  RefreshCw,
+  Settings,
+  Trash2,
+  Upload,
+} from 'lucide-react'
+
+import { strmAPI } from '../api/strm'
+import { confirmAction } from '../components/confirmAction'
+import type { StrmAccount, StrmSyncPath, StrmSyncRecord } from '../types/strm'
+import { STRM_PROVIDER_LABELS, type StrmProvider } from '../types/strm'
+import { StrmAccountDialog, StrmSettingsDialog, StrmSyncPathDialog } from './StrmDialogs'
+
+type StrmDialogKey = 'account' | 'settings' | 'path' | null
+
+const STATUS_META: Record<string, { label: string; cls: string }> = {
+  idle: { label: '未同步', cls: 'bg-gray-100 text-gray-500' },
+  running: { label: '同步中', cls: 'bg-brand-100 text-brand-600' },
+  ok: { label: '正常', cls: 'bg-emerald-100 text-emerald-600' },
+  error: { label: '失败', cls: 'bg-rose-100 text-rose-600' },
+  canceled: { label: '已取消', cls: 'bg-amber-100 text-amber-600' },
+}
+
+const RECORD_STATUS_META: Record<string, { label: string; cls: string }> = {
+  pending: { label: '排队中', cls: 'bg-gray-100 text-gray-500' },
+  running: { label: '进行中', cls: 'bg-brand-100 text-brand-600' },
+  done: { label: '完成', cls: 'bg-emerald-100 text-emerald-600' },
+  failed: { label: '失败', cls: 'bg-rose-100 text-rose-600' },
+  canceled: { label: '已取消', cls: 'bg-amber-100 text-amber-600' },
+}
+
+const iconButtonCls =
+  'inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1 text-xs font-semibold text-ink-100 transition hover:bg-gray-50'
+
+export function providerIcon(provider: StrmProvider) {
+  switch (provider) {
+    case 'cloud115':
+      return Cloud
+    case 'clouddrive2':
+      return HardDrive
+    case 'openlist':
+      return FolderPlus
+    case 'local':
+      return HardDrive
+  }
+}
+
+export function StrmManagePage() {
+  const [accounts, setAccounts] = useState<StrmAccount[]>([])
+  const [paths, setPaths] = useState<StrmSyncPath[]>([])
+  const [records, setRecords] = useState<StrmSyncRecord[]>([])
+  const [loading, setLoading] = useState(true)
+  const [dialog, setDialog] = useState<StrmDialogKey>(null)
+  const [editingPath, setEditingPath] = useState<StrmSyncPath | null>(null)
+  const [editingAccount, setEditingAccount] = useState<StrmAccount | null>(null)
+  const [actingPath, setActingPath] = useState<string | null>(null)
+
+  const refresh = useCallback(async () => {
+    try {
+      const [accts, pths, recs] = await Promise.all([
+        strmAPI.listAccounts(),
+        strmAPI.listPaths(),
+        strmAPI.listRecords(),
+      ])
+      setAccounts(accts)
+      setPaths(pths)
+      setRecords(recs)
+    } catch {
+      /* 保留旧数据 */
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    refresh().catch(() => undefined)
+  }, [refresh])
+
+  // 有进行中的同步时轮询刷新状态
+  useEffect(() => {
+    if (!paths.some((p) => p.last_sync_status === 'running')) return
+    const timer = setInterval(() => refresh().catch(() => undefined), 4000)
+    return () => clearInterval(timer)
+  }, [paths, refresh])
+
+  const startSync = async (path: StrmSyncPath) => {
+    setActingPath(path.id)
+    try {
+      await strmAPI.startSync(path.id)
+      toast.success(`已开始同步「${path.name}」`)
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    } finally {
+      setActingPath(null)
+    }
+  }
+
+  const cancelSync = async (path: StrmSyncPath) => {
+    try {
+      await strmAPI.cancelSync(path.id)
+      toast.success('已请求取消同步')
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  const deletePath = async (path: StrmSyncPath) => {
+    const ok = await confirmAction({ message: `确定删除同步目录「${path.name}」？本地已生成的 strm 文件不会删除。`, confirmText: '删除' })
+    if (!ok) return
+    try {
+      await strmAPI.deletePath(path.id)
+      toast.success('已删除同步目录')
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  const deleteAccount = async (account: StrmAccount) => {
+    const ok = await confirmAction({ message: `确定删除网盘账号「${account.name}」？`, confirmText: '删除' })
+    if (!ok) return
+    try {
+      await strmAPI.deleteAccount(account.id)
+      toast.success('已删除网盘账号')
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  const testAccount = async (account: StrmAccount) => {
+    try {
+      const updated = await strmAPI.testAccount(account.id)
+      setAccounts((list) => list.map((a) => (a.id === updated.id ? updated : a)))
+      if (updated.last_test_ok) {
+        toast.success(`「${account.name}」连接正常`)
+      } else {
+        toast.error(`「${account.name}」连接失败：${updated.last_test_result}`)
+      }
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sand-300/40 text-ink-100">
+            <Play size={20} />
+          </div>
+          <div>
+            <h1 className="font-display text-3xl font-bold text-ink-600">STRM 管理</h1>
+            <p className="text-sm text-ink-50">
+              网盘目录同步生成 .strm 文件（Emby / Jellyfin 直接刮削播放），元数据经下载 / 上传队列双向同步
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <button type="button" onClick={() => { setEditingAccount(null); setDialog('account') }} className="neon-button">
+            <Plus size={16} />
+            添加网盘账号
+          </button>
+          <button type="button" onClick={() => setDialog('settings')} className="neon-button">
+            <Settings size={16} />
+            STRM 设置
+          </button>
+          <button type="button" onClick={() => { setEditingPath(null); setDialog('path') }} className="neon-button">
+            <FolderPlus size={16} />
+            添加同步目录
+          </button>
+        </div>
+      </header>
+
+      {loading ? (
+        <div className="flex justify-center py-12 text-ink-50">
+          <Loader2 className="animate-spin" />
+        </div>
+      ) : (
+        <>
+          <AccountSection
+            accounts={accounts}
+            onAdd={() => { setEditingAccount(null); setDialog('account') }}
+            onEdit={(account) => { setEditingAccount(account); setDialog('account') }}
+            onDelete={deleteAccount}
+            onTest={testAccount}
+          />
+
+          <SyncPathSection
+            paths={paths}
+            actingPath={actingPath}
+            onAdd={() => { setEditingPath(null); setDialog('path') }}
+            onEdit={(path) => { setEditingPath(path); setDialog('path') }}
+            onDelete={deletePath}
+            onStart={startSync}
+            onCancel={cancelSync}
+          />
+
+          <RecordSection records={records} />
+        </>
+      )}
+
+      {dialog === 'account' && (
+        <StrmAccountDialog
+          existing={editingAccount}
+          onClose={() => setDialog(null)}
+          onSaved={() => { setDialog(null); refresh().catch(() => undefined) }}
+        />
+      )}
+      {dialog === 'settings' && <StrmSettingsDialog onClose={() => setDialog(null)} />}
+      {dialog === 'path' && (
+        <StrmSyncPathDialog
+          accounts={accounts}
+          existing={editingPath}
+          onClose={() => setDialog(null)}
+          onSaved={() => { setDialog(null); refresh().catch(() => undefined) }}
+        />
+      )}
+    </div>
+  )
+}
+
+// ─── 网盘账号 ────────────────────────────────────────────────────────────────
+
+function AccountSection({
+  accounts,
+  onAdd,
+  onEdit,
+  onDelete,
+  onTest,
+}: {
+  accounts: StrmAccount[]
+  onAdd: () => void
+  onEdit: (account: StrmAccount) => void
+  onDelete: (account: StrmAccount) => void
+  onTest: (account: StrmAccount) => void
+}) {
+  return (
+    <section className="glass-panel space-y-3 p-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Cloud size={18} className="text-brand-500" />
+          <h2 className="font-display text-lg font-semibold text-ink-600">网盘账号</h2>
+        </div>
+        <button type="button" onClick={onAdd} className="text-sm font-semibold text-brand-500 hover:text-brand-600">
+          + 新建
+        </button>
+      </div>
+      {accounts.length === 0 ? (
+        <p className="rounded-xl bg-gray-50 px-4 py-6 text-center text-sm text-sand-500">
+          还没有网盘账号，点击「添加网盘账号」创建（115 网盘支持二维码登录）
+        </p>
+      ) : (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {accounts.map((account) => {
+            const Icon = providerIcon(account.provider)
+            return (
+              <div key={account.id} className="rounded-2xl border border-gray-100 bg-white p-4 shadow-sm">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2.5">
+                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-50 text-brand-500">
+                      <Icon size={18} />
+                    </div>
+                    <div>
+                      <p className="font-semibold text-ink-600">{account.name}</p>
+                      <p className="text-xs text-sand-500">{account.provider_label}</p>
+                    </div>
+                  </div>
+                  <span
+                    className={
+                      'rounded-full px-2 py-0.5 text-[11px] font-semibold ' +
+                      (account.enabled ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-200 text-gray-500')
+                    }
+                  >
+                    {account.enabled ? '已启用' : '已停用'}
+                  </span>
+                </div>
+                <div className="mt-3 space-y-1 text-xs text-ink-50">
+                  <p>
+                    凭据：
+                    {account.has_credential ? (
+                      <span className="text-emerald-600">已配置</span>
+                    ) : (
+                      <span className="text-gray-400">未配置</span>
+                    )}
+                  </p>
+                  {account.last_test_at && (
+                    <p className={account.last_test_ok ? 'text-emerald-600' : 'text-rose-500'}>
+                      最近测试：{account.last_test_ok ? '正常' : account.last_test_result}
+                    </p>
+                  )}
+                </div>
+                <div className="mt-3 flex items-center gap-1.5">
+                  <button type="button" onClick={() => onTest(account)} className={`${iconButtonCls}`}>
+                    <RefreshCw size={14} />
+                    测试
+                  </button>
+                  <button type="button" onClick={() => onEdit(account)} className={`${iconButtonCls}`}>
+                    <Pencil size={14} />
+                    编辑
+                  </button>
+                  <button type="button" onClick={() => onDelete(account)} className={`${iconButtonCls} text-rose-500`}>
+                    <Trash2 size={14} />
+                    删除
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ─── STRM 同步目录（参考 QMediaSync 的 STRM 同步目录页） ─────────────────────
+
+function SyncPathSection({
+  paths,
+  actingPath,
+  onAdd,
+  onEdit,
+  onDelete,
+  onStart,
+  onCancel,
+}: {
+  paths: StrmSyncPath[]
+  actingPath: string | null
+  onAdd: () => void
+  onEdit: (path: StrmSyncPath) => void
+  onDelete: (path: StrmSyncPath) => void
+  onStart: (path: StrmSyncPath) => void
+  onCancel: (path: StrmSyncPath) => void
+}) {
+  return (
+    <section className="glass-panel space-y-3 p-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <FolderPlus size={18} className="text-brand-500" />
+          <h2 className="font-display text-lg font-semibold text-ink-600">STRM 同步目录</h2>
+          <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] text-sand-500">{paths.length}</span>
+        </div>
+        <button type="button" onClick={onAdd} className="text-sm font-semibold text-brand-500 hover:text-brand-600">
+          + 新建
+        </button>
+      </div>
+      {paths.length === 0 ? (
+        <p className="rounded-xl bg-gray-50 px-4 py-6 text-center text-sm text-sand-500">
+          还没有同步目录。添加后系统会把网盘 / 本地目录里的视频生成 .strm 文件到本地输出目录
+        </p>
+      ) : (
+        <div className="space-y-2.5">
+          {paths.map((path) => {
+            const status = STATUS_META[path.last_sync_status] ?? STATUS_META.idle
+            const running = path.last_sync_status === 'running'
+            const PathIcon = providerIcon(path.provider)
+            return (
+              <div key={path.id} className="rounded-2xl border border-gray-100 bg-white p-4 shadow-sm">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <div className="flex min-w-0 items-center gap-2.5">
+                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-500">
+                      <PathIcon size={18} />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <p className="font-semibold text-ink-600">
+                          {path.name}
+                          {!path.enabled && <span className="ml-2 text-xs text-gray-400">（已停用）</span>}
+                        </p>
+                        <span className={'rounded-full px-2 py-0.5 text-[11px] font-semibold ' + status.cls}>
+                          {running && <Loader2 size={10} className="mr-0.5 inline animate-spin" />}
+                          {status.label}
+                        </span>
+                      </div>
+                      <p className="mt-0.5 text-xs text-sand-500">
+                        {STRM_PROVIDER_LABELS[path.provider]}
+                        {path.account_name ? ` · ${path.account_name}` : ''}
+                        {path.enable_cron && path.cron ? ` · 定时 ${path.cron}` : ''}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    {running ? (
+                      <button type="button" onClick={() => onCancel(path)} className={`${iconButtonCls} text-amber-600`}>
+                        <Ban size={14} />
+                        取消
+                      </button>
+                    ) : (
+                      <button
+                        type="button"
+                        disabled={actingPath === path.id || !path.enabled}
+                        onClick={() => onStart(path)}
+                        className={`${iconButtonCls} disabled:opacity-40`}
+                      >
+                        {actingPath === path.id ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
+                        立即同步
+                      </button>
+                    )}
+                    <button type="button" onClick={() => onEdit(path)} className={`${iconButtonCls}`}>
+                      <Pencil size={14} />
+                      编辑
+                    </button>
+                    <button type="button" onClick={() => onDelete(path)} className={`${iconButtonCls} text-rose-500`}>
+                      <Trash2 size={14} />
+                      删除
+                    </button>
+                  </div>
+                </div>
+                <div className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-ink-50">
+                  <span className="max-w-[45%] truncate">{path.remote_path || '（根目录）'}</span>
+                  <span className="text-sand-500">→</span>
+                  <span className="max-w-[45%] truncate">{path.local_path}</span>
+                </div>
+                {path.last_sync_message && (
+                  <p className="mt-1.5 text-xs text-sand-500">{path.last_sync_message}</p>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ─── 同步记录 ────────────────────────────────────────────────────────────────
+
+function RecordSection({ records }: { records: StrmSyncRecord[] }) {
+  return (
+    <section className="glass-panel space-y-3 p-5">
+      <div className="flex items-center gap-2">
+        <History size={18} className="text-brand-500" />
+        <h2 className="font-display text-lg font-semibold text-ink-600">同步记录</h2>
+        <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] text-sand-500">{records.length}</span>
+      </div>
+      {records.length === 0 ? (
+        <p className="rounded-xl bg-gray-50 px-4 py-6 text-center text-sm text-sand-500">还没有同步记录</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-gray-200 text-xs uppercase tracking-wider text-sand-500">
+              <tr>
+                <th className="px-3 py-2">时间</th>
+                <th className="px-3 py-2">状态</th>
+                <th className="px-3 py-2 text-right">扫描文件</th>
+                <th className="px-3 py-2 text-right">新增 strm</th>
+                <th className="px-3 py-2 text-right">下载元数据</th>
+                <th className="px-3 py-2 text-right">清理</th>
+                <th className="px-3 py-2">说明</th>
+              </tr>
+            </thead>
+            <tbody>
+              {records.map((record) => {
+                const meta = RECORD_STATUS_META[record.status] ?? RECORD_STATUS_META.pending
+                return (
+                  <tr key={record.id} className="border-t border-gray-100">
+                    <td className="whitespace-nowrap px-3 py-2 text-xs text-ink-50">
+                      {formatTime(record.started_at ?? record.created_at)}
+                    </td>
+                    <td className="px-3 py-2">
+                      <span className={'rounded-full px-2 py-0.5 text-[11px] font-semibold ' + meta.cls}>
+                        {meta.label}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2 text-right">{record.total}</td>
+                    <td className="px-3 py-2 text-right text-brand-500">{record.new_strm}</td>
+                    <td className="px-3 py-2 text-right">{record.new_meta}</td>
+                    <td className="px-3 py-2 text-right">{record.pruned}</td>
+                    <td className="max-w-[260px] truncate px-3 py-2 text-xs text-sand-500">{record.message}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function formatTime(value?: string | null): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${date.getMonth() + 1}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+export function apiErrorMessage(err: unknown): string {
+  const msg = (err as { response?: { data?: { error?: string } } })?.response?.data?.error
+  return msg ?? '操作失败'
+}
+
+export function formatBytes(size: number): string {
+  if (!size) return '-'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let value = size
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  return `${value.toFixed(value >= 100 ? 0 : 1)} ${units[unit]}`
+}
+
+// 队列概览小组件（下载队列 / 上传队列页顶部统计）
+export function QueueStatPill({ icon: Icon, label, value }: { icon: typeof Download; label: string; value: number }) {
+  return (
+    <div className="flex items-center gap-2 rounded-xl border border-gray-100 bg-white px-3 py-2 shadow-sm">
+      <Icon size={16} className="text-brand-500" />
+      <span className="text-xs text-sand-500">{label}</span>
+      <span className="font-display text-lg font-bold text-ink-600">{value}</span>
+    </div>
+  )
+}
+
+// 队列状态徽章
+export function taskStatusMeta(status: string): { label: string; cls: string } {
+  switch (status) {
+    case 'pending':
+      return { label: '排队中', cls: 'bg-gray-100 text-gray-500' }
+    case 'running':
+      return { label: '进行中', cls: 'bg-brand-100 text-brand-600' }
+    case 'done':
+      return { label: '已完成', cls: 'bg-emerald-100 text-emerald-600' }
+    case 'failed':
+      return { label: '失败', cls: 'bg-rose-100 text-rose-600' }
+    case 'canceled':
+      return { label: '已取消', cls: 'bg-amber-100 text-amber-600' }
+    default:
+      return { label: status, cls: 'bg-gray-100 text-gray-500' }
+  }
+}
+
+// 供下载/上传队列页复用
+export { Upload as UploadIcon }

web/src/pages/StrmQueuePage.tsx

@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { Ban, Download, Loader2, RefreshCw, Trash2, Upload } from 'lucide-react'
+
+import { strmAPI } from '../api/strm'
+import type { StrmQueueSnapshot, StrmTask, StrmTaskStatus } from '../types/strm'
+import { STRM_PROVIDER_LABELS } from '../types/strm'
+import { apiErrorMessage, formatBytes, formatTime, taskStatusMeta } from './StrmManagePage'
+
+const FILTERS: { key: 'all' | StrmTaskStatus; label: string }[] = [
+  { key: 'all', label: '全部' },
+  { key: 'pending', label: '排队中' },
+  { key: 'running', label: '进行中' },
+  { key: 'done', label: '已完成' },
+  { key: 'failed', label: '失败' },
+  { key: 'canceled', label: '已取消' },
+]
+
+const PAGE_SIZE = 50
+
+function StrmQueuePanel({ kind }: { kind: 'download' | 'upload' }) {
+  const [snapshot, setSnapshot] = useState<StrmQueueSnapshot | null>(null)
+  const [filter, setFilter] = useState<'all' | StrmTaskStatus>('all')
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [batchBusy, setBatchBusy] = useState(false)
+
+  const refresh = useCallback(async () => {
+    try {
+      const status = filter === 'all' ? undefined : filter
+      const data =
+        kind === 'download'
+          ? await strmAPI.downloads(status, page, PAGE_SIZE)
+          : await strmAPI.uploads(status, page, PAGE_SIZE)
+      const tp = Math.max(1, Math.ceil((data.total ?? data.tasks.length) / PAGE_SIZE))
+      if (page > tp) {
+        // 当前页超出范围（数据被批量删除），回退到最后一页再刷新
+        setPage(tp)
+        return
+      }
+      setTotalPages(tp)
+      setSnapshot(data)
+    } catch {
+      /* keep last data */
+    } finally {
+      setLoading(false)
+    }
+  }, [kind, filter, page])
+
+  useEffect(() => {
+    refresh().catch(() => undefined)
+    const timer = setInterval(() => refresh().catch(() => undefined), 3000)
+    return () => clearInterval(timer)
+  }, [refresh])
+
+  const cancelTask = async (task: StrmTask) => {
+    try {
+      if (kind === 'download') await strmAPI.cancelDownload(task.id)
+      else await strmAPI.cancelUpload(task.id)
+      toast.success('已取消任务')
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  const retryTask = async (task: StrmTask) => {
+    try {
+      if (kind === 'download') await strmAPI.retryDownload(task.id)
+      else await strmAPI.retryUpload(task.id)
+      toast.success('已重新入队')
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    }
+  }
+
+  // 批量操作：可选确认弹窗，操作中锁定按钮，结束后刷新。
+  const runBatch = async (
+    action: () => Promise<{ deleted?: number; retried?: number; canceled?: number }>,
+    confirmMsg?: string,
+  ) => {
+    if (confirmMsg && !window.confirm(confirmMsg)) return
+    setBatchBusy(true)
+    try {
+      const res = await action()
+      if (res.deleted !== undefined) toast.success(`已清空 ${res.deleted} 条记录`)
+      else if (res.retried !== undefined) toast.success(`已重新入队 ${res.retried} 个任务`)
+      else if (res.canceled !== undefined) toast.success(`已取消 ${res.canceled} 个任务`)
+      await refresh()
+    } catch (err) {
+      toast.error(apiErrorMessage(err))
+    } finally {
+      setBatchBusy(false)
+    }
+  }
+
+  const batchBtn = (title: string, cls: string, onClick: () => void) => (
+    <button
+      type="button"
+      disabled={batchBusy}
+      onClick={onClick}
+      className={
+        'ml-auto inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-xs font-semibold transition disabled:opacity-50 ' + cls
+      }
+    >
+      <Trash2 size={12} />
+      {title}
+    </button>
+  )
+
+  const batchActionByFilter = () => {
+    if (!isDownload) return null
+    if (filter === 'done')
+      return batchBtn(
+        '清空成功记录',
+        'border-gray-200 text-rose-500 hover:bg-rose-50',
+        () => runBatch(() => strmAPI.clearDoneDownloads(), '确定清空所有已完成下载记录？'),
+      )
+    if (filter === 'failed')
+      return batchBtn('批量重试', 'border-gray-200 text-brand-500 hover:bg-brand-50', () =>
+        runBatch(() => strmAPI.retryFailedDownloads(), '确定重新入队所有失败下载任务？'),
+      )
+    if (filter === 'pending')
+      return batchBtn(
+        '批量取消',
+        'border-gray-200 text-amber-600 hover:bg-amber-50',
+        () => runBatch(() => strmAPI.cancelPendingDownloads(), '确定取消所有排队中的下载任务？'),
+      )
+    return null
+  }
+
+  const counts = snapshot?.counts
+  const tasks = snapshot?.tasks.filter((t) => filter === 'all' || t.status === filter) ?? []
+  const isDownload = kind === 'download'
+  const Icon = isDownload ? Download : Upload
+
+  return (
+    <div className="space-y-5">
+      <header className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sand-300/40 text-ink-100">
+          <Icon size={20} />
+        </div>
+        <div>
+          <h1 className="font-display text-3xl font-bold text-ink-600">
+            {isDownload ? '下载队列' : '上传队列'}
+          </h1>
+          <p className="text-sm text-ink-50">
+            {isDownload
+              ? 'STRM 元数据下载情况（远端网盘 → 本地输出目录，3 秒自动刷新）'
+              : 'STRM 元数据上传情况（本地 → 远端网盘，3 秒自动刷新）'}
+          </p>
+        </div>
+        {isDownload && (
+          <button
+            type="button"
+            disabled={batchBusy}
+            onClick={() =>
+              runBatch(() => strmAPI.clearFinishedDownloads(), '确定清空所有失败和成功的下载记录？')
+            }
+            className="inline-flex items-center gap-1.5 rounded-xl border border-rose-200 px-3 py-2 text-sm font-semibold text-rose-500 transition hover:bg-rose-50 disabled:opacity-50"
+          >
+            <Trash2 size={14} />
+            清空失败与完成记录
+          </button>
+        )}
+        <button type="button" onClick={refresh} className="ml-auto inline-flex items-center gap-1.5 rounded-xl border border-gray-200 px-3 py-2 text-sm font-semibold text-ink-100 hover:bg-gray-50">
+          <RefreshCw size={14} />
+          刷新
+        </button>
+      </header>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <StatPill label="排队中" value={counts?.pending ?? 0} cls="text-gray-600" />
+        <StatPill label="进行中" value={counts?.running ?? 0} cls="text-brand-500" />
+        <StatPill label="已完成" value={counts?.done ?? 0} cls="text-emerald-600" />
+        <StatPill label="失败" value={counts?.failed ?? 0} cls="text-rose-500" />
+        <StatPill label="已取消" value={counts?.canceled ?? 0} cls="text-amber-600" />
+      </div>
+
+      <div className="flex gap-1 overflow-x-auto border-b border-gray-200">
+        {FILTERS.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            onClick={() => {
+              setFilter(item.key)
+              setPage(1)
+            }}
+            className={
+              'border-b-2 px-3 py-2 text-sm whitespace-nowrap transition ' +
+              (filter === item.key ? 'border-primary-400 text-brand-500' : 'border-transparent text-ink-50 hover:text-white')
+            }
+          >
+            {item.label}
+          </button>
+        ))}
+        {batchActionByFilter()}
+      </div>
+
+      <div className="glass-panel overflow-hidden">
+        {loading ? (
+          <div className="flex justify-center py-12 text-ink-50">
+            <Loader2 className="animate-spin" />
+          </div>
+        ) : tasks.length === 0 ? (
+          <p className="py-12 text-center text-sm text-sand-500">
+            {filter === 'all' ? (isDownload ? '暂无元数据下载任务' : '暂无元数据上传任务') : '该状态下暂无任务'}
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="border-b border-gray-200 text-xs uppercase tracking-wider text-sand-500">
+                <tr>
+                  <th className="px-4 py-3">文件</th>
+                  <th className="px-4 py-3">提供方</th>
+                  <th className="px-4 py-3">{isDownload ? '本地目标' : '本地来源'}</th>
+                  <th className="px-4 py-3">远端路径</th>
+                  <th className="px-4 py-3 text-right">大小</th>
+                  <th className="px-4 py-3">状态</th>
+                  <th className="px-4 py-3">创建时间</th>
+                  <th className="px-4 py-3 text-right">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {tasks.map((task) => {
+                  const status = taskStatusMeta(task.status)
+                  return (
+                    <tr key={task.id} className="border-t border-gray-200 transition hover:bg-gray-50">
+                      <td className="max-w-[220px] truncate px-4 py-2.5 font-medium text-ink-600">{task.file_name}</td>
+                      <td className="px-4 py-2.5 text-xs">
+                        {STRM_PROVIDER_LABELS[task.provider] ?? task.provider}
+                        {task.retry_count > 0 && (
+                          <span className="ml-1 text-[10px] text-gray-400">重试 {task.retry_count}</span>
+                        )}
+                      </td>
+                      <td className="max-w-[200px] truncate px-4 py-2.5 font-mono text-xs text-ink-50">{task.local_path}</td>
+                      <td className="max-w-[200px] truncate px-4 py-2.5 font-mono text-xs text-ink-50">{task.remote_path}</td>
+                      <td className="px-4 py-2.5 text-right text-xs text-ink-50">{formatBytes(task.size)}</td>
+                      <td className="px-4 py-2.5">
+                        <span className={'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold ' + status.cls}>
+                          {task.status === 'running' && <Loader2 size={10} className="animate-spin" />}
+                          {status.label}
+                        </span>
+                        {task.error && (
+                          <p className="mt-0.5 max-w-[220px] truncate text-[11px] text-rose-500" title={task.error}>
+                            {task.error}
+                          </p>
+                        )}
+                      </td>
+                      <td className="whitespace-nowrap px-4 py-2.5 text-xs text-ink-50">{formatTime(task.created_at)}</td>
+                      <td className="whitespace-nowrap px-4 py-2.5 text-right">
+                        {(task.status === 'pending' || task.status === 'running') && (
+                          <button
+                            type="button"
+                            onClick={() => cancelTask(task)}
+                            className="inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1 text-xs font-semibold text-amber-600 transition hover:bg-amber-50"
+                          >
+                            <Ban size={12} />
+                            取消
+                          </button>
+                        )}
+                        {(task.status === 'failed' || task.status === 'canceled') && (
+                          <button
+                            type="button"
+                            onClick={() => retryTask(task)}
+                            className="ml-1 inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1 text-xs font-semibold text-brand-500 transition hover:bg-brand-50"
+                          >
+                            <RefreshCw size={12} />
+                            重试
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {(snapshot?.total ?? 0) > 0 && (
+          <div className="flex items-center justify-between border-t border-gray-200 px-4 py-3">
+            <span className="text-xs text-ink-50">
+              共 {snapshot?.total ?? 0} 条 · 第 {page} / {totalPages} 页
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                disabled={page <= 1 || loading}
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                className="inline-flex items-center rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-ink-100 transition hover:bg-gray-50 disabled:opacity-40"
+              >
+                上一页
+              </button>
+              <button
+                type="button"
+                disabled={page >= totalPages || loading}
+                onClick={() => setPage((p) => p + 1)}
+                className="inline-flex items-center rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-ink-100 transition hover:bg-gray-50 disabled:opacity-40"
+              >
+                下一页
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function StatPill({ label, value, cls }: { label: string; value: number; cls: string }) {
+  return (
+    <div className="flex items-center gap-2 rounded-xl border border-gray-100 bg-white px-3 py-2 shadow-sm">
+      <span className="text-xs text-sand-500">{label}</span>
+      <span className={'font-display text-lg font-bold ' + cls}>{value}</span>
+    </div>
+  )
+}
+
+export function StrmDownloadQueuePage() {
+  return <StrmQueuePanel kind="download" />
+}
+
+export function StrmUploadQueuePage() {
+  return <StrmQueuePanel kind="upload" />
+}