feat: add licensing and access controls

web/src/components/APIConfigsPanel.tsx

@@ -3,6 +3,7 @@ import toast from 'react-hot-toast'
 import { Eye, KeyRound, Save, Trash2, X } from 'lucide-react'
 
 import { apiConfigsAPI, type APIConfig } from '../api/api_configs'
+import { confirmAction } from './ConfirmDialog'
 
 // Compact inline-editable provider table for use inside AdminPage's "外部API" tab.
 export function APIConfigsPanel() {
@@ -112,7 +113,7 @@ export function APIConfigsPanel() {
                         {item.has_key && (
                           <button
                             onClick={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('已清除')
                               refresh()

web/src/components/ConfirmDialog.tsx

@@ -0,0 +1,83 @@
+import { createRoot } from 'react-dom/client'
+import { AlertTriangle } from 'lucide-react'
+
+type ConfirmOptions = {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  danger?: boolean
+}
+
+export function confirmAction(options: ConfirmOptions): Promise<boolean> {
+  return new Promise((resolve) => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    const close = (value: boolean) => {
+      root.unmount()
+      host.remove()
+      resolve(value)
+    }
+    root.render(<ConfirmDialog options={options} onClose={close} />)
+  })
+}
+
+function ConfirmDialog({
+  options,
+  onClose,
+}: {
+  options: ConfirmOptions
+  onClose: (value: boolean) => void
+}) {
+  const danger = options.danger ?? true
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
+      onClick={() => onClose(false)}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="w-full max-w-md overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex gap-4 p-5">
+          <div
+            className={
+              'flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ' +
+              (danger ? 'bg-red-50 text-red-500' : 'bg-primary-400/10 text-brand-500')
+            }
+          >
+            <AlertTriangle size={22} />
+          </div>
+          <div className="min-w-0 flex-1">
+            <h3 className="font-display text-lg font-bold text-ink-600">
+              {options.title || '确认操作'}
+            </h3>
+            <p className="mt-2 text-sm leading-6 text-ink-50">{options.message}</p>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2 border-t border-gray-100 bg-gray-50/80 px-5 py-4">
+          <button
+            type="button"
+            onClick={() => onClose(false)}
+            className="rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-ink-100 hover:bg-gray-50"
+          >
+            {options.cancelText || '取消'}
+          </button>
+          <button
+            type="button"
+            onClick={() => onClose(true)}
+            className={
+              'rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition ' +
+              (danger ? 'bg-red-500 hover:bg-red-600' : 'bg-brand-500 hover:bg-brand-600')
+            }
+          >
+            {options.confirmText || '确认'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/components/ExternalPlayerButton.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { Copy, ExternalLink, PlaySquare, X } from 'lucide-react'
+
+import { playbackAPI, type ExternalPlayer } from '../api/playback'
+
+export function ExternalPlayerButton({
+  mediaId,
+  label = '外部播放器',
+  compact = false,
+}: {
+  mediaId: string
+  label?: string
+  compact?: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [players, setPlayers] = useState<ExternalPlayer[]>([])
+  const [streamURL, setStreamURL] = useState('')
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const [playerData, urlData] = await Promise.all([
+        playbackAPI.externalPlayers(mediaId),
+        playbackAPI.externalURL(mediaId),
+      ])
+      setPlayers(playerData.players ?? [])
+      setStreamURL(urlData.url)
+      setOpen(true)
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '生成外部播放链接失败'
+      toast.error(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={loading}
+        onClick={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          load()
+        }}
+        className={
+          compact
+            ? 'rounded-lg border border-primary-400/35 bg-white px-2 py-1 text-xs font-semibold text-brand-500 hover:bg-primary-400/10 disabled:opacity-50'
+            : 'btn-outline border-brand-500/30 px-5 text-[#c9954a] hover:border-brand-500 hover:bg-brand-50'
+        }
+      >
+        <PlaySquare size={compact ? 13 : 14} className="mr-1 inline" />
+        {loading ? '生成中…' : label}
+      </button>
+      {open && (
+        <ExternalPlayerModal
+          players={players}
+          streamURL={streamURL}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  )
+}
+
+function ExternalPlayerModal({
+  players,
+  streamURL,
+  onClose,
+}: {
+  players: ExternalPlayer[]
+  streamURL: string
+  onClose: () => void
+}) {
+  const copy = async (value: string) => {
+    await navigator.clipboard.writeText(value)
+    toast.success('播放链接已复制')
+  }
+
+  return (
+    <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm" onClick={onClose}>
+      <div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl" onClick={(event) => event.stopPropagation()}>
+        <div className="flex items-start justify-between gap-4 border-b border-gray-100 p-5">
+          <div>
+            <h3 className="font-display text-xl font-bold text-ink-600">外部播放器播放</h3>
+            <p className="mt-1 text-xs text-ink-50">链接已包含临时播放 Token，可复制到 VLC、Infuse、VidHub、SenPlayer 等客户端。</p>
+          </div>
+          <button onClick={onClose} className="rounded-xl p-2 text-ink-50 hover:bg-gray-100 hover:text-ink-600">
+            <X size={18} />
+          </button>
+        </div>
+        <div className="space-y-4 p-5">
+          <div className="rounded-2xl border border-gray-100 bg-gray-50 p-3">
+            <div className="mb-2 text-xs font-semibold text-sand-500">直链播放地址</div>
+            <div className="flex gap-2">
+              <input readOnly value={streamURL} className="input-base min-w-0 flex-1 font-mono text-xs" />
+              <button onClick={() => copy(streamURL)} className="btn-outline shrink-0 px-3">
+                <Copy size={14} />
+                复制
+              </button>
+            </div>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {players.map((player) => (
+              <a
+                key={player.name}
+                href={player.url}
+                className="flex items-center justify-between rounded-2xl border border-gray-100 bg-white px-4 py-3 text-sm font-semibold text-ink-600 shadow-sm hover:border-brand-300 hover:bg-brand-50"
+              >
+                <span>{player.name}</span>
+                <ExternalLink size={15} className="text-brand-500" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/components/Layout.tsx

@@ -3,7 +3,7 @@ import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router-do
 import { AnimatePresence, motion } from 'framer-motion'
 import {
   Activity, Bell, Clock, CloudDownload, Compass, Film,
-  Cast, Globe, HardDrive, Heart, Home, Image,
+  Cast, Globe, HardDrive, Heart, Home, Image, KeySquare,
   ListMusic, LogOut, Rss, Search,
   Settings, Sliders, Sparkles, UserCog, Wrench,
   Library as LibraryIcon, User as UserIcon, ChevronDown, Menu, X
@@ -11,12 +11,17 @@ import {
 import clsx from 'clsx'
 import { AppFooter } from './AppFooter'
 import { useAuthStore } from '../stores/auth'
+import { usePermissionStore } from '../stores/permissions'
 
 export function Layout() {
   const navigate = useNavigate()
   const location = useLocation()
   const user = useAuthStore((s) => s.user)
   const logout = useAuthStore((s) => s.logout)
+  const permissions = usePermissionStore((s) => s.permissions)
+  const isSuper = usePermissionStore((s) => s.isSuper)
+  const isPermissionLoading = usePermissionStore((s) => s.isLoading)
+  const fetchPermissions = usePermissionStore((s) => s.fetchPermissions)
   const [isSidebarOpen, setIsSidebarOpen] = useState(true)
   const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false)
   const [isProfileOpen, setIsProfileOpen] = useState(false)
@@ -41,6 +46,15 @@ export function Layout() {
     setIsMobileDrawerOpen(false)
   }, [location.pathname])
 
+  useEffect(() => {
+    if (user && !isPermissionLoading && Object.keys(permissions).length === 0) {
+      fetchPermissions().catch(() => undefined)
+    }
+  }, [fetchPermissions, isPermissionLoading, permissions, user])
+
+  const isAdmin = user?.role === 'admin'
+  const can = (key: string) => isAdmin || isSuper || permissions[key] === true
+
   const handleSearchSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (searchQuery.trim()) {
@@ -93,10 +107,10 @@ export function Layout() {
             <SidebarLink to="/" icon={<Home size={18} />} label="系统首页" end collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
             <SidebarLink to="/libraries" icon={<LibraryIcon size={18} />} label="媒体库" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
             <SidebarLink to="/poster-wall" icon={<Image size={18} />} label="海报墙" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/discover" icon={<Compass size={18} />} label="精彩发现" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/search" icon={<Search size={18} />} label="智能搜索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/dlna" icon={<Cast size={18} />} label="DLNA 投屏" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/ai" icon={<Sparkles size={18} />} label="AI 助理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            {can('can_view_discover') && <SidebarLink to="/discover" icon={<Compass size={18} />} label="精彩发现" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {can('can_use_ai') && <SidebarLink to="/search" icon={<Search size={18} />} label="智能搜索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {can('can_cast') && <SidebarLink to="/dlna" icon={<Cast size={18} />} label="DLNA 投屏" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {can('can_use_ai_assistant') && <SidebarLink to="/ai" icon={<Sparkles size={18} />} label="AI 助理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
           </div>
         </div>
 
@@ -112,18 +126,18 @@ export function Layout() {
         </div>
 
         {/* Navigation Group: Automation */}
-        <div>
+        {(can('can_manage_downloads') || can('can_manage_subscriptions') || can('can_manage_sites')) && <div>
           <SectionHeader label="下载订阅" visible={isSidebarOpen || isMobileDrawerOpen} />
           <div className="space-y-1">
-            <SidebarLink to="/downloads" icon={<CloudDownload size={18} />} label="下载中心" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/download-clients" icon={<Sliders size={18} />} label="下载器管理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/subscriptions" icon={<Rss size={18} />} label="订阅管理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
-            <SidebarLink to="/site-search" icon={<Search size={18} />} label="站点检索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+            {can('can_manage_downloads') && <SidebarLink to="/downloads" icon={<CloudDownload size={18} />} label="下载中心" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {isAdmin && <SidebarLink to="/download-clients" icon={<Sliders size={18} />} label="下载器管理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {can('can_manage_subscriptions') && <SidebarLink to="/subscriptions" icon={<Rss size={18} />} label="订阅管理" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
+            {can('can_manage_sites') && <SidebarLink to="/site-search" icon={<Search size={18} />} label="站点检索" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />}
           </div>
-        </div>
+        </div>}
 
         {/* Navigation Group: Admin Dashboard */}
-        {user?.role === 'admin' && (
+        {isAdmin && (
           <div>
             <SectionHeader label="统一管理" visible={isSidebarOpen || isMobileDrawerOpen} />
             <div className="space-y-1">
@@ -132,6 +146,7 @@ export function Layout() {
               <SidebarLink to="/tools" icon={<Wrench size={18} />} label="整理与维护" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
               <SidebarLink to="/storage" icon={<HardDrive size={18} />} label="存储与文件" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
               <SidebarLink to="/stats" icon={<Activity size={18} />} label="运行状态" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
+              <SidebarLink to="/license" icon={<KeySquare size={18} />} label="授权许可" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
               <SidebarLink to="/settings" icon={<Sliders size={18} />} label="系统设置" collapsed={!isSidebarOpen && !isMobileDrawerOpen} />
             </div>
           </div>