chore: bump version to 0.0.71 [skip ci]

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>

VERSION

@@ -1 +1 @@
-0.0.67
+0.0.71

web/src/components/Layout.tsx

@@ -7,15 +7,16 @@ import {
   LayoutSidebars,
   LayoutWorkspace,
 } from './LayoutSections'
+import { MobileBottomNav } from './MobileBottomNav'
+import { isAdminEntrySearch, isPlayerRoute, shouldShowMobileBottomNav } from './layoutNavigation'
 import { useLayoutPermissions } from './useLayoutPermissions'
 import { useLayoutProfiles } from './useLayoutProfiles'
 import { useLayoutSidebar } from './useLayoutSidebar'
 import { useThemeMode } from './useThemeMode'
 
 function isMediaView(pathname: string, search: string): boolean {
-  const params = new URLSearchParams(search)
-  // 从设置/管理后台菜单进入（携带 from=admin 或 from=settings 或 manage=1）时展示左侧栏
-  if (params.get('from') === 'admin' || params.get('from') === 'settings' || params.get('manage') === '1') {
+  // 从设置/管理后台菜单进入时展示左侧栏
+  if (isAdminEntrySearch(search)) {
     return false
   }
 
@@ -24,7 +25,7 @@ function isMediaView(pathname: string, search: string): boolean {
     pathname === '/libraries' ||
     pathname.startsWith('/library') ||
     pathname.startsWith('/media') ||
-    pathname.startsWith('/play') ||
+    isPlayerRoute(pathname) ||
     pathname === '/favourites' ||
     pathname === '/playlists' ||
     pathname.startsWith('/playlist') ||
@@ -50,7 +51,8 @@ export function Layout() {
 
   const showSidebar = !isMediaView(location.pathname, location.search)
   const hideSearch = location.pathname.startsWith('/settings')
-  const isPlayPage = location.pathname.startsWith('/play')
+  const isPlayPage = isPlayerRoute(location.pathname)
+  const showMobileBottomNav = shouldShowMobileBottomNav(location.pathname)
 
   return (
     <div className="flex h-[100dvh] min-h-0 w-full overflow-hidden bg-[var(--app-bg)] text-[var(--app-text)] font-body select-none">
@@ -59,6 +61,7 @@ export function Layout() {
         isAdmin={permissions.isAdmin}
         can={permissions.can}
         showSidebar={showSidebar}
+        sidebarVariant={showSidebar ? 'admin' : 'media'}
       />
       <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
         {!isPlayPage && (
@@ -72,9 +75,13 @@ export function Layout() {
             onLogout={closeProfileAndLogout}
             showSidebar={showSidebar}
             hideSearch={hideSearch}
+            pathname={location.pathname}
           />
         )}
-        <LayoutWorkspace routeKey={location.pathname} />
+        <LayoutWorkspace routeKey={location.pathname} showMobileBottomNav={showMobileBottomNav} />
+        {showMobileBottomNav && (
+          <MobileBottomNav onOpenMenu={() => sidebar.setIsMobileDrawerOpen(true)} />
+        )}
       </div>
     </div>
   )

web/src/components/LayoutHeaderSections.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Film, LoaderCircle, Menu, Search, Star, X } from 'lucide-react'
+import { ArrowLeft, Film, LoaderCircle, Menu, Search, Star, X } from 'lucide-react'
 
 import { imageURL } from '../api/client'
 import { mediaAPI } from '../api/library'
 import type { Media, PlayProfile, User } from '../types'
+import { resolveHeaderBack } from './layoutNavigation'
 import { LayoutThemeToggle } from './LayoutThemeToggle'
 import { LayoutUserMenu } from './LayoutUserMenu'
 import type { useLayoutProfiles } from './useLayoutProfiles'
@@ -29,6 +30,7 @@ type LayoutHeaderProps = {
   onLogout: () => void
   showSidebar?: boolean
   hideSearch?: boolean
+  pathname?: string
 }
 
 export function LayoutHeader({
@@ -41,11 +43,26 @@ export function LayoutHeader({
   onLogout,
   showSidebar,
   hideSearch,
+  pathname = '',
 }: LayoutHeaderProps) {
+  const navigate = useNavigate()
+  const headerBack = resolveHeaderBack(pathname)
+
   return (
     <header className="relative z-30 flex h-16 shrink-0 items-center justify-between gap-2 border-b border-[var(--app-border)] bg-[var(--app-header-bg)] px-3 backdrop-blur-md sm:h-20 sm:gap-4 sm:px-4 md:px-8">
-      {/* Left: Mobile Menu button or Brand Logo */}
-      <div className="flex items-center gap-3 shrink-0">
+      {/* Left: back / menu / brand */}
+      <div className="flex items-center gap-2 shrink-0 sm:gap-3">
+        {headerBack ? (
+          <button
+            type="button"
+            onClick={() => navigate(headerBack.to)}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-[var(--app-border)] px-2.5 py-2 text-xs font-semibold text-[var(--app-subtle)] transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)] lg:hidden"
+            title={headerBack.label}
+          >
+            <ArrowLeft size={16} />
+            <span className="max-w-[4.5rem] truncate sm:max-w-none">{headerBack.label}</span>
+          </button>
+        ) : null}
         <button
           onClick={onOpenMobileDrawer}
           className="rounded-xl border border-[var(--app-border)] p-2.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)] transition-colors lg:hidden"
@@ -53,12 +70,7 @@ export function LayoutHeader({
         >
           <Menu size={18} />
         </button>
-        <Link
-          to="/"
-          className={`flex items-center gap-2.5 transition-transform hover:scale-105 ${
-            showSidebar ? 'lg:hidden' : ''
-          }`}
-        >
+        <Link to="/" className={`flex items-center gap-2.5 transition-transform hover:scale-105 ${showSidebar ? 'lg:hidden' : 'hidden sm:flex'}`}>
           <img
             src="/brand/logo-192.png"
             alt="MMTL"
@@ -303,6 +315,8 @@ function LayoutHeaderActions({
         onUseDefaultProfile={onUseDefaultProfile}
         onSwitchProfile={onSwitchProfile}
         onLogout={onLogout}
+        themeMode={themeMode}
+        onThemeChange={onThemeChange}
       />
     </div>
   )

web/src/components/LayoutSections.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import clsx from 'clsx'
 
 import { LayoutSidebarContent, type LayoutSidebarContentProps } from './LayoutSidebarContent'
+import { isPlayerRoute } from './layoutNavigation'
 import { RouteErrorBoundary } from './RouteErrorBoundary'
 import type { useLayoutSidebar } from './useLayoutSidebar'
 
@@ -25,10 +26,12 @@ type LayoutSidebarsProps = Omit<
 > & {
   sidebar: LayoutSidebarState
   showSidebar: boolean
+  sidebarVariant?: 'media' | 'admin'
 }
 
 type LayoutWorkspaceProps = {
   routeKey: string
+  showMobileBottomNav?: boolean
 }
 
 export { LayoutHeader } from './LayoutHeaderSections'
@@ -37,7 +40,7 @@ export function LayoutDesktopSidebar({ children, isSidebarOpen }: LayoutSidebarP
   return (
     <aside
       className={clsx(
-        'hidden lg:flex flex-col h-full shrink-0 transition-all duration-300 ease-out',
+        'hidden lg:flex min-h-0 h-full shrink-0 flex-col transition-all duration-300 ease-out',
         isSidebarOpen ? 'w-64' : 'w-20',
       )}
     >
@@ -63,7 +66,7 @@ export function LayoutMobileSidebar({ children, isOpen, onClose }: LayoutMobileS
             animate={{ x: 0 }}
             exit={{ x: '-100%' }}
             transition={{ type: 'spring', damping: 25, stiffness: 220 }}
-            className="relative flex w-64 max-w-xs flex-col h-full z-10 shadow-xl"
+            className="relative z-10 flex h-full min-h-0 w-64 max-w-xs flex-col overflow-hidden shadow-xl"
           >
             {children}
           </motion.div>
@@ -78,6 +81,7 @@ export function LayoutSidebars({
   isAdmin,
   can,
   showSidebar,
+  sidebarVariant = 'admin',
 }: LayoutSidebarsProps) {
   const content = (
     <LayoutSidebarContent
@@ -87,6 +91,7 @@ export function LayoutSidebars({
       can={can}
       onToggleSidebar={sidebar.toggleSidebar}
       onCloseMobileDrawer={() => sidebar.setIsMobileDrawerOpen(false)}
+      variant={sidebarVariant}
     />
   )
 
@@ -116,8 +121,12 @@ export function LayoutSidebars({
   )
 }
 
-export function LayoutWorkspace({ routeKey }: LayoutWorkspaceProps) {
-  if (routeKey.startsWith('/play')) {
+export function LayoutWorkspace({ routeKey, showMobileBottomNav = false }: LayoutWorkspaceProps) {
+  const bottomPad = showMobileBottomNav
+    ? 'pb-[calc(3.75rem+env(safe-area-inset-bottom,0px))] lg:pb-10'
+    : ''
+
+  if (isPlayerRoute(routeKey)) {
     return (
       <main className="flex flex-1 h-full w-full overflow-hidden">
         <RouteErrorBoundary>
@@ -128,7 +137,7 @@ export function LayoutWorkspace({ routeKey }: LayoutWorkspaceProps) {
   }
 
   return (
-    <main className="flex-1 overflow-y-auto px-4 py-6 md:px-8 md:py-10">
+    <main className={clsx('flex-1 overflow-y-auto px-4 py-6 md:px-8 md:py-10', bottomPad)}>
       <div className="max-w-7xl mx-auto">
         <AnimatePresence mode="wait">
           <motion.div

web/src/components/LayoutSidebarContent.tsx

@@ -2,7 +2,12 @@ import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { ArrowLeft, Menu, X } from 'lucide-react'
 import clsx from 'clsx'
-import { LAYOUT_NAV_ITEMS, type LayoutNavItem } from './layoutNavigation'
+
+import {
+  LAYOUT_NAV_ITEMS,
+  MEDIA_NAV_ITEMS,
+  type LayoutNavItem,
+} from './layoutNavigation'
 import { SidebarLink } from './LayoutSidebarNav'
 
 export type LayoutSidebarContentProps = {
@@ -12,6 +17,7 @@ export type LayoutSidebarContentProps = {
   can: (key: string) => boolean
   onToggleSidebar: () => void
   onCloseMobileDrawer: () => void
+  variant?: 'media' | 'admin'
 }
 
 export function LayoutSidebarContent({
@@ -21,18 +27,34 @@ export function LayoutSidebarContent({
   can,
   onToggleSidebar,
   onCloseMobileDrawer,
+  variant = 'admin',
 }: LayoutSidebarContentProps) {
   const sidebarExpanded = isSidebarOpen || isMobileDrawerOpen
-  const visibleItems = visibleSidebarItems({ isAdmin, can })
+  const mediaItems = visibleSidebarItems({ isAdmin, can, items: MEDIA_NAV_ITEMS })
+  const adminItems = visibleSidebarItems({ isAdmin, can, items: LAYOUT_NAV_ITEMS })
 
   return (
-    <div className="flex h-full flex-col border-r border-[var(--app-border)] bg-[var(--app-panel)]">
+    <div className="flex h-full min-h-0 flex-col border-r border-[var(--app-border)] bg-[var(--app-panel)]">
       <LayoutSidebarHeader
         sidebarExpanded={sidebarExpanded}
         onToggleSidebar={onToggleSidebar}
         onCloseMobileDrawer={onCloseMobileDrawer}
       />
-      <LayoutSidebarNav items={visibleItems} sidebarExpanded={sidebarExpanded} />
+      <div className="min-h-0 flex-1 overflow-y-auto scrollbar-hide">
+        {variant === 'media' ? (
+          <>
+            <LayoutSidebarNav items={mediaItems} sidebarExpanded={sidebarExpanded} />
+            {adminItems.length > 0 && (
+              <div className="border-t border-[var(--app-border)]">
+                <LayoutSidebarSectionLabel sidebarExpanded={sidebarExpanded} label="管理" />
+                <LayoutSidebarNav items={adminItems} sidebarExpanded={sidebarExpanded} compactTop />
+              </div>
+            )}
+          </>
+        ) : (
+          <LayoutSidebarNav items={adminItems} sidebarExpanded={sidebarExpanded} />
+        )}
+      </div>
       <LayoutSidebarHomeBack sidebarExpanded={sidebarExpanded} />
     </div>
   )
@@ -41,8 +63,9 @@ export function LayoutSidebarContent({
 function visibleSidebarItems({
   isAdmin,
   can,
-}: Pick<LayoutSidebarContentProps, 'isAdmin' | 'can'>): LayoutNavItem[] {
-  return LAYOUT_NAV_ITEMS.filter(
+  items,
+}: Pick<LayoutSidebarContentProps, 'isAdmin' | 'can'> & { items: LayoutNavItem[] }): LayoutNavItem[] {
+  return items.filter(
     (item) => (!item.adminOnly || isAdmin) && (!item.permission || can(item.permission)),
   )
 }
@@ -57,7 +80,7 @@ function LayoutSidebarHeader({
   onCloseMobileDrawer: () => void
 }) {
   return (
-    <div className="flex h-20 items-center justify-between border-b border-[var(--app-border)] px-6">
+    <div className="flex h-20 shrink-0 items-center justify-between border-b border-[var(--app-border)] px-6">
       <Link to="/" className="flex items-center gap-3">
         <img
           src="/brand/logo-192.png"
@@ -84,15 +107,37 @@ function LayoutSidebarHeader({
   )
 }
 
+function LayoutSidebarSectionLabel({
+  sidebarExpanded,
+  label,
+}: {
+  sidebarExpanded: boolean
+  label: string
+}) {
+  if (!sidebarExpanded) return null
+  return (
+    <p className="px-4 pt-4 pb-1 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
+      {label}
+    </p>
+  )
+}
+
 function LayoutSidebarNav({
   items,
   sidebarExpanded,
+  compactTop = false,
 }: {
   items: LayoutNavItem[]
   sidebarExpanded: boolean
+  compactTop?: boolean
 }) {
   return (
-    <nav className="flex-1 overflow-y-auto px-4 py-5 space-y-1 scrollbar-hide">
+    <nav
+      className={clsx(
+        'px-4 py-5 space-y-1',
+        compactTop && 'pt-2',
+      )}
+    >
       {items.map((item) => {
         const ItemIcon = item.icon
         return (
@@ -112,7 +157,7 @@ function LayoutSidebarNav({
 
 function LayoutSidebarHomeBack({ sidebarExpanded }: { sidebarExpanded: boolean }) {
   return (
-    <div className="border-t border-[var(--app-border)] bg-[var(--app-panel-soft)] p-4">
+    <div className="shrink-0 border-t border-[var(--app-border)] bg-[var(--app-panel-soft)] p-4">
       <Link
         to="/"
         className={clsx(

web/src/components/LayoutSidebarNav.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react'
-import { NavLink } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 import clsx from 'clsx'
 
+import { isSidebarLinkActive } from './layoutNavigation'
+
 type SidebarGroupProps = {
   id: string
   icon: ReactNode
@@ -79,44 +81,41 @@ type SidebarLinkProps = {
 }
 
 export function SidebarLink({ to, icon, label, end, collapsed, child }: SidebarLinkProps) {
+  const location = useLocation()
+  const isActive = isSidebarLinkActive(to, location.pathname, location.search, end)
+
   return (
-    <NavLink
+    <Link
       to={to}
-      end={end}
-      className={({ isActive }) =>
-        clsx(
-          'relative flex items-center gap-3.5 rounded-xl px-4 py-3 text-sm font-semibold transition-all duration-300 group',
-          child && 'py-2.5 text-[13px]',
-          isActive
-            ? 'bg-[var(--app-active-bg)] text-[var(--app-active-text)] shadow-sm'
-            : 'text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]',
-        )
-      }
-    >
-      {({ isActive }) => (
-        <>
-          <span className={clsx(
-            'flex h-5 w-5 shrink-0 items-center justify-center transition-transform duration-300 group-hover:scale-110',
-            isActive ? 'text-[var(--app-active-icon)]' : 'text-[var(--app-muted)] group-hover:text-[var(--app-subtle)]',
-          )}>
-            {icon}
-          </span>
-          {!collapsed && (
-            <motion.span
-              initial={{ opacity: 0, x: -5 }}
-              animate={{ opacity: 1, x: 0 }}
-              className="truncate whitespace-nowrap"
-            >
-              {label}
-            </motion.span>
-          )}
-          {collapsed && (
-            <div className="pointer-events-none absolute left-full z-50 ml-3 whitespace-nowrap rounded-xl bg-[var(--app-tooltip-bg)] px-2.5 py-1.5 text-xs font-semibold text-[var(--app-tooltip-text)] opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-              {label}
-            </div>
-          )}
-        </>
+      aria-current={isActive ? 'page' : undefined}
+      className={clsx(
+        'relative flex items-center gap-3.5 rounded-xl px-4 py-3 text-sm font-semibold transition-all duration-300 group',
+        child && 'py-2.5 text-[13px]',
+        isActive
+          ? 'bg-[var(--app-active-bg)] text-[var(--app-active-text)] shadow-sm'
+          : 'text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]',
       )}
-    </NavLink>
+    >
+      <span className={clsx(
+        'flex h-5 w-5 shrink-0 items-center justify-center transition-transform duration-300 group-hover:scale-110',
+        isActive ? 'text-[var(--app-active-icon)]' : 'text-[var(--app-muted)] group-hover:text-[var(--app-subtle)]',
+      )}>
+        {icon}
+      </span>
+      {!collapsed && (
+        <motion.span
+          initial={{ opacity: 0, x: -5 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="truncate whitespace-nowrap"
+        >
+          {label}
+        </motion.span>
+      )}
+      {collapsed && (
+        <div className="pointer-events-none absolute left-full z-50 ml-3 whitespace-nowrap rounded-xl bg-[var(--app-tooltip-bg)] px-2.5 py-1.5 text-xs font-semibold text-[var(--app-tooltip-text)] opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+          {label}
+        </div>
+      )}
+    </Link>
   )
 }

web/src/components/LayoutUserMenu.tsx

@@ -1,10 +1,18 @@
-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'
 import clsx from 'clsx'
 
 import type { PlayProfile } from '../types'
+import { LayoutThemeToggle } from './LayoutThemeToggle'
+import type { ThemeMode } from './useThemeMode'
+
+type MenuPosition = {
+  top: number
+  right: number
+}
 
 type LayoutUser = {
   username?: string
@@ -22,6 +30,8 @@ type LayoutUserMenuProps = {
   onUseDefaultProfile: () => void
   onSwitchProfile: (profile: PlayProfile) => void
   onLogout: () => void
+  themeMode?: ThemeMode
+  onThemeChange?: (mode: ThemeMode) => void
 }
 
 export function LayoutUserMenu({
@@ -35,74 +45,95 @@ export function LayoutUserMenu({
   onUseDefaultProfile,
   onSwitchProfile,
   onLogout,
+  themeMode,
+  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)]">
+                  主题
+                </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)]">
@@ -128,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>
   )
 }
@@ -148,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}

web/src/components/MobileBottomNav.tsx

@@ -0,0 +1,55 @@
+import { Link, useLocation } from 'react-router-dom'
+import clsx from 'clsx'
+import { Menu } from 'lucide-react'
+
+import { MOBILE_BOTTOM_NAV_ITEMS } from './layoutNavigation'
+
+type MobileBottomNavProps = {
+  onOpenMenu: () => void
+}
+
+export function MobileBottomNav({ onOpenMenu }: MobileBottomNavProps) {
+  const location = useLocation()
+
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-[var(--app-border)] bg-[var(--app-panel)]/95 backdrop-blur-md lg:hidden"
+      style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+      aria-label="主导航"
+    >
+      <div className="mx-auto flex h-14 max-w-lg items-stretch justify-around px-1">
+        {MOBILE_BOTTOM_NAV_ITEMS.map((item) => {
+          const Icon = item.icon
+          const active = item.match
+            ? item.match(location.pathname)
+            : item.end
+              ? location.pathname === item.to
+              : location.pathname === item.to || location.pathname.startsWith(`${item.to}/`)
+
+          return (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={clsx(
+                'flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[10px] font-semibold transition-colors',
+                active ? 'text-brand-600' : 'text-[var(--app-muted)] hover:text-[var(--app-text)]',
+              )}
+            >
+              <Icon size={18} strokeWidth={active ? 2.4 : 2} />
+              <span className="truncate">{item.label}</span>
+            </Link>
+          )
+        })}
+        <button
+          type="button"
+          onClick={onOpenMenu}
+          className="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[10px] font-semibold text-[var(--app-muted)] transition-colors hover:text-[var(--app-text)]"
+          aria-label="打开更多菜单"
+        >
+          <Menu size={18} />
+          <span>更多</span>
+        </button>
+      </div>
+    </nav>
+  )
+}

web/src/components/PageBackButton.tsx

@@ -0,0 +1,48 @@
+import { ArrowLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import clsx from 'clsx'
+
+type PageBackButtonProps = {
+  to?: string
+  label?: string
+  onClick?: () => void
+  className?: string
+  compact?: boolean
+}
+
+export function PageBackButton({
+  to,
+  label = '返回',
+  onClick,
+  className,
+  compact = false,
+}: PageBackButtonProps) {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick()
+      return
+    }
+    if (to) {
+      navigate(to)
+      return
+    }
+    navigate(-1)
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={clsx(
+        'inline-flex items-center gap-2 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel)] px-3 py-2 text-sm font-semibold text-[var(--app-subtle)] shadow-sm transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]',
+        compact && 'px-2.5 py-1.5 text-xs',
+        className,
+      )}
+    >
+      <ArrowLeft size={compact ? 15 : 16} />
+      <span>{label}</span>
+    </button>
+  )
+}

web/src/components/PageHeader.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+import { PageBackButton } from './PageBackButton'
+
+type PageHeaderProps = {
+  title: string
+  description?: string
+  backTo?: string
+  backLabel?: string
+  onBack?: () => void
+  actions?: ReactNode
+  className?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  backTo,
+  backLabel,
+  onBack,
+  actions,
+  className,
+}: PageHeaderProps) {
+  const showBack = Boolean(backTo || onBack)
+
+  return (
+    <header className={className ?? 'space-y-3'}>
+      {showBack && <PageBackButton to={backTo} label={backLabel} onClick={onBack} />}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div className="min-w-0">
+          <h1 className="font-display text-2xl font-bold text-ink-600 sm:text-3xl">{title}</h1>
+          {description ? <p className="mt-0.5 text-xs text-ink-50 sm:text-sm">{description}</p> : null}
+        </div>
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+    </header>
+  )
+}

web/src/components/layoutNavigation.ts

@@ -1,9 +1,13 @@
 import type { LucideIcon } from 'lucide-react'
 import {
+  Clock,
   FileOutput,
   FolderOpen,
+  Heart,
+  Home,
   Library,
   ListChecks,
+  ListMusic,
   Settings,
   Tv,
   User,
@@ -19,6 +23,20 @@ export type LayoutNavItem = {
   adminOnly?: boolean
 }
 
+export type HeaderBackTarget = {
+  to: string
+  label: string
+}
+
+export type MobileBottomNavItem = {
+  to: string
+  label: string
+  icon: LucideIcon
+  end?: boolean
+  match?: (pathname: string) => boolean
+}
+
+/** Desktop admin sidebar and admin mobile drawer. */
 export const LAYOUT_NAV_ITEMS: LayoutNavItem[] = [
   { to: '/profile', label: '个人资料', icon: User },
   { to: '/libraries?from=admin', label: '媒体库', icon: Library },
@@ -26,8 +44,136 @@ export const LAYOUT_NAV_ITEMS: LayoutNavItem[] = [
   { to: '/admin', label: '用户管理', icon: Users, adminOnly: true },
   { to: '/files', label: '文件管理', icon: FolderOpen, adminOnly: true },
   { to: '/settings', label: '系统设置', icon: Settings, adminOnly: true },
-  // Emby 挂载（设置区）：远程 Emby 媒体库挂载
   { to: '/emby-mount', label: 'Emby 挂载', icon: Tv, adminOnly: true },
-  // STRM 管理（设置区）：网盘目录生成 strm 与元数据同步
   { to: '/strm', label: 'STRM 管理', icon: FileOutput, adminOnly: true },
-]
+]
+
+/** Media browsing links for the mobile drawer when browsing libraries. */
+export const MEDIA_NAV_ITEMS: LayoutNavItem[] = [
+  { to: '/', label: '首页', icon: Home, end: true },
+  { to: '/libraries', label: '媒体库', icon: Library },
+  { to: '/favourites', label: '我的收藏', icon: Heart },
+  { to: '/playlists', label: '播放列表', icon: ListMusic },
+  { to: '/history', label: '观看历史', icon: Clock },
+]
+
+export const MOBILE_BOTTOM_NAV_ITEMS: MobileBottomNavItem[] = [
+  { to: '/', label: '首页', icon: Home, end: true },
+  {
+    to: '/libraries',
+    label: '媒体库',
+    icon: Library,
+    match: (p) => p === '/libraries' || p.startsWith('/library'),
+  },
+  { to: '/favourites', label: '收藏', icon: Heart },
+  {
+    to: '/playlists',
+    label: '列表',
+    icon: ListMusic,
+    match: (p) => p === '/playlists' || p.startsWith('/playlist'),
+  },
+]
+
+const ROOT_MEDIA_PATHS = new Set(['/', '/libraries', '/favourites', '/playlists', '/history'])
+
+/** True only for the fullscreen player route (`/play` or `/play/:id`), not `/playlists`. */
+export function isPlayerRoute(pathname: string): boolean {
+  return pathname === '/play' || pathname.startsWith('/play/')
+}
+
+export function isRootMediaPath(pathname: string): boolean {
+  return ROOT_MEDIA_PATHS.has(pathname)
+}
+
+/** Admin-entry query used to open the management sidebar on library pages. */
+export function isAdminEntrySearch(search: string): boolean {
+  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)
+  return (
+    params.get('from') === 'admin' ||
+    params.get('from') === 'settings' ||
+    params.get('manage') === '1'
+  )
+}
+
+export function isLibraryPath(pathname: string): boolean {
+  return pathname === '/libraries' || pathname.startsWith('/library')
+}
+
+/**
+ * Sidebar active state must honor query strings. NavLink only matches pathname,
+ * so `/libraries` and `/libraries?from=admin` would otherwise both highlight.
+ */
+export function isSidebarLinkActive(
+  to: string,
+  pathname: string,
+  search: string,
+  end?: boolean,
+): boolean {
+  const [toPath, toQuery = ''] = to.split('?')
+  const toIsAdminLibrary = toPath === '/libraries' && isAdminEntrySearch(toQuery)
+  const toIsMediaLibrary = toPath === '/libraries' && !toIsAdminLibrary
+
+  if (toIsAdminLibrary) {
+    return isLibraryPath(pathname) && isAdminEntrySearch(search)
+  }
+  if (toIsMediaLibrary) {
+    return isLibraryPath(pathname) && !isAdminEntrySearch(search)
+  }
+
+  return end ? pathname === toPath : pathname === toPath || pathname.startsWith(`${toPath}/`)
+}
+
+export function resolveHeaderBack(pathname: string): HeaderBackTarget | null {
+  if (pathname.startsWith('/library/')) {
+    return { to: '/libraries', label: '媒体库' }
+  }
+  if (pathname === '/playlists' || pathname === '/favourites' || pathname === '/history') {
+    return { to: '/', label: '首页' }
+  }
+  if (pathname.startsWith('/playlist/')) {
+    return { to: '/playlists', label: '播放列表' }
+  }
+  if (pathname.startsWith('/media/')) {
+    return null
+  }
+  if (pathname === '/scraper/queue') {
+    return { to: '/queue', label: '任务队列' }
+  }
+  if (pathname === '/strm/downloads' || pathname === '/strm/uploads') {
+    return { to: '/strm', label: 'STRM 管理' }
+  }
+  if (
+    pathname === '/profile' ||
+    pathname === '/dlna' ||
+    pathname === '/play-profiles' ||
+    pathname === '/poster-wall'
+  ) {
+    return { to: '/', label: '首页' }
+  }
+  if (
+    pathname === '/settings' ||
+    pathname === '/admin' ||
+    pathname === '/files' ||
+    pathname === '/queue' ||
+    pathname === '/emby-mount' ||
+    pathname === '/strm'
+  ) {
+    return { to: '/', label: '首页' }
+  }
+  return null
+}
+
+export function shouldShowMobileBottomNav(pathname: string): boolean {
+  if (isPlayerRoute(pathname)) return false
+  return (
+    pathname === '/' ||
+    pathname === '/libraries' ||
+    pathname.startsWith('/library') ||
+    pathname.startsWith('/media') ||
+    pathname === '/favourites' ||
+    pathname === '/playlists' ||
+    pathname.startsWith('/playlist') ||
+    pathname === '/history' ||
+    pathname === '/poster-wall'
+  )
+}

web/src/pages/LibraryPage.tsx

@@ -13,6 +13,7 @@ import {
   type SortOrder,
 } from '../utils/mediaSort'
 import { LibraryPageDialogs } from './LibraryPageDialogs'
+import { PageBackButton } from '../components/PageBackButton'
 import { LibraryPageHeader } from './LibraryPageHeader'
 import { LibraryMediaSections } from './LibraryMediaSections'
 import { LibrarySeriesDetailSection } from './LibrarySeriesDetailSection'
@@ -181,6 +182,12 @@ export function LibraryPage() {
 
   return (
     <div className="space-y-6">
+      {!selectedSeries && (
+        <div className="hidden lg:block">
+          <PageBackButton to="/libraries" label="全部媒体库" compact />
+        </div>
+      )}
+
       {!selectedSeries && (
         <LibraryPageHeader
           library={library}

web/src/pages/MediaDetailPageSections.tsx

@@ -1,6 +1,8 @@
 import { ArrowLeft, Heart, Play, RefreshCw } from 'lucide-react'
 import { Link } from 'react-router-dom'
 
+import { PageBackButton } from '../components/PageBackButton'
+
 import { ExternalPlayerButton } from '../components/ExternalPlayerButton'
 import { ManualScrapeDialog } from '../components/ManualScrapeDialog'
 import { MetadataEditDialog } from '../components/MetadataEditDialog'
@@ -63,8 +65,11 @@ export function MediaDetailLoading() {
 
 export function MediaDetailMissing() {
   return (
-    <div className="text-center py-24 bg-white rounded-2xl border border-gray-200">
-      <p className="text-gray-500">媒体资源已被移除或不存在</p>
+    <div className="space-y-4 py-12 text-center">
+      <PageBackButton label="返回上一页" className="mx-auto" />
+      <div className="rounded-2xl border border-gray-200 bg-white py-16">
+        <p className="text-gray-500">媒体资源已被移除或不存在</p>
+      </div>
     </div>
   )
 }

web/src/pages/PlaylistDetailPage.tsx

@@ -5,6 +5,7 @@ import toast from 'react-hot-toast'
 
 import { playbackAPI, type PlaylistDetail } from '../api/playback'
 import { MediaCard } from '../components/MediaCard'
+import { PageHeader } from '../components/PageHeader'
 
 export function PlaylistDetailPage() {
   const { id = '' } = useParams()
@@ -24,10 +25,12 @@ export function PlaylistDetailPage() {
 
   return (
     <div className="space-y-6">
-      <header>
-        <h1 className="font-display text-3xl font-bold text-ink-600">{detail.playlist.name}</h1>
-        <p className="text-sm text-ink-50">{detail.items.length} 部影片</p>
-      </header>
+      <PageHeader
+        backTo="/playlists"
+        backLabel="播放列表"
+        title={detail.playlist.name}
+        description={`${detail.items.length} 部影片`}
+      />
 
       {detail.items.length === 0 && (
         <p className="text-ink-50">暂无内容,前往媒体详情页通过「加入播放列表」添加。</p>

web/src/pages/PlaylistsPage.tsx

@@ -1,18 +1,18 @@
 import { FormEvent, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { ListPlus, Trash2 } from 'lucide-react'
+import { ChevronRight, ListMusic, ListPlus, Trash2 } from 'lucide-react'
 import toast from 'react-hot-toast'
 
 import { playbackAPI } from '../api/playback'
 import { confirmAction } from '../components/confirmAction'
+import { PageHeader } from '../components/PageHeader'
 import type { Playlist } from '../types'
 
-// Landing page for playlists. Lists every playlist owned by the current
-// user and lets them create / delete one.
 export function PlaylistsPage() {
   const [items, setItems] = useState<Playlist[]>([])
   const [name, setName] = useState('')
   const [loading, setLoading] = useState(true)
+  const [creating, setCreating] = useState(false)
 
   const refresh = () =>
     playbackAPI
@@ -26,67 +26,124 @@ export function PlaylistsPage() {
 
   const onCreate = async (e: FormEvent) => {
     e.preventDefault()
+    const trimmed = name.trim()
+    if (!trimmed) return
+
+    setCreating(true)
     try {
-      await playbackAPI.createPlaylist(name)
+      await playbackAPI.createPlaylist(trimmed)
       toast.success('已创建')
       setName('')
       await refresh()
     } catch {
       toast.error('创建失败')
+    } finally {
+      setCreating(false)
     }
   }
 
+  const isEmpty = !loading && items.length === 0
+
   return (
     <div className="space-y-6">
-      <h1 className="font-display text-3xl font-bold text-ink-600">播放列表</h1>
+      <PageHeader
+        title="播放列表"
+        description="整理你想稍后观看的影片，随时继续播放"
+      />
 
-      <form onSubmit={onCreate} className="glass-panel grid gap-3 md:grid-cols-[1fr_auto]">
+      <form
+        onSubmit={onCreate}
+        className="glass-panel flex flex-col gap-3 sm:flex-row sm:items-center"
+      >
         <input
           required
-          className="input-base"
+          className="input-base min-w-0 flex-1"
           placeholder="新播放列表名称"
           value={name}
           onChange={(e) => setName(e.target.value)}
+          disabled={creating}
         />
-        <button type="submit" className="neon-button">
-          <ListPlus size={16} /> 新建
+        <button type="submit" className="neon-button shrink-0" disabled={creating}>
+          <ListPlus size={16} />
+          {creating ? '创建中…' : '新建'}
         </button>
       </form>
 
-      {loading && <p className="text-sand-500">加载中…</p>}
-      {!loading && items.length === 0 && <p className="text-ink-50">还没有任何播放列表。</p>}
+      {loading && (
+        <div className="flex items-center gap-2 py-8 text-ink-50">
+          <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-400 border-t-transparent" />
+          加载中…
+        </div>
+      )}
 
-      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-        {items.map((p) => (
-          <div
-            key={p.id}
-            className="glass-panel flex items-center justify-between !p-4"
-          >
-            <Link
-              to={`/playlist/${p.id}`}
-              className="font-medium text-ink-600 transition hover:text-brand-500"
-            >
-              {p.name}
-              {p.is_public && (
-                <span className="ml-2 rounded-lg border border-primary-400/40 px-1.5 py-0.5 text-xs text-brand-500">
-                  public
-                </span>
-              )}
-            </Link>
-            <button
-              onClick={async () => {
-                if (!(await confirmAction({ title: '删除播放列表', message: `删除「${p.name}」?`, confirmText: '删除' }))) return
-                await playbackAPI.deletePlaylist(p.id)
-                toast.success('已删除')
-                await refresh()
-              }}
-              className="rounded-lg border border-red-400/40 px-2 py-1 text-xs text-red-400 hover:bg-red-400/10"
-            >
-              <Trash2 size={12} />
-            </button>
+      {isEmpty && (
+        <div className="glass-panel flex flex-col items-center gap-4 p-10 text-center">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-400/10 text-brand-500">
+            <ListMusic size={28} />
           </div>
-        ))}
-      </div>
+          <div className="space-y-1">
+            <p className="text-lg font-medium text-ink-100">还没有任何播放列表</p>
+            <p className="text-sm text-sand-500">
+              在上方输入名称创建列表，或在媒体详情页点击「加入播放列表」
+            </p>
+          </div>
+        </div>
+      )}
+
+      {items.length > 0 && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((p) => (
+            <div
+              key={p.id}
+              className="glass-panel group flex items-center gap-3 !p-4 transition hover:border-primary-400/30"
+            >
+              <Link
+                to={`/playlist/${p.id}`}
+                className="flex min-w-0 flex-1 items-center gap-3"
+              >
+                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary-400/10 text-brand-500 transition group-hover:bg-primary-400/20">
+                  <ListMusic size={20} />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate font-medium text-ink-600 transition group-hover:text-brand-500">
+                    {p.name}
+                  </p>
+                  {p.is_public && (
+                    <span className="mt-0.5 inline-block rounded-md border border-primary-400/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-brand-500">
+                      公开
+                    </span>
+                  )}
+                </div>
+                <ChevronRight
+                  size={18}
+                  className="shrink-0 text-sand-500 transition group-hover:text-brand-500"
+                />
+              </Link>
+              <button
+                type="button"
+                onClick={async () => {
+                  if (
+                    !(await confirmAction({
+                      title: '删除播放列表',
+                      message: `删除「${p.name}」?`,
+                      confirmText: '删除',
+                    }))
+                  ) {
+                    return
+                  }
+                  await playbackAPI.deletePlaylist(p.id)
+                  toast.success('已删除')
+                  await refresh()
+                }}
+                className="shrink-0 rounded-lg border border-red-400/40 p-2 text-red-400 transition hover:bg-red-400/10"
+                title="删除播放列表"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

web/src/pages/ScraperQueuePage.tsx

@@ -60,7 +60,7 @@ const TYPE_LABELS: Record<string, string> = {
 
 const PAGE_SIZE = 50
 
-export function ScraperQueuePage() {
+export function ScraperQueuePage({ embedded = false }: { embedded?: boolean }) {
   const [snapshot, setSnapshot] = useState<ScrapeQueueSnapshot | null>(null)
   const [filter, setFilter] = useState<'all' | ScrapeTaskStatus>('all')
   const [search, setSearch] = useState('')
@@ -251,7 +251,7 @@ export function ScraperQueuePage() {
 
   return (
     <div className="space-y-6">
-      {/* 1. Header */}
+      {!embedded && (
       <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary-400/30 bg-primary-400/10 text-brand-500 shadow-sm">
@@ -385,6 +385,7 @@ export function ScraperQueuePage() {
           </details>
         </div>
       </header>
+      )}
 
       {/* 2. Status Cards */}
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">

web/src/pages/StrmQueuePage.tsx

@@ -55,7 +55,13 @@ function getFileIcon(filename: string): ReactNode {
   return <File size={15} className="text-gray-400 shrink-0" />
 }
 
-export function StrmQueuePanel({ kind }: { kind: 'download' | 'upload' }) {
+export function StrmQueuePanel({
+  kind,
+  embedded = false,
+}: {
+  kind: 'download' | 'upload'
+  embedded?: boolean
+}) {
   const [snapshot, setSnapshot] = useState<StrmQueueSnapshot | null>(null)
   const [filter, setFilter] = useState<'all' | StrmTaskStatus>('all')
   const [search, setSearch] = useState('')
@@ -242,7 +248,7 @@ export function StrmQueuePanel({ kind }: { kind: 'download' | 'upload' }) {
 
   return (
     <div className="space-y-6">
-      {/* 1. Header */}
+      {!embedded && (
       <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary-400/30 bg-primary-400/10 text-brand-500 shadow-sm">
@@ -403,6 +409,7 @@ export function StrmQueuePanel({ kind }: { kind: 'download' | 'upload' }) {
           </details>
         </div>
       </header>
+      )}
 
       {/* 2. Interactive Status Cards */}
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">

web/src/pages/TaskQueuePage.tsx

@@ -115,9 +115,9 @@ export function TaskQueuePage() {
       </div>
 
       {/* 内容 */}
-      {type === 'scrape' && <ScraperQueuePage />}
-      {type === 'download' && <StrmQueuePanel kind="download" />}
-      {type === 'upload' && <StrmQueuePanel kind="upload" />}
+      {type === 'scrape' && <ScraperQueuePage embedded />}
+      {type === 'download' && <StrmQueuePanel kind="download" embedded />}
+      {type === 'upload' && <StrmQueuePanel kind="upload" embedded />}
       {type === 'all' && (
         <div className="space-y-10">
           <section>
@@ -125,21 +125,21 @@ export function TaskQueuePage() {
               <Sparkles size={18} className="text-brand-500" />
               刮削队列
             </h2>
-            <ScraperQueuePage />
+            <ScraperQueuePage embedded />
           </section>
           <section>
             <h2 className="mb-2 flex items-center gap-2 font-display text-xl font-bold text-ink-600">
               <Download size={18} className="text-brand-500" />
               下载队列
             </h2>
-            <StrmQueuePanel kind="download" />
+            <StrmQueuePanel kind="download" embedded />
           </section>
           <section>
             <h2 className="mb-2 flex items-center gap-2 font-display text-xl font-bold text-ink-600">
               <Upload size={18} className="text-brand-500" />
               上传队列
             </h2>
-            <StrmQueuePanel kind="upload" />
+            <StrmQueuePanel kind="upload" embedded />
           </section>
         </div>
       )}