feat: 优化音量面板关闭逻辑,增加外部点击判断

This commit is contained in:
Pine
2026-08-18 07:50:00 +08:00
parent 566656aab9
commit 55d33c091b
+9 -3
View File
@@ -63,10 +63,16 @@ export default function PageHeader() {
};
}, []);
// 点击面板外部 → 关闭音量面板
// 点击音量容器(按钮+面板外部 → 关闭面板
// 用「目标是否在容器内」判断,避免面板内滑块交互(pointerdown)误关弹窗
const volWrapRef = useRef(null);
useEffect(() => {
if (!volOpen) return undefined;
const close = () => setVolOpen(false);
const close = (e) => {
if (volWrapRef.current && !volWrapRef.current.contains(e.target)) {
setVolOpen(false);
}
};
document.addEventListener('pointerdown', close);
return () => document.removeEventListener('pointerdown', close);
}, [volOpen]);
@@ -154,7 +160,7 @@ export default function PageHeader() {
{/* 媒体轮播页:页眉内嵌播放控制 */}
{location.pathname === '/screen' && <MediaHeaderControls />}
{/* 音量控制(媒体 + 音效) */}
<div className="bd-vol-wrap">
<div className="bd-vol-wrap" ref={volWrapRef}>
<button
className={`bd-vol-btn${mediaVol === 0 ? ' muted' : ''}`}
type="button"