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

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

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>
   )
 }