5，6

src/pc/home/index.tsx

@@ -246,6 +246,7 @@ export default defineComponent({
 					showToast("请先选择结束音符");
 				}
 				if (data.select.list.length === 2) {
+					console.log(data.select.list)
 					data.select.list = data.select.list.sort((a, b) => a.startChar - b.startChar);
 					handleSelectNote();
 				}
@@ -724,29 +725,49 @@ export default defineComponent({
 
 			// 延音
 			if (type === "tie") {
-				if (Array.isArray(value)) {
-					// 渐强渐弱
-					clearSelectNote();
-					data.select.list = [];
-					data.select.state = true;
-					data.select.parmas = params;
-					showToast("请先选择开始音符");
-					return;
-				}
 				if (!data.active) {
-					showToast("请先选择音符");
+					message.info("请先选择音符");
 					return;
 				}
-
 				const activeNote =
-					abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
+					abcData.abc.measures[data.active?.measureIndex]?.notes[data.active?.noteIndex] || null;
 				if (!activeNote) return;
-				const abcElem: any = abcData.visualObj.getElementFromChar(data.active.endChar);
-				if (data.active.averagepitch != abcElem.averagepitch) {
-					message.warning("必须同音高才能添加延音线");
-					return;
+				if (Array.isArray(value)) {
+					if (activeNote?.tie) {
+						activeNote.tie = "";
+						for(let i = 0; i < abcData.abc.measures.length; i++) {
+							const measure = abcData.abc.measures[i];
+							for(let j = 0; j < measure.notes.length; j++) {
+								const note = measure.notes[j];
+								if(note.tCode === activeNote.tCode) {
+									note.tie = "";
+								}
+							}
+						}
+						
+						await handleResetRender();
+						return
+					} else {
+						// 渐强渐弱
+						data.select.list = [cloneDeep(data.active)];
+						data.select.state = true;
+						data.select.parmas = params;
+						message.info("请选择结束音符");
+						return;
+					}
+				}
+
+				const abcElem: any = getNextNote(data.active.endChar);
+				if (activeNote.tieline) {
+					activeNote.tieline = "";
+				} else {
+					if (data.active.averagepitch != abcElem.averagepitch) {
+						message.warning("必须同音高才能添加延音线");
+						return;
+					}
+					activeNote.tieline = value;
 				}
-				activeNote.tieline = activeNote.tieline == value ? "" : value;
+
 				await handleResetRender();
 				rangeHighlight(data.active.startChar);
 			}
@@ -830,6 +851,15 @@ export default defineComponent({
 			}
 		};
 
+		const getNextNote = (index: number): AbcElem => {
+			const abcElem = abcData.visualObj.getElementFromChar(index);
+			if (abcElem.el_type === "note") {
+				return abcElem;
+			} else {
+				return getNextNote(abcElem.endChar);
+			}
+		};
+
 		const handleDeleteNote = () => {
 			if (!data.active) return;
 			if (data.active.startChar === 0) return;
@@ -1026,6 +1056,7 @@ export default defineComponent({
 			if (!data.active) return {} as unknown as INote;
 			const activeNote =
 				abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || {};
+			console.log("🚀 ~ activeNote:", activeNote);
 			return activeNote;
 		});
 
@@ -1227,19 +1258,35 @@ export default defineComponent({
 
 						<div class={styles.topLine}></div>
 
-						{ABC_DATA.tie.map((item) => (
+						<div
+							class={styles.topBtn}
+							onClick={() => handleChange({ type: "tie", value: ABC_DATA.tie[0].value })}
+						>
 							<div
-								class={styles.topBtn}
-								onClick={() => handleChange({ type: "tie", value: item.value })}
+								class={[
+									styles.btnImg,
+									noteComputed.value.tieline === ABC_DATA.tie[0].value && styles.btnImgActive,
+								]}
 							>
-								<div
-									class={[styles.btnImg, noteComputed.value.tie === item.value && styles.btnImgActive]}
-								>
-									<img class={styles.topBtnIcon} src={item.icon} />
-								</div>
-								<div>{item.name}</div>
+								<img class={styles.topBtnIcon} src={ABC_DATA.tie[0].icon} />
 							</div>
-						))}
+							<div>{ABC_DATA.tie[0].name}</div>
+						</div>
+
+						<div
+							class={styles.topBtn}
+							onClick={() => handleChange({ type: "tie", value: ABC_DATA.tie[1].value })}
+						>
+							<div
+								class={[
+									styles.btnImg,
+									ABC_DATA.tie[1].value.includes(noteComputed.value.tie) && styles.btnImgActive,
+								]}
+							>
+								<img class={styles.topBtnIcon} src={ABC_DATA.tie[1].icon} />
+							</div>
+							<div>{ABC_DATA.tie[1].name}</div>
+						</div>
 
 						<div class={styles.topLine}></div>