Update locale files for English, Traditional Chinese, and Simplified Chinese to include new confirmation prompts for enabling audio effects; refactor EffectsPage and EQPage to integrate FeatureGate for managing effect states and user interactions.

2026-05-19 13:33:10 +08:00
parent edd677c79d
commit 21839ff339
7 changed files with 315 additions and 43 deletions
@@ -17,6 +17,7 @@ import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { useStrokeDrawAnimation } from "@/lib/useStrokeDrawAnimation";
 import BottomNav from "@/components/BottomNav";
+import { FeatureGate } from "@/components/FeatureGate";
 import { toast } from "sonner";
 import {
  decodeCustomBase64,
@@ -594,7 +595,9 @@ function bandToPeqFilter(b: { freq: number; gain: number; q: number; type: strin
 export default function EQPage() {
  const [, setLocation] = useLocation();
  const { deviceState, updateSetting, api, isDemoMode, upgradePeqChange, upgradePeqApply } = useDevice();
-  const eqOn = (deviceState?.peqEnable ?? 0) === 1;
+  const bypassOn = (deviceState?.dsp_enable ?? 0) === 0;
+  const peqOn = (deviceState?.peqEnable ?? 0) === 1;
+  const eqOn = peqOn && !bypassOn;

  const eqUi = useMemo((): PeqEqUi => {
    const lang = deviceState?.language;
@@ -1361,8 +1364,6 @@ export default function EQPage() {
      window.clearTimeout(peqSyncTimerRef.current);
    }

-    const useApply = abMode === "B";
-
    peqSyncTimerRef.current = window.setTimeout(() => {
      const filters = filtersSource.map(bandToPeqFilter);
      const body: PeqPresetBody = {
@@ -1372,16 +1373,13 @@ export default function EQPage() {
        preamp: peq.preamp ?? 0,
        canDel: peq.canDel ?? 1,
      };
-      const request = useApply
-        ? upgradePeqApply({ peqApply: body } satisfies PeqApplyPayload)
-        : upgradePeqChange({ peqChange: body } satisfies PeqChangePayload);
-      request.catch(() => {
+      upgradePeqApply({ peqApply: body } satisfies PeqApplyPayload).catch(() => {
        toast.error("EQ 保存失败");
      });
    }, delay);
  };

-  // A 模式编辑 → peqChange；B 模式编辑（含切换后展示）→ peqApply（防抖）
+  // A/B 切换与曲线编辑防抖同步 → peqApply（仅试听，不写预设）
  useEffect(() => {
    if (syncingHeadphoneRef.current) return;
    if (skipPeqAutoSyncRef.current) {
@@ -1394,7 +1392,7 @@ export default function EQPage() {
        window.clearTimeout(peqSyncTimerRef.current);
      }
    };
-  }, [bands, abMode, headphoneIdx, peqItems, api, isDemoMode, upgradePeqChange, upgradePeqApply]);
+  }, [bands, abMode, headphoneIdx, peqItems, api, isDemoMode, upgradePeqApply]);

  useEffect(() => {
    const onPointerDown = (event: PointerEvent) => {
@@ -1575,10 +1573,34 @@ export default function EQPage() {
            <ChevronLeft size={24} />
          </button>
          <h1 className="flex-1 text-center text-[17px] font-semibold text-white">HP-EQ</h1>
-          <IOSToggle checked={eqOn} onChange={(v) => updateSetting({ peqEnable: v ? 1 : 0 })} />
+          <IOSToggle
+            checked={eqOn}
+            onChange={(v) => {
+              if (v) {
+                void updateSetting(
+                  bypassOn ? { peqEnable: 1, dsp_enable: 1 } : { peqEnable: 1 },
+                );
+              } else {
+                void updateSetting({ peqEnable: 0 });
+              }
+            }}
+          />
        </div>

-        <div className="px-4 pb-32 pt-3 space-y-3">
+        <FeatureGate
+          enabled={eqOn}
+          className="px-4 pb-32 pt-3 space-y-3"
+          labels={{
+            title: eqUi.enableConfirmTitle ?? "HP-EQ 未开启",
+            description: eqUi.enableConfirmDesc ?? "当前 HP-EQ 功能已关闭，是否开启？",
+            cancel: eqUi.cancel ?? "取消",
+            confirm: eqUi.enableConfirmOk ?? "开启",
+          }}
+          onEnable={() => {
+            const bypass = (deviceState?.dsp_enable ?? 0) === 0;
+            return updateSetting(bypass ? { peqEnable: 1, dsp_enable: 1 } : { peqEnable: 1 });
+          }}
+        >
        {/* ── Action cards: 批量编辑 / 添加耳机型号 ── */}
        <div className="grid grid-cols-2 gap-3">
          <button
@@ -1840,7 +1862,7 @@ export default function EQPage() {
            onChange={(v) => updateCurrentPeqMeta({ preamp: Number((v - 15).toFixed(1)) })}
          />
        </div>
-      </div>
+        </FeatureGate>
      </div>

      {isSaveBDialogOpen && (
@@ -11,6 +11,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useLocation } from "wouter";
 import { useState, useEffect, useRef, useMemo } from "react";
 import BottomNav from "@/components/BottomNav";
+import { FeatureGate } from "@/components/FeatureGate";
 import { navigateToSelect } from "./SelectPage";
 import localeZh from "@/locales/data-zh.json";
 import localeZhHK from "@/locales/data-zh-HK.json";
@@ -85,7 +86,9 @@ export default function EffectsPage() {
  );

  const ds = deviceState;
-  const effectOn = (ds?.audio_enable ?? 0) === 1;
+  const bypassOn = (ds?.dsp_enable ?? 0) === 0;
+  const audioOn = (ds?.audio_enable ?? 0) === 1;
+  const effectOn = audioOn && !bypassOn;
  const widthOn = (ds?.width_enable ?? 0) === 1;
  const widthVal = ds?.width_value ?? 50;
  const crossfeedOn = (ds?.crossfeed_enable ?? 0) === 1;
@@ -152,10 +155,34 @@ export default function EffectsPage() {
          <ChevronLeft size={24} />
        </button>
        <h1 className="flex-1 text-center text-[17px] font-semibold text-white">{effectText.pageTitle}</h1>
-        <IOSToggle checked={effectOn} onChange={(v) => updateSetting({ audio_enable: v ? 1 : 0 })} />
+        <IOSToggle
+          checked={effectOn}
+          onChange={(v) => {
+            if (v) {
+              void updateSetting(
+                bypassOn ? { audio_enable: 1, dsp_enable: 1 } : { audio_enable: 1 },
+              );
+            } else {
+              void updateSetting({ audio_enable: 0 });
+            }
+          }}
+        />
      </div>

-      <div className="px-4 pb-32 pt-3 space-y-3">
+      <FeatureGate
+        enabled={effectOn}
+        className="px-4 pb-32 pt-3 space-y-3"
+        labels={{
+          title: effectText.enableConfirmTitle ?? "音效未开启",
+          description: effectText.enableConfirmDesc ?? "当前 Effect 功能已关闭，是否开启？",
+          cancel: effectText.enableConfirmCancel ?? "取消",
+          confirm: effectText.enableConfirmOk ?? "开启",
+        }}
+        onEnable={() => {
+          const bypass = (ds?.dsp_enable ?? 0) === 0;
+          return updateSetting(bypass ? { audio_enable: 1, dsp_enable: 1 } : { audio_enable: 1 });
+        }}
+      >
        {/* ── Style ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between mb-3">
@@ -362,7 +389,7 @@ export default function EffectsPage() {
            </div>
          )}
        </div>
-      </div>
+      </FeatureGate>
      </div>

      <BottomNav />
@@ -52,6 +52,39 @@ function volToDB(v: number) {
  return `${db >= 0 ? "+" : ""}${db.toFixed(1)}dB`;
 }

+/** 耳机插孔彩蛋：大孔 → 上小孔 → 下小孔 */
+const JACK_EGG_SEQUENCE = ["lg", "smTop", "smBot"] as const;
+type JackId = (typeof JACK_EGG_SEQUENCE)[number];
+
+const VU_BAR_COUNT = 20;
+const EGG_DURATION_MS = 4200;
+const EGG_BEAT_MS = 130;
+const JACK_SEQUENCE_TIMEOUT_MS = 4000;
+
+/** 旋律主音在 20 段 VU 上的位置（约 4.2s） */
+const EGG_MELODY_LEAD = [
+  0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 19, 17, 15, 13, 11, 9, 7, 5, 3, 1,
+  0, 4, 8, 12, 16, 19, 16, 12, 8, 4, 0, 2, 5, 9, 13, 17, 19, 14, 10, 6, 2,
+];
+
+function idleVuBarHeights(): number[] {
+  return Array.from({ length: VU_BAR_COUNT }, (_, i) =>
+    Math.max(0.12, Math.sin((i / VU_BAR_COUNT) * Math.PI) * 0.65 + 0.2),
+  );
+}
+
+function vuHeightsForMelodyBeat(lead: number, pulse: number): number[] {
+  return Array.from({ length: VU_BAR_COUNT }, (_, i) => {
+    const dist = Math.abs(i - lead);
+    let amp = 0.14;
+    if (dist === 0) amp = 0.96;
+    else if (dist === 1) amp = 0.74;
+    else if (dist === 2) amp = 0.5;
+    else if (dist === 3) amp = 0.3;
+    return Math.min(1, amp * (0.82 + pulse * 0.18));
+  });
+}
+
 // ── iOS-style Toggle ──
 function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
@@ -106,6 +139,11 @@ export default function Home() {
  const effectLastTapRef = useRef<number | null>(null);
  const effectNavigateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [powerConfirmOpen, setPowerConfirmOpen] = useState(false);
+  const [easterEggActive, setEasterEggActive] = useState(false);
+  const [vuHeights, setVuHeights] = useState<number[]>(idleVuBarHeights);
+  const jackProgressRef = useRef(0);
+  const jackResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const eggRafRef = useRef<number | null>(null);

  const homeText = useMemo((): HomeLocale => {
    if (!deviceState) return {} as HomeLocale;
@@ -174,10 +212,15 @@ export default function Home() {
    hpEqNavigateTimerRef.current = setTimeout(() => {
      hpEqNavigateTimerRef.current = null;
      hpEqLastTapRef.current = null;
-      const on = (deviceState?.peqEnable ?? 0) === 1;
-      void updateSetting({ peqEnable: on ? 0 : 1 });
+      const bypassOn = (deviceState?.dsp_enable ?? 0) === 0;
+      if (bypassOn) {
+        void updateSetting({ peqEnable: 1, dsp_enable: 1 });
+      } else {
+        const on = (deviceState?.peqEnable ?? 0) === 1;
+        void updateSetting({ peqEnable: on ? 0 : 1 });
+      }
    }, HP_EQ_DOUBLE_CLICK_MS);
-  }, [deviceState?.peqEnable, updateSetting, setLocation]);
+  }, [deviceState?.peqEnable, deviceState?.dsp_enable, updateSetting, setLocation]);

  /** Effect 圆钮：单击短延迟后切换 audio_enable；280ms 内第二次点击则进入 /effects */
  const handleEffectCircleClick = useCallback(() => {
@@ -197,10 +240,15 @@ export default function Home() {
    effectNavigateTimerRef.current = setTimeout(() => {
      effectNavigateTimerRef.current = null;
      effectLastTapRef.current = null;
-      const on = (deviceState?.audio_enable ?? 0) === 1;
-      void updateSetting({ audio_enable: on ? 0 : 1 });
+      const bypassOn = (deviceState?.dsp_enable ?? 0) === 0;
+      if (bypassOn) {
+        void updateSetting({ audio_enable: 1, dsp_enable: 1 });
+      } else {
+        const on = (deviceState?.audio_enable ?? 0) === 1;
+        void updateSetting({ audio_enable: on ? 0 : 1 });
+      }
    }, HP_EQ_DOUBLE_CLICK_MS);
-  }, [deviceState?.audio_enable, updateSetting, setLocation]);
+  }, [deviceState?.audio_enable, deviceState?.dsp_enable, updateSetting, setLocation]);

  useEffect(() => {
    return () => {
@@ -209,6 +257,58 @@ export default function Home() {
    };
  }, []);

+  const triggerJackEasterEgg = useCallback(() => {
+    setEasterEggActive(true);
+    jackProgressRef.current = 0;
+    const start = performance.now();
+
+    const tick = (now: number) => {
+      const elapsed = now - start;
+      if (elapsed >= EGG_DURATION_MS) {
+        setEasterEggActive(false);
+        setVuHeights(idleVuBarHeights());
+        eggRafRef.current = null;
+        return;
+      }
+      const beat = Math.floor(elapsed / EGG_BEAT_MS) % EGG_MELODY_LEAD.length;
+      const pulse = 0.5 + 0.5 * Math.sin(elapsed * 0.02);
+      setVuHeights(vuHeightsForMelodyBeat(EGG_MELODY_LEAD[beat], pulse));
+      eggRafRef.current = requestAnimationFrame(tick);
+    };
+
+    if (eggRafRef.current !== null) cancelAnimationFrame(eggRafRef.current);
+    eggRafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const onJackClick = useCallback(
+    (jack: JackId) => {
+      if (easterEggActive) return;
+
+      const expected = JACK_EGG_SEQUENCE[jackProgressRef.current];
+      if (jack === expected) {
+        jackProgressRef.current += 1;
+        if (jackProgressRef.current >= JACK_EGG_SEQUENCE.length) {
+          triggerJackEasterEgg();
+        }
+      } else {
+        jackProgressRef.current = jack === JACK_EGG_SEQUENCE[0] ? 1 : 0;
+      }
+
+      if (jackResetTimerRef.current) clearTimeout(jackResetTimerRef.current);
+      jackResetTimerRef.current = setTimeout(() => {
+        jackProgressRef.current = 0;
+      }, JACK_SEQUENCE_TIMEOUT_MS);
+    },
+    [easterEggActive, triggerJackEasterEgg],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (jackResetTimerRef.current) clearTimeout(jackResetTimerRef.current);
+      if (eggRafRef.current !== null) cancelAnimationFrame(eggRafRef.current);
+    };
+  }, []);
+
  if (!isConnected) return <ConnectScreen />;

  const ds = deviceState!;
@@ -305,34 +405,43 @@ export default function Home() {
              {/* Left ports */}
              <div className="px-4">
                <div className="flex items-center gap-3">
-                  {/* Big hole (left) */}
-                  <div
-                    className="w-7 h-7 rounded-full border-2 bg-black/25 flex items-center justify-center"
+                  {/* Big hole (left) — 彩蛋第 1 步 */}
+                  <button
+                    type="button"
+                    className="w-7 h-7 rounded-full border-2 bg-black/25 flex items-center justify-center cursor-pointer active:scale-95 transition-transform"
                    style={{
                      borderColor: "rgba(245, 158, 11, 0.75)",
                      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                    }}
+                    aria-label="Headphone jack"
+                    onClick={() => onJackClick("lg")}
                  >
                    <div
-                      className="w-2 h-2 rounded-full"
+                      className="w-2 h-2 rounded-full pointer-events-none"
                      style={{ background: "rgba(196, 126, 9, 0.9)" }}
                    />
-                  </div>
+                  </button>
                  {/* Two small holes (right, stacked) */}
                  <div className="flex flex-col gap-2">
-                    <div
-                      className="w-5 h-5 rounded-full border-2 bg-black/25"
+                    <button
+                      type="button"
+                      className="w-5 h-5 rounded-full border-2 bg-black/25 cursor-pointer active:scale-95 transition-transform"
                      style={{
                        borderColor: "rgba(245, 158, 11, 0.65)",
                        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                      }}
+                      aria-label="Headphone jack"
+                      onClick={() => onJackClick("smTop")}
                    />
-                    <div
-                      className="w-5 h-5 rounded-full border-2 bg-black/25"
+                    <button
+                      type="button"
+                      className="w-5 h-5 rounded-full border-2 bg-black/25 cursor-pointer active:scale-95 transition-transform"
                      style={{
                        borderColor: "rgba(245, 158, 11, 0.65)",
                        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                      }}
+                      aria-label="Headphone jack"
+                      onClick={() => onJackClick("smBot")}
                    />
                  </div>
                </div>
@@ -345,17 +454,27 @@ export default function Home() {
                  <span className="text-[9px] text-white/50">{volToDB(localVol)}</span>
                </div>
                {/* Mini VU bars */}
-                <div className="flex gap-0.5 px-2 pt-1 pb-2 h-16 items-end">
-                  {Array.from({ length: 20 }).map((_, i) => {
-                    const h = Math.max(0.1, Math.sin((i / 20) * Math.PI) * 0.8 + Math.random() * 0.2);
+                <div
+                  className={cn(
+                    "flex gap-0.5 px-2 pt-1 pb-2 h-16 items-end",
+                    easterEggActive && "brightness-110",
+                  )}
+                >
+                  {vuHeights.map((h, i) => {
                    const isHot = i > 16;
                    return (
-                      <div key={i} className="flex-1 rounded-sm"
+                      <div
+                        key={i}
+                        className="flex-1 rounded-sm"
                        style={{
                          height: `${h * 100}%`,
                          background: isHot ? "#ef4444" : i > 13 ? "#f59e0b" : "#00FFF6",
-                          opacity: 0.7,
-                        }} />
+                          opacity: easterEggActive ? 0.95 : 0.7,
+                          transition: easterEggActive
+                            ? "height 90ms ease-out, opacity 120ms ease-out"
+                            : "height 200ms ease-out",
+                        }}
+                      />
                    );
                  })}
                </div>