完成视频复刻和优化

core/frontend/src/components/overlays.tsx

@@ -2,6 +2,12 @@ import { useEffect, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { CheckCircle2, Inbox, Music, Shield, Trash2, X } from "lucide-react";
 
+// 抽屉 / 弹窗 / 全屏播放器必须挂到 document.body。
+// 写在页面树里会被顶栏(sticky + z-index)盖住:搜索、余额、铃铛会浮在抽屉上。
+export function OverlayPortal({ children }: { children: ReactNode }) {
+  return createPortal(children, document.body);
+}
+
 // 浮层打开时锁住 body 滚动(否则滚轮会滚动遮罩后面的页面,体感"遮罩没盖住")。
 // 多浮层叠开用计数,最后一个关闭才解锁。
 let scrollLockCount = 0;
@@ -64,7 +70,7 @@ export function MediaLightbox({ open, src, kind, name, close }: {
     return () => document.removeEventListener("keydown", onKey);
   }, [open, close]);
   if (!open || !src) return null;
-  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
+  // 挂到 body:浮层才能盖住顶栏(搜索 / 余额 / 铃铛)和侧栏
   return createPortal(
     <div className="np-lightbox show" onClick={close}>
       <button className="lb-x" type="button" aria-label="关闭" onClick={close}><X /></button>
@@ -114,7 +120,7 @@ export function TeamModal({ open, title, subtitle = "", icon, close, children, f
   useBodyScrollLock(open);
   const { mounted, show } = useOverlayTransition(open, close);
   if (!mounted) return null;
-  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
+  // 挂到 body:浮层才能盖住顶栏(搜索 / 余额 / 铃铛)和侧栏
   return createPortal(
     <div className={`modal-bg${show ? " show" : ""}`} onClick={dismissable ? close : undefined}>
       <div className="modal invite-modal" onClick={(event) => event.stopPropagation()}>
@@ -143,7 +149,7 @@ export function ConfirmModal({ open, title, detail, confirmText, subtitle = "",
   useBodyScrollLock(open);
   const { mounted, show } = useOverlayTransition(open, onCancel);
   if (!mounted) return null;
-  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
+  // 挂到 body:浮层才能盖住顶栏(搜索 / 余额 / 铃铛)和侧栏
   return createPortal(
     <div className={`modal-bg${show ? " show" : ""}`} onClick={dismissable ? onCancel : undefined}>
       <div className="modal" onClick={(event) => event.stopPropagation()}>
@@ -185,7 +191,6 @@ export function Drawer({ title, open, close, children, className }: { title: str
   useBodyScrollLock(open);
   const { mounted, show } = useOverlayTransition(open, close);
   if (!mounted) return null;
-  // 挂到 body:脱离 .content(z-index:1)层叠上下文,遮罩才能盖住头部/侧栏
   return createPortal(
     <>
       <div className={`drawer-bg${show ? " show" : ""}`} onClick={close} />