Implement community forum integration in CommunityPage; update BottomNav to conditionally display community tab based on screen size. Add new audio processing function for combined PEQ magnitude calculation in peqAudio.

client/src/pages/EQPage.tsx

@@ -38,6 +38,7 @@ import {
   getFilterType,
   getFilterShortName,
   buildPeqSvgCurveData,
+  sampleCombinedPeqMagnitudeDb,
 } from "@/lib/peqAudio";
 import localeZh from "@/locales/data-zh.json";
 import localeZhHK from "@/locales/data-zh-HK.json";
@@ -128,7 +129,8 @@ function FreqChart({
   onBandSelect: (idx: number) => void;
   eqUi: PeqEqUi;
 }) {
-  const H = 140;
+  /** 频响图 SVG 高度（viewBox 与 CSS 一致） */
+  const H = 400;
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const svgRef = useRef<SVGSVGElement | null>(null);
   const draggingBandRef = useRef<number | null>(null);
@@ -217,11 +219,17 @@ function FreqChart({
         maxFreq: 20000,
         paddingY: 10,
       }),
-    [bands, W],
+    [bands, W, H],
   );
   const pathD = curveData.pathD;
   const fillD = curveData.fillD;
 
+  /** 各带中心频率处级联响应 dB，与黄线同源 — 手柄纵坐标须用此值才能落在曲线上 */
+  const combinedMagDbAtHandles = useMemo(
+    () => bands.map((b) => sampleCombinedPeqMagnitudeDb(bands, b.freq, 48000)),
+    [bands],
+  );
+
   const [curveVisibilityByMode, setCurveVisibilityByMode] = useState<
     Record<"A" | "B", { eq: boolean; raw: boolean; equalized: boolean }>
   >({
@@ -361,7 +369,7 @@ function FreqChart({
           ref={svgRef}
           viewBox={`0 0 ${W} ${H}`}
           className="w-full"
-          style={{ height: 140, touchAction: "none" }}
+          style={{ height: H, touchAction: "none" }}
           onPointerMove={handleSvgPointerMove}
           onPointerUp={stopDragging}
           onPointerCancel={stopDragging}
@@ -437,17 +445,18 @@ function FreqChart({
                 const fillColor = isSelected ? "#FFED00" : "rgba(0,0,0,0.5)";
                 const strokeColor = isSelected ? "#FFED00" : "#FFED00";
                 const textColor = isSelected ? "#000000" : "#FFED00";
+                const handleY = gainToY(combinedMagDbAtHandles[i] ?? 0);
                 return (
                   <>
                     <circle
                       cx={freqToX(band.freq)}
-                      cy={gainToY(band.gain)}
+                      cy={handleY}
                       r="14"
                       fill="transparent"
                     />
                     <circle
                       cx={freqToX(band.freq)}
-                      cy={gainToY(band.gain)}
+                      cy={handleY}
                       r={outerR}
                       fill={fillColor}
                       stroke={strokeColor}
@@ -455,7 +464,7 @@ function FreqChart({
                     />
                     <text
                       x={freqToX(band.freq)}
-                      y={gainToY(band.gain) + 3.5}
+                      y={handleY + 3.5}
                       textAnchor="middle"
                       fontSize="7"
                       fill={textColor}