Merge branch 'ktyq-test-new' of http://git.dayaedu.com/liushengqiang/music-score into ktyq-test-new

src/page-instrument/App.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
         setToken(query.Authorization);
       }
       if (window.location.href.includes("simple-detail")) {
-        // 
+        //
       } else {
         if (!getToken()) {
           const res = await api_getToken();
@@ -98,7 +98,20 @@ export default defineComponent({
       const _loading = document.getElementById("loading");
       _loading && document.body.removeChild(_loading);
       // console.log(query);
-      if (query.platform == "pc") document.body.addEventListener("keyup", (e: KeyboardEvent) => onKeyBoard(e));
+      if (query.platform == "pc") {
+        document.body.addEventListener("keyup", (e: KeyboardEvent) => onKeyBoard(e));
+        // 禁用右键菜单
+        document.addEventListener("contextmenu", function (event) {
+          event.preventDefault();
+        });
+        // 禁用浏览器快捷键
+        document.addEventListener("keydown", function (event) {
+          // 屏蔽 F12 和 Ctrl+Shift+I
+          if (event.key === "F12" || (event.ctrlKey && event.shiftKey && event.key === "I") || (event.metaKey && event.altKey && event.key === "I")) {
+            event.preventDefault();
+          }
+        });
+      }
 
       // 禁用右键菜单
       document.addEventListener("contextmenu", function (event) {

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

@@ -9,10 +9,19 @@
     z-index: 1000;
     --van-skeleton-paragraph-height: .8rem;
 }
+
 :global {
-    :not(body):has(>.driver-active-element) {
+
+    .headHeight>.driver-active-element,
+    #noticeBarRollDom>.driver-active-element,
+    :not(body):has(>.headHeight),
+    :not(body):has(>#noticeBarRollDom),
+    body .headHeight,
+    body #noticeBarRollDom {
         overflow: initial !important;
     }
+
+
 }
 
 .detail {
@@ -22,6 +31,7 @@
     overflow: hidden;
     --header-height: 80px;
     --pc-header-height: 72px;
+
     // &.practise{
     //     background: url("./images/bg1.png") no-repeat;
     //     background-size: 100% 100%;
@@ -40,8 +50,10 @@
         top: 0;
         width: 100%;
         height: 100%;
-        object-fit: cover; /* 保持宽高比 */
+        object-fit: cover;
+        /* 保持宽高比 */
     }
+
     .headHeight {
         position: absolute;
         bottom: 0;
@@ -52,16 +64,18 @@
 
         &.headHide {
             margin-bottom: calc(0Px - var(--header-height));
-            :global{
-                .practiseModeWarn{
+
+            :global {
+                .practiseModeWarn {
                     opacity: 1;
+
                     img {
                         opacity: 0.7;
                     }
                 }
             }
         }
-        
+
     }
 
     .container {
@@ -73,10 +87,12 @@
         transition: padding-bottom .2s;
         overflow: hidden;
     }
+
     .pcContainer {
         // height: calc(100vh - var(--header-height) - var(--pc-header-height));
     }
-    .fingeringCon{
+
+    .fingeringCon {
         transition: scale 0.2s;
     }
 }
@@ -177,29 +193,36 @@
 
 .preViewDetail {
     background: #fff !important;
+
     >.pageBg {
         display: none;
     }
+
     .headHeight {
         background: #fff !important;
     }
+
     .container {
         height: 100%;
         padding-bottom: 0 !important;
         padding-right: 0 !important;
     }
+
     :global {
         #osmdCanvasPage1 {
             padding-bottom: 0 !important;
         }
+
         #cursorImg-0 {
             opacity: 0 !important;
         }
+
         .noteActive {
             path {
                 fill: #000000;
                 stroke: #000000;
             }
+
             rect {
                 stroke: #000000;
             }
@@ -235,9 +258,11 @@
     align-items: center;
     z-index: 10000;
     background: rgba(0, 0, 0, .6);
-    .lottie{
+
+    .lottie {
         width: 120px;
     }
+
     .loadingTip {
         font-size: 14px;
         color: #fff;

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

@@ -9,7 +9,7 @@ import MusicScore from "../../view/music-score";
 import TestCheck from "/src/view/music-score/testCheck";
 import { sysMusicScoreAccompanimentQueryPage } from "../api";
 import EvaluatModel from "../evaluat-model";
-import HeaderTop, {handlerModeChange} from "../header-top";
+import HeaderTop, { handlerModeChange } from "../header-top";
 import styles from "./index.module.less";
 import { api_cloudAccompanyMessage, api_cloudLoading, api_keepScreenLongLight, api_openCamera, api_openWebView, api_setEventTracking, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
 import { getQuery } from "/src/utils/queryString";
@@ -28,16 +28,16 @@ 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 { setCustomGradual, setCustomNoteRealValue } from "/src/helpers/customMusicScore";
 import { usePageVisibility } from "@vant/use";
-import { initMidi } from "/src/helpers/midiPlay"
-import TheAudio from "/src/components/the-audio"
+import { initMidi } from "/src/helpers/midiPlay";
+import TheAudio from "/src/components/the-audio";
 import tickWav from "/src/assets/tick.mp3";
-import AuthorName from "../component/authorName"
-import { initSmoothAnimation } from "./smoothAnimation"
-import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
+import AuthorName from "../component/authorName";
+import { initSmoothAnimation } from "./smoothAnimation";
+import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic";
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
-import Loading from "./loading"
+import Loading from "./loading";
 import bgJson from "./images/index.json";
 
 // const DelayCheck = defineAsyncComponent(() =>
@@ -120,12 +120,12 @@ export default defineComponent({
       if (settting) {
         state.setting = settting;
         //state.setting.beatVolume = state.setting.beatVolume || 50
-        state.setting.beatVolume = 50
+        state.setting.beatVolume = 50;
         if (state.setting.camera) {
           const res = await api_openCamera();
           // 没有授权
           if (res?.content?.reson) {
-            state.setting.camera = false
+            state.setting.camera = false;
             store.set("musicscoresetting", state.setting);
           }
         }
@@ -142,31 +142,31 @@ export default defineComponent({
       (window as any).appName = "colexiu";
       const id = query.id || "43554";
       // 如果是纯预览模式，0.65倍缩放谱面
-      state.isPreView = query.isPreView
+      state.isPreView = query.isPreView;
       if (state.isPreView) {
-        state.zoom = 0.65
+        state.zoom = 0.65;
       }
-      if (id == '1814218144844087298' && state.isSingleLine) {
-        state.zoom = 0.7
+      if (id == "1814218144844087298" && state.isSingleLine) {
+        state.zoom = 0.7;
       }
       // 只有总控平台和预览 默认是多行谱
-      (state.isPreView || query.isCbs) && (state.isSingleLine = false)
+      (state.isPreView || query.isCbs) && (state.isSingleLine = false);
       // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
       //   getMusicInfo(values[0]);
       // });
-      try { 
+      try {
         await getMusicDetail(id);
       } catch (err) {
-        console.error(err)
+        console.error(err);
         state.isLoading = false;
-        isEmptyMusicShow.value = true
-        return
+        isEmptyMusicShow.value = true;
+        return;
       }
       detailData.isLoading = false;
       // 如果后台设置了不显示指法，关闭指法开关
       if (!state.isShowFingering) {
-        state.setting.displayFingering = false
-      }      
+        state.setting.displayFingering = false;
+      }
       // api_setEventTracking();
     });
 
@@ -186,15 +186,15 @@ export default defineComponent({
       //   handleSetSpeed(saveSpeed);
       // }
       setCustomGradual();
-			setCustomNoteRealValue();
+      setCustomNoteRealValue();
       state.times = formateTimes(osmd);
       // state.times = resetFrequency(state.times);
       state.times = setNoteHalfTone(state.times);
-      state.xmlHasLyric = state.times.some((item: any) => item?.formatLyricsEntries?.length)
+      state.xmlHasLyric = state.times.some((item: any) => item?.formatLyricsEntries?.length);
       console.log("🚀 ~ state.times:", state.times, state.subjectId, state);
       nextTick(() => {
         state.activeMeasureIndex = state.times[0].MeasureNumberXML;
-      })
+      });
       // 一行谱
       if (state.isSingleLine) {
         // 音符添加位置信息bbox
@@ -203,73 +203,73 @@ export default defineComponent({
         initSmoothAnimation();
       }
       // 初始化midi音频信息
-      const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0
+      const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0;
       if (state.isAppPlay) {
-        const durationNum = songEndTime
-        initMidi(durationNum, state.midiUrl)
+        const durationNum = songEndTime;
+        initMidi(durationNum, state.midiUrl);
       }
-      state.measureTime = state.times[0]?.measureLength || 0
+      state.measureTime = state.times[0]?.measureLength || 0;
       try {
         metronomeData.metro = new Metronome();
         metronomeData.metro.init(state.times);
       } catch (error) {}
 
       // 需要向外面（iframe）派发计时器数据的时候触发
-      if(query.isbeatTimes){
-        const { isOpenMetronome, isSingOpenMetronome } = state
-        const {xmlMp3BeatFixTime} = state.times[0] 
-        const singBeatTime: number[][] = []
-        const beatTime = metronomeData.metroMeasure.map(metroMeasure => {
-          const singBeat:number[] = []
+      if (query.isbeatTimes) {
+        const { isOpenMetronome, isSingOpenMetronome } = state;
+        const { xmlMp3BeatFixTime } = state.times[0];
+        const singBeatTime: number[][] = [];
+        const beatTime = metronomeData.metroMeasure.map((metroMeasure) => {
+          const singBeat: number[] = [];
           const beatTimeItem = metroMeasure.map((item: any) => {
-            let singTime = item.time
-            if(isSingOpenMetronome && !isOpenMetronome){
-              singTime += xmlMp3BeatFixTime
-            } else if(!isSingOpenMetronome && isOpenMetronome){
-              singTime -= xmlMp3BeatFixTime
+            let singTime = item.time;
+            if (isSingOpenMetronome && !isOpenMetronome) {
+              singTime += xmlMp3BeatFixTime;
+            } else if (!isSingOpenMetronome && isOpenMetronome) {
+              singTime -= xmlMp3BeatFixTime;
             }
-            singBeat.push(singTime)
-            return item.time
-          })
-          singBeatTime.push(singBeat)
-          return beatTimeItem
-        })
+            singBeat.push(singTime);
+            return item.time;
+          });
+          singBeatTime.push(singBeat);
+          return beatTimeItem;
+        });
         //改为唱名
-        state.fixtime = 0
-        state.times.map(item => {
-          item.time = item.xmlNoteTime
-          item.endtime = item.xmlNoteEndTime
-          item.fixtime = 0
-        })
-        metronomeData.metro.calculation(state.times)
-        const mingBeatTime:number[][] = metronomeData.metroMeasure.map(metroMeasure => {
+        state.fixtime = 0;
+        state.times.map((item) => {
+          item.time = item.xmlNoteTime;
+          item.endtime = item.xmlNoteEndTime;
+          item.fixtime = 0;
+        });
+        metronomeData.metro.calculation(state.times);
+        const mingBeatTime: number[][] = metronomeData.metroMeasure.map((metroMeasure) => {
           const beatTimeItem = metroMeasure.map((item: any) => {
-            return item.time
-          })
-          return beatTimeItem
-        })
-        console.log("webApi_beatTimes",{beatTime,singBeatTime,mingBeatTime})
+            return item.time;
+          });
+          return beatTimeItem;
+        });
+        console.log("webApi_beatTimes", { beatTime, singBeatTime, mingBeatTime });
         window.parent.postMessage(
           {
             api: "webApi_beatTimes",
-            data: JSON.stringify({beatTime,singBeatTime,mingBeatTime})
+            data: JSON.stringify({ beatTime, singBeatTime, mingBeatTime }),
           },
           "*"
         );
         throw new Error("webApi_beatTimes 完成");
       }
       // 刷新时值
-      handlerModeChange("play", "music")
+      handlerModeChange("play", "music");
       /**
        * 2024.1.25
        * 设置节拍器，跟练需要播放系统节拍器，所以不需要判断needTick状态
        */
       // if (state.needTick) {
-        handleInitTick(osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
+      handleInitTick(osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
       // }
       // api_cloudLoading();
-      state.playBtnDirection = query.imagePos === 'right' ? 'right' : 'left';
-      state.isAttendClass = (query.imagePos === 'left' || query.imagePos === 'right') ? true : false;
+      state.playBtnDirection = query.imagePos === "right" ? "right" : "left";
+      state.isAttendClass = query.imagePos === "left" || query.imagePos === "right" ? true : false;
       // if (state.fingeringInfo.direction === "vertical" && state.setting.displayFingering) {
       //   state.musicScoreBtnDirection = state.playBtnDirection === 'right' ? 'left' : 'right';
       // } else {
@@ -293,25 +293,28 @@ export default defineComponent({
         if (state.fingeringInfo.direction === "transverse") {
           return {
             container: {
-              paddingBottom: detailData.headerHide ? state.fingeringInfo.height : state.fingeringInfo.scaleData?.offset
+              paddingBottom: detailData.headerHide ? state.fingeringInfo.height : state.fingeringInfo.scaleData?.offset,
             },
             // 横向指法，跟练&评测模式，默认展示贴底展示
-            fingerBox: (state.modeType === 'follow' || state.modeType === 'evaluating') ? 
-            {
-              height: state.fingeringInfo.height,
-              position: 'absolute',
-              bottom: 0,
-              width: '100%'
-            } : 
-            detailData.headerHide ? {
-              height: state.fingeringInfo.height
-            } : {
-              height: state.fingeringInfo.height,
-              transform: `scale(${state.fingeringInfo.scaleData?.scale})`
-            }
+            fingerBox:
+              state.modeType === "follow" || state.modeType === "evaluating"
+                ? {
+                    height: state.fingeringInfo.height,
+                    position: "absolute",
+                    bottom: 0,
+                    width: "100%",
+                  }
+                : detailData.headerHide
+                ? {
+                    height: state.fingeringInfo.height,
+                  }
+                : {
+                    height: state.fingeringInfo.height,
+                    transform: `scale(${state.fingeringInfo.scaleData?.scale})`,
+                  },
           };
         } else {
-          console.log('指法',state.playBtnDirection,state.platform)
+          console.log("指法", state.playBtnDirection, state.platform);
           // 老师端，竖向指法，需要根据功能按钮方向进行设置
           if (state.platform === IPlatform.PC) {
             return {
@@ -355,13 +358,12 @@ export default defineComponent({
       () => state.setting.displayFingering,
       () => {
         if (state.fingeringInfo.direction === "vertical") {
-          
           // if (state.setting.displayFingering) {
           //   state.musicScoreBtnDirection = state.playBtnDirection === 'left' ? 'right' : 'left'
           // } else {
           //   state.musicScoreBtnDirection = state.playBtnDirection
           // }
-          state.musicScoreBtnDirection = state.playBtnDirection
+          state.musicScoreBtnDirection = state.playBtnDirection;
         }
       }
     );
@@ -453,18 +455,14 @@ export default defineComponent({
     };
     return () => (
       <div
-        class={[styles.detail, styles[state.modeType], state.setting.eyeProtection && "eyeProtection", (state.platform === IPlatform.PC && state.zoom > 0.8) && styles.PC, state.isPreView && styles.preViewDetail]}
+        class={[styles.detail, styles[state.modeType], state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && state.zoom > 0.8 && styles.PC, state.isPreView && styles.preViewDetail]}
         style={{
-          '--detailDataPaddingLeft': detailData.paddingLeft,
+          "--detailDataPaddingLeft": detailData.paddingLeft,
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
       >
-        <img 
-          style={{opacity: state.setting.camera && state.modeType === 'evaluating' ? state.setting.cameraOpacity / 100 : 1}} 
-          class={styles.pageBg} 
-          src={state.modeType === 'practise' ? bgJson[1] : state.modeType === 'evaluating' ? bgJson[2] : state.modeType === 'follow' ? bgJson[3] : ''} 
-        />
+        <img style={{ opacity: state.setting.camera && state.modeType === "evaluating" ? state.setting.cameraOpacity / 100 : 1 }} class={styles.pageBg} src={state.modeType === "practise" ? bgJson[1] : state.modeType === "evaluating" ? bgJson[2] : state.modeType === "follow" ? bgJson[3] : ""} />
         {/* 骨架屏 */}
         {/* <Transition name="van-fade">
           {detailData.skeletonLoading && (
@@ -476,10 +474,7 @@ export default defineComponent({
         {/* 曲目加载错误的缺省 */}
         <EmptyMusic></EmptyMusic>
         {/** 功能按钮 */}
-        {
-          !state.isPreView && 
-          <div class={[styles.headHeight, detailData.headerHide && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>
-        }
+        {!state.isPreView && <div class={["headHeight", styles.headHeight, detailData.headerHide && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>}
         <div
           id="scrollContainer"
           style={{ ...fingerConfig.value.container }}
@@ -495,19 +490,14 @@ export default defineComponent({
           }}
         >
           {/* 曲谱渲染 */}
-          {!detailData.isLoading && 
-            <MusicScore 
-              ref={musicScoreRef}
-              musicColor={state.isPreView ? '#000000' : '#FFFFFF'}
-              showPartNames={state.isCombineRender}
-              onRendered={handleRendered} 
-            > 
+          {!detailData.isLoading && (
+            <MusicScore ref={musicScoreRef} musicColor={state.isPreView ? "#000000" : "#FFFFFF"} showPartNames={state.isCombineRender} onRendered={handleRendered}>
               {/* 旋律线关闭时候的 标题和作者 */}
               <AuthorName></AuthorName>
               {/* 节拍器 */}
               {!detailData.isLoading && !detailData.skeletonLoading && <Tick />}
             </MusicScore>
-          }
+          )}
 
           {/* {
             state.musicRendered && 

src/page-instrument/view-evaluat-report/index.tsx

@@ -433,7 +433,7 @@ export default defineComponent({
             </div>
           )}
         </Transition>
-        <div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
+        <div class={["headHeight", styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
           <Transition name="van-slide-down">{state.musicRendered && <ShareTop scoreData={scoreData} />}</Transition>
         </div>
         <div id="scrollContainer" class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>