mirror of
https://github.com/truewhile/MeBox.git
synced 2026-09-28 11:16:37 +08:00
truewhile
257 lines
9.0 KiB
TypeScript
257 lines
9.0 KiB
TypeScript
import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
|
|
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, 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 = {
|
|
top: number
|
|
right: number
|
|
}
|
|
|
|
type LayoutUser = {
|
|
username?: string
|
|
role?: string
|
|
}
|
|
|
|
type LayoutUserMenuProps = {
|
|
user: LayoutUser | null | undefined
|
|
isOpen: boolean
|
|
profiles: PlayProfile[]
|
|
activeProfileId: string | null
|
|
activeProfile: PlayProfile | null
|
|
onToggle: () => void
|
|
onClose: () => void
|
|
onUseDefaultProfile: () => void
|
|
onSwitchProfile: (profile: PlayProfile) => void
|
|
onLogout: () => void
|
|
themeMode?: ThemeMode
|
|
onThemeChange?: (mode: ThemeMode) => void
|
|
}
|
|
|
|
export function LayoutUserMenu({
|
|
user,
|
|
isOpen,
|
|
profiles,
|
|
activeProfileId,
|
|
activeProfile,
|
|
onToggle,
|
|
onClose,
|
|
onUseDefaultProfile,
|
|
onSwitchProfile,
|
|
onLogout,
|
|
themeMode,
|
|
onThemeChange,
|
|
}: LayoutUserMenuProps) {
|
|
const location = useLocation()
|
|
const triggerRef = useRef<HTMLButtonElement>(null)
|
|
const onCloseRef = useRef(onClose)
|
|
const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null)
|
|
const [isOtpOpen, setIsOtpOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
onCloseRef.current = onClose
|
|
}, [onClose])
|
|
|
|
const updateMenuPosition = useCallback(() => {
|
|
const trigger = triggerRef.current
|
|
if (!trigger) return
|
|
const rect = trigger.getBoundingClientRect()
|
|
setMenuPosition({
|
|
top: rect.bottom + 12,
|
|
right: Math.max(8, window.innerWidth - rect.right),
|
|
})
|
|
}, [])
|
|
|
|
useLayoutEffect(() => {
|
|
if (!isOpen) {
|
|
setMenuPosition(null)
|
|
return undefined
|
|
}
|
|
|
|
updateMenuPosition()
|
|
window.addEventListener('resize', updateMenuPosition)
|
|
window.addEventListener('scroll', updateMenuPosition, true)
|
|
return () => {
|
|
window.removeEventListener('resize', updateMenuPosition)
|
|
window.removeEventListener('scroll', updateMenuPosition, true)
|
|
}
|
|
}, [isOpen, updateMenuPosition])
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return undefined
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') onCloseRef.current()
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
}, [isOpen])
|
|
|
|
useEffect(() => {
|
|
onCloseRef.current()
|
|
}, [location.pathname, location.search])
|
|
|
|
const menuPortal = isOpen && menuPosition && typeof document !== 'undefined'
|
|
? createPortal(
|
|
<AnimatePresence>
|
|
<motion.div
|
|
key="layout-user-menu-backdrop"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.12 }}
|
|
className="fixed inset-0 z-[120]"
|
|
aria-hidden="true"
|
|
onPointerDown={onClose}
|
|
/>
|
|
<motion.div
|
|
key="layout-user-menu-panel"
|
|
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
|
transition={{ duration: 0.15 }}
|
|
role="menu"
|
|
style={{ top: menuPosition.top, right: menuPosition.right }}
|
|
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} />
|
|
<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)]">
|
|
主题
|
|
</p>
|
|
<LayoutThemeToggle mode={themeMode} onChange={onThemeChange} />
|
|
</div>
|
|
) : null}
|
|
<div className="my-1.5 border-t border-[var(--app-border)]" />
|
|
<div className="px-3 py-2">
|
|
<p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
|
|
当前观影 Profile
|
|
</p>
|
|
<div className="space-y-1">
|
|
<button
|
|
onClick={onUseDefaultProfile}
|
|
className={profileButtonClass(!activeProfileId)}
|
|
>
|
|
<span>账号默认</span>
|
|
<span>{!activeProfileId ? '使用中' : ''}</span>
|
|
</button>
|
|
{profiles.map((profile) => (
|
|
<button
|
|
key={profile.id}
|
|
onClick={() => onSwitchProfile(profile)}
|
|
className={profileButtonClass(activeProfileId === profile.id)}
|
|
>
|
|
<span className="truncate">{profile.name}</span>
|
|
<span className="ml-2 shrink-0">{profile.allow_adult ? '成人' : '安全'}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<UserMenuLink
|
|
to="/play-profiles"
|
|
icon={<UserCog size={16} />}
|
|
label="管理观影 Profile"
|
|
onNavigate={onClose}
|
|
/>
|
|
<div className="my-1.5 border-t border-[var(--app-border)]" />
|
|
<button
|
|
onClick={() => {
|
|
onClose()
|
|
onLogout()
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-red-500 transition-colors hover:bg-[var(--app-danger-soft)]"
|
|
>
|
|
<LogOut size={16} />
|
|
<span>安全登出系统</span>
|
|
</button>
|
|
</motion.div>
|
|
</AnimatePresence>,
|
|
document.body,
|
|
)
|
|
: null
|
|
|
|
return (
|
|
<div className="relative z-[122]" data-testid="layout-user-menu">
|
|
<button
|
|
ref={triggerRef}
|
|
onClick={onToggle}
|
|
aria-expanded={isOpen}
|
|
aria-haspopup="menu"
|
|
className="relative z-[122] flex items-center gap-2.5 rounded-full border border-[var(--app-border)] p-1 pr-3 transition-all hover:bg-[var(--app-hover)]"
|
|
>
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#111827] to-[#1f2937] font-display text-xs font-bold text-white shadow-sm">
|
|
{user?.username?.slice(0, 2).toUpperCase() || 'US'}
|
|
</div>
|
|
<div className="hidden text-left md:block">
|
|
<p className="text-xs font-bold leading-none text-[var(--app-text)]">{user?.username}</p>
|
|
<p className="mt-0.5 text-[9px] font-bold uppercase leading-none tracking-wider text-[var(--app-muted)]">
|
|
{activeProfile ? `Profile: ${activeProfile.name}` : user?.role}
|
|
</p>
|
|
</div>
|
|
<ChevronDown size={14} className="text-[var(--app-muted)]" />
|
|
</button>
|
|
{menuPortal}
|
|
<TemporaryPasswordDialog isOpen={isOtpOpen} onClose={() => setIsOtpOpen(false)} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function UserMenuLink({
|
|
to,
|
|
icon,
|
|
label,
|
|
onNavigate,
|
|
}: {
|
|
to: string
|
|
icon: ReactNode
|
|
label: string
|
|
onNavigate: () => void
|
|
}) {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
onClick={onNavigate}
|
|
className="flex 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)]"
|
|
>
|
|
{icon}
|
|
<span>{label}</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function profileButtonClass(active: boolean): string {
|
|
return clsx(
|
|
'flex w-full items-center justify-between rounded-xl px-2.5 py-2 text-left text-xs transition-colors',
|
|
active
|
|
? 'bg-[var(--app-active-bg)] text-[var(--app-active-text)]'
|
|
: 'text-[var(--app-subtle)] hover:bg-[var(--app-hover)]',
|
|
)
|
|
}
|