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

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 "../constants";
 import { PEQ_PRESET_NAME_MAX_LENGTH } from "../constants";
 import { clampPeqPresetName, isPeqPresetNameTooLong } from "../peqPresetName";
 import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
+import { PeqOverwriteConfirmDialog } from "./PeqOverwriteConfirmDialog";
+import { eqInterp } from "../utils";
 
 /* ── 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)}
+      />
+    </>
   );
 }