feat: 新增音符/节拍指针播放功能

src/helpers/metronome.ts

@@ -13,6 +13,7 @@ type IOptions = {
 	speed: number;
 };
 const browserInfo = browser();
+let tipsTimer: any = null; // 光标提示定时器
 
 export const metronomeData = reactive({
 	disable: true,
@@ -25,8 +26,41 @@ export const metronomeData = reactive({
 	metroMeasure: [] as any[],
 	activeIndex: null as unknown as number,
 	activeMetro: {} as any,
+	cursorMode: 1 as number, // 光标模式：1:音符指针；2:节拍指针；3:关闭指针
+	cursorTips: '' as string, // 光标模式提示文字
 });
 
+watch(
+	() => metronomeData.cursorMode,
+	() => {
+		const img: HTMLElement = document.querySelector("#cursorImg-0")!;
+		if (img) {
+			switch (metronomeData.cursorMode) {
+				case 1:
+					img.classList.remove("lineHide");
+                    img.style.opacity = 'inherit'
+					metronomeData.cursorTips = '您已切换到指针跟随音符播放';
+                    img.style.opacity = 'inherit'
+					break;
+				case 2:
+					img.classList.add("lineHide");
+                    img.style.opacity = 'inherit'
+					metronomeData.cursorTips = '您已切换到指针跟随节拍播放';
+                    // console.log('光标',img)
+					break;
+				case 3:
+                    img.style.opacity = '0'
+					metronomeData.cursorTips = '您已关闭指针显示';
+					// console.log('隐藏光标')
+					break;
+				default:
+					break;
+			}
+			hideCursorTip()
+		}
+	}
+);
+
 // 切换隐藏光标
 const toggleLine = () => {
 	if (!metronomeData.lineShow) return;
@@ -436,4 +470,22 @@ function setCurrentTime(time: number) {
 	return time;
 }
 
+// 自动隐藏光标提示
+function hideCursorTip() {
+	if (!tipsTimer) {
+		tipsTimer = setTimeout(() => {
+			metronomeData.cursorTips = ''
+			clearTimeout(tipsTimer)
+			tipsTimer = null
+		}, 2000);
+	} else {
+		clearTimeout(tipsTimer)
+		tipsTimer = setTimeout(() => {
+			metronomeData.cursorTips = ''
+			clearTimeout(tipsTimer)
+			tipsTimer = null
+		}, 2000);
+	}
+}
+
 export default Metronome;

src/page-instrument/header-top/image/cursor-icon-1.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>音符指针</title>
+    <defs>
+        <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF9C63" offset="0%"></stop>
+            <stop stop-color="#FF7144" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="14.5" cy="14.5" r="14.5"></circle>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-215.000000, -27.000000)">
+            <g id="编组-5备份-4" transform="translate(210.000000, 27.000000)">
+                <g id="音符指针" transform="translate(5.000000, 0.000000)">
+                    <g id="椭圆形">
+                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <use fill="#1CACF1" xlink:href="#path-2"></use>
+                    </g>
+                    <g id="编组" transform="translate(9.500000, 4.000000)" fill="#FFFFFF">
+                        <rect id="矩形" opacity="0.347728911" x="2" y="0" width="6" height="22" rx="1"></rect>
+                        <path d="M8.10330055,2.25120225 C7.87639869,1.98341174 7.48794121,1.92145821 7.18899698,2.10538362 C6.94867021,2.20392714 6.7916895,2.43789665 6.79162391,2.69764225 L6.79162391,11.2173207 C6.04522781,10.5782918 5.09452643,10.2279237 4.11194732,10.2297622 C1.84173775,10.2297622 0,12.0590605 0,14.3157939 C0,16.5725274 1.84035559,18.4018256 4.11194732,18.4018256 C6.38353905,18.4018256 8.22389464,16.5725274 8.22389464,14.3157939 C8.22389464,14.1990008 8.21871152,14.0835898 8.20903634,13.9702521 C8.21883164,13.925531 8.22381277,13.8798899 8.22389464,13.8341087 L8.22389464,5.18052517 L9.49407213,6.7244221 C9.7596145,7.0207141 10.2815366,6.88938529 10.5833148,6.64410705 C10.7932609,6.47346778 10.9816503,6.18864132 10.997479,6.00232982 C11.0133077,5.81601831 10.954132,5.63109339 10.8330807,5.48858331 L8.10330055,2.25120225 Z" id="路径" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/header-top/image/cursor-icon-2.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>节拍指针</title>
+    <defs>
+        <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF9C63" offset="0%"></stop>
+            <stop stop-color="#FF7144" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="14.5" cy="14.5" r="14.5"></circle>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-268.000000, -27.000000)">
+            <g id="编组-5备份-9" transform="translate(263.000000, 27.000000)">
+                <g id="编组-2" transform="translate(5.000000, 0.000000)">
+                    <g id="椭圆形">
+                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <use fill="#1CACF1" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="矩形" fill="#FFFFFF" opacity="0.347728911" x="11.2951222" y="4" width="5.81088201" height="21.3065674" rx="1"></rect>
+                    <path d="M15.6450859,5.8 L13.161022,5.8 C12.4487588,5.8 11.7955891,6.35139505 11.6066345,7.10706476 L7.5646309,17.8957605 L7.55192599,17.9974532 C7.36158798,18.6570202 7.24878302,19.3437043 7.21172159,20.0069002 C7.14144899,21.16499 7.38706812,22.030375 7.95070818,22.5965135 C8.37666016,22.9988072 8.90712493,23.2001243 9.55495798,23.2001243 L19.2170982,23.2001243 C19.8639973,23.2017406 20.3951137,23.0004652 20.8182769,22.6028117 C21.3947139,22.0935076 21.6332069,21.2614132 21.5963084,20.0452008 L21.5648027,19.6419562 C21.5240858,19.2363778 21.4555125,18.8236085 21.3570795,18.4019405 L21.2510124,17.988 L19.9497116,14.6532837 C19.8019891,14.3282274 19.4301651,14.1525086 19.0975612,14.2428626 C18.7439808,14.3841921 18.5528207,14.7448334 18.652166,15.0718013 L19.9497116,18.3578559 L20.0651769,18.8882582 L20.1070124,19.107 L20.0367725,19.0548306 C19.0543245,18.3596771 17.798317,17.8493584 16.4277908,17.6005981 L16.3650124,17.59 L21.5034123,8.27827317 C21.6952043,7.96299563 21.5593838,7.57889323 21.2185186,7.39607102 L21.118299,7.35202608 C20.8136898,7.24617381 20.4804683,7.37409641 20.3060903,7.66105506 L14.8820124,17.408 L14.4520041,17.3815515 C14.4298899,17.3809723 14.408173,17.3807135 14.3851768,17.3807135 L14.0431062,17.3858125 C11.9978793,17.4468359 10.0898219,18.0526267 8.7304013,19.0432241 L8.69701235,19.068 L8.78257671,18.6584442 C8.80567826,18.5527879 8.83205182,18.4351069 8.86221148,18.3022202 L12.9040107,7.48289762 L12.9323221,7.42128138 C13.0143084,7.21599958 13.1275263,7.099892 13.1899627,7.099892 L15.6093317,7.099892 C15.6568291,7.099892 15.7352584,7.18260646 15.8226875,7.37770929 L16.8659387,9.82241207 C17.0120244,10.1433299 17.3259492,10.3692228 17.7193463,10.2677839 C18.0729267,10.1264544 18.240984,9.76897881 18.1416386,9.442011 L17.1910361,7.08103741 C17.0085744,6.35125149 16.3555748,5.8 15.6450859,5.8 Z" id="路径" fill="#FFF7F7" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/header-top/image/cursor-icon-3.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>关闭指针</title>
+    <defs>
+        <linearGradient x1="-7.37257477e-16%" y1="-4.51028104e-15%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF9C63" offset="0%"></stop>
+            <stop stop-color="#FF7144" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="14.5" cy="14.5" r="14.5"></circle>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-324.000000, -27.000000)">
+            <g id="编组-5备份-6" transform="translate(319.000000, 27.000000)">
+                <g id="关闭指针" transform="translate(5.000000, 0.000000)">
+                    <g id="椭圆形">
+                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <use fill="#1CACF1" xlink:href="#path-2"></use>
+                    </g>
+                    <g id="编组" transform="translate(8.130908, 4.000000)">
+                        <rect id="矩形" fill="#FFFFFF" opacity="0.347728911" x="3.36909222" y="0" width="6" height="22" rx="1"></rect>
+                        <path d="M9.59209222,12.457 L9.59298686,13.8341087 C9.59290499,13.8798899 9.58792386,13.925531 9.57812856,13.9702521 C9.58780373,14.0835898 9.59298686,14.1990008 9.59298686,14.3157939 C9.59298686,16.5725274 7.75263127,18.4018256 5.48103954,18.4018256 C4.81443695,18.4018256 4.1849698,18.2442975 3.62824694,17.9646669 L9.59209222,12.457 Z M5.48103954,10.2297622 C6.28077626,10.2282658 7.05939528,10.4600918 7.72392612,10.8909773 L1.87876267,16.2879862 C1.55393344,15.7032676 1.36909222,15.0309961 1.36909222,14.3157939 C1.36909222,12.0590605 3.21082996,10.2297622 5.48103954,10.2297622 Z M8.55808919,2.10538362 C8.85703342,1.92145821 9.24549091,1.98341174 9.47239277,2.25120225 L12.2021729,5.48858331 C12.3232242,5.63109339 12.3823999,5.81601831 12.3665712,6.00232982 C12.3507426,6.18864132 12.1623531,6.47346778 11.952407,6.64410705 C11.6506289,6.88938529 11.1287067,7.0207141 10.8631643,6.7244221 L9.59298686,5.18052517 L9.59209222,9.166 L8.16009222,10.488 L8.16071612,2.69764225 C8.16077351,2.47036485 8.28096905,2.26282227 8.47201719,2.14847137 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <line x1="0.531038992" y1="5.72996127" x2="14.3380528" y2="18.4748971" id="直线备份-3" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" transform="translate(7.434546, 12.102429) scale(-1, 1) translate(-7.434546, -12.102429) "></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/header-top/index.module.less

@@ -95,6 +95,31 @@
         height: 85%;
     }
 
+    .botton-tips {
+        position: absolute;
+        left: -20PX;
+        bottom: -28PX;
+        background: rgba(33, 33, 33, 0.56);
+        font-size: 14PX;
+        font-weight: 500;
+        color: #FFFFFF;
+        padding: 3PX 10PX;
+        word-break: keep-all;
+        z-index: 1;
+        border-radius: 20PX;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 48PX;
+          top: -8PX;
+          width: 0;
+          height: 0;
+          border-bottom: 8PX solid rgba(33, 33, 33, 0.56);
+          border-right: 8PX solid transparent;
+          border-left: 8PX solid transparent;      
+        }
+    }      
+
 }
 
 .disabled {

src/page-instrument/header-top/index.tsx

@@ -22,6 +22,7 @@ import { HANDLE_WORK_ADD } from "../custom-plugins/work-index";
 import { browser } from "/src/utils";
 import store from "store";
 import "../component/the-modal-tip/index.module.less";
+import { metronomeData } from "../../helpers/metronome";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -312,6 +313,17 @@ export default defineComponent({
               e.stopPropagation();
             }}
           >
+
+            <div class={[styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => {
+              // 切换光标模式
+              const mode = metronomeData.cursorMode === 3 ? 1 : metronomeData.cursorMode + 1
+              metronomeData.cursorMode = mode
+            }}>
+              <img class={styles.iconBtn} src={headImg(metronomeData.cursorMode === 1 ? 'cursor-icon-1.svg' : metronomeData.cursorMode === 2 ? 'cursor-icon-2.svg' : metronomeData.cursorMode === 3 ? 'cursor-icon-3.svg' : '')} />
+              <span>{metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}</span>
+              {metronomeData.cursorTips && <div class={styles['botton-tips']}>{metronomeData.cursorTips}</div>}
+            </div>
+                        
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
               style={{ display: toggleBtn.value.display ? "" : "none" }}

src/view/selection/index.module.less

@@ -90,10 +90,21 @@
 
 .line {
     position: absolute;
-    top: -20%;
     height: 120%;
-    width: 4px;
-    background-color: #ff8d2960;
+    background-color: rgba(25, 140, 254, 0.7);
+    min-height: 58PX;
+    // width: 14PX;
+    margin-top: -14PX;
+    border-radius: 4Px;
+    opacity: var(--corsor-opacity);    
+}
+
+.lineStaff {
+    width: 14PX;
+}
+
+.lineJianPu {
+    width: 18PX;
 }
 
 :global {

src/view/selection/index.tsx

@@ -218,7 +218,7 @@ export default defineComponent({
 					const lineShow =
 						!state.isReport &&
 						!state.times[state.activeNoteIndex].multipleRestMeasures &&
-						metronomeData.lineShow &&
+						metronomeData.cursorMode === 2 &&
 						item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
 						state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
 					return (
@@ -234,7 +234,12 @@ export default defineComponent({
 									onClick={() => handleSelection(item)}
 								>
 									{lineShow && (
-										<div class={styles.line} style={{ left: metronomeData.activeMetro.left }}></div>
+										<div 
+										class={[
+											styles.line,
+											state.musicRenderType == EnumMusicRenderType.staff ? styles.lineStaff : styles.lineJianPu,
+										]} 
+										style={{ left: metronomeData.activeMetro.left }}></div>
 									)}
 									{!state.isReport &&
 										!!item.multipleRestMeasures &&