删除操作

src/pc/home/index.tsx

@@ -507,7 +507,7 @@ export default defineComponent({
 				}
 			}
 			console.log(measureNumber);
-      data.selectMeasures.max = measureNumber;
+			data.selectMeasures.max = measureNumber;
 		};
 
 		/**
@@ -942,6 +942,18 @@ export default defineComponent({
 				if (!_abcElem?.midiPitches) return;
 				ABCJS.synth.playEvent(_abcElem.midiPitches, _abcElem.midiGraceNotePitches, 1000);
 			}
+
+			// 删除音符
+			if (type === "delete") {
+				if (!data.active) return;
+				if (data.active.startChar === 0) return;
+				abcData.abc.measures[data.active.measureIndex].notes.splice(data.active.noteIndex, 1);
+				if (abcData.abc.measures[data.active.measureIndex].notes.length === 0) {
+					abcData.abc.measures.splice(data.active.measureIndex, 1);
+				}
+				handleResetRender();
+				data.active = null as unknown as INoteActive;
+			}
 		};
 
 		const getNextNote = (index: number): AbcElem => {
@@ -1065,7 +1077,9 @@ export default defineComponent({
 		const handleKeyUp = (e: KeyboardEvent) => {
 			if (!data.active) return false;
 			console.log(e.key);
-			if (e.key === "Backspace") handleDeleteNote();
+			if (e.key === "Backspace") {
+				handleChange({ type: "delete", value: "" });
+			}
 			if (/^[A-Ga-g]$/.test(e.key)) {
 				handleChange({ type: "note", value: e.key.toLocaleUpperCase() });
 			}
@@ -2160,52 +2174,54 @@ export default defineComponent({
 						initialValue={{ x: data.selectMeasures.x, y: data.selectMeasures.y }}
 						class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
 					>
-						<NSpace justify="space-between">
-							<div class={styles.btnLineTitle}>输入小节范围</div>
-							<NButton circle quaternary size="small" onClick={() => (popup.selectMearesShow = false)}>
-								<NIcon size={16} component={<Close />} />
-							</NButton>
-						</NSpace>
-						<NSpace align="center" wrap={false} wrapItem={false}>
-							<div class={styles.mearesInput}>
-								<NInputNumber
-									min={1}
-									max={data.selectMeasures.max}
-									bordered={false}
-									placeholder="开始小节"
-									showButton={false}
-									onUpdate:value={(val) => handleSetSelectMeares(val, "start")}
-								></NInputNumber>
-								-
-								<NInputNumber
-									min={data.selectMeasures.start}
-									max={data.selectMeasures.max}
-									bordered={false}
-									placeholder="结束小节"
-									showButton={false}
-									onUpdate:value={(val) => handleSetSelectMeares(val, "end")}
-								></NInputNumber>
-							</div>
-							<div class={styles.topBtn}>
-								<NSpin show={data.loadingAudioSrouce} size="small">
-									<div
-										class={styles.btnImg}
-										onClick={() => togglePlay(data.playState ? "pause" : "play")}
-									>
-										<img
-											style={{ display: data.playState ? "" : "none" }}
-											class={styles.topBtnIcon}
-											src={getImage("icon_21_1.png")}
-										/>
-										<img
-											style={{ display: data.playState ? "none" : "" }}
-											class={styles.topBtnIcon}
-											src={getImage("icon_21.png")}
-										/>
-									</div>
-								</NSpin>
-							</div>
-						</NSpace>
+						<div onKeyup={(e: Event) => e.stopPropagation()}>
+							<NSpace justify="space-between">
+								<div class={styles.btnLineTitle}>输入小节范围</div>
+								<NButton circle quaternary size="small" onClick={() => (popup.selectMearesShow = false)}>
+									<NIcon size={16} component={<Close />} />
+								</NButton>
+							</NSpace>
+							<NSpace align="center" wrap={false} wrapItem={false}>
+								<div class={styles.mearesInput}>
+									<NInputNumber
+										min={1}
+										max={data.selectMeasures.max}
+										bordered={false}
+										placeholder="开始小节"
+										showButton={false}
+										onUpdate:value={(val) => handleSetSelectMeares(val, "start")}
+									></NInputNumber>
+									-
+									<NInputNumber
+										min={data.selectMeasures.start}
+										max={data.selectMeasures.max}
+										bordered={false}
+										placeholder="结束小节"
+										showButton={false}
+										onUpdate:value={(val) => handleSetSelectMeares(val, "end")}
+									></NInputNumber>
+								</div>
+								<div class={styles.topBtn}>
+									<NSpin show={data.loadingAudioSrouce} size="small">
+										<div
+											class={styles.btnImg}
+											onClick={() => togglePlay(data.playState ? "pause" : "play")}
+										>
+											<img
+												style={{ display: data.playState ? "" : "none" }}
+												class={styles.topBtnIcon}
+												src={getImage("icon_21_1.png")}
+											/>
+											<img
+												style={{ display: data.playState ? "none" : "" }}
+												class={styles.topBtnIcon}
+												src={getImage("icon_21.png")}
+											/>
+										</div>
+									</NSpin>
+								</div>
+							</NSpace>
+						</div>
 					</UseDraggable>
 				)}
 			</div>