管乐团指法切换

src/page-orchestra/detail/index.module.less

@@ -18,9 +18,7 @@
     background: var(--container-background);
 
     .headHeight {
-        position: fixed;
-        left: 0;
-        top: 0;
+        position: relative;
         width: 100%;
         height: var(--header-height);
         transition: margin .3s;
@@ -31,24 +29,13 @@
     }
 
     .container {
-        position: relative;
-        height: 100vh;
+        position: sticky;
+        top: 0;
+        height: calc(100vh - var(--header-height));
         margin: 0 10px;
         border-radius: 10px;
-        padding-top: var(--header-height);
-        overflow-x: hidden;
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-            width: 0;
-            display: none;
-        }
-        :global{
-            #musicAndSelection{
-                overflow: auto;
-                height: initial;
-                max-height: initial;
-            }
-        }
+        transition: height .3s;
+        overflow: hidden;
     }
 }
 

src/page-orchestra/detail/index.tsx

@@ -26,6 +26,7 @@ import UnitTest from "../custom-plugins/unitTest";
 import CheckStudentVip from "../custom-plugins/check-student-vip";
 import AfterClassTraining from "../custom-plugins/after-class-training";
 import GuidePage from "../custom-plugins/guide-page";
+import { recalculateNoteData } from "/src/view/selection";
 
 export default defineComponent({
 	name: "music-list",
@@ -52,7 +53,10 @@ export default defineComponent({
 			api_setStatusBarVisibility();
 			const settting = store.get(musicscoresettingKey);
 			if (settting) {
-				state.setting = settting;
+				state.setting = {
+					...state.setting,
+					...settting,
+				};
 				if (state.setting.camera) {
 					api_openCamera();
 				}
@@ -177,7 +181,7 @@ export default defineComponent({
 							width: state.fingeringInfo.width,
 							height: "100%",
 							right: 0,
-							top: 0, //"calc(var(--header-height) / 2)",
+							top: 0,
 						},
 					};
 				}
@@ -188,21 +192,6 @@ export default defineComponent({
 			};
 		});
 
-		// 监听指法显示
-		watch(
-			() => state.setting.displayFingering,
-			() => {
-				if (state.fingeringInfo.direction === "vertical") {
-					if (state.setting.displayFingering) {
-						document.getElementById("musicAndSelection")?.style.removeProperty("--music-zoom");
-					} else {
-						nextTick(() => {
-							resetMusicScore();
-						});
-					}
-				}
-			}
-		);
 		// 监听播放状态
 		watch(
 			() => state.playState,
@@ -210,13 +199,16 @@ export default defineComponent({
 				detailData.headerHide = state.playState === "play" ? true : false;
 			}
 		);
-		// 设置改变触发
+		// 监听指法显示
 		watch(
-			[() => state.setting],
+			() => state.setting.displayFingering,
 			() => {
-				store.set(musicscoresettingKey, state.setting);
-			},
-			{ deep: true }
+				if (state.fingeringInfo.direction === "vertical") {
+					nextTick(() => {
+						resetMusicScore();
+					});
+				}
+			}
 		);
 		onMounted(() => {
 			window.addEventListener("resize", resetMusicScore);
@@ -229,7 +221,9 @@ export default defineComponent({
 		return () => (
 			<div
 				class={[styles.detail, state.setting.eyeProtection && "eyeProtection"]}
-				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "" }}
+				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "",
+			// "--header-height": detailData.headerHide ? "0" : "1.65333rem" 
+		}}
 				onClick={(e: Event) => {
 					if (state.playState === "play") {
 						detailData.headerHide = !detailData.headerHide;
@@ -244,7 +238,7 @@ export default defineComponent({
 				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
 					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
 				</div>
-				<div id="scrollContainer" style={{ ...fingerConfig.value.container }} class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
+				<div id="scrollContainer" style={{ ...fingerConfig.value.container, "height": detailData.headerHide ? "100vh" : ""  }} class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
 					{/* 播放 */}
@@ -256,13 +250,13 @@ export default defineComponent({
 							{evaluatingData.rendered && <EvaluatModel />}
 						</>
 					)}
+					{/* 指法 */}
+					{state.setting.displayFingering && state.fingeringInfo?.name && (
+						<div style={{ ...fingerConfig.value.fingerBox }}>
+							<Fingering />
+						</div>
+					)}
 				</div>
-				{/* 指法 */}
-				{state.setting.displayFingering && state.fingeringInfo?.name && (
-					<div style={{ ...fingerConfig.value.fingerBox }}>
-						<Fingering />
-					</div>
-				)}
 
 				{/* 插件 */}
 				<div class="plugins-box">

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

@@ -32,7 +32,6 @@ export default defineComponent({
 	setup() {
 		const headerData = reactive({
 			settingMode: false,
-			fingeringDisplay: state.setting.displayFingering,
 		});
 		const headRef = ref();
 
@@ -76,13 +75,6 @@ export default defineComponent({
 			api_back();
 		};
 
-		onMounted(() => {
-			state.setting.displayFingering = false;
-		});
-		onBeforeUnmount(() => {
-			state.setting.displayFingering = headerData.fingeringDisplay;
-		});
-
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back} onClick={handleBack}>

src/page-orchestra/header-top/settting/index.tsx

@@ -10,6 +10,7 @@ import iconTv from "../image/tv.png";
 import iconYijian from "../image/yijian.png";
 import ScreenModel from "../../custom-plugins/helper-model/screen-model";
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
+import store from 'store'
 
 export default defineComponent({
 	name: "header-settting",
@@ -19,6 +20,10 @@ export default defineComponent({
 			show: false,
 			recommendationShow: false, // 建议
 		});
+		// 设置改变触发
+		watch(state.setting, () => {
+			store.set('musicscoresetting', state.setting)
+		})
 		return () => (
 			<div class={styles["header-settting"]}>
 				<div class={styles.closeBtn} onClick={() => emit("close")}>

src/view/audio-list/index.tsx

@@ -79,25 +79,9 @@ export default defineComponent({
 				audioData.midiRender = true;
 			};
 			hanldeInitMidiData(midiRef.value);
-
-			// const result = {
-			// 	src: state.midiUrl,
-			// 	bpm: state.speed,
-			// };
-
-			// // midiRef.value.contentWindow.handleLoadFile(result, () => {
-			// 	// console.log("文件加载成功", state.speed);
-			// 	// midiRef.value.contentWindow.setMusicSpeed(state.speed || 100)
-			// // });
-			// midiRef.value.contentWindow.onPlay = () => {
-			// 	onPlay();
-			// };
-			// midiRef.value.contentWindow.onEnded = () => {
-			// 	onEnded();
-			// };
 		};
 
-		console.log(state.playMode, state.midiUrl);
+		// console.log(state.playMode, state.midiUrl);
 		return () => (
 			<div class={styles.audioList}>
 				{state.playMode === "MIDI" && state.speed != 0 && <iframe style={{ display: "none" }} ref={midiRef} src={`/midi/index.html`} onLoad={handleLoad} />}

src/view/selection/index.tsx

@@ -3,109 +3,121 @@ import state, { handleSelection, skipNotePlay } from "/src/state";
 import styles from "./index.module.less";
 import { metronomeData } from "/src/helpers/metronome";
 import { evaluatingData } from "../evaluating";
-import { getLeveByScoreMeasure, leveByScoreMeasureIcons } from "../evaluating/evaluatResult";
+import { leveByScoreMeasureIcons } from "../evaluating/evaluatResult";
 import { Icon } from "vant";
 
-export default defineComponent({
-	name: "selection",
-	setup() {
-		const selectData = reactive({
-			notes: [] as any[],
-			staves: [] as any[],
-		});
-		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[] = [];
-			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,
-				};
-				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 };
-						// console.log("🚀 ~ staveBbox:", staveBbox)
-					}
-					if (item.svgElement) {
-						const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
+const selectData = reactive({
+	notes: [] as any[],
+	staves: [] as any[],
+});
 
-						if (noteEle) {
-							const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
-							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",
-							};
-						}
-						selectData.notes.push(noteItem);
-						notesList.push(item.noteId);
-					}
-				}
+/** 计算点击层数据 */
+const calcNoteData = () => {
+	const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || { x: 0, y: 0 };
+	console.log("🚀 ~ musicContainer:", musicContainer)
+	console.dir(document.getElementById("musicAndSelection"))
+	const parentLeft = musicContainer.x || 0;
+	const parentTop = musicContainer.y || 0;
+	const notes = state.times;
+	const notesList: string[] = [];
+	const MeasureNumberXMLList: number[] = [];
+	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,
+		};
+		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 };
+				// console.log("🚀 ~ staveBbox:", staveBbox)
+			}
+			if (item.svgElement) {
+				const noteEle = document.querySelector(`#vf-${item.svgElement?.attrs?.id}`);
 
-				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") || [])].flat();
-							try {
-								if (list.length) {
-									// console.log("🚀 ~ list:", list)
-									list.forEach((_el: any) => {
-										_el?.style?.setProperty("display", "none");
-									});
-								}
-							} catch (error) {}
+				if (noteEle) {
+					const noteBbox = noteEle.getBoundingClientRect?.() || { x: 0, width: 0 };
+					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",
+					};
+				}
+				selectData.notes.push(noteItem);
+				notesList.push(item.noteId);
+			}
+		}
 
-							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
-							try {
-								if (list.length) {
-									list.forEach((_el: any) => {
-										_el?.style?.removeProperty("display");
-									});
-								}
-							} catch (error) {}
+		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") || [])].flat();
+					try {
+						if (list.length) {
+							// console.log("🚀 ~ list:", list)
+							list.forEach((_el: any) => {
+								_el?.style?.setProperty("display", "none");
+							});
+						}
+					} catch (error) {}
 
-							// console.log("🚀 ~ staveEle:", staveEle)
-							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",
-								// background: 'rgba(0,0,0,.2)'
-							};
-							selectData.staves.push(noteItem);
+					const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
+					try {
+						if (list.length) {
+							list.forEach((_el: any) => {
+								_el?.style?.removeProperty("display");
+							});
 						}
+					} catch (error) {}
+
+					// console.log("🚀 ~ staveEle:", staveEle)
+					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",
+						// background: 'rgba(0,0,0,.2)'
+					};
+					selectData.staves.push(noteItem);
+				}
+				MeasureNumberXMLList.push(item.MeasureNumberXML);
+			} else {
+				if (item.multipleRestMeasures) {
+					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,
+						};
+						selectData.staves.push(noteItem);
 						MeasureNumberXMLList.push(item.MeasureNumberXML);
-					} else {
-						if (item.multipleRestMeasures) {
-							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,
-								};
-								selectData.staves.push(noteItem);
-								MeasureNumberXMLList.push(item.MeasureNumberXML);
-							}
-						}
 					}
 				}
 			}
-			// console.log("🚀 ~ selectData.notes:", selectData.staves);
-		};
+		}
+	}
+	// console.log("🚀 ~ selectData.notes:", selectData.staves);
+};
+
+/** 重新计算 */
+export const recalculateNoteData = () => {
+	selectData.notes = []
+	selectData.staves = []
+	calcNoteData()
+}
+
+export default defineComponent({
+	name: "selection",
+	setup() {
 		/** 是否可以点击音符 */
 		const disableClickNote = computed(() => {
 			return state.sectionStatus || state.modeType !== "practise";