From c639c7738335111c2e067ec2f08379281470b534 Mon Sep 17 00:00:00 2001
From: yangy <eafonyang@gamilc.com>
Date: Tue, 12 May 2026 15:13:20 +0800
Subject: [PATCH] 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/components/BottomNav.tsx | 24 +++++++++++++++++++++++-
 client/src/lib/peqAudio.ts          | 20 ++++++++++++++++++++
 client/src/pages/CommunityPage.tsx  | 29 ++++++++++-------------------
 client/src/pages/EQPage.tsx         | 21 +++++++++++++++------
 4 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/client/src/components/BottomNav.tsx b/client/src/components/BottomNav.tsx
index 603e93c..a2c8c93 100644
--- a/client/src/components/BottomNav.tsx
+++ b/client/src/components/BottomNav.tsx
@@ -2,6 +2,7 @@
    BOTTOM NAV — Luxsin X9 Controller (Mobile)
    Design: iOS/Android App-style bottom tab bar
    5 tabs — labels from locales/bottomNav, language = deviceState.language (同系统页)
+   - 社区：仅桌面宽屏（lg ≥1024px）显示，手机等小屏隐藏
    - Active tab: cyan icon + top indicator bar
    - Inactive: muted icon + label
    ============================================================ */
@@ -30,6 +31,8 @@ interface NavItem {
   labelKey: keyof BottomNavLocale;
 }
 
+const FORUM_URL = "https://forum.zidoo.tv/index.php";
+
 const NAV_ITEMS: NavItem[] = [
   { path: "/community", icon: MessageSquare, labelKey: "community" },
   { path: "/eq", icon: Sliders, labelKey: "hpEq" },
@@ -51,6 +54,12 @@ export default function BottomNav() {
     return (pack.bottomNav ?? localeZh.bottomNav) as BottomNavLocale;
   }, [deviceState?.language]);
 
+  /** 社区入口仅在桌面级视口显示（与 useIsLgUp / Tailwind lg 一致） */
+  const visibleNavItems = useMemo(
+    () => NAV_ITEMS.filter((item) => item.path !== "/community" || isLgUp),
+    [isLgUp],
+  );
+
   return (
     <nav
       className="fixed bottom-0 left-0 right-0 z-50 lg:left-1/2 lg:right-auto lg:w-[min(1180px,calc(100vw-3rem))] lg:-translate-x-1/2"
@@ -64,7 +73,7 @@ export default function BottomNav() {
       }}
     >
       <div className="flex items-stretch justify-around">
-        {NAV_ITEMS.map((item) => {
+        {visibleNavItems.map((item) => {
           const isActive =
             item.path === "/ai"
               ? location === "/ai" || (isLgUp && aiDrawerOpen)
@@ -122,6 +131,19 @@ export default function BottomNav() {
               </div>
           );
 
+          if (item.path === "/community") {
+            return (
+              <button
+                key={item.path}
+                type="button"
+                className="cursor-pointer border-0 bg-transparent p-0 text-inherit outline-none focus-visible:ring-2 focus-visible:ring-[#00FFF6]/40 focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(10,10,12,0.96)]"
+                onClick={() => window.open(FORUM_URL, "_blank", "noopener,noreferrer")}
+              >
+                {inner}
+              </button>
+            );
+          }
+
           if (item.path === "/ai") {
             if (!isLgUp) {
               return (
diff --git a/client/src/lib/peqAudio.ts b/client/src/lib/peqAudio.ts
index 5b96360..26c2c7e 100644
--- a/client/src/lib/peqAudio.ts
+++ b/client/src/lib/peqAudio.ts
@@ -359,6 +359,26 @@ export function computePeqMagnitudeDb(bands: PeqBandForResponse[], fs: number):
   return getFreqznList(list, fs, f);
 }
 
+/**
+ * 级联后总幅度（dB）在某一频率上的值，与 {@link computePeqMagnitudeDb} / 黄线 EQ 曲线同源。
+ * 用于把 10 个拖拽点画在曲线上（曲线为各带合成响应，不能再用单带的 gain 参数当纵坐标）。
+ */
+export function sampleCombinedPeqMagnitudeDb(
+  bands: PeqBandForResponse[],
+  freq: number,
+  fs: number = 48000,
+): number {
+  const fc = Math.max(20, Math.min(20000, freq));
+  const list: Coeff[] = [];
+  bands.forEach((b) => {
+    if (!b.enabled) return;
+    list.push(getSectionsMatrix(b.gain, b.freq, b.q, getFilterType(b.type), false, fs));
+  });
+  if (list.length === 0) return 0;
+  const out = getFreqznList(list, fs, [fc]);
+  return out[0] ?? 0;
+}
+
 export type PeqSvgCurveData = {
   points: Array<{ x: number; y: number; gainDb: number; freq: number }>;
   pathD: string;
diff --git a/client/src/pages/CommunityPage.tsx b/client/src/pages/CommunityPage.tsx
index 60dea70..60e12df 100644
--- a/client/src/pages/CommunityPage.tsx
+++ b/client/src/pages/CommunityPage.tsx
@@ -1,31 +1,22 @@
 import BottomNav from "@/components/BottomNav";
-import { MessageSquare } from "lucide-react";
+
+const FORUM_URL = "https://forum.zidoo.tv";
 
 export default function CommunityPage() {
   return (
     <div
       className="h-[100dvh] flex flex-col pb-[calc(env(safe-area-inset-bottom,0px)+56px)]"
       style={{
-        background:
-          "radial-gradient(120% 80% at 50% 0%, rgba(12, 24, 30, 0.45) 0%, rgba(6, 9, 16, 0.92) 38%, #04060d 100%)",
+        background: "#04060d",
       }}
     >
-      <main className="relative flex-1 flex items-center justify-center px-6">
-        <div className="flex flex-col items-center text-center -translate-y-8">
-          <div
-            className="w-[96px] h-[96px] rounded-full flex items-center justify-center mb-7"
-            style={{
-              background: "radial-gradient(circle at 35% 30%, rgba(0,255,246,0.18), rgba(0,255,246,0.07))",
-              boxShadow: "0 0 34px rgba(0,255,246,0.18), inset 0 0 24px rgba(0,255,246,0.08)",
-            }}
-          >
-            <MessageSquare size={38} className="text-[#00FFF6]" strokeWidth={2.2} />
-          </div>
-          <p className="text-white/85 text-[42px] leading-none font-semibold tracking-wide mb-3">Coming Soon</p>
-          <p className="text-white/40 text-[22px] leading-none">Community features are under development</p>
-        </div>
-
-      </main>
+      <iframe
+        className="flex-1 w-full min-h-0 border-0 bg-white"
+        src={FORUM_URL}
+        title="Zidoo forum"
+        allow="fullscreen; clipboard-read; clipboard-write"
+        referrerPolicy="strict-origin-when-cross-origin"
+      />
       <BottomNav />
     </div>
   );
diff --git a/client/src/pages/EQPage.tsx b/client/src/pages/EQPage.tsx
index c23b4ef..6b19c6a 100644
--- a/client/src/pages/EQPage.tsx
+++ b/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}