撤回

src/pc/home/index.tsx

@@ -175,6 +175,9 @@ export default defineComponent({
 			moveKeyType: "inset" as "inset" | "up" | "down", // 移调类型
 			activePlayNote: null as any, // 当前演奏音符
 			times: [] as any[], // 节拍器数据
+
+			undoList: [] as any[], // 撤销列表
+			redoList: [] as any[], // 重做列表
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -694,6 +697,11 @@ export default defineComponent({
 		 * @returns
 		 */
 		const handleChange = async (params: { type: string; value: any }) => {
+			// 最多记录30步
+			if (data.undoList.length > 30) {
+				data.undoList.shift();
+			}
+			data.undoList.push(cleanDeep(abcData.abc));
 			abcData.synthControl.disable(true);
 			if (data.playState) {
 				data.playState = false;
@@ -1245,10 +1253,36 @@ export default defineComponent({
 			await handleResetRender();
 		};
 
+		const keyDownData = reactive({
+			wait: false,
+			control: false,
+		});
+		const handleKeyDonw = async (e: KeyboardEvent) => {
+			if ((e.target as HTMLElement).nodeName === "INPUT") return;
+			if (e.key === "Control" || e.key === "Meta") {
+				keyDownData.control = true;
+			}
+			if (e.key === "z" && keyDownData.control && !keyDownData.wait) {
+				if (data.undoList.length) {
+					abcData.abc = cloneDeep(data.undoList[data.undoList.length - 1]);
+					data.undoList.pop();
+					keyDownData.wait = true;
+					await handleResetRender();
+					nextTick(() => {
+						keyDownData.wait = false;
+					});
+				}
+			}
+		};
+
 		const handleKeyUp = (e: KeyboardEvent) => {
 			if ((e.target as HTMLElement).nodeName === "INPUT") return;
-			if (!data.active) return false;
 			console.log(e.key);
+
+			if (e.key === "Control" || e.key === "Meta") {
+				keyDownData.control = false;
+			}
+			if (!data.active) return false;
 			if (e.key === "Backspace") {
 				handleChange({ type: "delete", value: "" });
 			}
@@ -1406,6 +1440,7 @@ export default defineComponent({
 			await handleResetRender();
 			loadMiniMp3();
 			document.addEventListener("keyup", handleKeyUp);
+			document.addEventListener("keydown", handleKeyDonw);
 			window.onbeforeunload = (e) => {
 				if (!data.isSave) {
 					e.preventDefault();
@@ -1423,6 +1458,7 @@ export default defineComponent({
 		});
 		onUnmounted(() => {
 			document.removeEventListener("keyup", handleKeyUp);
+			document.removeEventListener("keydown", handleKeyDonw);
 		});
 
 		const measureComputed = computed(() => {