diff --git a/client/src/pages/EQPage.tsx b/client/src/pages/EQPage.tsx index f89e56b..755733f 100644 --- a/client/src/pages/EQPage.tsx +++ b/client/src/pages/EQPage.tsx @@ -1842,7 +1842,9 @@ export default function EQPage() { {freqLabel(b.freq)} - {getFilterShortName(b.type)} + {peqBandBypassSupported && b.bypassed + ? "BYPASS" + : getFilterShortName(b.type)} ))} @@ -1871,27 +1873,21 @@ export default function EQPage() { style={{ background: "linear-gradient(180deg, rgba(36,38,42,0.92) 0%, rgba(24,26,30,0.92) 100%)", - border: bandBypassed - ? "1px solid rgba(255,255,255,0.18)" - : "1px solid rgba(0,255,246,0.52)", - boxShadow: bandBypassed - ? "none" - : "0 0 14px rgba(0,255,246,0.12), inset 0 1px 0 rgba(255,255,255,0.08)", + border: "1px solid rgba(0,255,246,0.52)", + boxShadow: + "0 0 14px rgba(0,255,246,0.12), inset 0 1px 0 rgba(255,255,255,0.08)", }} > {isFilterMenuOpen && (
(null); + + // 点击菜单外部收起下拉 + useEffect(() => { + if (!isYRangeMenuOpen) return; + const onPointerDown = (event: PointerEvent) => { + const target = event.target as Node; + if (!(yRangeMenuRef.current?.contains(target) ?? false)) { + setIsYRangeMenuOpen(false); + } + }; + document.addEventListener("pointerdown", onPointerDown); + return () => document.removeEventListener("pointerdown", onPointerDown); + }, [isYRangeMenuOpen]); + useEffect(() => { const node = chartContainerRef.current; if (!node) return; @@ -317,27 +334,6 @@ export function FreqChart({ Equalized - {/* Y 轴刻度范围切换 */} -
- {Y_RANGE_OPTIONS.map((r) => ( - - ))} -
{/* A/B + DIFF controls */} @@ -399,9 +395,43 @@ export function FreqChart({ {/* SVG chart */}
+ {/* Y 轴刻度范围:Y 轴顶端单按钮,点击展开下拉选项 */} +
+ + {isYRangeMenuOpen && ( +
+ {Y_RANGE_OPTIONS.map((r) => ( + + ))} +
+ )} +
{/* dB grid */} - {gainLabels.map((g) => ( + {gainLabels.map((g, gi) => ( - - {formatGainLabel(g)} - + {/* 顶格标签位置被 Y 轴范围按钮占用,避免文字重叠 */} + {gi > 0 && ( + + {formatGainLabel(g)} + + )} ))} {/* Freq grid */}