指法显示

src/helpers/communication.ts

@@ -99,3 +99,14 @@ export const api_closeCamera = (): Promise<IPostMessage | undefined> => {
 	if (!isApp()) return Promise.resolve({} as any);
 	return promisefiyPostMessage({ api: "closeCamera" });
 };
+
+/** 安卓隐藏状态栏 */
+export const api_setStatusBarVisibility = () => {
+	// 安卓的状态栏
+	postMessage({
+		api: "setStatusBarVisibility",
+		content: {
+			isVisibility: 0,
+		},
+	});
+};

src/helpers/formateMusic.ts

@@ -794,7 +794,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			// 如果有节拍器,需要将节拍器的时间算出来
 			if (i === 0) {
 				fixtime += getFixTime(beatSpeed);
-				// console.log("🚀 ~ fixtime:", fixtime, beatSpeed)
+				console.log("🚀 ~ fixtime:", fixtime, beatSpeed)
 			}
 			// console.log(getTimeByBeatUnit(beatUnit, measureSpeed, iterator.currentMeasure.activeTimeSignature.Denominator))
 			let gradualLength = 0;

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

@@ -16,8 +16,6 @@
     overflow: hidden;
     background-color: var(--van-primary-color);
     --header-height: 62px;
-    --fingerin-bottom: 0;
-    --fingerin-right: 0;
     &.opencamera {
         opacity: .7;
     }
@@ -26,21 +24,6 @@
         height: var(--header-height);
     }
 
-    .fingeringBottm {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: var(--fingerin-bottom);
-    }
-    .fingeringRight {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: var(--fingerin-right);
-        height: 100%;
-    }
-
     .container {
         position: relative;
         height: calc(100vh - 18px - var(--header-height));
@@ -48,8 +31,6 @@
         background: var(--container-background);
         border-radius: 10px;
         overflow: hidden;
-        padding-bottom: var(--fingerin-bottom);
-        padding-right: var(--fingerin-right);
     }
 }
 

src/page-gym/detail/index.tsx

@@ -13,7 +13,7 @@ import { sysMusicScoreAccompanimentQueryPage, sysMusicScoreCategoriesQueryTree }
 import EvaluatModel from "../evaluat-model";
 import HeaderTop from "../header-top";
 import styles from "./index.module.less";
-import { isSpecialShapedScreen } from "/src/helpers/communication";
+import { api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
 import { getQuery } from "/src/utils/queryString";
 import Evaluating, { evaluatingData } from "/src/view/evaluating";
 import MeasureSpeed from "/src/view/plugins/measure-speed";
@@ -107,11 +107,11 @@ export default defineComponent({
 					console.error("解析扩展字段错误:", error);
 				}
 			}
-			state.isOpenMetronome = data.isOpenMetronome;
+			state.isOpenMetronome = !data.isOpenMetronome;
 			state.needTick = data.isOpenMetronome;
 			state.isShowFingering = data.isShowFingering;
-			state.music = data.metronomeMp3Url;
-			state.accompany = data.metronomeUrl;
+			state.music = data.isOpenMetronome ? data.mp3Url : data.metronomeMp3Url;
+			state.accompany = data.isOpenMetronome ? data.url : data.metronomeUrl;
 			state.midiUrl = data.midiUrl;
 			state.parentCategoriesId = data.parentCategoriesId;
 			state.playMode = data.playMode;
@@ -124,7 +124,8 @@ export default defineComponent({
 			// 是否打击乐
 			state.isPercussion = state.subjectId == 23 || state.subjectId == 113 || state.subjectId == 121 || isRhythmicExercises();
 
-			state.fingeringInfo = subjectFingering[state.subjectId];
+			// 设置指法
+			state.fingeringInfo = subjectFingering(state.subjectId);
 		};
 
 		const setCustom = () => {
@@ -133,6 +134,10 @@ export default defineComponent({
 			}
 		};
 
+		onBeforeMount(() => {
+			api_setStatusBarVisibility();
+		});
+
 		onMounted(() => {
 			(window as any).appName = "gym";
 			Promise.all([sysMusicScoreCategoriesQueryTree(storeData.platformType === "WEB"), sysMusicScoreAccompanimentQueryPage(paramsId)]).then((values) => {
@@ -153,34 +158,54 @@ export default defineComponent({
 			} catch (error) {}
 		};
 		/** 指法配置 */
-		const fingerConfig = computed(() => {
+		const fingerConfig = computed<any>(() => {
 			if (state.setting.displayFingering && state.fingeringInfo?.name) {
 				if (state.fingeringInfo.direction === "transverse") {
 					return {
-						"--fingerin-bottom": "1.6rem",
+						container: {
+							paddingBottom: state.fingeringInfo.height,
+						},
+						fingerBox: {
+							height: state.fingeringInfo.height,
+						},
 					};
 				} else {
 					return {
-						"--fingerin-right": "3rem",
+						container: {
+							paddingRight: state.fingeringInfo.width,
+						},
+						fingerBox: {
+							position: "absolute",
+							width: state.fingeringInfo.width,
+							height: "100%",
+							right: 0,
+							top: 0,
+						},
 					};
 				}
 			}
-			return {};
+			return {
+				container: {},
+				fingerBox: {},
+			};
 		});
 
-		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.setting.displayFingering,
+			() => {
+				if (state.fingeringInfo.direction === "vertical") {
+					if (state.setting.displayFingering) {
+						document.getElementById("musicAndSelection")?.style.removeProperty("--music-zoom");
+					} else {
+						nextTick(() => {
+							resetMusicScore();
+						});
+					}
 				}
 			}
-		})
+		);
 		return () => (
-			<div class={[styles.detail, state.setting.camera && styles.opencamera]} style={{ paddingLeft: detailData.paddingLeft, ...fingerConfig.value }}>
+			<div class={[styles.detail, state.setting.camera && styles.opencamera]} style={{ paddingLeft: detailData.paddingLeft }}>
 				{!state.musicRendered && (
 					<div class={styles.skeleton}>
 						<Skeleton class={styles.skeleton} row={8} />
@@ -189,7 +214,10 @@ export default defineComponent({
 				<div class={styles.headHeight}>
 					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
 				</div>
-				<div class={[styles.container, state.setting.eyeProtection && "eyeProtection", !state.setting.displayCursor && "hideCursor"]}>
+				<div
+					style={{ ...fingerConfig.value.container }}
+					class={[styles.container, state.setting.eyeProtection && "eyeProtection", !state.setting.displayCursor && "hideCursor"]}
+				>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
 					{/* 播放 */}
@@ -203,7 +231,7 @@ export default defineComponent({
 					)}
 					{/* 指法 */}
 					{state.setting.displayFingering && state.fingeringInfo?.name && (
-						<div class={[state.fingeringInfo.direction === "transverse" ? styles.fingeringBottm : styles.fingeringRight]}>
+						<div style={{ ...fingerConfig.value.fingerBox }}>
 							<Fingering />
 						</div>
 					)}

src/page-gym/header-top/settting/index.module.less

@@ -44,6 +44,12 @@
                 display: none;
             }
         }
+        .van-tabs__nav--line{
+            padding-bottom: 0;
+        }
+        .van-tabs__line{
+            bottom: 0;
+        }
     }
 }
 

src/view/fingering/fingering-config.ts

@@ -10,9 +10,10 @@ export type ITypeFingering = {
 	styles?: CSSProperties;
 } | null;
 export type IFingering = {
-	name: IVocals;
-	direction: "vertical" | "transverse";
+	name?: IVocals;
+	direction?: "vertical" | "transverse";
 	width?: string;
+	height?: string;
 };
 
 type ITypeContent = {
@@ -35,61 +36,75 @@ export const mappingVoicePart = (id: number, soruce: "GYM" | "COLEXIU" | "ORCHES
 };
 
 /** 声部的指法配置信息 */
-export const subjectFingering: ITypeContent = {
-	2: {
-		name: "flute",
-		direction: "transverse",
-	}, // 长笛
-	4: {
-		name: "clarinet",
-		direction: "vertical",
-		width: "1rem",
-	}, // 单簧管
-	5: {
-		name: "saxophone",
-		direction: "vertical",
-		width: "3rem",
-	}, // 萨克斯
-	6: {
-		name: "saxophone",
-		direction: "vertical",
-		width: "3rem",
-	}, // 中音萨克斯
-	12: {
-		name: "trumpet",
-		direction: "transverse",
-	}, // 小号
-	13: {
-		name: "horn",
-		direction: "vertical",
-		width: "3.5rem",
-	}, // 圆号
-	14: {
-		name: "trombone",
-		direction: "transverse",
-	}, // 长号
-	15: {
-		name: "up-bass-horn",
-		direction: "vertical",
-		width: "3rem",
-	}, // 上低音号
-	17: {
-		name: "tuba",
-		direction: "vertical",
-		width: "3.4rem",
-	}, // 大号
-	// 23: {
-	//   name: 'small-drum',
-	//   direction: 'vertical'
-	// }, // 打击乐
-	120: {
-		name: "piccolo",
-		direction: "vertical",
-		width: "1rem",
-	}, // 短笛
+export const subjectFingering = (subjectId: number): IFingering => {
+	switch (subjectId) {
+		case 2: // 长笛
+			return {
+				name: "flute",
+				direction: "transverse",
+				height: "1.6rem",
+			};
+		case 4: // 单簧管
+			return {
+				name: "clarinet",
+				direction: "vertical",
+				width: "3rem",
+			};
+		case 5: // 萨克斯
+		case 6: // 中音萨克斯
+			return {
+				name: "saxophone",
+				direction: "vertical",
+				width: "4.34rem",
+			};
+		case 12: // 小号
+			return {
+				name: "trumpet",
+				direction: "transverse",
+				height: "1.6rem",
+			};
+		case 13: // 圆号
+			return {
+				name: "horn",
+				direction: "vertical",
+				width: "4.98rem",
+			};
+		case 14: // 长号
+			return {
+				name: "trombone",
+				direction: "transverse",
+				height: "1.6rem",
+			};
+		case 15: // 上低音号
+			return {
+				name: "up-bass-horn",
+				direction: "vertical",
+				width: "4.34rem",
+			};
+		case 17: // 大号
+			return {
+				name: "tuba",
+				direction: "vertical",
+				width: "4.34rem",
+			};
+		case 120: // 短笛
+			return {
+				name: "piccolo",
+				direction: "vertical",
+				width: "3rem",
+			};
+		case 23: // 打击乐
+			return {
+				name: "small-drum",
+				direction: "transverse",
+				height: "1.6rem",
+			};
+		default:
+			return {};
+	}
 };
 
-export const getFingeringConfig = async (type: IVocals): Promise<ITypeFingering> => {
+export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITypeFingering> => {
 	switch (type) {
 		case "flute":
 			const flute = await import(`./fingering-img/flute/index.json`);

src/view/fingering/index.module.less

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  padding: 0 10px;
+  padding: 2px 10px;
 }
 .vertical{
   padding: 10px 6px 10px 0;
@@ -30,10 +30,47 @@
 .rightContent{
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
   height: 100%;
 }
+// 萨克斯
+:global(.saxophone){
+  padding: 10px 0;
+  .imgs{
+    width: 100%;
+  }
+  .rightContent{
+    position: absolute;
+    right: 6px;
+    height: 90%;
+  }
+}
+//圆号
+:global(.horn){
+  padding: 10px 4px;
+  .imgs{
+    width: 100%;
+  }
+  .rightContent{
+    position: absolute;
+    right: 10px;
+    height: 100%;
+  }
+}
+//上低音号
+:global(.up-bass-horn),
+:global(.tuba){
+  padding: 10px 4px;
+  .imgs{
+    width: 100%;
+  }
+  .rightContent{
+    position: absolute;
+    right: 10px;
+    height: 100%;
+  }
+}
 .yidiao{
   width: 30px;
   color: var(--van-primary-color);

src/view/fingering/index.tsx

@@ -48,7 +48,7 @@ export default defineComponent({
 							</div>
 						</div>
 					) : (
-						<div class={[styles.fingeringContainer, styles.vertical]}>
+						<div class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name]}>
 							<div class={styles.imgs}>
 								<img src={fingerData.subject?.json?.full} />
 								{rs.map((key: number | string, index: number) => {