小节数量显示

src/pc/home/index.module.less

@@ -23,8 +23,9 @@
     flex-wrap: wrap;
     padding-left: 20px;
     width: 100%;
-    .topBtn{
-        .btnImg{
+
+    .topBtn {
+        .btnImg {
             width: 40px;
             height: 40px;
         }
@@ -172,6 +173,21 @@
             cursor: pointer;
         }
     }
+    .abcjs-bar{
+        .abcjs-annotation{
+            display: block;
+            font-size: 12px;
+            font-style: italic;
+            transform: translateX(10px);
+        }
+    }
+
+    
+
+    .ABCJS-cursor {
+        background: rgba(25, 140, 254, 0.6);
+        border-radius: 5px;
+    }
 }
 
 .instruments {
@@ -274,20 +290,24 @@
     border-radius: 16px;
     border: 1px solid #F5F5F7;
     cursor: move;
-    .mearesInput{
+
+    .mearesInput {
         display: flex;
         align-items: center;
-        flex:1;
+        flex: 1;
         border: 1px solid rgb(224, 224, 230);
         border-radius: 4px;
-        :global{
+
+        :global {
+
             .n-input__placeholder,
-            .n-input__input-el{
+            .n-input__input-el {
                 text-align: center;
             }
         }
     }
 }
-.selectMearesHidden{
+
+.selectMearesHidden {
     display: none;
 }

src/pc/home/index.tsx

@@ -313,8 +313,8 @@ export default defineComponent({
 				selectTypes: ["note"],
 				visualTranspose: 0,
 				wrap: {
-					minSpacing: 2,
-					maxSpacing: 10,
+					minSpacing: 1.8,
+					maxSpacing: 2.7,
 					preferredMeasuresPerLine: 4,
 				},
 				staffwidth: 800,

src/pc/home/runtime.ts

@@ -231,11 +231,7 @@ export const renderMeasures = (abc: IAbc) => {
 			text += note.segno; // 分割
 		}
 		let _i = i + 1;
-		// text += `${_i % 4 !== 0 ? `"${i + 1}"` : ""}${i === measures.length - 1 ? '|]' : measure.barline}`;
-		text += measure.barline;
-		if (i > 0 && i % 4 === 0) {
-			text += "\n";
-		}
+		text += `"<${_i}"${ measure.barline}`;
 	}
 	// console.log(text)
 	return text;