添加strm生成

添加strm

web/src/api/strm.ts

@@ -0,0 +1,163 @@
+import { api } from './client'
+import type {
+  StrmAccount,
+  StrmAccountInput,
+  StrmQueueSnapshot,
+  StrmSettingsMap,
+  StrmSyncPath,
+  StrmSyncPathInput,
+  StrmSyncRecord,
+} from '../types/strm'
+
+export interface StrmRemoteEntry {
+  id: string
+  name: string
+  is_dir: boolean
+  size: number
+  pick_code?: string
+}
+
+export interface Strm115Source {
+  auth_source_type: 'built_in_appid' | 'built_in_relay' | 'third_party_service' | 'custom_appid'
+  auth_provider: string
+  app_id: string
+  app_name: string
+  display_name: string
+  auth_server?: string
+  requires_encryption_key?: boolean
+  deprecated?: boolean
+}
+
+export interface StrmLocalDirList {
+  roots: boolean
+  parent?: string
+  current?: string
+  children: { name: string; path: string }[]
+}
+
+export interface Strm115Sources {
+  built_in: Strm115Source[]
+  relay: Strm115Source[]
+  third_party: Strm115Source[]
+}
+
+export interface Strm115OAuthStartResult {
+  session_id: string
+  mode: 'qrcode' | 'url'
+  auth_url?: string
+  state?: string
+  expires_in?: number
+  qrcode?: {
+    uid: string
+    time: number
+    sign: string
+    qrcode: string
+  }
+}
+
+export interface Strm115OAuthStatus {
+  status: 'waiting' | 'scanned' | 'confirmed' | 'expired'
+  tip: string
+}
+
+export const strmAPI = {
+  // ── 网盘账号 ────────────────────────────────────────────
+  listAccounts: () => api.get<StrmAccount[]>('/admin/strm/accounts').then((r) => r.data),
+
+  createAccount: (payload: StrmAccountInput) =>
+    api.post<StrmAccount>('/admin/strm/accounts', payload).then((r) => r.data),
+
+  updateAccount: (id: string, payload: StrmAccountInput) =>
+    api.put<StrmAccount>(`/admin/strm/accounts/${id}`, payload).then((r) => r.data),
+
+  deleteAccount: (id: string) => api.delete(`/admin/strm/accounts/${id}`).then((r) => r.data),
+
+  testAccount: (id: string) =>
+    api.post<StrmAccount>(`/admin/strm/accounts/${id}/test`).then((r) => r.data),
+
+  listRemoteDir: (accountId: string, dir: string) =>
+    api
+      .get<StrmRemoteEntry[]>(`/admin/strm/accounts/${accountId}/list`, { params: { dir } })
+      .then((r) => r.data),
+
+  list115Sources: () =>
+    api.get<Strm115Sources>('/admin/strm/115/sources').then((r) => r.data),
+
+  start115OAuth: (accountId: string, payload: { auth_source: string; app_id?: string; provider?: string; redirect_url?: string }) =>
+    api.post<Strm115OAuthStartResult>(`/admin/strm/accounts/${accountId}/oauth/start`, payload).then((r) => r.data),
+
+  poll115OAuth: (accountId: string, sessionId: string) =>
+    api.post<Strm115OAuthStatus>(`/admin/strm/accounts/${accountId}/oauth/poll`, { session_id: sessionId }).then((r) => r.data),
+
+  // ── 全局设置 ────────────────────────────────────────────
+  getSettings: () =>
+    api.get<StrmSettingsMap>('/admin/strm/settings').then((r) => r.data),
+
+  updateSettings: (payload: Partial<StrmSettingsMap>) =>
+    api.put('/admin/strm/settings', payload).then((r) => r.data),
+
+  // ── 同步目录 ────────────────────────────────────────────
+  listPaths: () => api.get<StrmSyncPath[]>('/admin/strm/paths').then((r) => r.data),
+
+  createPath: (payload: StrmSyncPathInput) =>
+    api.post<StrmSyncPath>('/admin/strm/paths', payload).then((r) => r.data),
+
+  updatePath: (id: string, payload: StrmSyncPathInput) =>
+    api.put<StrmSyncPath>(`/admin/strm/paths/${id}`, payload).then((r) => r.data),
+
+  deletePath: (id: string) => api.delete(`/admin/strm/paths/${id}`).then((r) => r.data),
+
+  startSync: (id: string) => api.post(`/admin/strm/paths/${id}/sync`).then((r) => r.data),
+
+  cancelSync: (id: string) => api.post(`/admin/strm/paths/${id}/cancel`).then((r) => r.data),
+
+  listRecords: (pathId?: string) =>
+    api
+      .get<StrmSyncRecord[]>('/admin/strm/records', { params: pathId ? { path_id: pathId } : {} })
+      .then((r) => r.data),
+
+  // ── 本地目录浏览（同步目录选择器） ────────────────────────
+  listLocalDirs: (path?: string) =>
+    api
+      .get<StrmLocalDirList>('/admin/strm/local-dirs', { params: path ? { path } : {} })
+      .then((r) => r.data),
+
+  // ── 下载/上传队列 ───────────────────────────────────────
+  downloads: (status?: string, page = 1, pageSize = 50) =>
+    api
+      .get<StrmQueueSnapshot>('/admin/strm/downloads', {
+        params: { status, page, page_size: pageSize },
+      })
+      .then((r) => r.data),
+
+  cancelDownload: (id: string) =>
+    api.post(`/admin/strm/downloads/${id}/cancel`).then((r) => r.data),
+
+  retryDownload: (id: string) =>
+    api.post(`/admin/strm/downloads/${id}/retry`).then((r) => r.data),
+
+  clearDoneDownloads: () =>
+    api.post<{ deleted: number }>('/admin/strm/downloads/clear-done').then((r) => r.data),
+
+  clearFinishedDownloads: () =>
+    api.post<{ deleted: number }>('/admin/strm/downloads/clear-finished').then((r) => r.data),
+
+  retryFailedDownloads: () =>
+    api.post<{ retried: number }>('/admin/strm/downloads/retry-failed').then((r) => r.data),
+
+  cancelPendingDownloads: () =>
+    api.post<{ canceled: number }>('/admin/strm/downloads/cancel-pending').then((r) => r.data),
+
+  uploads: (status?: string, page = 1, pageSize = 50) =>
+    api
+      .get<StrmQueueSnapshot>('/admin/strm/uploads', {
+        params: { status, page, page_size: pageSize },
+      })
+      .then((r) => r.data),
+
+  cancelUpload: (id: string) =>
+    api.post(`/admin/strm/uploads/${id}/cancel`).then((r) => r.data),
+
+  retryUpload: (id: string) =>
+    api.post(`/admin/strm/uploads/${id}/retry`).then((r) => r.data),
+}

web/src/appRoutes.tsx

@@ -26,6 +26,13 @@ const ProfileManagementPage = lazy(() =>
   import('./pages/ProfileManagementPage').then((m) => ({ default: m.ProfileManagementPage })),
 )
 const SettingsPage = lazy(() => import('./pages/SettingsPage').then((m) => ({ default: m.SettingsPage })))
+const StrmManagePage = lazy(() => import('./pages/StrmManagePage').then((m) => ({ default: m.StrmManagePage })))
+const StrmDownloadQueuePage = lazy(() =>
+  import('./pages/StrmQueuePage').then((m) => ({ default: m.StrmDownloadQueuePage })),
+)
+const StrmUploadQueuePage = lazy(() =>
+  import('./pages/StrmQueuePage').then((m) => ({ default: m.StrmUploadQueuePage })),
+)
 
 export type AppRoute = {
   path?: string
@@ -52,5 +59,8 @@ export const appRoutes: AppRoute[] = [
   { path: 'tools', element: <Navigate to="/files" replace /> },
   { path: 'files', element: <FileManagerPage />, adminOnly: true },
   { path: 'settings', element: <SettingsPage />, adminOnly: true },
+  { path: 'strm', element: <StrmManagePage />, adminOnly: true },
+  { path: 'strm/downloads', element: <StrmDownloadQueuePage />, adminOnly: true },
+  { path: 'strm/uploads', element: <StrmUploadQueuePage />, adminOnly: true },
   { path: 'admin', element: <AdminPage />, adminOnly: true },
 ]

web/src/components/layoutNavigation.ts

@@ -1,8 +1,11 @@
 import type { LucideIcon } from 'lucide-react'
 import {
+  Download,
+  FileOutput,
   FolderOpen,
   Library,
   Settings,
+  Upload,
   User,
   Users,
 } from 'lucide-react'
@@ -22,4 +25,8 @@ export const LAYOUT_NAV_ITEMS: LayoutNavItem[] = [
   { to: '/admin', label: '用户管理', icon: Users, adminOnly: true },
   { to: '/files', label: '文件管理', icon: FolderOpen, adminOnly: true },
   { to: '/settings', label: '系统设置', icon: Settings, adminOnly: true },
+  // STRM 管理（设置区）：网盘目录生成 strm 与元数据下载/上传队列
+  { to: '/strm', label: 'STRM 管理', icon: FileOutput, adminOnly: true },
+  { to: '/strm/downloads', label: '下载队列', icon: Download, adminOnly: true },
+  { to: '/strm/uploads', label: '上传队列', icon: Upload, adminOnly: true },
 ]

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" />
+}

web/src/types/strm.ts

@@ -0,0 +1,148 @@
+// STRM 管理相关类型定义（与后端 internal/model/strm.go 对应）。
+export type StrmProvider = 'cloud115' | 'clouddrive2' | 'openlist' | 'local'
+
+export const STRM_PROVIDER_LABELS: Record<StrmProvider, string> = {
+  cloud115: '115 网盘',
+  clouddrive2: 'CloudDrive2',
+  openlist: 'OpenList',
+  local: '本地目录',
+}
+
+export interface StrmAccount {
+  id: string
+  name: string
+  provider: StrmProvider
+  enabled: boolean
+  created_at: string
+  updated_at: string
+  last_test_at?: string | null
+  last_test_result: string
+  last_test_ok: boolean
+  has_credential: boolean
+  provider_label: string
+}
+
+export interface StrmAccountInput {
+  name?: string
+  provider: StrmProvider
+  config?: Record<string, string>
+  enabled?: boolean
+}
+
+export type StrmSyncStatus = 'idle' | 'running' | 'ok' | 'error' | 'canceled'
+
+export interface StrmSyncPath {
+  id: string
+  name: string
+  account_id: string
+  provider: StrmProvider
+  remote_path: string
+  local_path: string
+  strm_base_url: string
+  video_ext: string
+  meta_ext: string
+  exclude_name: string
+  min_video_size_mb: number
+  add_path: number
+  download_meta: boolean
+  upload_meta: boolean
+  delete_dir: boolean
+  cron: string
+  enable_cron: boolean
+  enabled: boolean
+  created_at: string
+  last_sync_at?: string | null
+  last_sync_status: StrmSyncStatus
+  last_sync_message: string
+  account_name: string
+  account_enabled: boolean
+}
+
+export interface StrmSyncPathInput {
+  name?: string
+  account_id?: string
+  provider: StrmProvider
+  remote_path: string
+  local_path: string
+  strm_base_url?: string
+  video_ext?: string
+  meta_ext?: string
+  exclude_name?: string
+  min_video_size_mb?: number
+  add_path?: number
+  download_meta?: boolean
+  upload_meta?: boolean
+  delete_dir?: boolean
+  cron?: string
+  enable_cron?: boolean
+  enabled?: boolean
+}
+
+export interface StrmSyncRecord {
+  id: string
+  sync_path_id: string
+  status: 'pending' | 'running' | 'done' | 'failed' | 'canceled'
+  total: number
+  new_strm: number
+  new_meta: number
+  uploaded: number
+  pruned: number
+  skipped: number
+  message: string
+  started_at?: string | null
+  finished_at?: string | null
+  created_at: string
+}
+
+export type StrmTaskStatus = 'pending' | 'running' | 'done' | 'failed' | 'canceled'
+
+export interface StrmTask {
+  id: string
+  kind: 'download' | 'upload'
+  sync_path_id: string
+  account_id: string
+  provider: StrmProvider
+  file_name: string
+  local_path: string
+  remote_path: string
+  size: number
+  status: StrmTaskStatus
+  error: string
+  retry_count: number
+  created_at: string
+  started_at?: string | null
+  finished_at?: string | null
+}
+
+export interface StrmQueueCounts {
+  pending: number
+  running: number
+  done: number
+  failed: number
+  canceled: number
+}
+
+export interface StrmQueueSnapshot {
+  counts: StrmQueueCounts
+  tasks: StrmTask[]
+  total: number // 当前过滤条件下任务总数
+  page: number // 当前页码（从 1 开始）
+  page_size: number // 单页大小
+}
+
+export interface StrmSettingsMap {
+  'strm.base_url': string
+  'strm.video_ext': string
+  'strm.meta_ext': string
+  'strm.exclude_name': string
+  'strm.min_video_size_mb': string
+  'strm.add_path': string
+  'strm.download_meta': string
+  'strm.upload_meta': string
+  'strm.delete_dir': string
+  'strm.download_threads': string
+  'strm.upload_threads': string
+  [key: string]: string
+}
+
+export type StrmTaskStatusFilter = 'all' | StrmTaskStatus