feat: add licensing and access controls

2026-10-01 12:06:38 +08:00 · 2026-05-29 12:47:54 +08:00
parent 2f7ec3ab17
commit 27df93fa3d
61 changed files with 2032 additions and 237 deletions
@@ -248,6 +248,7 @@ export function AIAssistantPage() {
                              poster_url: item.poster_url,
                              backdrop_url: item.backdrop_url,
                              overview: item.overview,
+                              total_episodes: item.total_episodes,
                              enabled: true,
                            })
                            const run = await subscriptionsAPI.runNow(sub.id)
@@ -3,6 +3,7 @@ import toast from 'react-hot-toast'
 import { Eye, KeyRound, Save, Trash2 } from 'lucide-react'

 import { apiConfigsAPI, type APIConfig } from '../api/api_configs'
+import { confirmAction } from '../components/ConfirmDialog'

 // APIConfigsPage manages third-party API keys (TMDb / Bangumi / TheTVDB /
 // Fanart / OpenAI / Douban). Plaintext keys are never returned by the
@@ -78,7 +79,7 @@ function ProviderCard({ item, onUpdated }: { item: APIConfig; onUpdated: () => v
  }

  const removeKey = async () => {
-    if (!confirm(`确定清除 ${item.provider} 的 API Key?`)) return
+    if (!(await confirmAction({ title: '清除 API Key', message: `确定清除 ${item.provider} 的 API Key?`, confirmText: '清除' }))) return
    await apiConfigsAPI.remove(item.provider)
    toast.success('已清除')
    onUpdated()
@@ -1,12 +1,13 @@
 import { FormEvent, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { Trash2 } from 'lucide-react'
+import { Pencil, Plus, ShieldCheck, Trash2, X } from 'lucide-react'

 import { adminAPI } from '../api/admin'
 import { libraryAPI } from '../api/library'
 import type { Library, User } from '../types'
 import { APIConfigsPanel } from '../components/APIConfigsPanel'
 import { ManagementShortcuts } from '../components/ManagementShortcuts'
+import { confirmAction } from '../components/ConfirmDialog'

 export function AdminPage() {
  const [tab, setTab] = useState<'library' | 'users' | 'api'>('library')
@@ -141,7 +142,7 @@ function LibraryPanel() {
                  <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 (!confirm(`确定删除「${l.name}」?`)) return
+                      if (!(await confirmAction({ title: '删除媒体库', message: `确定删除「${l.name}」?`, confirmText: '删除' }))) return
                      await libraryAPI.remove(l.id)
                      toast.success('已删除')
                      await refresh()
@@ -161,47 +162,167 @@ function LibraryPanel() {

 function UsersPanel() {
  const [users, setUsers] = useState<User[]>([])
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [editingID, setEditingID] = useState<string | null>(null)
+  const [editingUsername, setEditingUsername] = useState('')
  const refresh = () => adminAPI.listUsers().then(setUsers)
  useEffect(() => {
    refresh().catch(() => undefined)
  }, [])

+  const handleCreate = async (e: FormEvent) => {
+    e.preventDefault()
+    try {
+      await adminAPI.createUser({ username, password })
+      toast.success('用户已添加，默认仅允许浏览与播放媒体')
+      setUsername('')
+      setPassword('')
+      await refresh()
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '添加用户失败'
+      toast.error(msg)
+    }
+  }
+
+  const startEdit = (u: User) => {
+    setEditingID(u.id)
+    setEditingUsername(u.username)
+  }
+
+  const saveEdit = async (id: string) => {
+    try {
+      await adminAPI.updateUser(id, { username: editingUsername })
+      toast.success('用户名已更新')
+      setEditingID(null)
+      await refresh()
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '更新失败'
+      toast.error(msg)
+    }
+  }
+
  return (
-    <div className="glass-panel">
-      <table className="w-full text-left text-sm">
-        <thead className="text-xs uppercase tracking-wider text-sand-500">
-          <tr>
-            <th className="py-2">用户名</th>
-            <th>角色</th>
-            <th>最近登录</th>
-            <th className="text-right">操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((u) => (
-            <tr key={u.id} className="border-t border-gray-200">
-              <td className="py-2 text-ink-600">{u.username}</td>
-              <td className="text-ink-100">{u.role}</td>
-              <td className="text-ink-50">
-                {u.last_login_at ? new Date(u.last_login_at).toLocaleString() : '从未登录'}
-              </td>
-              <td className="py-2 text-right">
-                <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 (!confirm(`确定删除「${u.username}」?`)) return
-                    await adminAPI.deleteUser(u.id)
-                    toast.success('已删除')
-                    await refresh()
-                  }}
-                >
-                  <Trash2 size={12} />
-                </button>
-              </td>
+    <div className="space-y-6">
+      <form onSubmit={handleCreate} className="glass-panel grid gap-3 md:grid-cols-[1fr_1fr_auto]">
+        <div className="md:col-span-3 flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 className="font-display text-lg font-semibold text-ink-600">用户管理</h2>
+            <p className="text-xs text-sand-500">
+              已创建 {users.length}/20 个用户；新增用户默认只有媒体库浏览、播放、外部播放器与第三方客户端观看权限。
+            </p>
+          </div>
+          <span className="rounded-full border border-primary-400/30 px-3 py-1 text-xs text-brand-500">
+            默认管理员不可删除 · 最高权限
+          </span>
+        </div>
+        <input
+          required
+          className="input-base"
+          placeholder="用户名"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          disabled={users.length >= 20}
+        />
+        <input
+          required
+          minLength={6}
+          className="input-base"
+          placeholder="初始密码（至少 6 位）"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          disabled={users.length >= 20}
+        />
+        <button type="submit" className="neon-button inline-flex items-center justify-center gap-2" disabled={users.length >= 20}>
+          <Plus size={16} />
+          添加用户
+        </button>
+      </form>
+
+      <div className="glass-panel overflow-x-auto">
+        <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>最近登录</th>
+              <th className="text-right">操作</th>
            </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id} className="border-t border-gray-200">
+                <td className="py-2 text-ink-600">
+                  {editingID === u.id ? (
+                    <input
+                      className="input-base h-9 max-w-48"
+                      value={editingUsername}
+                      onChange={(e) => setEditingUsername(e.target.value)}
+                    />
+                  ) : (
+                    <span className="inline-flex items-center gap-2">
+                      {u.username}
+                      {u.is_default_admin && <ShieldCheck size={15} className="text-brand-500" />}
+                    </span>
+                  )}
+                </td>
+                <td className="text-ink-100">{u.role === 'admin' ? '管理员' : '观看用户'}</td>
+                <td className="text-ink-50">
+                  {u.role === 'admin' ? '全部管理权限' : '仅浏览/播放/外部播放器，无下载与文件操作'}
+                </td>
+                <td className="text-ink-50">
+                  {u.last_login_at ? new Date(u.last_login_at).toLocaleString() : '从未登录'}
+                </td>
+                <td className="space-x-2 py-2 text-right">
+                  {editingID === u.id ? (
+                    <>
+                      <button
+                        className="rounded-lg border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
+                        onClick={() => saveEdit(u.id)}
+                      >
+                        保存
+                      </button>
+                      <button
+                        className="rounded-lg border border-gray-300 px-2 py-1 text-xs text-ink-100 hover:bg-gray-100"
+                        onClick={() => setEditingID(null)}
+                      >
+                        <X size={12} />
+                      </button>
+                    </>
+                  ) : (
+                    <button
+                      className="rounded-lg border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10"
+                      onClick={() => startEdit(u)}
+                    >
+                      <Pencil size={12} />
+                    </button>
+                  )}
+                  <button
+                    className="rounded-lg border border-red-400/40 px-2 py-1 text-xs text-red-400 hover:bg-red-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+                    disabled={u.is_protected}
+                    title={u.is_protected ? '默认管理员禁止删除' : '删除用户'}
+                    onClick={async () => {
+                      if (u.is_protected) return
+                      if (!(await confirmAction({ title: '删除用户', message: `确定删除「${u.username}」?`, confirmText: '删除' }))) return
+                      await adminAPI.deleteUser(u.id)
+                      toast.success('已删除')
+                      await refresh()
+                    }}
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
    </div>
  )
 }
@@ -8,6 +8,7 @@ import {
  type AssistantSession,
  type SessionView,
 } from '../api/assistant'
+import { confirmAction } from '../components/ConfirmDialog'

 // AssistantChatPage is the multi-turn chat surface backed by the Go
 // AssistantService. It complements the older AIAssistantPage which is
@@ -63,7 +64,7 @@ export function AssistantChatPage() {
  }

  const onDelete = async (id: string) => {
-    if (!confirm('删除此会话?')) return
+    if (!(await confirmAction({ title: '删除会话', message: '删除此会话?', confirmText: '删除' }))) return
    try {
      await assistantAPI.deleteSession(id)
      if (active?.session.id === id) setActive(null)
@@ -8,6 +8,7 @@ import {
  type DownloadClientInput,
  type DownloadClientType,
 } from '../api/download_clients'
+import { confirmAction } from '../components/ConfirmDialog'

 // DownloadClientsPage manages multiple downloader integrations.
 // Replaces the Vue UI's DownloadView "clients" tab with a typed CRUD
@@ -45,7 +46,7 @@ export function DownloadClientsPage() {
  }

  const onDelete = async (c: DownloadClient) => {
-    if (!confirm(`确定删除「${c.name}」?`)) return
+    if (!(await confirmAction({ title: '删除下载器', message: `确定删除「${c.name}」?`, confirmText: '删除' }))) return
    try {
      await downloadClientsAPI.remove(c.id)
      toast.success('已删除')
@@ -5,6 +5,7 @@ import { ArrowDown, ArrowUp, Download, Film, HardDrive, Rss, ShieldCheck, Trash2
 import { imageURL } from '../api/client'
 import { downloadsAPI } from '../api/downloads'
 import { useAuthStore } from '../stores/auth'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { DownloadTask, QBitTorrent } from '../types'

 type DownloadCardItem = {
@@ -297,7 +298,7 @@ export function DownloadsPage() {
                item={toLiveCard(torrent)}
                removable={role === 'admin'}
                onRemove={async () => {
-                  if (!confirm(`删除「${torrent.title || torrent.name}」?`)) return
+                  if (!(await confirmAction({ title: '删除下载任务', message: `删除「${torrent.title || torrent.name}」?`, confirmText: '删除' }))) return
                  await downloadsAPI.remove(torrent.hash, false)
                  toast.success('已删除任务')
                  await refresh()
@@ -4,6 +4,7 @@ import { Copy, Trash2 } from 'lucide-react'

 import { duplicatesAPI, type DuplicateReport } from '../api/duplicates'
 import { libraryAPI } from '../api/library'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Library } from '../types'

 function fmtBytes(n: number): string {
@@ -50,7 +51,7 @@ export function DuplicatesPage() {
  }

  const unmark = async () => {
-    if (!confirm('清除所有重复标记?(磁盘文件不会被删除)')) return
+    if (!(await confirmAction({ title: '清除重复标记', message: '清除所有重复标记?(磁盘文件不会被删除)', confirmText: '清除' }))) return
    const r = await duplicatesAPI.unmark(libID)
    toast.success(`已清除 ${r.unmarked} 项`)
    setReport(null)
@@ -7,6 +7,7 @@ import { ArrowLeft, Play, Film } from 'lucide-react'
 import { libraryAPI } from '../api/library'
 import type { Library, Media } from '../types'
 import { MediaCard } from '../components/MediaCard'
+import { ExternalPlayerButton } from '../components/ExternalPlayerButton'
 import { imageURL } from '../api/client'
 import { useAuthStore } from '../stores/auth'
 import { getSeriesKey, groupSeries, isEpisodeLike, seriesTitle, type SeriesCard } from '../utils/groupSeries'
@@ -248,10 +249,13 @@ export function LibraryPage() {
                  )
                  const first = firstEps.length > 0 ? firstEps[0] : null
                  return first ? (
-                    <Link to={`/play/${first.id}`} className="btn-primary inline-flex">
-                      <Play size={16} fill="currentColor" />
-                      从第一集开始播放
-                    </Link>
+                    <div className="flex flex-wrap gap-2">
+                      <Link to={`/play/${first.id}`} className="btn-primary inline-flex">
+                        <Play size={16} fill="currentColor" />
+                        从第一集开始播放
+                      </Link>
+                      <ExternalPlayerButton mediaId={first.id} label="外部播放器播放" />
+                    </div>
                  ) : null
                })()}
              </div>
@@ -282,26 +286,28 @@ export function LibraryPage() {
                </h3>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
                  {visibleEpisodes.map((ep) => (
-                    <Link
+                    <div
                      key={ep.id}
-                      to={`/play/${ep.id}`}
                      className="group flex items-center gap-3 rounded-xl border border-sand-200 bg-white p-3 shadow-card transition-all hover:border-brand-300 hover:shadow-card-hover"
                    >
-                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-600 font-semibold text-sm">
-                        {ep.episode_num || '—'}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate text-sm font-medium text-ink-600">
-                          {ep.original_name || (ep.episode_num > 0 ? `第 ${ep.episode_num} 集` : ep.title)}
-                        </p>
-                        <p className="text-xs text-sand-500">
-                          {ep.duration_sec > 0
-                            ? `${Math.floor(ep.duration_sec / 60)} 分钟`
-                            : formatSize(ep.size_bytes)}
-                        </p>
-                      </div>
-                      <Play size={14} className="shrink-0 text-gray-500 opacity-0 transition-opacity group-hover:opacity-100 group-hover:text-brand-500" />
-                    </Link>
+                      <Link to={`/play/${ep.id}`} className="flex min-w-0 flex-1 items-center gap-3">
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-600 font-semibold text-sm">
+                          {ep.episode_num || '—'}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm font-medium text-ink-600">
+                            {ep.original_name || (ep.episode_num > 0 ? `第 ${ep.episode_num} 集` : ep.title)}
+                          </p>
+                          <p className="text-xs text-sand-500">
+                            {ep.duration_sec > 0
+                              ? `${Math.floor(ep.duration_sec / 60)} 分钟`
+                              : formatSize(ep.size_bytes)}
+                          </p>
+                        </div>
+                        <Play size={14} className="shrink-0 text-gray-500 opacity-0 transition-opacity group-hover:opacity-100 group-hover:text-brand-500" />
+                      </Link>
+                      <ExternalPlayerButton mediaId={ep.id} label="外部" compact />
+                    </div>
                  ))}
                </div>
              </div>
@@ -198,6 +198,7 @@ export function LicensePage() {
              />
              <StatusBadge label="最近心跳" value={fmtDateTime(activation.heartbeat_at)} />
              <StatusBadge label="客户端 IP" value={activation.ip ?? '—'} />
+              <StatusBadge label="用户额度" value={`${status?.max_users ?? 20} 人`} />
            </div>
          )}

@@ -11,6 +11,8 @@ import { imageURL } from '../api/client'
 import { useAuthStore } from '../stores/auth'
 import { api } from '../api/client'
 import type { Media } from '../types'
+import { confirmAction } from '../components/ConfirmDialog'
+import { ExternalPlayerButton } from '../components/ExternalPlayerButton'

 function fmtDuration(sec: number): string {
  if (!sec || sec <= 0) return '—'
@@ -107,7 +109,7 @@ export function MediaDetailPage() {

  const softDelete = async () => {
    if (!media) return
-    if (!confirm(`将「${media.title}」移至回收站? (磁盘文件保留)`)) return
+    if (!(await confirmAction({ title: '移入回收站', message: `将「${media.title}」移至回收站? (磁盘文件保留)`, confirmText: '移入回收站' }))) return
    await recycleAPI.softDelete(media.id)
    toast.success('已移至回收站')
    navigate(-1)
@@ -287,6 +289,8 @@ export function MediaDetailPage() {
                <span>HLS 兼容转码播放</span>
              </Link>

+              <ExternalPlayerButton mediaId={media.id} />
+
              {/* Toggle Favourites */}
              <button
                onClick={toggleFav}
@@ -334,4 +338,4 @@ export function MediaDetailPage() {
      </div>
    </div>
  )
-}
+}
@@ -6,6 +6,7 @@ import {
  notifyChannelsAPI,
  type NotifyChannelInput,
 } from '../api/notify_channels'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { NotifyChannel } from '../types'

 // NotifyChannelsPage replaces the Vue NotifyTab. Operators can register
@@ -42,7 +43,7 @@ export function NotifyChannelsPage() {
  }

  const onDelete = async (ch: NotifyChannel) => {
-    if (!confirm(`确定删除「${ch.name}」?`)) return
+    if (!(await confirmAction({ title: '删除通知渠道', message: `确定删除「${ch.name}」?`, confirmText: '删除' }))) return
    try {
      await notifyChannelsAPI.remove(ch.id)
      toast.success('已删除')
@@ -4,6 +4,7 @@ import { ListPlus, Trash2 } from 'lucide-react'
 import toast from 'react-hot-toast'

 import { playbackAPI } from '../api/playback'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Playlist } from '../types'

 // Landing page for playlists. Lists every playlist owned by the current
@@ -74,7 +75,7 @@ export function PlaylistsPage() {
            </Link>
            <button
              onClick={async () => {
-                if (!confirm(`删除「${p.name}」?`)) return
+                if (!(await confirmAction({ title: '删除播放列表', message: `删除「${p.name}」?`, confirmText: '删除' }))) return
                await playbackAPI.deletePlaylist(p.id)
                toast.success('已删除')
                await refresh()
@@ -5,6 +5,7 @@ import toast from 'react-hot-toast'
 import { libraryAPI } from '../api/library'
 import { playProfilesAPI, type PlayProfileInput } from '../api/play_profiles'
 import { useAuthStore } from '../stores/auth'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Library, PlayProfile } from '../types'

 // ProfileManagementPage replicates the Vue ProfileManagementView. It
@@ -42,7 +43,7 @@ export function ProfileManagementPage() {
  }, [isAdmin])

  const onDelete = async (p: PlayProfile) => {
-    if (!confirm(`确定删除 Profile「${p.name}」?`)) return
+    if (!(await confirmAction({ title: '删除播放档案', message: `确定删除 Profile「${p.name}」?`, confirmText: '删除' }))) return
    try {
      await playProfilesAPI.remove(p.id)
      toast.success('已删除')
@@ -3,6 +3,7 @@ import toast from 'react-hot-toast'
 import { RotateCcw, Trash2 } from 'lucide-react'

 import { recycleAPI } from '../api/recycle'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Media } from '../types'

 export function RecycleBinPage() {
@@ -60,7 +61,7 @@ export function RecycleBinPage() {
                    <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 (!confirm(`彻底删除「${m.title}」? (磁盘文件保留)`)) return
+                        if (!(await confirmAction({ title: '彻底删除记录', message: `彻底删除「${m.title}」? (磁盘文件保留)`, confirmText: '彻底删除' }))) return
                        await recycleAPI.purge(m.id)
                        toast.success('已彻底删除')
                        await refresh()
@@ -1,6 +1,6 @@
 import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
-import { Rss, Sparkles } from 'lucide-react'
+import { CheckCircle2, Info, Rss, Sparkles } from 'lucide-react'

 import { aiAPI, type ExternalMediaResult, type SearchIntent } from '../api/ai'
 import { imageURL } from '../api/client'
@@ -199,6 +199,7 @@ export function SearchPage() {
                poster_url: item.poster_url,
                backdrop_url: item.backdrop_url,
                overview: item.overview,
+                total_episodes: item.total_episodes,
                enabled: true,
              })
              const run = await subscriptionsAPI.runNow(sub.id)
@@ -231,6 +232,7 @@ function ExternalResults({
  busyKey: string
  onSubscribe: (item: ExternalMediaResult) => Promise<void>
 }) {
+  const [detail, setDetail] = useState<ExternalMediaResult | null>(null)
  return (
    <section className="space-y-3">
      <div>
@@ -244,7 +246,16 @@ function ExternalResults({
          const keyword = item.subscribe_keyword || item.title
          const key = `${item.source}:${keyword}`
          return (
-            <article key={key} className="glass-panel flex gap-3 !p-3">
+            <article
+              key={key}
+              role="button"
+              tabIndex={0}
+              onClick={() => setDetail(item)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') setDetail(item)
+              }}
+              className="glass-panel flex cursor-pointer gap-3 !p-3 transition hover:-translate-y-0.5 hover:shadow-lg"
+            >
              <div className="h-28 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
                {item.poster_url ? (
                  <img
@@ -267,8 +278,21 @@ function ExternalResults({
                <p className="mt-1 line-clamp-2 text-xs text-ink-50">
                  {item.overview || `订阅关键词：${keyword}`}
                </p>
+                <div className="mt-2 flex flex-wrap gap-1.5 text-[10px]">
+                  <span className={'rounded-full px-2 py-0.5 font-semibold ' + (item.in_library ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600')}>
+                    {item.in_library ? '本地已入库' : '本地未入库'}
+                  </span>
+                  {isSeriesItem(item) ? (
+                    <span className="rounded-full bg-gray-100 px-2 py-0.5 text-ink-100">
+                      已有 {item.downloaded_episodes || 0}/{item.total_episodes || '未知'} 集
+                    </span>
+                  ) : null}
+                </div>
                <button
-                  onClick={() => onSubscribe(item)}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    onSubscribe(item)
+                  }}
                  disabled={busyKey === key}
                  className="mt-3 rounded-lg border border-primary-400/40 px-2 py-1 text-xs text-brand-500 hover:bg-primary-400/10 disabled:opacity-50"
                >
@@ -280,6 +304,108 @@ function ExternalResults({
          )
        })}
      </div>
+      {detail && (
+        <ExternalDetailModal
+          item={detail}
+          busy={busyKey === `${detail.source}:${detail.subscribe_keyword || detail.title}`}
+          onClose={() => setDetail(null)}
+          onSubscribe={onSubscribe}
+        />
+      )}
    </section>
  )
 }
+
+function ExternalDetailModal({
+  item,
+  busy,
+  onClose,
+  onSubscribe,
+}: {
+  item: ExternalMediaResult
+  busy: boolean
+  onClose: () => void
+  onSubscribe: (item: ExternalMediaResult) => Promise<void>
+}) {
+  const missing = item.missing_episodes ?? []
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm" onClick={onClose}>
+      <div className="max-h-[88vh] w-full max-w-3xl overflow-hidden rounded-3xl bg-white shadow-2xl" onClick={(event) => event.stopPropagation()}>
+        <div className="grid gap-0 md:grid-cols-[220px,1fr]">
+          <div className="min-h-72 bg-gray-100">
+            {item.poster_url ? (
+              <img src={imageURL(item.poster_url)} alt={item.title} className="h-full w-full object-cover" />
+            ) : (
+              <div className="flex h-full min-h-72 items-center justify-center text-brand-500">
+                <Info size={42} />
+              </div>
+            )}
+          </div>
+          <div className="space-y-4 p-5">
+            <div>
+              <div className="mb-2 flex flex-wrap gap-2 text-xs">
+                <span className="rounded-full bg-primary-400/10 px-2 py-0.5 font-semibold uppercase text-brand-500">{item.source}</span>
+                {item.media_type ? <span className="rounded-full bg-gray-100 px-2 py-0.5 text-ink-100">{item.media_type}</span> : null}
+                {item.year ? <span className="rounded-full bg-gray-100 px-2 py-0.5 text-ink-100">{item.year}</span> : null}
+                {item.rating ? <span className="rounded-full bg-amber-50 px-2 py-0.5 text-amber-600">★ {item.rating.toFixed(1)}</span> : null}
+              </div>
+              <h3 className="font-display text-2xl font-bold text-ink-600">{item.title}</h3>
+              <p className="mt-2 text-sm leading-6 text-ink-50">{item.overview || '暂无简介。'}</p>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3">
+              <StatusBox label="入库状态" value={item.in_library ? '已入库' : '未入库'} ok={item.in_library} />
+              <StatusBox label="本地条目" value={`${item.local_media_count || 0} 个`} />
+              <StatusBox label="剧集进度" value={isSeriesItem(item) ? `${item.downloaded_episodes || 0}/${item.total_episodes || '未知'} 集` : '单部影片'} />
+            </div>
+
+            {isSeriesItem(item) && (
+              <div className="rounded-2xl border border-gray-100 bg-gray-50 p-3 text-sm">
+                <div className="mb-2 font-semibold text-ink-600">缺失情况</div>
+                {missing.length > 0 ? (
+                  <div className="flex flex-wrap gap-1.5">
+                    {missing.slice(0, 80).map((episode) => (
+                      <span key={episode} className="rounded-full bg-white px-2 py-0.5 text-xs text-ink-100 shadow-sm">第 {episode} 集</span>
+                    ))}
+                    {missing.length > 80 ? <span className="text-xs text-sand-500">还有 {missing.length - 80} 集…</span> : null}
+                  </div>
+                ) : item.in_library && item.total_episodes ? (
+                  <p className="flex items-center gap-1.5 text-emerald-600"><CheckCircle2 size={15} /> 已完整入库</p>
+                ) : (
+                  <p className="text-sand-500">总集数未知，订阅时会跳过本地已有单集，优先补新集。</p>
+                )}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2 pt-2">
+              <button onClick={onClose} className="rounded-xl border border-gray-200 px-4 py-2 text-sm text-ink-100 hover:bg-gray-50">关闭</button>
+              <button
+                disabled={busy}
+                onClick={async () => {
+                  await onSubscribe(item)
+                  onClose()
+                }}
+                className="neon-button"
+              >
+                <Rss size={14} /> {busy ? '订阅中…' : item.in_library ? '补全缺失集' : '订阅全集'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatusBox({ label, value, ok }: { label: string; value: string; ok?: boolean }) {
+  return (
+    <div className="rounded-2xl border border-gray-100 bg-gray-50 p-3">
+      <div className="text-xs text-sand-500">{label}</div>
+      <div className={'mt-1 font-semibold ' + (ok ? 'text-emerald-600' : 'text-ink-600')}>{value}</div>
+    </div>
+  )
+}
+
+function isSeriesItem(item: ExternalMediaResult) {
+  return ['tv', 'anime', 'variety'].includes((item.media_type || '').toLowerCase())
+}
@@ -85,6 +85,25 @@ const GROUPS: SettingGroup[] = [
      },
    ],
  },
+  {
+    key: 'license',
+    label: '授权服务',
+    description: '连接私有 MediaStationLicenseServer；开源版默认最多 20 个用户，激活后按授权策略提升额度。',
+    items: [
+      {
+        key: 'license.server_url',
+        label: 'License Server 地址',
+        type: 'text',
+        placeholder: 'http://127.0.0.1:8001',
+      },
+      {
+        key: 'license.hmac_secret',
+        label: 'HMAC 签名密钥',
+        type: 'text',
+        hint: '必须与 License Server 的 LICENSE_HMAC_SECRET 保持一致；留空则跳过响应签名校验。',
+      },
+    ],
+  },
  {
    key: 'organize',
    label: '整理 & 刮削',
@@ -5,6 +5,7 @@ import { Globe, Plus, Trash2, Wifi, RefreshCw, X, Edit3, CheckCircle, XCircle, H
 import { sitesAPI } from '../api/sites'
 import type { Site } from '../types'
 import { ManagementShortcuts } from '../components/ManagementShortcuts'
+import { confirmAction } from '../components/ConfirmDialog'

 // ── 站点类型映射 ──
 const SITE_TYPE_LABELS: Record<string, string> = {
@@ -215,7 +216,7 @@ export function SitesPage() {

  // ── 删除 ──
  const handleDelete = async (site: Site) => {
-    if (!confirm(`确定要删除站点「${site.name}」吗？此操作不可撤销。`)) return
+    if (!(await confirmAction({ title: '删除站点', message: `确定要删除站点「${site.name}」吗？此操作不可撤销。`, confirmText: '删除' }))) return
    try {
      await sitesAPI.remove(site.id)
      toast.success('站点已删除')
@@ -4,6 +4,7 @@ import toast from 'react-hot-toast'

 import { libraryAPI, mediaAPI } from '../api/library'
 import { strmAPI } from '../api/strm'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Library, Media } from '../types'

 // StrmPage exposes the URL-as-file admin tooling backed by the Go server:
@@ -97,7 +98,7 @@ export function StrmPage() {
  }

  const onDetach = async (m: Media) => {
-    if (!confirm(`清除「${m.title}」的 STRM URL?`)) return
+    if (!(await confirmAction({ title: '清除 STRM URL', message: `清除「${m.title}」的 STRM URL?`, confirmText: '清除' }))) return
    try {
      await strmAPI.clear(m.id)
      toast.success('已清除')
@@ -1,9 +1,10 @@
 import { FormEvent, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { CalendarClock, Film, Pencil, Play, Plus, Save, ShieldCheck, Trash2 } from 'lucide-react'
+import { CalendarClock, CheckCircle2, Film, Pencil, Play, Plus, Save, ShieldCheck, Trash2 } from 'lucide-react'

 import { subscriptionsAPI } from '../api/subscriptions'
 import { imageURL } from '../api/client'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { Subscription } from '../types'

 export function SubscriptionsPage() {
@@ -258,6 +259,10 @@ export function SubscriptionsPage() {
                      <CalendarClock size={13} className="text-brand-500" />
                      <span>{subscription.last_run_at ? new Date(subscription.last_run_at).toLocaleString() : '尚未运行'}</span>
                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <CheckCircle2 size={13} className="text-brand-500" />
+                      <span>{subscriptionProgressLabel(subscription)}</span>
+                    </div>
                  </div>

                  <div className="flex flex-wrap gap-1.5">
@@ -291,7 +296,7 @@ export function SubscriptionsPage() {
                <button
                  className="rounded-xl border border-red-400/40 bg-white px-3 py-1.5 text-xs font-semibold text-red-400 hover:bg-red-400/10"
                  onClick={async () => {
-                    if (!confirm(`删除订阅「${subscription.name}」?`)) return
+                    if (!(await confirmAction({ title: '删除订阅', message: `删除订阅「${subscription.name}」?`, confirmText: '删除' }))) return
                    await subscriptionsAPI.remove(subscription.id)
                    toast.success('已删除')
                    await refresh()
@@ -321,6 +326,20 @@ function subscriptionRuleBadges(subscription: Subscription): string[] {
  return labels.filter(Boolean)
 }

+function subscriptionProgressLabel(subscription: Subscription): string {
+  const isSeries = ['tv', 'anime', 'variety'].includes((subscription.media_type || '').toLowerCase())
+  if (!isSeries) {
+    return subscription.in_library ? '本地已入库' : '本地未入库'
+  }
+  const downloaded = subscription.downloaded_episodes || 0
+  const total = subscription.total_episodes || 0
+  if (total > 0) {
+    const missing = subscription.missing_episodes?.length || 0
+    return missing > 0 ? `已下载 ${downloaded}/${total} 集，缺 ${missing} 集` : `已下载 ${downloaded}/${total} 集`
+  }
+  return `已下载 ${downloaded}/未知 集`
+}
+
 function washPriorityLabel(priority?: string): string {
  switch (priority) {
    case 'resolution':
@@ -5,6 +5,7 @@ import toast from 'react-hot-toast'

 import { historyAPI } from '../api/history'
 import { imageURL } from '../api/client'
+import { confirmAction } from '../components/ConfirmDialog'
 import type { HistoryItem } from '../types'

 function fmtDuration(ms: number): string {
@@ -33,7 +34,7 @@ export function WatchHistoryPage() {
  useEffect(() => { load() }, [])

  const removeOne = async (id: string) => {
-    if (!confirm('确定移除此条观看历史？不会删除媒体文件。')) return
+    if (!(await confirmAction({ title: '移除观看历史', message: '确定移除此条观看历史？不会删除媒体文件。', confirmText: '移除' }))) return
    setBusy(id)
    try {
      await historyAPI.remove(id)
@@ -46,7 +47,7 @@ export function WatchHistoryPage() {

  const clearByStatus = async (status: 'completed' | 'incomplete') => {
    const label = status === 'completed' ? '已看完' : '未看完'
-    if (!confirm(`确定清除所有${label}的观看历史？不会删除媒体文件。`)) return
+    if (!(await confirmAction({ title: '清除观看历史', message: `确定清除所有${label}的观看历史？不会删除媒体文件。`, confirmText: '清除' }))) return
    setBusy(status)
    try {
      await historyAPI.clear(undefined, status)