设置节奏模式

src/pc/home/index.module.less

@@ -16,6 +16,13 @@
         }
     }
 }
+.rhythm{
+    :global{
+        svg .abcjs-stem{
+            transform: translateY(3px);
+        }
+    }
+}
 
 .containerTop {
     display: flex;

src/pc/home/index.tsx

@@ -193,6 +193,8 @@ export default defineComponent({
 			multiSelect: false,
 			multiSelectList: [] as any[],
 			multilList: [] as any[],
+
+			isrhythm: false, // 是否节奏
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -371,6 +373,7 @@ export default defineComponent({
 				visualKey: "K:C",
 				subjectCode: "acoustic_grand_piano",
 				measures: initMusic(30),
+				isrhythm: "",
 			} as IAbc,
 		});
 
@@ -1038,26 +1041,26 @@ export default defineComponent({
 
 			// 调号
 			if (type === "key") {
-				if (data.active) {
-					if (data.active.measureIndex === 0 && data.active.noteIndex === 0) {
-						abcData.abc.key = value;
-						abcData.abc.visualTranspose = 0;
-						abcData.abc.visualKey = "K:C";
-						abcData.abc.visualKey = value;
-						await handleResetRender();
-					} else {
-						if (!activeNote) return;
-						activeNote.key = `[${value}]`;
-						await handleResetRender();
-					}
-					rangeHighlight(data.active.startChar);
-				} else {
-					abcData.abc.key = value;
-					abcData.abc.visualTranspose = 0;
-					abcData.abc.visualKey = "K:C";
-					abcData.abc.visualKey = value;
-					await handleResetRender();
-				}
+				// if (data.active) {
+				// 	if (data.active.measureIndex === 0 && data.active.noteIndex === 0) {
+				// 		abcData.abc.key = value;
+				// 		abcData.abc.visualTranspose = 0;
+				// 		abcData.abc.visualKey = "K:C";
+				// 		abcData.abc.visualKey = value;
+				// 		await handleResetRender();
+				// 	} else {
+				// 		if (!activeNote) return;
+				// 		activeNote.key = `[${value}]`;
+				// 		await handleResetRender();
+				// 	}
+				// 	rangeHighlight(data.active.startChar);
+				// } else {
+				// }
+				abcData.abc.key = value;
+				abcData.abc.visualTranspose = 0;
+				abcData.abc.visualKey = "K:C";
+				abcData.abc.visualKey = value;
+				await handleResetRender();
 			}
 
 			// 拍号
@@ -1313,7 +1316,15 @@ export default defineComponent({
 				await handleResetRender();
 				data.active = null as unknown as INoteActive;
 			}
-			handleClearMultiSelect();
+			if (data.multilList.length) {
+				handleClearMultiSelect();
+			}
+			if (type === "setrhythm") {
+				abcData.abc.isrhythm = abcData.abc.isrhythm === "rhythm" ? "" : "rhythm";
+				console.log("🚀 ~ abcData.abc.isrhythm:", abcData.abc.isrhythm);
+				popup.moveKeyShow = false;
+				await handleResetRender();
+			}
 		};
 		const handleClearMultiSelect = async () => {
 			data.multilList = [];
@@ -1402,9 +1413,13 @@ export default defineComponent({
 		/** 移调 */
 		const handleMoveKey = async (item: (typeof ABC_DATA.key)[0]) => {
 			console.log(item);
-			console.log(abcData.abc.visualKey || abcData.abc.key, "=>", item.value)
-			const moveData = getKeyStep(item.value, abcData.abc.visualKey || abcData.abc.key, data.moveKeyType);
-			console.log("🚀 ~ item:",  moveData);
+			console.log(abcData.abc.visualKey || abcData.abc.key, "=>", item.value);
+			const moveData = getKeyStep(
+				item.value,
+				abcData.abc.visualKey || abcData.abc.key,
+				data.moveKeyType
+			);
+			console.log("🚀 ~ item:", moveData);
 			(window as any).visual_Key = item.value.split(":")[1];
 			abcData.abc.visualTranspose = moveData.step;
 			abcData.abc.visualKey = item.value;
@@ -1517,6 +1532,7 @@ export default defineComponent({
 					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);
+					abcData.abc.isrhythm = abc.isrhythm ? abc.isrhythm : "";
 					// console.log("🚀 ~ abcData.abc:", abcData.abc);
 				}
 			}
@@ -2179,7 +2195,9 @@ export default defineComponent({
 							>
 								{{
 									trigger: () => (
-										<div class={styles.topBtn}>
+										<div
+											class={[styles.topBtn, abcData.abc.isrhythm === "rhythm" && styles.btnDisabled]}
+										>
 											<div class={styles.btnImg}>
 												<img class={styles.topBtnIcon} src={getImage("icon_15.png")} />
 											</div>
@@ -2676,6 +2694,34 @@ export default defineComponent({
 										</div>
 									</div>
 								</CollapseItem>
+								<CollapseItem title="模式" name="staffmodel">
+									<div class={styles.wrapBox}>
+										<div
+											class={styles.topBtn}
+											onClick={() => {
+												handleChange({ type: "setrhythm", value: "" });
+											}}
+										>
+											<div
+												class={[styles.btnImg, abcData.abc.isrhythm === "rhythm" && styles.btnImgActive]}
+											>
+												{/* <TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} /> */}
+											</div>
+											<div>节奏模式</div>
+										</div>
+										<div
+											class={styles.topBtn}
+											onClick={() => {
+												// handleChange({ type: "dynamics", value: ABC_DATA.dynamics[8].value });
+											}}
+										>
+											<div class={[styles.btnImg]}>
+												{/* <TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} /> */}
+											</div>
+											<div>预览简谱</div>
+										</div>
+									</div>
+								</CollapseItem>
 								<CollapseItem title="反复与跳跃" name="repeat">
 									<div class={styles.wrapBox}>
 										{ABC_DATA.repeat.map((item) => (
@@ -2753,7 +2799,7 @@ export default defineComponent({
 							</Collapse>
 						</div>
 
-						<div class={styles.box}>
+						<div class={[styles.box, abcData.abc.isrhythm === "rhythm" && styles.rhythm]}>
 							{/* <NButton type={data.multiSelect ? "primary" : "default"}>多选</NButton> */}
 							<div class={styles.titleBox}>
 								<div class={styles.titleName} style={{ width: "50%", margin: "0 auto" }}>

src/pc/home/runtime.ts

@@ -213,8 +213,10 @@ export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
 	if (abc.key) {
 		text += abc.key + " ";
 		
-		// text += "style=rhythm";
 		// text += "style=harmonic";
+		if (abc.isrhythm === 'rhythm'){
+			text += "style=x";
+		}
 		// text += "style=x";
 		// text += "style=triangle";
 		
@@ -245,7 +247,11 @@ export const renderMeasures = (abc: IAbc, option?: IRenderMeasuresOption) => {
 			text += playStr ?? ""; // 演奏技法
 			text += note.dynamics ?? ""; // 力度符号
 			text += note.accidental ?? ""; // 临时升降记号
-			text += note.content ?? ""; // 音符
+			if (abc.isrhythm === 'rhythm'){
+				text += "B";
+			} else {
+				text += note.content ?? ""; // 音符
+			}
 			// 音符时值
 			text += note.noteType ?? "";
 			text += note.dot ?? ""; // 点

src/pc/types.ts

@@ -71,6 +71,8 @@ export interface IAbc {
 	visualKey?: string;
 	/** 声部 */
 	subjectCode?: string;
+	/** 节奏 */
+	isrhythm?: string | 'rhythm';
 }
 export interface INoteActive extends AbcElem {
 	/** 小节 index */