From 3442807918b6768e38ea508e6db96839a114313d Mon Sep 17 00:00:00 2001
From: eafonyang <eafonyang@gmail.com>
Date: Thu, 5 Nov 2026 10:07:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(freqchart):=20=E4=BC=98=E5=8C=96Y=E8=BD=B4?=
 =?UTF-8?q?=E5=88=BB=E5=BA=A6=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加Y轴刻度范围的下拉菜单按钮，代替原先的按钮组展示
- 实现菜单外点击关闭下拉功能，提升操作便捷性
- 调整刻度范围按钮样式，使其更美观且易于点击
- 修正dB刻度网格标签显示，避免顶部标签与范围按钮重叠
- 优化相关样式和布局，提升整体界面一致性与视觉效果
---
 client/src/pages/eq/components/FreqChart.tsx | 85 ++++++++++++++------
 1 file changed, 59 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/eq/components/FreqChart.tsx b/client/src/pages/eq/components/FreqChart.tsx
index 9c0e0fd..c41a954 100644
--- a/client/src/pages/eq/components/FreqChart.tsx
+++ b/client/src/pages/eq/components/FreqChart.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from "react";
+import { ChevronDown, ZoomIn } from "lucide-react";
 import { toast } from "sonner";
 import { useStrokeDrawAnimation } from "@/lib/useStrokeDrawAnimation";
 import {
@@ -113,6 +114,22 @@ export function FreqChart({
     }
   };
 
+  const [isYRangeMenuOpen, setIsYRangeMenuOpen] = useState(false);
+  const yRangeMenuRef = useRef<HTMLDivElement | null>(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
           </span>
         </button>
-        {/* Y 轴刻度范围切换 */}
-        <div
-          className="ml-auto flex shrink-0 items-center overflow-hidden rounded-[8px]"
-          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
-        >
-          {Y_RANGE_OPTIONS.map((r) => (
-            <button
-              key={r}
-              type="button"
-              className="px-2 py-1 text-[10px] transition-all duration-150"
-              style={
-                yDbMax === r
-                  ? { background: "#00FFF6", color: "#000", fontWeight: 600 }
-                  : { color: "rgba(255,255,255,0.4)" }
-              }
-              onClick={() => handleYRangeChange(r)}
-            >
-              ±{r}
-            </button>
-          ))}
-        </div>
       </div>
 
       {/* A/B + DIFF controls */}
@@ -399,9 +395,43 @@ export function FreqChart({
       {/* SVG chart */}
       <div
         ref={chartContainerRef}
-        className="rounded-[10px] overflow-hidden"
+        className="relative rounded-[10px] overflow-hidden"
         style={{ background: "rgba(10,12,10,0.7)" }}
       >
+        {/* Y 轴刻度范围：Y 轴顶端单按钮，点击展开下拉选项 */}
+        <div ref={yRangeMenuRef} className="absolute left-1 top-1 z-20">
+          <button
+            type="button"
+            className="flex items-center gap-1 rounded-[8px] px-2 py-1 text-[12px] font-semibold text-[#00FFF6] active:opacity-80 transition-opacity"
+            style={{ background: "rgba(44,44,46,0.85)", border: "1px solid rgba(255,255,255,0.12)" }}
+            onClick={() => setIsYRangeMenuOpen(v => !v)}
+          >
+            <ZoomIn size={12} />
+            {yDbMax}
+            <ChevronDown size={12} className={`transition-transform ${isYRangeMenuOpen ? "rotate-180" : ""}`} />
+          </button>
+          {isYRangeMenuOpen && (
+            <div
+              className="absolute left-0 top-full mt-1 w-[64px] overflow-hidden rounded-[8px]"
+              style={{ background: "rgba(10,12,16,0.98)", border: "1px solid rgba(0,255,246,0.35)", boxShadow: "0 8px 20px rgba(0,0,0,0.45)" }}
+            >
+              {Y_RANGE_OPTIONS.map((r) => (
+                <button
+                  key={r}
+                  type="button"
+                  className={`w-full px-2 py-1.5 text-left text-[11px] transition-colors ${yDbMax === r ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"}`}
+                  style={yDbMax === r ? { background: "#00FFF6" } : undefined}
+                  onClick={() => {
+                    handleYRangeChange(r);
+                    setIsYRangeMenuOpen(false);
+                  }}
+                >
+                  {r}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
         <svg
           ref={svgRef}
           viewBox={`0 0 ${W} ${H}`}
@@ -419,13 +449,16 @@ export function FreqChart({
             </clipPath>
           </defs>
           {/* dB grid */}
-          {gainLabels.map((g) => (
+          {gainLabels.map((g, gi) => (
             <g key={`gain-${g}`}>
               <line x1="0" y1={gainToY(g)} x2={W} y2={gainToY(g)}
                 stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
-              <text x="3" y={gainToY(g) - 2} fontSize="7" fill="rgba(255,255,255,0.2)">
-                {formatGainLabel(g)}
-              </text>
+              {/* 顶格标签位置被 Y 轴范围按钮占用，避免文字重叠 */}
+              {gi > 0 && (
+                <text x="3" y={gainToY(g) - 2} fontSize="7" fill="rgba(255,255,255,0.2)">
+                  {formatGainLabel(g)}
+                </text>
+              )}
             </g>
           ))}
           {/* Freq grid */}