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

This commit is contained in:
eafonyang
2026-07-03 11:11:13 +08:00
parent 0ead88deee
commit 0d64495ebd
11 changed files with 182 additions and 107 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 673 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

+36 -12
View File
@@ -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(
eqInterp(eqUi.deleteConfirm, { name: target.name })
);
if (!confirmed) return;
const confirmDeleteHeadphone = async () => {
const target = deleteHeadphoneDialog;
if (!target) 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"}
+16 -18
View File
@@ -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
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"
/>
{ds.bt_status === 1 ? <Play size={28} className="text-[#00FFF6]" /> : <Pause size={28} className="text-[#00FFF6]" />}
</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();
@@ -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>
);
}
@@ -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)}
/>
</>
);
}
+1 -1
View File
@@ -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",
+9 -9
View File
@@ -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
version: 0.453.0(react@19.2.7)
specifier: ^0.575.0
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