Merge branch '2023-8-28' into online

src/pc/home/index.module.less

@@ -7,6 +7,14 @@
     flex-direction: column;
     background-color: #fff;
     overflow: hidden;
+    :global{
+        .abcjs-note{
+            fill: currentColor !important;
+            &.note_selected{
+                fill: #0f81ff !important;
+            }
+        }
+    }
 }
 
 .containerTop {

src/pc/home/index.tsx

@@ -199,7 +199,17 @@ export default defineComponent({
 			.filter(Boolean);
 		const barTypes = ABC_DATA.bar.map((item) => item.value).filter(Boolean);
 		console.log("🚀 ~ noteTypes:", noteTypes, accidentals, clefs, playTypes, dynamics);
-
+		const setNoteColor = () => {
+			const gs = document.querySelectorAll(`#paper svg g[fill="#0f81ff"]`);
+			Array.from(gs).forEach((g) => {
+				g.classList.remove("note_selected");
+				g.setAttribute('fill', 'currentColor')
+			})
+			const gs1 = document.querySelectorAll(`#paper svg g.note_selected`);
+			Array.from(gs1).forEach((g) => {
+				g.classList.remove("note_selected");
+			})
+		}
 		/** 点击音符 */
 		const clickListener = (
 			abcElem: AbcElem,
@@ -208,7 +218,8 @@ export default defineComponent({
 			analysis: ClickListenerAnalysis,
 			drag: ClickListenerDrag
 		) => {
-			// console.log("🚀 ~ data.select.state:", data.select.state);
+			setNoteColor();
+			// console.log("🚀 ~ data.select.state:", abcData.visualObj);
 			let indexStr: any = abcElem.chord?.find((n) => n.position === "left")?.name || "";
 			indexStr = indexStr.split(".").map((n: string) => Number(n));
 			const active = {
@@ -217,6 +228,12 @@ export default defineComponent({
 				noteIndex: indexStr[1],
 				isFirstChecked: true,
 			};
+			if (abcElem){
+				if (abcElem.startChar && abcElem.endChar){
+					abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+					abcElem?.abselem?.elemset?.[0]?.classList?.add('note_selected')
+				}
+			}
 
 			// 选择范围模式
 			if (data.select.state) {
@@ -2684,7 +2701,7 @@ export default defineComponent({
 						)}
 						{data.saveLoadingText && (
 							<div class={styles.loading}>
-								<NSpin description="保存中..."></NSpin>
+								<NSpin></NSpin>
 							</div>
 						)}
 					</div>