feat: 播放滚动修改

src/state.ts

@@ -598,6 +598,8 @@ const state = reactive({
   speedIcon: 'speed3', // 默认取1/4拍的图片
   isSingleMutliTrack: false, // 是否是单声轨多声部的声轨
   showWorkDonePop: false, // 显示需要提交练习作业弹窗
+  /** 顶部栏高度 */
+  headTopHeight: 0,
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -1321,7 +1323,7 @@ export const hanldeDirectSelection = (list: any[]) => {
     console.log('选段小节', state.section)
   }, 0);
 };
-let offsetTop = 0;
+let offsetTop = 0, musicScrollTop = 0;
 /**
  * 窗口内滚动到音符的区域
  * @param isScroll 可选: 强制滚动到顶部, 默认: false
@@ -1337,19 +1339,33 @@ export const scrollViewNote = (resetTop?: boolean) => {
     offsetTop = 0;
   }
   const domId = "vf" + noteId;
-  const cursorElement: any = noteId ? document.querySelector(`[data-vf=${domId}]`)?.parentElement : document.getElementById('restDot')?.parentElement;
+  // 合并休止小节没有音符，取小节的位置，否则取音符指针位置
+  const cursorElement: any = !noteId && state.times[state.activeNoteIndex]?.totalMultipleRestMeasures ? document.querySelector(`.measureIndex_${state.activeMeasureIndex}`) : document.querySelector(`[data-vf=${domId}]`)?.parentElement;
   const musicAndSelection = document.getElementById(state.scrollContainer)!;
+  if (!state.headTopHeight) {
+    state.headTopHeight = document.querySelector('.headHeight')?.getBoundingClientRect()?.height || 100;
+  }
+  if (!cursorElement || !musicAndSelection) {
+    return
+  }
   // offsetTop = musicAndSelection.scrollTop || offsetTop;
   const noteCenterOffsetTop = cursorElement ? cursorElement?.offsetTop + (cursorElement?.offsetHeight/2) : 0;
   // console.log('滑动',offsetTop, noteCenterOffsetTop)
-  if (!cursorElement || !noteCenterOffsetTop || !musicAndSelection || offsetTop === noteCenterOffsetTop || Math.abs(offsetTop - noteCenterOffsetTop) < 30) return;
-  offsetTop = noteCenterOffsetTop;
-  if (offsetTop > 100) {
+  if (Math.abs(musicAndSelection?.scrollTop - musicScrollTop) > 30) {
+    // 手动滑动谱面，重新播放需要滚动到对应位置
+  } else {
+    if (offsetTop === cursorElement.offsetTop || Math.abs(offsetTop - cursorElement.offsetTop) < 30) return;
+  }
+  // offsetTop = noteCenterOffsetTop;
+  offsetTop = cursorElement.offsetTop;
+  if (offsetTop > (state.headTopHeight + 30)) {
+    musicScrollTop = (offsetTop - state.headTopHeight - 30) * state.musicZoom
     musicAndSelection.scrollTo({
-      top: (offsetTop - 100) * state.musicZoom,
+      top: (offsetTop - state.headTopHeight - 30) * state.musicZoom,
       behavior: "smooth",
     });
   } else {
+    musicScrollTop = 0
     musicAndSelection.scrollTo({
       top: 0,
       behavior: "smooth",

src/view/selection/index.tsx

@@ -307,6 +307,7 @@ export default defineComponent({
 											styles.position,
 											// scoreItem ? `scoreItemLeve${scoreItem.leve}` : "", // 去掉评测小节得分的背景色
 											(state.platform === IPlatform.PC && state.zoom > 0.8) ? styles.linePC : '',
+											`measureIndex_${item.MeasureNumberXML}`
 										]}
 										style={item.staveBox}
 										onClick={() => {