Merge branch '2023-8-14_指法预览'

src/page-instrument/component/mode-type-mode/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, watch } from "vue";
+import { defineComponent, nextTick, onMounted, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import icons from "./icon/index.json";
 import { headTopData } from "../../header-top";
@@ -18,20 +18,17 @@ export default defineComponent({
 			showPC: false,
 			showStudent: false,
 			showVip: false,
+			showTip: false,
 		});
 		const openGuid = () => {
 			// 加载后 判断 端口号 加载对应的引导
 			if (state.platform === IPlatform.PC) {
 				// PC
-				setTimeout(() => {
-					data.showPC = true;
-				}, 500);
+				data.showPC = true;
 			} else {
 				if (storeData.user.vipMember) {
 					// 学生端
-					setTimeout(() => {
-						data.showStudent = true;
-					}, 500);
+					data.showStudent = true;
 				} else {
 					// vip
 					data.showVip = true;
@@ -60,15 +57,20 @@ export default defineComponent({
 				}
 			}
 		);
-
-		watch(
-			() => headTopData.modeType,
-			(val) => {
-				if (val === "init") {
-					openGuid();
-				}
+		watch(() => headTopData.modeType, (val) => {
+			if (val === 'init'){
+				nextTick(() =>{
+					nextTick(() => {
+						setTimeout(() => {
+							data.showTip = true;
+						}, 500)
+					})
+				})
 			}
-		);
+		})
+		onMounted(() => {
+			openGuid();
+		})
 		return () => (
 			<>
 				<div class={[styles.wrap, headTopData.modeType === "init" ? "" : styles.hidden]}>
@@ -89,9 +91,9 @@ export default defineComponent({
 							src={icons.icon_3}
 						/>
 					</div>
-					{data.showPC && headTopData.modeType === "init" ? <TeacherBootom></TeacherBootom> : null}
-					{data.showStudent && headTopData.modeType === "init" ? <StudentBottom></StudentBottom> : null}
-					{data.showVip && headTopData.modeType === "init" && <TheVip />}
+					{data.showPC && data.showTip ? <TeacherBootom></TeacherBootom> : null}
+					{data.showStudent && data.showTip ? <StudentBottom></StudentBottom> : null}
+					{data.showVip && <TheVip />}
 				</div>
 				{headTopData.modeType === 'show' && state.modeType == 'practise' && state.fingeringInfo?.name && state.setting.displayFingering && <GuideIndex list={['detail']} />}
 			</>

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

@@ -1,4 +1,4 @@
-import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
 
 import iconBack from "./image/icon-back.svg";
@@ -26,6 +26,7 @@ import TeacherTop from "../custom-plugins/guide-page/teacher-top";
 import StudentTop from "../custom-plugins/guide-page/student-top";
 import { HANDLE_WORK_ADD } from "../custom-plugins/work-index";
 import { browser } from "/src/utils";
+import store from "store";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -298,6 +299,12 @@ export default defineComponent({
 			window.removeEventListener("message", changePlay);
 		});
 
+		// 设置改变触发
+		watch(state.setting, () => {
+			console.log(state.setting, "state.setting")
+			store.set("musicscoresetting", state.setting);
+		});
+
 		return () => (
 			<>
 				<div class={[styles.headerTop]}>

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

@@ -18,7 +18,7 @@ import {
 } from "vant";
 import state, { IPlatform } from "/src/state";
 import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/communication";
-import store from "store";
+
 import iconInfo from "../image/info.svg";
 import iconDown from "../image/down.svg";
 import iconTv from "../image/tv.svg";
@@ -79,10 +79,7 @@ export default defineComponent({
 				}
 			}, 500);
 		};
-		// 设置改变触发
-		watch(state.setting, () => {
-			store.set("musicscoresetting", state.setting);
-		});
+		
 		return () => (
 			<div class={styles["header-settting"]}>
 				<div class={styles.content}>

src/page-instrument/view-detail/index.module.less

@@ -120,6 +120,6 @@
     }
 
     .headHeight.headHide {
-        margin-top: 0 !important;
+        // margin-top: 0 !important;
     }
 }

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

@@ -72,24 +72,23 @@ const resetFrequency = (list: any[]) => {
  * 乐器指法处理
  */
 const setNoteHalfTone = (list: any[]) => {
-	const instrumentNames = ['melodica']
+	const instrumentNames = ["melodica"];
 	if (!state.fingeringInfo?.name || !instrumentNames.includes(state.fingeringInfo.name)) return list;
 	for (let i = 0; i < list.length; i++) {
 		const note = list[i];
-		if (note.noteElement?.pitch?.accidentalXml){
+		if (note.noteElement?.pitch?.accidentalXml) {
 			const accidentalXml = note.noteElement?.pitch?.accidentalXml;
 			if ([]) {
-
 			}
-			if (accidentalXml === 'flat'){
+			if (accidentalXml === "flat") {
 				// note.realKey = note.realKey + 1;
-			} else if (accidentalXml === 'sharp'){
+			} else if (accidentalXml === "sharp") {
 				// note.realKey = note.realKey + 1;
 			}
 		}
 	}
 	return list;
-}
+};
 
 export default defineComponent({
 	name: "music-list",
@@ -175,7 +174,7 @@ export default defineComponent({
 			state.playMode = data.audioType === "MP3" ? "MP3" : "MIDI";
 			state.originSpeed = state.speed = data.playSpeed;
 			const track = data.code || data.track;
-			state.track = track ? track.replace(/ /g, '').toLocaleLowerCase() : "";
+			state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
 			state.enableNotation = data.notation ? true : false;
 
 			// 映射声部ID
@@ -326,7 +325,9 @@ export default defineComponent({
 		watch(
 			() => state.playState,
 			() => {
-				detailData.headerHide = state.playState === "play" ? true : false;
+				if (state.platform != IPlatform.PC) {
+					detailData.headerHide = state.playState === "play" ? true : false;
+				}
 				sendParentMessage(state.playState);
 			}
 		);
@@ -338,7 +339,7 @@ export default defineComponent({
 		});
 		const browsInfo = browser();
 		const handleOpenFignerView = () => {
-			if (!query.modelType){
+			if (!query.modelType) {
 				detailData.orientation = state.fingeringInfo.orientation || 0;
 				api_setRequestedOrientation(detailData.orientation);
 			}
@@ -355,7 +356,7 @@ export default defineComponent({
 			detailData.fingerPreView = true;
 		};
 		const handleCloseFignerView = () => {
-			if (!query.modelType && detailData.orientation == 1){
+			if (!query.modelType && detailData.orientation == 1) {
 				api_setRequestedOrientation(0);
 			}
 			detailData.fingerPreView = false;
@@ -391,7 +392,7 @@ export default defineComponent({
 						browsInfo.xiaomi && styles.xiaomi,
 					]}
 					onClick={(e: Event) => {
-						if (state.playState === "play") {
+						if (state.playState === "play" && state.platform != IPlatform.PC) {
 							detailData.headerHide = !detailData.headerHide;
 						}
 					}}
@@ -435,20 +436,24 @@ export default defineComponent({
 						{storeData.isApp && <RecordingTime />}
 						{/* 作业 */}
 						{query.workRecord && <WorkIndex />}
-						{followData.start + ""}
 						{/* 曲谱列表 */}
 						{state.playState == "play" ||
 						followData.start ||
 						evaluatingData.startBegin ||
 						query.workRecord ||
-						query.modelType ? null : (
+						query.modelType ||
+						state.platform === IPlatform.PC ? null : (
 							<TheMusicList />
 						)}
 					</>
 				)}
 
 				<Popup teleport="body" v-model:show={detailData.fingerPreView} position="bottom">
-					<ViewFigner subject={state.fingeringInfo.name} isComponent={true} onClose={handleCloseFignerView} />
+					<ViewFigner
+						subject={state.fingeringInfo.name}
+						isComponent={true}
+						onClose={handleCloseFignerView}
+					/>
 				</Popup>
 			</div>
 		);

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

@@ -16,6 +16,8 @@ import { Button, Icon, Popup, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
 import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
+import { usePageVisibility } from "@vant/use";
+import { watch } from "vue";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -124,14 +126,17 @@ export default defineComponent({
 			data.noteAudio = data.soundFonts[item.realKey];
 			data.noteAudio.play();
 		};
-
-		/** 返回 */
-		const handleBack = () => {
+		const handleStop = () => {
 			if (data.noteAudio) {
 				data.noteAudio.stop();
 				data.realKey = 0;
 				data.noteAudio = null as unknown as Howl;
 			}
+		}
+
+		/** 返回 */
+		const handleBack = () => {
+			handleStop();
 			if (props.isComponent) {
 				console.log("关闭");
 				emit("close");
@@ -193,6 +198,17 @@ export default defineComponent({
 				data.transform.startY = 0;
 			});
 		};
+
+		const pageVisible = usePageVisibility();
+		watch(
+			() => pageVisible.value,
+			(val) => {
+				if (val === 'hidden') {
+					console.log("页面隐藏停止播放");
+					handleStop();
+				}
+			}
+		);
 		return () => {
 			const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
 			const rs: number[] = Array.isArray(relationship[1])

src/state.ts

@@ -349,7 +349,7 @@ const setCursorPosition = (note: any, cursor: any) => {
 		state.musicRenderType === EnumMusicRenderType.firstTone ||
 		state.musicRenderType === EnumMusicRenderType.fixedTone
 	) {
-		const noteBox = note?.svgElement.attrs.el
+		const noteBox = note?.svgElement?.attrs?.el
 			?.querySelector(".vf-numbered-note-head")
 			?.getBoundingClientRect();
 		if (!noteBox) return;