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

client/src/pages/EQPage.tsx

@@ -14,11 +14,12 @@ import { useDevice } from "@/contexts/DeviceContext";
 import {
   ChevronLeft,
   ChevronDown,
-  Minus,
-  Plus,
   Edit3,
   Headphones,
+  Trash2,
+  Copy,
   Share2,
+  FilePenLine,
 } from "lucide-react";
 import { useLocation } from "wouter";
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
@@ -179,6 +180,10 @@ export default function EQPage() {
     onConfirm: () => void | Promise<void>;
     onDismiss: () => void;
   } | null>(null);
+  const [deleteHeadphoneDialog, setDeleteHeadphoneDialog] = useState<{
+    name: string;
+    idx: number;
+  } | null>(null);
   const {
     currentRawCurve,
     setCurrentRawCurve,
@@ -549,22 +554,24 @@ export default function EQPage() {
     setSelectedBandByMode({ A: 0, B: 0 });
   };
 
-  const handleDeleteHeadphone = async () => {
+  const handleDeleteHeadphone = () => {
     const target = peqItems[headphoneIdx];
     if (!target?.name) return;
+    setDeleteHeadphoneDialog({ name: target.name, idx: headphoneIdx });
+  };
 
-    const confirmed = window.confirm(
+  const confirmDeleteHeadphone = async () => {
-      eqInterp(eqUi.deleteConfirm, { name: target.name })
+    const target = deleteHeadphoneDialog;
-    );
+    if (!target) return;
-    if (!confirmed) return;
+    setDeleteHeadphoneDialog(null);
 
     try {
       if (isDemoMode || !api) {
-        const nextItems = peqItems.filter((_, idx) => idx !== headphoneIdx);
+        const nextItems = peqItems.filter((_, idx) => idx !== target.idx);
         forgetPeqPresetCache(target.name);
         applyPeqStateToUI({
           peq: nextItems,
-          peqSelect: Math.max(0, headphoneIdx - 1),
+          peqSelect: Math.max(0, target.idx - 1),
         });
         toast.success(eqUi.toastDeleted);
         return;
@@ -1641,7 +1648,7 @@ export default function EQPage() {
                 }}
                 onClick={openPresetManageDialog}
               >
-                <Edit3 size={15} />
+                <FilePenLine size={18} />
               </button>
               <button
                 className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
@@ -1651,7 +1658,7 @@ export default function EQPage() {
                 }}
                 onClick={handleDeleteHeadphone}
               >
-                <Minus size={15} />
+                <Trash2 size={18} />
               </button>
               <button
                 className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
@@ -1663,7 +1670,7 @@ export default function EQPage() {
                   openAddPresetDialog();
                 }}
               >
-                <Plus size={15} />
+                <Copy size={18} />
               </button>
             </div>
           </div>
@@ -2179,6 +2186,23 @@ export default function EQPage() {
         }}
       />
 
+      <PeqOverwriteConfirmDialog
+        open={deleteHeadphoneDialog !== null}
+        title={eqUi.deletePreset}
+        description={
+          deleteHeadphoneDialog
+            ? eqInterp(eqUi.deleteConfirm, { name: deleteHeadphoneDialog.name })
+            : ""
+        }
+        cancelLabel={eqUi.cancel}
+        confirmLabel={eqUi.deletePreset}
+        variant="destructive"
+        onConfirm={() => {
+          void confirmDeleteHeadphone();
+        }}
+        onCancel={() => setDeleteHeadphoneDialog(null)}
+      />
+
       <PeqOverwriteConfirmDialog
         open={!!overwritePresetDialog}
         title={eqUi.overwritePresetTitle ?? "Preset name already exists"}

client/src/pages/Home.tsx

@@ -33,14 +33,18 @@ import {
   ChevronRight,
   Power,
   Settings,
-  Settings2,
   Sliders,
   Activity,
   Gauge,
   Undo2,
-  ChevronDown,
-  Wifi,
   Bluetooth,
+  SkipBack,
+  SkipForward,
+  Play,
+  Pause,
+  SquareArrowRightEnter,
+  SquareArrowRightExit,
+  FileMusic,
 } from "lucide-react";
 import { useLocation } from "wouter";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
@@ -839,25 +843,19 @@ export default function Home() {
                 onClick={() => updateSetting({ bt_next: 0 })}
                 className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
-                <img src={`${import.meta.env.BASE_URL}images/player/skip-forward.png`} alt="上一首" className="w-5 h-5" />
+                  <SkipBack size={20} className="text-[#00FFF6]" />
               </button>
               <button
                 onClick={() => updateSetting({ bt_play: 1 })}
                 className="w-12 h-12 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "transparent", border: "1px solid rgba(0,255,246,0.5)", boxShadow: "0 0 12px rgba(0,255,246,0.4)" }}>
-                <img 
+                {ds.bt_status === 1 ? <Play size={28} className="text-[#00FFF6]" /> : <Pause size={28} className="text-[#00FFF6]" />}
-                  src={ds.bt_status === 1
-                    ? `${import.meta.env.BASE_URL}images/player/play.png`
-                    : `${import.meta.env.BASE_URL}images/player/pause.png`} 
-                  alt={ds.bt_status === 1 ? "播放" : "暂停"} 
-                  className="w-6 h-6" 
-                />
               </button>
               <button
                 onClick={() => updateSetting({ bt_next: 1 })}
                 className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
-                <img src={`${import.meta.env.BASE_URL}images/player/skip-back.png`} alt="下一首" className="w-5 h-5" />
+                <SkipForward size={20} className="text-[#00FFF6]" />
               </button>
             </div>
           </div>
@@ -933,36 +931,36 @@ export default function Home() {
       <div className="px-4">
         <div className="ios-list-group">
           <ListRow
-            icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>}
+            icon={<SquareArrowRightEnter size={18} />}
             label={homeText.input ?? "输入源"}
             value={inputLabel}
             onClick={() => setLocation("/io")}
           />
           <ListRow
-            icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><path d="M15 3H9a2 2 0 0 0-2 2v4m8-6h4a2 2 0 0 1 2 2v4M15 3v18m0 0H9a2 2 0 0 1-2-2V9m8 12h4a2 2 0 0 0 2-2V9M7 9H3"/></svg>}
+            icon={<SquareArrowRightExit size={18} />}
             label={homeText.output ?? "输出端口"}
             value={outputLabel}
             onClick={() => setLocation("/io")}
           />
           <ListRow
-            icon={<Settings size={16} />}
+            icon={<FileMusic size={18} />}
             label={homeText.audioSet ?? "音频设置"}
             onClick={() => setLocation("/audio")}
           />
           <ListRow
-            icon={<Settings2 size={16} />}
+            icon={<Settings size={18} />}
             label={homeText.systemSet ?? "系统设置"}
             onClick={() => setLocation("/system")}
           />
           <ListRow
-            icon={<Gauge size={16} />}
+            icon={<Gauge size={18} />}
             label={homeText.vu ?? "VU表"}
             value={vuLabel}
             thumbnail={`${import.meta.env.BASE_URL}images/vu/vu${(ds.vu ?? 0) + 1}.png`}
             onClick={() => setLocation("/vu")}
           />
           <ListRow
-            icon={<Undo2 size={16} />}
+            icon={<Undo2 size={18} />}
             label={homeText.backToLegacy ?? "返回旧版"}
             onClick={() => {
               const target = ip.trim();

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
+    <div
-      open={open}
+      className={cn(
-      onOpenChange={(next) => {
+        zClassName,
-        if (!next) {
+        "fixed inset-0 flex items-center justify-center bg-black/65 px-4",
-          if (!actionTakenRef.current) onCancel();
+      )}
-          actionTakenRef.current = false;
+      onClick={handleDismiss}
-        }
-      }}
     >
-      <AlertDialogPortal>
+      <div
-        <AlertDialogOverlay className={cn(EQ_OVERWRITE_DIALOG_Z, "bg-black/65")} />
+        className="w-full max-w-[420px] rounded-[14px] p-5"
-        <AlertDialogPrimitive.Content
+        style={PANEL_STYLE}
-          className={cn(
+        onClick={(e) => e.stopPropagation()}
-            EQ_OVERWRITE_DIALOG_Z,
+        role="alertdialog"
-            "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",
+        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>
+          {title}
-            <AlertDialogTitle className="text-white">{title}</AlertDialogTitle>
+        </h3>
-            <AlertDialogDescription className="text-white/60">
+        <p
-              {description}
+          id="peq-confirm-desc"
-            </AlertDialogDescription>
+          className="mt-3 text-[15px] leading-relaxed text-white/55"
-          </AlertDialogHeader>
+        >
-          <AlertDialogFooter>
+          {description}
-            <AlertDialogCancel
+        </p>
-              className="border-white/20 bg-transparent text-white hover:bg-white/10"
+
-              onPointerDown={(e) => e.preventDefault()}
+        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
-              onClick={onCancel}
+          <button
-            >
+            type="button"
-              {cancelLabel}
+            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]"
-            </AlertDialogCancel>
+            onClick={onCancel}
-            <AlertDialogAction
+          >
-              className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
+            {cancelLabel}
-              onPointerDown={(e) => e.preventDefault()}
+          </button>
-              onClick={() => {
+          <button
-                actionTakenRef.current = true;
+            type="button"
-                onConfirm();
+            className={cn(
-              }}
+              "min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold transition-all active:scale-[0.98]",
-            >
+              variant === "destructive"
-              {confirmLabel}
+                ? "bg-red-500/90 text-white hover:bg-red-500"
-            </AlertDialogAction>
+                : "bg-[#00FFF6] text-black hover:brightness-95",
-          </AlertDialogFooter>
+            )}
-        </AlertDialogPrimitive.Content>
+            onClick={() => {
-      </AlertDialogPortal>
+              actionTakenRef.current = true;
-    </AlertDialog>
+              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 "../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 names = idxs.map(i => items[i].name);
-    const confirmMsg =
-      names.length === 1
-        ? eqUi.deletePresetConfirm.replace("{{name}}", names[0])
-        : eqUi.batchDeleteConfirm.replace("{{count}}", String(names.length));
-    if (!window.confirm(confirmMsg)) return;
 
     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)}
+      />
+    </>
   );
 }

package.json

@@ -52,7 +52,7 @@
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.22",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.575.0",
     "nanoid": "^5.1.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.1",

pnpm-lock.yaml

@@ -117,8 +117,8 @@ importers:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       lucide-react:
-        specifier: ^0.453.0
+        specifier: ^0.575.0
-        version: 0.453.0(react@19.2.7)
+        version: 0.575.0(react@19.2.7)
       nanoid:
         specifier: ^5.1.5
         version: 5.1.11
@@ -3028,16 +3028,16 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@0.453.0:
-    resolution: {integrity: sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
-
   lucide-react@0.542.0:
     resolution: {integrity: sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lucide-react@0.575.0:
+    resolution: {integrity: sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -6657,11 +6657,11 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.453.0(react@19.2.7):
+  lucide-react@0.542.0(react@19.2.7):
     dependencies:
       react: 19.2.7
 
-  lucide-react@0.542.0(react@19.2.7):
+  lucide-react@0.575.0(react@19.2.7):
     dependencies:
       react: 19.2.7