力度删除，弹窗圆角

src/pc/home/index.module.less

@@ -199,13 +199,14 @@
         .n-input__border {
             border: 1px dashed #ccc;
         }
-        .n-input__input{
+
+        .n-input__input {
             text-align: center;
         }
     }
 }
 
-.popupWrap {
+.popupWrap:global(.n-popover) {
     padding: 12px;
     background: #FFFFFF;
     box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
@@ -226,7 +227,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    
+
 
     .btnItemIcon {
         display: flex;
@@ -247,8 +248,8 @@
         font-size: 12px;
     }
 
-    &.btnItemActive{
-        .btnItemIcon{
+    &.btnItemActive {
+        .btnItemIcon {
             background-color: rgba(193, 219, 251, 1);
         }
     }

src/pc/home/index.tsx

@@ -246,7 +246,7 @@ export default defineComponent({
 					showToast("请先选择结束音符");
 				}
 				if (data.select.list.length === 2) {
-					console.log(data.select.list)
+					console.log(data.select.list);
 					data.select.list = data.select.list.sort((a, b) => a.startChar - b.startChar);
 					handleSelectNote();
 				}
@@ -280,7 +280,7 @@ export default defineComponent({
 				clickListener: clickListener,
 				responsive: "resize",
 				dragging: true,
-				selectTypes: ["note"], // ["note", "clef", "keySignature", "timeSignature", "dynamicDecoration"],
+				selectTypes: ["note"],
 				visualTranspose: 0,
 				wrap: {
 					minSpacing: 2,
@@ -697,23 +697,35 @@ export default defineComponent({
 			}
 			// 力度标记,渐强渐弱
 			if (type === "dynamics") {
-				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;
+				if (Array.isArray(value)) {
+					if (activeNote?.dynamics) {
+						activeNote.dynamics = "";
+						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.dCode === activeNote.dCode) {
+									note.dynamics = "";
+								}
+							}
+						}
+
+						await handleResetRender();
+					} else {
+						data.select.list = [cloneDeep(data.active)];
+						data.select.state = true;
+						data.select.parmas = params;
+						message.info("请选择结束音符");
+					}
+					return;
+				}
 				if (activeNote.dynamics === value) {
 					activeNote.dynamics = "";
 				} else {
@@ -735,20 +747,19 @@ export default defineComponent({
 				if (Array.isArray(value)) {
 					if (activeNote?.tie) {
 						activeNote.tie = "";
-						for(let i = 0; i < abcData.abc.measures.length; i++) {
+						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++) {
+							for (let j = 0; j < measure.notes.length; j++) {
 								const note = measure.notes[j];
-								if(note.tCode === activeNote.tCode) {
+								if (note.tCode === activeNote.tCode) {
 									note.tie = "";
 								}
 							}
 						}
-						
+
 						await handleResetRender();
-						return
+						return;
 					} else {
-						// 渐强渐弱
 						data.select.list = [cloneDeep(data.active)];
 						data.select.state = true;
 						data.select.parmas = params;
@@ -887,12 +898,19 @@ export default defineComponent({
 			const endItem = data.select.list[1];
 			// 力度标记,渐强渐弱
 			if (type === "dynamics") {
-				const crescendo = Date.now() + "";
-				abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dynamics = value[0];
-				abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dCode = crescendo;
-				abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dynamics = value[1];
-				abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dCode = crescendo;
-				await handleResetRender();
+				if (
+					abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dynamics ||
+					abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dynamics
+				) {
+					message.warning("已经添加了力度标记");
+				} else {
+					const crescendo = Date.now() + "";
+					abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dynamics = value[0];
+					abcData.abc.measures[startItem.measureIndex].notes[startItem.noteIndex].dCode = crescendo;
+					abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dynamics = value[1];
+					abcData.abc.measures[endItem.measureIndex].notes[endItem.noteIndex].dCode = crescendo;
+					await handleResetRender();
+				}
 			}
 
 			// 连音
@@ -914,10 +932,11 @@ export default defineComponent({
 				}
 				await handleResetRender();
 			}
-
 			data.select.state = false;
 			data.select.list = [];
 			data.select.parmas = null;
+			clearSelectNote();
+			message.destroyAll();
 		};
 
 		/** 移调 */
@@ -1307,7 +1326,12 @@ export default defineComponent({
 							</div>
 						))}
 
-						<NPopover trigger="click" contentStyle={{ width: "400px" }}>
+						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
+							trigger="click"
+							contentStyle={{ width: "400px" }}
+						>
 							{{
 								trigger: () => (
 									<div class={styles.topDownArrow}>
@@ -1370,6 +1394,8 @@ export default defineComponent({
 						<div class={styles.topLine}></div>
 
 						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
 							v-model:show={popup.selectSubjectShow}
 							trigger="click"
 							contentStyle={{ width: "320px" }}
@@ -1404,7 +1430,13 @@ export default defineComponent({
 							}}
 						</NPopover>
 
-						<NPopover v-model:show={popup.moveKeyShow} trigger="click" contentStyle={{ width: "320px" }}>
+						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
+							v-model:show={popup.moveKeyShow}
+							trigger="click"
+							contentStyle={{ width: "320px" }}
+						>
 							{{
 								trigger: () => (
 									<div class={styles.topBtn}>
@@ -1472,7 +1504,13 @@ export default defineComponent({
 							}}
 						</NPopover>
 
-						<NPopover v-model:value={popup.speedShow} trigger="click" placement="bottom">
+						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
+							v-model:value={popup.speedShow}
+							trigger="click"
+							placement="bottom"
+						>
 							{{
 								trigger: () => (
 									<div class={[styles.topBtn]}>
@@ -1487,6 +1525,8 @@ export default defineComponent({
 						</NPopover>
 
 						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
 							v-model:show={popup.staffShow}
 							trigger="click"
 							placement="bottom"
@@ -1545,7 +1585,7 @@ export default defineComponent({
 												min={1}
 												v-model:value={(abcData.abcOptions.wrap as any).preferredMeasuresPerLine}
 												placeholder="请输入小节数"
-												onChange={() => {
+												onUpdate:value={() => {
 													handleResetRender();
 												}}
 											/>
@@ -1569,6 +1609,8 @@ export default defineComponent({
 						</NPopover>
 
 						<NPopover
+							class={styles.popupWrap}
+							showArrow={false}
 							v-model:show={popup.barShow}
 							trigger="click"
 							placement="bottom"
@@ -1639,7 +1681,12 @@ export default defineComponent({
 							}}
 						</NPopover>
 
-						<NPopover v-model:show={popup.mearseDeleteShow} trigger="click" placement="bottom">
+						<NPopover
+							class={styles.popupWrap}
+							v-model:show={popup.mearseDeleteShow}
+							trigger="click"
+							placement="bottom"
+						>
 							{{
 								trigger: () => (
 									<div class={[styles.topBtn]}>
@@ -1746,7 +1793,7 @@ export default defineComponent({
 				<div class={styles.content}>
 					<div class={styles.slide}>
 						<Collapse v-model={data.slide} elevation={false} divider={false}>
-							<CollapseItem title="音符" name="note">
+							<CollapseItem title="音符时值" name="note">
 								<div class={styles.wrapBox}>
 									{ABC_DATA.types.map((item) => (
 										<div
@@ -1818,7 +1865,7 @@ export default defineComponent({
 
 							<CollapseItem title="力度记号" name="dynamics">
 								<div class={styles.wrapBox}>
-									{ABC_DATA.dynamics.map((item) => (
+									{ABC_DATA.dynamics.slice(0, 8).map((item) => (
 										<div
 											class={styles.topBtn}
 											onClick={() => handleChange({ type: "dynamics", value: item.value })}
@@ -1834,6 +1881,36 @@ export default defineComponent({
 											<div>{item.name}</div>
 										</div>
 									))}
+									<div
+										class={styles.topBtn}
+										onClick={() => handleChange({ type: "dynamics", value: ABC_DATA.dynamics[8].value })}
+									>
+										<div
+											class={[
+												styles.btnImg,
+												ABC_DATA.dynamics[8].value.includes(noteComputed.value.dynamics) &&
+													styles.btnImgActive,
+											]}
+										>
+											<TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} />
+										</div>
+										<div>{ABC_DATA.dynamics[8].name}</div>
+									</div>
+									<div
+										class={styles.topBtn}
+										onClick={() => handleChange({ type: "dynamics", value: ABC_DATA.dynamics[9].value })}
+									>
+										<div
+											class={[
+												styles.btnImg,
+												ABC_DATA.dynamics[9].value.includes(noteComputed.value.dynamics) &&
+													styles.btnImgActive,
+											]}
+										>
+											<TheIcon iconClassName={ABC_DATA.dynamics[9].icon} size={["2em", "2em"]} />
+										</div>
+										<div>{ABC_DATA.dynamics[9].name}</div>
+									</div>
 								</div>
 							</CollapseItem>
 							<CollapseItem title="反复与跳跃" name="repeat">