拆分 EQPage 页面，新增分享码功能，修复 bug，优化性能

2026-06-15 18:39:07 +08:00
parent 1b0b447eee
commit a045db235a
15 changed files with 3198 additions and 1181 deletions
@@ -0,0 +1,74 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+/** Above BrandDrawer (z-110) and ShareDialog (z-120). */
+const EQ_OVERWRITE_DIALOG_Z = "z-[130]";
+
+export function PeqOverwriteConfirmDialog({
+  open,
+  title,
+  description,
+  cancelLabel,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean;
+  title: string;
+  description: string;
+  cancelLabel: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onCancel();
+      }}
+    >
+      <AlertDialogPortal>
+        <AlertDialogOverlay className={cn(EQ_OVERWRITE_DIALOG_Z, "bg-black/65")} />
+        <AlertDialogPrimitive.Content
+          className={cn(
+            EQ_OVERWRITE_DIALOG_Z,
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[42%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-md border-white/10 bg-zinc-900 text-white",
+          )}
+        >
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white">{title}</AlertDialogTitle>
+            <AlertDialogDescription className="text-white/60">
+              {description}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              className="border-white/20 bg-transparent text-white hover:bg-white/10"
+              onClick={onCancel}
+            >
+              {cancelLabel}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPortal>
+    </AlertDialog>
+  );
+}