fix: close user menu on navigation and outside click (#8)

Portal the profile dropdown to document.body with a full-screen backdrop
so clicks outside reliably dismiss it above transformed page layers. Also
close the menu whenever the route changes.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: truewhile <truewhile@users.noreply.github.com>

web/src/components/LayoutUserMenu.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react'
+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, UserCog } from 'lucide-react'
@@ -8,6 +9,11 @@ import type { PlayProfile } from '../types'
 import { LayoutThemeToggle } from './LayoutThemeToggle'
 import type { ThemeMode } from './useThemeMode'
 
+type MenuPosition = {
+  top: number
+  right: number
+}
+
 type LayoutUser = {
   username?: string
   role?: string
@@ -43,72 +49,83 @@ export function LayoutUserMenu({
   onThemeChange,
 }: LayoutUserMenuProps) {
   const location = useLocation()
-  const rootRef = useRef<HTMLDivElement>(null)
-  const lastLocationRef = useRef(`${location.pathname}${location.search}`)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const onCloseRef = useRef(onClose)
+  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null)
+
+  onCloseRef.current = 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 handlePointerDown = (event: PointerEvent) => {
-      const root = rootRef.current
-      const target = event.target
-      if (!root || !(target instanceof Node) || root.contains(target)) return
-      onClose()
-    }
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose()
+      if (event.key === 'Escape') onCloseRef.current()
     }
 
-    document.addEventListener('pointerdown', handlePointerDown, true)
     document.addEventListener('keydown', handleKeyDown)
     return () => {
-      document.removeEventListener('pointerdown', handlePointerDown, true)
       document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [isOpen, onClose])
+  }, [isOpen])
 
   useEffect(() => {
-    const nextLocation = `${location.pathname}${location.search}`
-    if (lastLocationRef.current === nextLocation) return
-    lastLocationRef.current = nextLocation
-    if (isOpen) onClose()
-  }, [isOpen, location.pathname, location.search, onClose])
+    onCloseRef.current()
+  }, [location.pathname, location.search])
 
-  return (
-    <div ref={rootRef} className="relative" data-testid="layout-user-menu">
-      <button
-        onClick={onToggle}
-        aria-expanded={isOpen}
-        aria-haspopup="menu"
-        className="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>
-
-      <AnimatePresence>
-        {isOpen && (
+  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"
-            className="absolute right-0 z-50 mt-3 w-56 origin-top-right rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-2 shadow-xl"
+            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="设置" onClick={onClose} />
-            <UserMenuLink to="/favourites" icon={<Heart size={16} />} label="我的收藏" onClick={onClose} />
-            <UserMenuLink to="/playlists" icon={<ListMusic size={16} />} label="播放列表" onClick={onClose} />
-            <UserMenuLink to="/history" icon={<Clock size={16} />} label="观看历史" onClick={onClose} />
-            <UserMenuLink to="/dlna" icon={<Cast size={16} />} label="DLNA投屏" onClick={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} />
             {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)]">
@@ -142,18 +159,50 @@ export function LayoutUserMenu({
                 ))}
               </div>
             </div>
-            <UserMenuLink to="/play-profiles" icon={<UserCog size={16} />} label="管理观影 Profile" onClick={onClose} />
+            <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={onLogout}
+              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>
+        </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}
     </div>
   )
 }
@@ -162,17 +211,17 @@ function UserMenuLink({
   to,
   icon,
   label,
-  onClick,
+  onNavigate,
 }: {
   to: string
-  icon: React.ReactNode
+  icon: ReactNode
   label: string
-  onClick: () => void
+  onNavigate: () => void
 }) {
   return (
     <Link
       to={to}
-      onClick={onClick}
+      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}