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
@@ -0,0 +1,83 @@
+import { useState, type ReactNode, type SyntheticEvent } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+export type FeatureGateLabels = {
+  title: string;
+  description: string;
+  cancel: string;
+  confirm: string;
+};
+
+type FeatureGateProps = {
+  enabled: boolean;
+  labels: FeatureGateLabels;
+  onEnable: () => void | Promise<void>;
+  className?: string;
+  children: ReactNode;
+};
+
+/** 功能关闭时拦截子区域交互，提示是否开启总开关 */
+export function FeatureGate({
+  enabled,
+  labels,
+  onEnable,
+  className,
+  children,
+}: FeatureGateProps) {
+  const [open, setOpen] = useState(false);
+
+  const intercept = (e: SyntheticEvent) => {
+    if (enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(true);
+  };
+
+  const handleConfirm = () => {
+    void Promise.resolve(onEnable()).then(() => setOpen(false));
+  };
+
+  return (
+    <>
+      <div
+        className={cn(className)}
+        onPointerDownCapture={intercept}
+        onClickCapture={intercept}
+      >
+        {children}
+      </div>
+
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent className="border-white/10 bg-zinc-900 text-white sm:max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white">{labels.title}</AlertDialogTitle>
+            <AlertDialogDescription className="text-white/60">
+              {labels.description}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="border-white/20 bg-transparent text-white hover:bg-white/10">
+              {labels.cancel}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
+              onClick={handleConfirm}
+            >
+              {labels.confirm}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}