feat(web): 支持生成电视端临时登录码

- 新增创建临时登录密码的 API 请求
- 新增电视端临时登录密码弹窗组件并在用户菜单中提供入口
- 在个人资料页面添加电视临时登录码生成与倒计时展示

web/src/api/auth.ts

@@ -19,4 +19,7 @@ export const authAPI = {
     api
       .post('/me/password', { old_password: oldPassword, new_password: newPassword })
       .then((r) => r.data),
+
+  createTemporaryPassword: () =>
+    api.post<{ code: string; expires_in: number }>('/me/temporary-password').then((r) => r.data),
 }

web/src/components/LayoutUserMenu.tsx

@@ -2,11 +2,12 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNo
 import { createPortal } from 'react-dom'
 import { Link, useLocation } from 'react-router-dom'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Cast, ChevronDown, Clock, Heart, ListMusic, LogOut, Settings, UserCog } from 'lucide-react'
+import { Cast, ChevronDown, Clock, Heart, ListMusic, LogOut, Settings, Tv, UserCog } from 'lucide-react'
 import clsx from 'clsx'
 
 import type { PlayProfile } from '../types'
 import { LayoutThemeToggle } from './LayoutThemeToggle'
+import { TemporaryPasswordDialog } from './TemporaryPasswordDialog'
 import type { ThemeMode } from './useThemeMode'
 
 type MenuPosition = {
@@ -52,6 +53,7 @@ export function LayoutUserMenu({
   const triggerRef = useRef<HTMLButtonElement>(null)
   const onCloseRef = useRef(onClose)
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null)
+  const [isOtpOpen, setIsOtpOpen] = useState(false)
 
   onCloseRef.current = onClose
 
@@ -121,11 +123,22 @@ export function LayoutUserMenu({
             className="fixed z-[121] w-56 origin-top-right rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-2 shadow-xl"
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <UserMenuLink to="/profile" icon={<Settings size={16} />} label="设置" onNavigate={onClose} />
-            <UserMenuLink to="/favourites" icon={<Heart size={16} />} label="我的收藏" onNavigate={onClose} />
-            <UserMenuLink to="/playlists" icon={<ListMusic size={16} />} label="播放列表" onNavigate={onClose} />
-            <UserMenuLink to="/history" icon={<Clock size={16} />} label="观看历史" onNavigate={onClose} />
-            <UserMenuLink to="/dlna" icon={<Cast size={16} />} label="DLNA投屏" onNavigate={onClose} />
+	            <UserMenuLink to="/profile" icon={<Settings size={16} />} label="设置" onNavigate={onClose} />
+	            <UserMenuLink to="/favourites" icon={<Heart size={16} />} label="我的收藏" onNavigate={onClose} />
+	            <UserMenuLink to="/playlists" icon={<ListMusic size={16} />} label="播放列表" onNavigate={onClose} />
+	            <UserMenuLink to="/history" icon={<Clock size={16} />} label="观看历史" onNavigate={onClose} />
+	            <UserMenuLink to="/dlna" icon={<Cast size={16} />} label="DLNA投屏" onNavigate={onClose} />
+	            <button
+	              type="button"
+	              onClick={() => {
+	                onClose()
+	                setIsOtpOpen(true)
+	              }}
+	              className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-[var(--app-subtle)] transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]"
+	            >
+	              <Tv size={16} />
+	              <span>电视端临时登录码</span>
+	            </button>
             {themeMode && onThemeChange ? (
               <div className="px-3 py-2 sm:hidden">
                 <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
@@ -203,6 +216,7 @@ export function LayoutUserMenu({
         <ChevronDown size={14} className="text-[var(--app-muted)]" />
       </button>
       {menuPortal}
+      <TemporaryPasswordDialog isOpen={isOtpOpen} onClose={() => setIsOtpOpen(false)} />
     </div>
   )
 }

web/src/components/TemporaryPasswordDialog.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Check, Copy, Loader2, RefreshCw, Tv, X } from 'lucide-react'
+import toast from 'react-hot-toast'
+
+import { authAPI } from '../api/auth'
+import { useAuthStore } from '../stores/auth'
+
+export function TemporaryPasswordDialog({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) {
+  const user = useAuthStore((s) => s.user)
+  const [code, setCode] = useState('')
+  const [expiresIn, setExpiresIn] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const fetchCode = async () => {
+    setLoading(true)
+    try {
+      const res = await authAPI.createTemporaryPassword()
+      setCode(res.code)
+      setExpiresIn(res.expires_in)
+      setCopied(false)
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '获取临时密码失败'
+      toast.error(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCode()
+    } else {
+      setCode('')
+      setExpiresIn(0)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    if (expiresIn <= 0) return
+    const timer = setInterval(() => {
+      setExpiresIn((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [expiresIn])
+
+  const copyCode = async () => {
+    if (!code) return
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      toast.success('已复制到剪贴板')
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error('复制失败，请手动长按复制')
+    }
+  }
+
+  if (!isOpen || typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[999] flex items-center justify-center bg-black/65 p-3 sm:p-4 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="w-full max-w-[calc(100vw-2rem)] sm:max-w-md max-h-[90dvh] flex flex-col overflow-hidden rounded-3xl border border-[var(--app-border)] bg-[var(--app-panel)] p-4 sm:p-6 shadow-2xl transition-all"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-[var(--app-border)] pb-3 sm:pb-4 shrink-0">
+          <div className="flex items-center gap-2.5 sm:gap-3 min-w-0">
+            <div className="flex h-9 w-9 sm:h-10 sm:w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-500/10 text-brand-500">
+              <Tv size={20} className="sm:w-[22px] sm:h-[22px]" />
+            </div>
+            <div className="min-w-0">
+              <h3 className="font-display text-base sm:text-lg font-bold text-[var(--app-text)] truncate">
+                电视端临时登录码 (OTP)
+              </h3>
+              <p className="text-[11px] sm:text-xs text-[var(--app-muted)] truncate">
+                适用于 Emby / Jellyfin / Infuse 客户端快速免密登录
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-xl p-1.5 text-[var(--app-muted)] transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)] shrink-0 ml-2"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="my-4 space-y-3.5 sm:space-y-4 overflow-y-auto flex-1 pr-0.5">
+          <div className="flex items-center justify-between text-[11px] sm:text-xs text-[var(--app-muted)]">
+            <div>
+              <span>登录账号：</span>
+              <span className="font-mono font-bold text-[var(--app-text)]">{user?.username}</span>
+            </div>
+            {expiresIn > 0 ? (
+              <div>
+                <span>有效时间剩余：</span>
+                <span className={`font-mono font-bold ${expiresIn < 60 ? 'text-red-500' : 'text-brand-500'}`}>
+                  {Math.floor(expiresIn / 60).toString().padStart(2, '0')}:{(expiresIn % 60).toString().padStart(2, '0')}
+                </span>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="flex items-center justify-between rounded-2xl border border-[var(--app-border)] bg-[var(--app-bg)] p-3 sm:p-4">
+            {loading ? (
+              <div className="flex h-10 w-full items-center justify-center text-[var(--app-muted)]">
+                <Loader2 size={24} className="animate-spin text-brand-500" />
+              </div>
+            ) : code && expiresIn > 0 ? (
+              <>
+                <div className="font-mono text-2xl sm:text-3xl font-black tracking-widest text-brand-500 select-all">
+                  {code}
+                </div>
+                <button
+                  type="button"
+                  onClick={copyCode}
+                  className="flex items-center gap-1.5 rounded-xl bg-brand-500/10 px-3 sm:px-3.5 py-1.5 sm:py-2 text-xs font-semibold text-brand-500 transition-colors hover:bg-brand-500/20 shrink-0"
+                >
+                  {copied ? <Check size={14} /> : <Copy size={14} />}
+                  {copied ? '已复制' : '复制密码'}
+                </button>
+              </>
+            ) : (
+              <div className="flex w-full items-center justify-between text-xs sm:text-sm text-[var(--app-muted)]">
+                <span>登录码已失效或未生成</span>
+                <button
+                  type="button"
+                  onClick={fetchCode}
+                  className="flex items-center gap-1.5 rounded-xl bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white shrink-0"
+                >
+                  <RefreshCw size={13} />
+                  立即生成
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel-elevated)] p-3 text-[11px] sm:text-xs leading-relaxed text-[var(--app-muted)]">
+            <span className="font-semibold text-[var(--app-text)]">使用方法：</span>
+            在电视端或外部设备的 Emby 登录界面输入用户名 <code className="font-bold text-brand-500">{user?.username}</code> 和上方 6 位临时码。登录后临时码立即作废（一次性阅后即焚），客户端将自动获取长期持久令牌。
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t border-[var(--app-border)] pt-3 sm:pt-4 shrink-0">
+          <button
+            type="button"
+            onClick={fetchCode}
+            disabled={loading}
+            className="flex items-center gap-1.5 rounded-xl px-2.5 sm:px-3 py-1.5 sm:py-2 text-xs font-medium text-[var(--app-muted)] transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)] disabled:opacity-50"
+          >
+            <RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
+            重新生成
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-elevated)] px-3.5 sm:px-4 py-1.5 sm:py-2 text-xs font-semibold text-[var(--app-text)] transition-colors hover:bg-[var(--app-hover)]"
+          >
+            完成并关闭
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

web/src/pages/ProfilePage.tsx

@@ -1,6 +1,6 @@
-import { FormEvent, useState } from 'react'
+import { FormEvent, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { EyeOff, KeyRound, Loader2, Save } from 'lucide-react'
+import { Check, Copy, EyeOff, KeyRound, Loader2, Save, Tv } from 'lucide-react'
 
 import { authAPI } from '../api/auth'
 import { profileAPI } from '../api/profile'
@@ -21,6 +21,65 @@ export function ProfilePage() {
   const [savingProfile, setSavingProfile] = useState(false)
   const [savingPassword, setSavingPassword] = useState(false)
 
+  const [otpCode, setOtpCode] = useState('')
+  const [otpExpiresIn, setOtpExpiresIn] = useState(0)
+  const [generatingOtp, setGeneratingOtp] = useState(false)
+  const [copiedOtp, setCopiedOtp] = useState(false)
+
+  useEffect(() => {
+    if (otpExpiresIn <= 0) return
+    const timer = setInterval(() => {
+      setOtpExpiresIn((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [otpExpiresIn])
+
+  useEffect(() => {
+    if (window.location.hash === '#tv-otp') {
+      const el = document.getElementById('tv-otp')
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  }, [])
+
+  const onGenerateOTP = async () => {
+    if (generatingOtp) return
+    setGeneratingOtp(true)
+    try {
+      const res = await authAPI.createTemporaryPassword()
+      setOtpCode(res.code)
+      setOtpExpiresIn(res.expires_in)
+      setCopiedOtp(false)
+      toast.success('已生成 6 位临时登录码')
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '生成临时密码失败'
+      toast.error(msg)
+    } finally {
+      setGeneratingOtp(false)
+    }
+  }
+
+  const copyOTP = async () => {
+    if (!otpCode) return
+    try {
+      await navigator.clipboard.writeText(otpCode)
+      setCopiedOtp(true)
+      toast.success('已复制到剪贴板')
+      setTimeout(() => setCopiedOtp(false), 2000)
+    } catch {
+      toast.error('复制失败，请手动长按复制')
+    }
+  }
+
   const onProfile = async (e: FormEvent) => {
     e.preventDefault()
     if (savingProfile) return
@@ -171,6 +230,64 @@ export function ProfilePage() {
           更新密码
         </button>
       </form>
+
+      <section id="tv-otp" className="glass-panel space-y-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="font-display text-lg font-semibold text-ink-600 flex items-center gap-2">
+              <Tv size={20} className="text-brand-500" />
+              Emby / 电视端临时登录码 (OTP)
+            </h2>
+            <p className="mt-1 text-sm text-ink-50">
+              适用于电视盒子、Apple TV、车机或朋友设备上的 Emby / Infuse / Jellyfin 客户端快速登录。无需使用遥控器输入长密码。
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onGenerateOTP}
+            disabled={generatingOtp}
+            className="neon-button shrink-0"
+          >
+            {generatingOtp ? <Loader2 size={16} className="animate-spin" /> : <KeyRound size={16} />}
+            {otpCode && otpExpiresIn > 0 ? '重新生成' : '获取 6 位临时登录码'}
+          </button>
+        </div>
+
+        {otpCode && otpExpiresIn > 0 ? (
+          <div className="rounded-2xl border border-brand-200 bg-brand-50/40 p-4 space-y-3">
+            <div className="flex items-center justify-between text-xs text-ink-50">
+              <div>
+                <span>登录账号：</span>
+                <span className="font-mono font-bold text-ink-600">{user?.username}</span>
+              </div>
+              <div>
+                <span>有效时间剩余：</span>
+                <span className={`font-mono font-bold ${otpExpiresIn < 60 ? 'text-red-500' : 'text-brand-600'}`}>
+                  {Math.floor(otpExpiresIn / 60).toString().padStart(2, '0')}:{(otpExpiresIn % 60).toString().padStart(2, '0')}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between rounded-xl bg-white/90 p-4 border border-brand-100 shadow-sm">
+              <div className="font-mono text-3xl font-black tracking-widest text-brand-600 select-all">
+                {otpCode}
+              </div>
+              <button
+                type="button"
+                onClick={copyOTP}
+                className="flex items-center gap-1.5 rounded-lg bg-brand-100 px-3 py-1.5 text-xs font-semibold text-brand-700 hover:bg-brand-200 transition-colors"
+              >
+                {copiedOtp ? <Check size={14} /> : <Copy size={14} />}
+                {copiedOtp ? '已复制' : '复制密码'}
+              </button>
+            </div>
+
+            <p className="text-xs text-ink-50 leading-relaxed">
+              在客户端的 Emby / Jellyfin 登录界面输入用户名 <code className="font-bold text-ink-600">{user?.username}</code> 和上方 6 位数字临时密码即可完成登录。登录成功后临时密码立即作废（一次性使用），客户端将自动换取长期持久令牌。
+            </p>
+          </div>
+        ) : null}
+      </section>
     </div>
   )
 }