新增 EQ撤销功能,用户调节的参数不满意可以点击回退到上一次,撤销栈最多存放 30 步

This commit is contained in:
eafonyang
2026-08-06 12:01:44 +08:00
parent 3d0f9fa254
commit 93c2cb7681
11 changed files with 582 additions and 6 deletions
@@ -40,6 +40,8 @@ export function FreqChart({
onApplyB,
onSaveB,
onBandDrag,
onBandDragStart,
onBandDragEnd,
onBandSelect,
eqUi,
}: {
@@ -53,6 +55,8 @@ export function FreqChart({
onApplyB: () => void;
onSaveB: () => void;
onBandDrag: (idx: number, patch: Partial<{ freq: number; gain: number }>) => void;
onBandDragStart?: () => void;
onBandDragEnd?: () => void;
onBandSelect: (idx: number) => void;
eqUi: PeqEqUi;
}) {
@@ -118,6 +122,7 @@ export function FreqChart({
e.stopPropagation();
draggingBandRef.current = idx;
setIsBandDragging(true);
onBandDragStart?.();
onBandSelect(idx);
updateBandFromPointer(idx, e.clientX, e.clientY);
};
@@ -130,8 +135,10 @@ export function FreqChart({
};
const stopDragging = () => {
if (draggingBandRef.current === null) return;
draggingBandRef.current = null;
setIsBandDragging(false);
onBandDragEnd?.();
};
const curveData = useMemo(
@@ -0,0 +1,46 @@
import { Undo2 } from "lucide-react";
import { cn } from "@/lib/utils";
type PeqUndoButtonProps = {
disabled?: boolean;
label: string;
onClick: () => void;
className?: string;
};
/**
* EQ page undo control — disabled when the undo stack is empty.
*/
export function PeqUndoButton({
disabled = false,
label,
onClick,
className,
}: PeqUndoButtonProps) {
return (
<button
type="button"
disabled={disabled}
aria-label={label}
title={label}
onClick={onClick}
className={cn(
"w-9 h-9 rounded-full flex items-center justify-center transition-colors active:scale-95",
disabled
? "text-white/25 cursor-not-allowed"
: "text-white/70 active:text-white",
className,
)}
style={{
background: disabled
? "rgba(44,44,46,0.45)"
: "rgba(44,44,46,0.8)",
border: disabled
? "1px solid rgba(255,255,255,0.06)"
: "1px solid rgba(255,255,255,0.1)",
}}
>
<Undo2 size={18} />
</button>
);
}