fix

src/pc/create/component/the-create/index.module.less

@@ -51,6 +51,7 @@
 }
 
 .item {
+    position: relative;
     text-align: center;
     font-size: 14px;
     font-weight: 400;
@@ -78,6 +79,15 @@
         .itemImg {
             border-color: var(--primary-color);
         }
+        .itemIcon{
+            display: block;
+        }
+    }
+    .itemIcon{
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        display: none;
     }
 }
 
@@ -91,6 +101,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    
 
     .beatIcon {
         width: 80%;
@@ -109,6 +120,9 @@
         .n-input-number {
             width: 80%;
         }
+        .n-input{
+            border-radius: 6px !important;
+        }
     }
 
     .speedIcon {

src/pc/create/component/the-create/index.tsx

@@ -1,6 +1,7 @@
 import {
 	NButton,
 	NCard,
+	NCheckbox,
 	NGi,
 	NGrid,
 	NIcon,
@@ -20,7 +21,7 @@ import {
 	useMessage,
 } from "naive-ui";
 import { defineComponent, onMounted, reactive, watch } from "vue";
-import { Close } from "@vicons/ionicons5";
+import { CheckmarkCircle, Close } from "@vicons/ionicons5";
 import styles from "./index.module.less";
 import { getImage } from "/src/pc/home/images";
 import { ABC_DATA } from "/src/pc/home/runtime";
@@ -158,6 +159,7 @@ export default defineComponent({
 										<img class={styles.icon} src={item.icon} />
 									</div>
 									<div>{item.label}</div>
+									<NIcon size={18} class={styles.itemIcon} component={CheckmarkCircle} />
 								</div>
 							))}
 						</NSpace>

src/pc/create/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
 import { NButton, NCheckbox, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
 import { getImage } from "../home/images";
@@ -7,6 +7,7 @@ import { storeData } from "/src/store";
 import { api_musicSheetCreationPage, api_musicSheetCreationRemove } from "../api";
 import { useRouter } from "vue-router";
 import ABCJS from "abcjs";
+import { usePageVisibility } from '@vant/use'
 
 export default defineComponent({
 	name: "Create",
@@ -46,6 +47,13 @@ export default defineComponent({
 			data.list = [];
 			getList();
 		};
+		const pageVisibility = usePageVisibility();
+		watch(pageVisibility, (val) => {
+			if (val === 'visible') {
+				handleReset();
+			}
+		})
+		
 		const handleDelte = (item: any) => {
 			const checked = ref(true);
 			dialog.warning({
@@ -129,11 +137,11 @@ export default defineComponent({
 										</div>
 										<div class={styles.time}>{item.updateTime}</div>
 									</div>
-									<img
+									{/* <img
 										style={{ pointerEvents: "none", opacity: 0.3 }}
 										class={styles.bottomBtn}
 										src={getImage("icon_29_2.png")}
-									/>
+									/> */}
 									<img
 										class={styles.bottomBtn}
 										src={getImage("icon_29_3.png")}

src/pc/home/component/the-speed/index.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
 		});
 		return () => (
 			<div>
-				<div class={styles.speedEdit}>
+				<div class={styles.speedEdit} onKeyup={(e: Event) => e.stopPropagation()}>
 					<NInputNumber
 						size="large"
 						v-model:value={data.speed}

src/pc/home/index.module.less

@@ -199,6 +199,9 @@
         .n-input__border {
             border: 1px dashed #ccc;
         }
+        .n-input__input{
+            text-align: center;
+        }
     }
 }
 

src/pc/home/index.tsx

@@ -180,6 +180,7 @@ export default defineComponent({
 			isSave: false,
 			musicId: "",
 			musicName: "", // 曲谱名称
+			creator: "", // 创建者
 			subjectId: "", // 声部
 			speed: "",
 			music: "",
@@ -257,6 +258,9 @@ export default defineComponent({
 				abcElem,
 				data.music.substring(data.active.startChar, data.active.endChar)
 			);
+			if (abcElem.el_type === "tempo") {
+				abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+			}
 			if (drag && drag.step) {
 				// console.log("🚀 ~ drag:", drag);
 				handleMoveNote("drag", drag.step);
@@ -275,7 +279,7 @@ export default defineComponent({
 				clickListener: clickListener,
 				responsive: "resize",
 				dragging: true,
-				selectTypes: true, // ["note", "clef", "keySignature", "timeSignature", "dynamicDecoration"],
+				selectTypes:  ["note"], // ["note", "clef", "keySignature", "timeSignature", "dynamicDecoration"],
 				visualTranspose: 0,
 				wrap: {
 					minSpacing: 2,
@@ -968,6 +972,7 @@ export default defineComponent({
 			if (res?.code == 200) {
 				data.musicId = res.data.id || "";
 				data.musicName = res.data.name || "";
+				data.creator = res.data.creator || "";
 				let abc = "" as any;
 				try {
 					abc = JSON.parse(res.data.creationData);
@@ -984,8 +989,8 @@ export default defineComponent({
 					abcData.abc.visualTranspose = abc.visualTranspose || 0;
 					abcData.abc.transposeKey = abc.transposeKey || "K:C";
 					abcData.abc.subjectCode = abc.subjectCode || "acoustic_grand_piano";
-					const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any)
-					abcData.synthOptions.program = _instruments > -1 ? _instruments : 0
+					const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any);
+					abcData.synthOptions.program = _instruments > -1 ? _instruments : 0;
 					abcData.abc.measures = abc.measures || initMusic(30);
 					console.log("🚀 ~ abcData.abc:", abcData.abc);
 				}
@@ -994,6 +999,7 @@ export default defineComponent({
 		const handleSaveMusic = async () => {
 			await api_musicSheetCreationUpdate({
 				name: data.musicName,
+				creator: data.creator,
 				creationConfig: data.music,
 				creationData: JSON.stringify(abcData.abc),
 				id: data.musicId,
@@ -1178,7 +1184,7 @@ export default defineComponent({
 
 		return () => (
 			<div class={styles.container}>
-				<div class={styles.containerTop}>
+				<div class={styles.containerTop} onKeyup={(e: Event) => e.stopPropagation()}>
 					<div class={styles.topWrap}>
 						<div class={styles.topBtn}>
 							<FileBtn
@@ -1839,8 +1845,18 @@ export default defineComponent({
 					<div class={styles.box}>
 						<div class={styles.titleBox}>
 							<div style={{ width: "50%", margin: "0 auto" }}>
-								<NInput v-model:value={data.musicName} placeholder="乐谱名称" />
-								{/* // <Input v-model={data.musicName} variant="outlined" placeholder="乐谱名称" /> */}
+								<NInput
+									onKeyup={(e: Event) => e.stopPropagation()}
+									v-model:value={data.musicName}
+									placeholder="乐谱名称"
+								/>
+							</div>
+							<div style={{ width: "30%", margin: "10px 0 0 auto" }}>
+								<NInput
+									onKeyup={(e: Event) => e.stopPropagation()}
+									v-model={data.creator}
+									placeholder="曲谱作者"
+								/>
 							</div>
 						</div>
 						<div id="paper"></div>