优化首页图标，用 lucide-react 代替了蓝牙模块的图标

client/src/pages/eq/components/PeqOverwriteConfirmDialog.tsx

@@ -1,27 +1,24 @@
 import { useRef } from "react";
-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]";
 
+const PANEL_STYLE = {
+  background:
+    "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+  border: "1px solid rgba(255,255,255,0.12)",
+  boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+} as const;
+
 export function PeqOverwriteConfirmDialog({
   open,
   title,
   description,
   cancelLabel,
   confirmLabel,
+  variant = "default",
+  zClassName = EQ_OVERWRITE_DIALOG_Z,
   onConfirm,
   onCancel,
 }: {
@@ -30,56 +27,76 @@ export function PeqOverwriteConfirmDialog({
   description: string;
   cancelLabel: string;
   confirmLabel: string;
+  variant?: "default" | "destructive";
+  /** Override stacking order when nested inside another dialog. */
+  zClassName?: string;
   onConfirm: () => void;
   onCancel: () => void;
 }) {
   const actionTakenRef = useRef(false);
 
+  if (!open) return null;
+
+  const handleDismiss = () => {
+    if (!actionTakenRef.current) onCancel();
+    actionTakenRef.current = false;
+  };
+
   return (
-    <AlertDialog
-      open={open}
-      onOpenChange={(next) => {
-        if (!next) {
-          if (!actionTakenRef.current) onCancel();
-          actionTakenRef.current = false;
-        }
-      }}
+    <div
+      className={cn(
+        zClassName,
+        "fixed inset-0 flex items-center justify-center bg-black/65 px-4",
+      )}
+      onClick={handleDismiss}
     >
-      <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",
-          )}
+      <div
+        className="w-full max-w-[420px] rounded-[14px] p-5"
+        style={PANEL_STYLE}
+        onClick={(e) => e.stopPropagation()}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="peq-confirm-title"
+        aria-describedby="peq-confirm-desc"
+      >
+        <h3
+          id="peq-confirm-title"
+          className="text-[18px] font-semibold leading-tight text-white/90"
         >
-          <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"
-              onPointerDown={(e) => e.preventDefault()}
-              onClick={onCancel}
-            >
-              {cancelLabel}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
-              onPointerDown={(e) => e.preventDefault()}
-              onClick={() => {
-                actionTakenRef.current = true;
-                onConfirm();
-              }}
-            >
-              {confirmLabel}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogPrimitive.Content>
-      </AlertDialogPortal>
-    </AlertDialog>
+          {title}
+        </h3>
+        <p
+          id="peq-confirm-desc"
+          className="mt-3 text-[15px] leading-relaxed text-white/55"
+        >
+          {description}
+        </p>
+
+        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            className={cn(
+              "min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold transition-all active:scale-[0.98]",
+              variant === "destructive"
+                ? "bg-red-500/90 text-white hover:bg-red-500"
+                : "bg-[#00FFF6] text-black hover:brightness-95",
+            )}
+            onClick={() => {
+              actionTakenRef.current = true;
+              onConfirm();
+            }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }

client/src/pages/eq/components/PeqPresetManageDialog.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { X, Trash2, Pencil, Check, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -6,6 +6,8 @@ import type { PeqEqUi } from "../types";
 import { PEQ_PRESET_NAME_MAX_LENGTH } from "../eqConstants";
 import { clampPeqPresetName, isPeqPresetNameTooLong } from "../peqPresetName";
 import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
+import { PeqOverwriteConfirmDialog } from "./PeqOverwriteConfirmDialog";
+import { eqInterp } from "../eqFormatters";
 
 /* ── Custom checkbox ── */
 function Checkbox({
@@ -96,6 +98,9 @@ export function PeqPresetManageDialog({
 
   const [deleting, setDeleting] = useState(false);
   const [renaming, setRenaming] = useState(false);
+  const [deleteConfirmIdxs, setDeleteConfirmIdxs] = useState<number[] | null>(
+    null,
+  );
 
   const checkedIdxs = useMemo(
     () =>
@@ -107,6 +112,10 @@ export function PeqPresetManageDialog({
 
   const allChecked = items.length > 0 && checkedIdxs.length === items.length;
 
+  useEffect(() => {
+    if (!open) setDeleteConfirmIdxs(null);
+  }, [open]);
+
   if (!open) return null;
 
   const toggleAll = () => {
@@ -164,27 +173,27 @@ export function PeqPresetManageDialog({
     }
   };
 
-  const confirmAndDelete = async (idxs: number[]) => {
+  const requestDelete = (idxs: number[]) => {
     const uniq = Array.from(new Set(idxs)).filter(
       i => i >= 0 && i < items.length
     );
     if (uniq.length === 0) return;
+    setDeleteConfirmIdxs(uniq);
+  };
 
-    const names = uniq.map(i => items[i].name);
+  const executeDelete = async () => {
+    const idxs = deleteConfirmIdxs;
+    if (!idxs) return;
+    setDeleteConfirmIdxs(null);
 
-    // Confirmation dialog
-    const confirmMsg =
-      names.length === 1
-        ? eqUi.deletePresetConfirm.replace("{{name}}", names[0])
-        : eqUi.batchDeleteConfirm.replace("{{count}}", String(names.length));
-    if (!window.confirm(confirmMsg)) return;
+    const names = idxs.map(i => items[i].name);
 
     setDeleting(true);
     try {
       const ok = await onDeletePresets(names);
       if (ok) {
         setChecked({});
-        if (editingIdx !== null && uniq.includes(editingIdx)) {
+        if (editingIdx !== null && idxs.includes(editingIdx)) {
           setEditingIdx(null);
           setEditingName("");
         }
@@ -194,7 +203,19 @@ export function PeqPresetManageDialog({
     }
   };
 
+  const deleteConfirmDescription =
+    deleteConfirmIdxs === null
+      ? ""
+      : deleteConfirmIdxs.length === 1
+        ? eqInterp(eqUi.deletePresetConfirm, {
+            name: items[deleteConfirmIdxs[0]]?.name ?? "",
+          })
+        : eqInterp(eqUi.batchDeleteConfirm, {
+            count: deleteConfirmIdxs.length,
+          });
+
   return (
+    <>
     <div className="fixed inset-0 z-[140] flex items-center justify-center bg-black/65 px-4">
       <div
         className="w-full max-w-[520px] rounded-[14px] p-5"
@@ -235,7 +256,7 @@ export function PeqPresetManageDialog({
                 ? "bg-white/10 text-white/30 cursor-not-allowed"
                 : "bg-red-500/15 text-red-300 hover:bg-red-500/20"
             )}
-            onClick={() => void confirmAndDelete(checkedIdxs)}
+            onClick={() => requestDelete(checkedIdxs)}
           >
             {deleting && <Loader2 size={13} className="animate-spin" />}
             {eqUi.batchDelete}
@@ -344,7 +365,7 @@ export function PeqPresetManageDialog({
                           border: "1px solid rgba(239,68,68,0.2)",
                         }}
                         title={eqUi.deletePreset}
-                        onClick={() => void confirmAndDelete([idx])}
+                        onClick={() => requestDelete([idx])}
                       >
                         <Trash2 size={14} />
                       </button>
@@ -357,5 +378,20 @@ export function PeqPresetManageDialog({
         </div>
       </div>
     </div>
+
+      <PeqOverwriteConfirmDialog
+        open={deleteConfirmIdxs !== null}
+        zClassName="z-[150]"
+        title={eqUi.deletePreset}
+        description={deleteConfirmDescription}
+        cancelLabel={eqUi.cancel}
+        confirmLabel={eqUi.deletePreset}
+        variant="destructive"
+        onConfirm={() => {
+          void executeDelete();
+        }}
+        onCancel={() => setDeleteConfirmIdxs(null)}
+      />
+    </>
   );
 }