内存优化

src/helpers/formateMusic.ts

@@ -1404,7 +1404,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 				stave,
 				firstVerticalMeasure: activeVerticalMeasureList[0],
 				noteLength: 1,
-				osdmContext: osmd,
+				//osdmContext: osmd,
 				speedbeatUnit: beatUnit,
 				multipleRestMeasures: multipleRestMeasures, // 当前合并小节的索引，从1开始到当前的totalMultipleRestMeasures结束，
 				totalMultipleRestMeasures, // 当前小节总的合并小节数

src/page-instrument/view-detail/index.tsx

@@ -26,7 +26,6 @@ import WorkIndex, { resetSection } from "../custom-plugins/work-index";
 import TheMusicList, { isMusicList } from "../component/the-music-list";
 import { storeData } from "/src/store";
 import ViewFigner from "../view-figner";
-import { recalculateNoteData } from "/src/view/selection";
 import ToggleMusicSheet from "/src/view/plugins/toggleMusicSheet";
 import { setCustomGradual, setCustomNoteRealValue } from "/src/helpers/customMusicScore";
 import { usePageVisibility } from "@vant/use";
@@ -39,6 +38,7 @@ import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic";
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 import Loading from "./loading"
 import ExerciseStatistics from "../custom-plugins/ExerciseStatistics"
+import { musicData } from "/src/view/music-score"
 // import bgJson from "./images/index.json";
 
 // const DelayCheck = defineAsyncComponent(() =>
@@ -545,7 +545,7 @@ export default defineComponent({
               onRendered={handleOnRendered} 
             > 
               {/* 旋律线关闭时候的 标题和作者 */}
-              <AuthorName></AuthorName>
+              { musicData.showSelection && <AuthorName></AuthorName>}
               {/* 节拍器 */}
               {!detailData.isLoading && !detailData.skeletonLoading && <Tick />}
             </MusicScore>

src/page-instrument/view-detail/smoothAnimation/bird/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue"
+import { defineComponent, onBeforeUnmount, ref } from "vue"
 import { Vue3Lottie } from "vue3-lottie";
 import styles from "./index.module.less"
 import state from "/src/state"
@@ -9,11 +9,19 @@ import note from "./imgs/note.json"
 export default defineComponent({
     name: "Bird",
     setup() {
+        const vue3LottieDom = ref()
+        const vue3Lottie1Dom = ref()
+        const vue3Lottie2Dom = ref()
+        onBeforeUnmount(()=>{
+            vue3LottieDom.value?.destroy()
+            vue3Lottie1Dom.value?.destroy()
+            vue3Lottie2Dom.value?.destroy()
+        })
         return () => <>
-                <Vue3Lottie style={ { display : state.playState === "paused" ? "" : "none" } } key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
+                <Vue3Lottie ref={vue3LottieDom} style={ { display : state.playState === "paused" ? "" : "none" } } key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
                 <>
-                    <Vue3Lottie style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
-                    <Vue3Lottie style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
+                    <Vue3Lottie ref={vue3Lottie1Dom} style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
+                    <Vue3Lottie ref={vue3Lottie2Dom} style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
                 </>
         </>
     }

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -137,6 +137,8 @@ function dataFindIndex(activeIndex: number, progress: number) {
 export function destroySmoothAnimation() {
    smoothAnimationState.isShow.value = false
    window.removeEventListener("resize", calcClientWidth)
+   // 销毁组件 防止内存泄漏
+   smoothAnimationState.smoothBotDom && render(null, smoothAnimationState.smoothBotDom)
    smoothAnimationState.smoothAnimationBoxDom?.remove()
    Object.assign(smoothAnimationState, {
       canvasDom: null,

src/view/music-score/index.tsx

@@ -14,13 +14,9 @@ import HorizontalDragScroll from './HorizontalDragScroll';
 import { getQuery } from "/src/utils/queryString";
 
 export const musicRenderTypeKey = "musicRenderType";
-let osmd: any = null;
-const musicData = reactive({
+export const musicData = reactive({
 	showSelection: false, // 可以加载点击浮层
-	isRenderLoading: true,
-	score: "",
-	containerWidth: 0,
-	isRefreshLoading: false,
+	score: ""
 });
 
 /** 重新渲染曲谱 */
@@ -63,6 +59,7 @@ export default defineComponent({
 	},
 	setup(props, { emit, slots, expose }) {
 		const query: any = getQuery();
+		let osmd: any = null;
 		/** 设置 曲谱模式,五线谱还是简谱 */
 		const setRenderType = () => {
 			const musicRenderType: any = sessionStorage.getItem(props.renderTypeKey || musicRenderTypeKey);
@@ -88,29 +85,33 @@ export default defineComponent({
 			const container = document.getElementById("musicAndSelection");
 			if (!container || !musicData.score) return;
 			setGlobalMusicSheet();
-			osmd = new OpenSheetMusicDisplay(container, {
-				drawTitle: false,
-				drawSubtitle: false,
-				// drawMeasureNumbers: false,
-				autoResize: false,
-				followCursor: false,
+			if(!osmd){
+				osmd = new OpenSheetMusicDisplay(container, {
+					drawTitle: false,
+					drawSubtitle: false,
+					// drawMeasureNumbers: false,
+					autoResize: false,
+					followCursor: false,
+					drawLyricist: false, // 渲染作曲家
+					drawComposer: false, // 渲染作词家
+					// pageBackgroundColor: '#609FCF',
+					// autoGenerateMultipleRestMeasuresFromRestMeasures: state.isSingleLine ? false : true, // 连续休止小节是否合并显示
+					autoGenerateMultipleRestMeasuresFromRestMeasures: true,
+					// darkMode: true, // 暗黑模式
+					// pageFormat: 'A4_P',
+					// autoBeam: true,
+					// drawMetronomeMarks: false,
+					// ...this.opotions,
+					colorStemsLikeNoteheads: true, // 是否将音符柄的颜色设置为与它们的音符头相同，默认false
+					// drawingParameters: "compact" // 使用紧凑布局
+				});
+			}
+			osmd.setOptions({
+				drawLyrics: (((!state.accompany && !state.music ) || state.playType === 'sing' || !state.isEvxml) && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词，simple页面不显示歌词
 				drawPartNames: props.showPartNames, // 是否渲染声轨名称
-				drawLyricist: false, // 渲染作曲家
-				drawComposer: false, // 渲染作词家
 				defaultColorMusic: props.musicColor, // 颜色
-				// pageBackgroundColor: '#609FCF',
-				renderSingleHorizontalStaffline: state.isSingleLine ? true : false,
-				// autoGenerateMultipleRestMeasuresFromRestMeasures: state.isSingleLine ? false : true, // 连续休止小节是否合并显示
-				autoGenerateMultipleRestMeasuresFromRestMeasures: true,
-				drawLyrics: ( ((!state.accompany && !state.music ) || state.playType === 'sing' || !state.isEvxml) && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词，simple页面不显示歌词
-				// darkMode: true, // 暗黑模式
-				// pageFormat: 'A4_P',
-				// autoBeam: true,
-				// drawMetronomeMarks: false,
-				// ...this.opotions,
-				colorStemsLikeNoteheads: true, // 是否将音符柄的颜色设置为与它们的音符头相同，默认false
-				// drawingParameters: "compact" // 使用紧凑布局
-			});
+				renderSingleHorizontalStaffline: state.isSingleLine ? true : false
+			})
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			// osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+200)/10 : 2;
 			// osmd.EngravingRules.FixedMeasureWidth = state.isSingleLine ? true : false; // 是否固定小节的宽度（小节同一宽度渲染）
@@ -174,18 +175,11 @@ export default defineComponent({
 			resetGivenFormate();
 			musicData.showSelection = true;
 		};
-		/** 获取渲染容器的宽度 */
-		const getContainerWidth = () => {
-			musicData.containerWidth = document.getElementById("musicAndSelection")?.offsetWidth || 625;
-			// console.log(musicData.containerWidth)
-		};
 		let horizontalDragScroll:HorizontalDragScroll | null
 		onMounted(async () => {
-			getContainerWidth();
 			//setRenderType();
 			await getXML();
 			await init();
-			musicData.isRenderLoading = false;
 			// pc 端支持 拖动滚动
 			if(state.platform === "PC" || query.isCbs){
 				const container = document.querySelector('#musicAndSelection') as HTMLElement;
@@ -209,34 +203,29 @@ export default defineComponent({
 			}
 			return result;
 		});
-
 		/** 刷新曲谱 */
 		const refreshMusicScore = () => {
-			const container = document.getElementById('musicAndSelection'), svgDom = document.getElementById('osmdCanvasPage1'), selectionBox = document.getElementById('selectionBox'), selectionBgBox = document.getElementById('selectionBgBox');
+			state.loadingText = "正在加载中，请稍等..."
+			state.isLoading = true
+			state.evXmlBeginArr = [];
+			state.vfmeasures = [];
+			musicData.showSelection = false;
+			state.osmd.clear();
+			const container = document.getElementById('musicAndSelection'), svgDom = document.getElementById('osmdCanvasPage1');
 			if (container) {
+				//这里需要删除osmd，不然多行谱和一行谱切换 滚动高度会出问题
 				svgDom && container?.removeChild(svgDom)
-				selectionBox && container?.removeChild(selectionBox)
-				selectionBgBox && container?.removeChild(selectionBgBox)
 			}
 			// 有可能会有 其他地方的js执行 阻塞 这里确保加载条出来
-			state.loadingText = "正在加载中，请稍等..."
-			state.isLoading = true
 			setTimeout(async () => {
-				state.evXmlBeginArr = [];
-				state.vfmeasures = [];
-				musicData.showSelection = false;
-				state.osmd.clear();
-				musicData.isRenderLoading = true;
-				musicData.isRefreshLoading = true;
-				getContainerWidth();
+				// 在滚动过程中(雄鹰高飞这种marginbottom比较大的) 多行谱和一行谱切换 滚动高度会出问题
+				container && (container.scrollTop = 0)
 				//setRenderType();
 				await getXML();
 				await init();
-				musicData.isRenderLoading = false;
-				musicData.isRefreshLoading = false;
 				musicData.showSelection = true;
 				state.isLoading = false
-			}, 120);
+			}, 60);
 		}
 		expose({
 			refreshMusicScore,

src/view/music-score/testCheck.tsx

@@ -14,7 +14,6 @@ export const musicRenderTypeKey = "musicRenderType";
 let osmd: any = null;
 const musicData = reactive({
 	showSelection: false, // 可以加载点击浮层
-	isRenderLoading: true,
 	score: "",
 	containerWidth: 0,
 });
@@ -131,13 +130,7 @@ export default defineComponent({
             container.innerHTML = "";
 			
 		};
-		/** 获取渲染容器的宽度 */
-		const getContainerWidth = () => {
-			musicData.containerWidth = 625;
-			// console.log(musicData.containerWidth)
-		};
 		onMounted(async () => {
-			getContainerWidth();
             state.isEvxml = true
             // checkRender(xmlList2);
 		});

src/view/selection/index.tsx

@@ -13,207 +13,199 @@ import IntonationUp from "./imgs/pitchHigh.png"
 import MultipleRestMeasures from "./multipleRestMeasures"
 import { browser } from "../../utils";
 
-const selectData = reactive({
-	notes: [] as any[],
-	staves: [] as any[],
-	measureHeight: 0 as number, // 小节高度
-});
-
-/** 计算点击层数据 */
-const calcNoteData = () => {
-	const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
-		x: 0,
-		y: 0,
-	};
-	const parentLeft = musicContainer.x || 0;
-	const parentTop = musicContainer.y || 0;
-	const notes = state.times;
-	const notesList: string[] = [];
-	const MeasureNumberXMLList: number[] = [];
-	let minMeasureHeigt: number = 0;
-	for (let i = 0; i < notes.length; i++) {
-		const item = notes[i];
-		// console.log("🚀 ~ item:", item)
-		const noteItem = {
-			...item,
-			index: item.i,
-			bbox: null as any,
-			staveBox: null as any,
+export default defineComponent({
+	name: "selection",
+	setup() {
+		const browsInfo = browser();
+		const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browsInfo?.iPad || browsInfo.isTablet;
+		const route = useRoute();
+		const query: any = {
+			...getQuery(),
+			...route.query,
 		};
-		if (!notesList.includes(item.noteId)) {
-			let staveBbox: any = {};
-			if (item.stave?.attrs?.id) {
-				const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
-				staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
-					x: 0,
-					width: 0,
+		const selectData = reactive({
+			notes: [] as any[],
+			staves: [] as any[],
+			measureHeight: 0 as number, // 小节高度
+		});
+		
+		/** 计算点击层数据 */
+		const calcNoteData = () => {
+			const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
+				x: 0,
+				y: 0,
+			};
+			const parentLeft = musicContainer.x || 0;
+			const parentTop = musicContainer.y || 0;
+			const notes = state.times;
+			const notesList: string[] = [];
+			const MeasureNumberXMLList: number[] = [];
+			let minMeasureHeigt: number = 0;
+			for (let i = 0; i < notes.length; i++) {
+				const item = notes[i];
+				// console.log("🚀 ~ item:", item)
+				const noteItem = {
+					...item,
+					index: item.i,
+					bbox: null as any,
+					staveBox: null as any,
 				};
-				// console.log("🚀 ~ staveBbox:", staveBbox.height)
-			}
-			if (item.svgElement) {
-				const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
-
-				if (noteEle) {
-					const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
-					if (state.musicRenderType !== EnumMusicRenderType.staff) {
-						noteItem.bbox = {
-							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
-							top: noteBbox.y - parentTop - noteBbox.height + "px",
-							width: noteBbox.width * 1.5 + "px",
-							height: noteBbox.height * 3 + "px",
-							x: item.bbox?.x,
-							y: item.bbox?.y,
-							originWidth: item.bbox?.width
+				if (!notesList.includes(item.noteId)) {
+					let staveBbox: any = {};
+					if (item.stave?.attrs?.id) {
+						const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
+						staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
+							x: 0,
+							width: 0,
 						};
-						const noteHead = noteEle.querySelector(".vf-numbered-note-head");
-						const noteHeadBbox = noteHead?.getBoundingClientRect?.();
-						if  (noteHeadBbox) {
-							item.bbox = {
-								left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
-								width: noteHeadBbox.width * 1.5,
-								x: item.bbox?.x,
-								y: item.bbox?.y,
-								originWidth: item.bbox?.width
+						// console.log("🚀 ~ staveBbox:", staveBbox.height)
+					}
+					if (item.svgElement) {
+						const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
+		
+						if (noteEle) {
+							const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
+							if (state.musicRenderType !== EnumMusicRenderType.staff) {
+								noteItem.bbox = {
+									left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
+									top: noteBbox.y - parentTop - noteBbox.height + "px",
+									width: noteBbox.width * 1.5 + "px",
+									height: noteBbox.height * 3 + "px",
+									x: item.bbox?.x,
+									y: item.bbox?.y,
+									originWidth: item.bbox?.width
+								};
+								const noteHead = noteEle.querySelector(".vf-numbered-note-head");
+								const noteHeadBbox = noteHead?.getBoundingClientRect?.();
+								if  (noteHeadBbox) {
+									item.bbox = {
+										left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
+										width: noteHeadBbox.width * 1.5,
+										x: item.bbox?.x,
+										y: item.bbox?.y,
+										originWidth: item.bbox?.width
+									}
+								}
+								
+							} else {
+								noteItem.bbox = {
+									left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
+									top: staveBbox.y - parentTop + "px",
+									width: noteBbox.width * 1.5 + "px",
+									height: staveBbox.height + "px",
+									x: item.bbox?.x,
+									y: item.bbox?.y,
+									originWidth: item.bbox?.width
+								};
 							}
+							
 						}
-						
-					} else {
-						noteItem.bbox = {
-							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
-							top: staveBbox.y - parentTop + "px",
-							width: noteBbox.width * 1.5 + "px",
-							height: staveBbox.height + "px",
-							x: item.bbox?.x,
-							y: item.bbox?.y,
-							originWidth: item.bbox?.width
-						};
-					}
-					
-				}
-				if (selectData.notes.find((item:any) => item.id === noteItem.id)) {
-					// 
-				} else {
-					selectData.notes.push(noteItem);
-				}
-				// selectData.notes.push(noteItem);
-				notesList.push(item.noteId);
-			}
-		}
-
-		if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
-			if (item.stave) {
-				if (item.stave?.attrs?.id) {
-					const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
-					const list = [
-						Array.from(staveEle?.querySelectorAll(".vf-clef") || []),
-						Array.from(staveEle?.querySelectorAll(".vf-keysignature") || []),
-						Array.from(staveEle?.getElementsByTagName("text") || []),
-					].flat();
-					try {
-						if (list.length) {
-							// console.log("🚀 ~ list:", list)
-							list.forEach((_el: any) => {
-								_el?.style?.setProperty("display", "none");
-							});
+						if (selectData.notes.find((item:any) => item.id === noteItem.id)) {
+							// 
+						} else {
+							selectData.notes.push(noteItem);
 						}
-					} catch (error) {}
-
-					const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
-					if (i === 0) {
-						minMeasureHeigt = staveBbox.height
+						// selectData.notes.push(noteItem);
+						notesList.push(item.noteId);
 					}
-					try {
-						if (list.length) {
-							list.forEach((_el: any) => {
-								_el?.style?.removeProperty("display");
-							});
-						}
-					} catch (error) {}
-
-					// console.log("🚀 ~ staveEle:", staveBbox.height)
-					selectData.measureHeight = staveBbox.height
-					let compareVal = staveBbox.height - minMeasureHeigt
-					compareVal = compareVal > 0 ? compareVal : 0
-					noteItem.staveBox = {
-						left: staveBbox.x - parentLeft + "px",
-						// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
-						top: staveBbox.y - parentTop + compareVal + "px",
-						width: staveBbox.width + "px",
-						height: staveBbox.height - compareVal + "px",
-						// background: 'rgba(0,0,0,.2)'
-					};
-					selectData.staves.push(noteItem);
 				}
-				MeasureNumberXMLList.push(item.MeasureNumberXML);
-			} else {
-				if (item.multipleRestMeasures) {
-					if (state.isCombineRender) {
-						let currentItem = null;
-						for (let index = 0; index < state.vfmeasures.length; index++) {
-							const element = state.vfmeasures[index];
-							const measureNum = element.getAttribute('data-num') ? Number(element.getAttribute('data-num')) : -1;
-							const nextMeasureNum = state.vfmeasures[index+1]?.getAttribute('data-num') ? Number(state.vfmeasures[index+1]?.getAttribute('data-num')) : -1;
-							if (measureNum === item.MeasureNumberXML || item.MeasureNumberXML < nextMeasureNum || nextMeasureNum == -1) {
-								currentItem = element
-								break;
+		
+				if (!MeasureNumberXMLList.includes(item.MeasureNumberXML)) {
+					if (item.stave) {
+						if (item.stave?.attrs?.id) {
+							const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
+							const list = [
+								Array.from(staveEle?.querySelectorAll(".vf-clef") || []),
+								Array.from(staveEle?.querySelectorAll(".vf-keysignature") || []),
+								Array.from(staveEle?.getElementsByTagName("text") || []),
+							].flat();
+							try {
+								if (list.length) {
+									// console.log("🚀 ~ list:", list)
+									list.forEach((_el: any) => {
+										_el?.style?.setProperty("display", "none");
+									});
+								}
+							} catch (error) {}
+		
+							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+							if (i === 0) {
+								minMeasureHeigt = staveBbox.height
 							}
-						}
-						const staveBbox = currentItem?.querySelector('.vf-stave')?.getBoundingClientRect() || { x: 0, width: 0, y: 0, height: 0 };
-						if (currentItem) {
+							try {
+								if (list.length) {
+									list.forEach((_el: any) => {
+										_el?.style?.removeProperty("display");
+									});
+								}
+							} catch (error) {}
+		
+							// console.log("🚀 ~ staveEle:", staveBbox.height)
+							selectData.measureHeight = staveBbox.height
+							let compareVal = staveBbox.height - minMeasureHeigt
+							compareVal = compareVal > 0 ? compareVal : 0
 							noteItem.staveBox = {
 								left: staveBbox.x - parentLeft + "px",
 								// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
-								top: staveBbox.y - parentTop  + "px",
+								top: staveBbox.y - parentTop + compareVal + "px",
 								width: staveBbox.width + "px",
-								height: staveBbox.height + "px",
-								// height: preItem.staveBox.height,
+								height: staveBbox.height - compareVal + "px",
+								// background: 'rgba(0,0,0,.2)'
 							};
 							selectData.staves.push(noteItem);
-							MeasureNumberXMLList.push(item.MeasureNumberXML);
 						}
+						MeasureNumberXMLList.push(item.MeasureNumberXML);
 					} else {
-						const preItem = selectData.staves.find(
-							(n: any) => n.MeasureNumberXML === item.MeasureNumberXML - 1
-						);
-						if (preItem?.staveBox) {
-							noteItem.staveBox = {
-								left: preItem.staveBox.left,
-								top: preItem.staveBox.top,
-								width: preItem.staveBox.width,
-								// height: preItem.staveBox.height,
-							};
-							selectData.staves.push(noteItem);
-							MeasureNumberXMLList.push(item.MeasureNumberXML);
+						if (item.multipleRestMeasures) {
+							if (state.isCombineRender) {
+								let currentItem = null;
+								for (let index = 0; index < state.vfmeasures.length; index++) {
+									const element = state.vfmeasures[index];
+									const measureNum = element.getAttribute('data-num') ? Number(element.getAttribute('data-num')) : -1;
+									const nextMeasureNum = state.vfmeasures[index+1]?.getAttribute('data-num') ? Number(state.vfmeasures[index+1]?.getAttribute('data-num')) : -1;
+									if (measureNum === item.MeasureNumberXML || item.MeasureNumberXML < nextMeasureNum || nextMeasureNum == -1) {
+										currentItem = element
+										break;
+									}
+								}
+								const staveBbox = currentItem?.querySelector('.vf-stave')?.getBoundingClientRect() || { x: 0, width: 0, y: 0, height: 0 };
+								if (currentItem) {
+									noteItem.staveBox = {
+										left: staveBbox.x - parentLeft + "px",
+										// top: ((item.stave.y || 0) - 5) * state.zoom + "px",
+										top: staveBbox.y - parentTop  + "px",
+										width: staveBbox.width + "px",
+										height: staveBbox.height + "px",
+										// height: preItem.staveBox.height,
+									};
+									selectData.staves.push(noteItem);
+									MeasureNumberXMLList.push(item.MeasureNumberXML);
+								}
+							} else {
+								const preItem = selectData.staves.find(
+									(n: any) => n.MeasureNumberXML === item.MeasureNumberXML - 1
+								);
+								if (preItem?.staveBox) {
+									noteItem.staveBox = {
+										left: preItem.staveBox.left,
+										top: preItem.staveBox.top,
+										width: preItem.staveBox.width,
+										// height: preItem.staveBox.height,
+									};
+									selectData.staves.push(noteItem);
+									MeasureNumberXMLList.push(item.MeasureNumberXML);
+								}
+							}
+		
 						}
 					}
-
 				}
 			}
-		}
-	}
-	// 部分浏览器渲染的第一小节的位置信息会包含拍号、调号，需要处理一下，剔除掉拍号、调号的位置
-	if (selectData.staves[0]?.staveBox?.top !== selectData.staves[1]?.staveBox?.top) {
-		selectData.staves[0].staveBox.top = selectData.staves[1]?.staveBox?.top || selectData.staves[0]?.staveBox?.top
-	}
-	console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
-};
-
-/** 重新计算 */
-export const recalculateNoteData = () => {
-	selectData.notes = [];
-	selectData.staves = [];
-	calcNoteData();
-};
-
-export default defineComponent({
-	name: "selection",
-	setup() {
-		const browsInfo = browser();
-		const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browsInfo?.iPad || browsInfo.isTablet;
-		const route = useRoute();
-		const query: any = {
-			...getQuery(),
-			...route.query,
+			// 部分浏览器渲染的第一小节的位置信息会包含拍号、调号，需要处理一下，剔除掉拍号、调号的位置
+			if (selectData.staves[0]?.staveBox?.top !== selectData.staves[1]?.staveBox?.top) {
+				selectData.staves[0].staveBox.top = selectData.staves[1]?.staveBox?.top || selectData.staves[0]?.staveBox?.top
+			}
+			console.log("🚀 ~ selectData.notes:", selectData.notes, selectData.staves);
 		};
 		/** 是否可以点击音符 */
 		const disableClickNote = computed(() => {