Merge branch 'feature-wxl-newVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

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/custom-plugins/guide-driver/index.less

@@ -4,22 +4,27 @@
 }
 
 .popoverClass .driver-popover-next-btn {
-  width: 100px;
+  width: 102px;
   height: 34px;
   text-shadow: none;
   border: none;
   font-weight: 600;
   font-size: 13px;
-  color: #006ed1;
+  color: #006ed1 !important;
   text-align: center;
   position: absolute;
   background: url("./images/btn-next.png") no-repeat center transparent;
   background-size: contain;
   background-color: transparent !important;
+  padding: 0;
+  font-family: inherit;
 }
+
 .popoverClass .driver-popover-prev-btn {
   font-weight: 600;
   font-size: 13px;
+  padding: 0;
+  font-family: inherit;
 }
 
 .popoverClass .driver-popover-next-btn:hover,
@@ -95,6 +100,18 @@
   }
 }
 
+.popoverClass11 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/practise/d11.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+}
+
 .popoverClass4 {
   width: 265px;
   height: 245px;
@@ -155,14 +172,37 @@
 }
 
 .popoverClass7 {
-  width: 267px;
-  height: 221px;
+  width: 306px;
+  height: 167px;
   background: url("./images/practise/d7.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
     right: 14px;
-    bottom: 18px;
+    bottom: -18px;
+  }
+
+  &.popoverClose {
+
+    .driver-popover-navigation-btns {
+      position: absolute;
+      bottom: -18px;
+      left: 0;
+      right: 15px;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
   }
 }
 
@@ -176,6 +216,29 @@
     right: 14px;
     bottom: 18px;
   }
+
+  &.popoverClose {
+
+    .driver-popover-navigation-btns {
+      position: absolute;
+      bottom: 23px;
+      left: 0;
+      right: 15px;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
+  }
 }
 
 .popoverClass8 {
@@ -205,8 +268,8 @@
 }
 
 .popoverClass10 {
-  width: 264px;
-  height: 245px;
+  width: 257px;
+  height: 213px;
   background: url("./images/practise/d10.png") no-repeat center;
   background-size: contain;
 
@@ -241,7 +304,7 @@
   .driver-popover-prev-btn {
     border: 1px solid #fff;
     border-radius: 100px;
-    color: #fff;
+    color: #fff !important;
     background-color: transparent;
     font-weight: 400;
     text-shadow: none;
@@ -448,7 +511,7 @@
 
 .popoverClassReport1 {
   width: 270px;
-  height: 143px;
+  height: 142px;
   background: url("./images/report/r1.png") no-repeat center;
   background-size: contain;
 
@@ -460,7 +523,7 @@
 
 .popoverClassReport2 {
   width: 270px;
-  height: 143px;
+  height: 142px;
   background: url("./images/report/r2.png") no-repeat center;
   background-size: contain;
 
@@ -491,7 +554,7 @@
 
 .popoverClassReport3 {
   width: 270px;
-  height: 143px;
+  height: 142px;
   background: url("./images/report/r3.png") no-repeat center;
   background-size: contain;
 
@@ -522,7 +585,7 @@
 
 .popoverClassReport4 {
   width: 270px;
-  height: 143px;
+  height: 142px;
   background: url("./images/report/r5.png") no-repeat center;
   background-size: contain;
 

src/page-instrument/evaluat-model/evaluat-result/index.tsx

@@ -172,27 +172,31 @@ export default defineComponent({
                 <img src={zlycImg} class={[styles.ctrlsBtn, "evaluting-result-2"]} onClick={() => emit("close", "tryagain")} />
                 {evaluatingData.resultData.recordId ? (
                   <div class={styles.saveBtn}>
-                    <img src={noSaveTips.value ? bczpJzImg : bczpImg} class={[styles.ctrlsBtn, "evaluting-result-3"]} style={{ opacity: state.isHideEvaluatReportSaveBtn ? 0.4 : 1 }} onClick={() => {
-                      if (!noSaveTips.value && !state.isHideEvaluatReportSaveBtn) {
-                        saveResult()
-                      }
-                    }} />
-                    {
-                      noSaveTips.value && state.noSavePopShow ? 
+                    <img
+                      src={noSaveTips.value ? bczpJzImg : bczpImg}
+                      class={[styles.ctrlsBtn, "evaluting-result-3"]}
+                      style={{ opacity: state.isHideEvaluatReportSaveBtn ? 0.4 : 1 }}
+                      onClick={() => {
+                        if (!noSaveTips.value && !state.isHideEvaluatReportSaveBtn) {
+                          saveResult();
+                        }
+                      }}
+                    />
+                    {noSaveTips.value && state.noSavePopShow ? (
                       <div class={[styles.noSaveTip]}>
                         <span class={styles.arrowIcon}></span>
                         <span>{noSaveTips.value}</span>
-                        <i onClick={() => state.noSavePopShow = false}></i>
-                      </div> : null                   
-                    }
+                        <i onClick={() => (state.noSavePopShow = false)}></i>
+                      </div>
+                    ) : null}
                   </div>
-                ) : null }
+                ) : null}
                 <img src={ckzpImg} class={[styles.ctrlsBtn, "evaluting-result-4", data.saveLoading ? styles.disablued : ""]} onClick={() => emit("close", "look")} />
               </div>
             </div>
 
             {/* 评测模式-结果弹窗 功能引导 加载音频完成 不是会员 */}
-            {evaluatingData.resulstMode && !evaluatingData.hideResultModal && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingResultDriver />}
+            {evaluatingData.resulstMode && !evaluatingData.hideResultModal && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && !data.saveLoading && <EvaluatingResultDriver saveBtn={evaluatingData.resultData.recordId ? true : false} />}
           </div>
         )}
       </>

src/page-instrument/header-top/index.module.less

@@ -6,7 +6,8 @@
     flex-shrink: 0;
     margin-left: calc(-1 * var(--detailDataPaddingLeft));
     padding: 0 30px;
-    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+
     &.headerTopRight {
         justify-content: flex-end;
     }
@@ -25,59 +26,68 @@
     left: 30px;
     bottom: 20px;
     border-radius: 16px;
-    background-color: rgba(12,51,107,0.61);
+    background-color: rgba(12, 51, 107, 0.61);
     padding: 6px 11px;
     align-items: center;
     display: flex;
     opacity: 0;
     transition: all .3s ease-in;
-    & > div{
+
+    &>div {
         margin-left: 4px;
         font-weight: 500;
         font-size: 14px;
         line-height: 20px;
-        color: rgba(255,255,255,0.7);
-    }    
-    & > img{
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    &>img {
         width: 18px;
         height: 18px;
     }
+
     &.modeWarnRight {
         left: inherit;
         right: 30px;
     }
 }
-.headTopLeftBox{
+
+.headTopLeftBox {
     position: fixed;
     top: 20px;
     left: 30px;
     display: flex;
     align-items: center;
-    .img{
+
+    .img {
         width: 32px;
         height: 32px;
     }
-    .listImg{
+
+    .listImg {
         margin-left: 16px;
     }
-    .title{
-        width: 216px;
+
+    .title {
+        width: 210px;
         margin-left: 10px;
         position: relative;
-        .symbolNote{
+
+        .symbolNote {
             max-width: calc(216px + 16px);
             position: absolute;
             top: 0;
             left: 0;
             content: "";
-            width: calc(var(--noticeBarWidth,100%) + 16px);
+            width: calc(var(--noticeBarWidth, 100%) + 16px);
             height: 100%;
             background: url("./image/sj.png") no-repeat;
             background-size: 9px 6px;
-            background-position: center right;                   
+            background-position: center right;
         }
-        :global{
-            .van-notice-bar{
+
+        :global {
+            .van-notice-bar {
                 height: 30px;
                 line-height: 30px;
                 padding: 0;
@@ -87,6 +97,7 @@
             }
         }
     }
+
     .hidenBack {
         opacity: 0;
         pointer-events: none;
@@ -103,17 +114,20 @@
     display: flex;
     align-items: center;
     padding: 0 10px;
-    .img{
+
+    .img {
         width: 18px;
         height: 18px;
     }
-    .title{
+
+    .title {
         margin-left: 6px;
         font-weight: 500;
         font-size: 14px;
         color: #FFFFFF;
     }
 }
+
 .headRight {
     display: flex;
     align-items: center;
@@ -127,13 +141,16 @@
         align-items: center;
         cursor: pointer;
         margin-right: 30px;
-        &:last-child{
+
+        &:last-child {
             margin-right: 0;
         }
+
         .iconBtn {
             width: 24px;
             height: 24px;
         }
+
         span {
             margin-top: 3px;
             font-weight: 500;
@@ -141,97 +158,130 @@
             color: #FFFFFF;
             line-height: 17px;
         }
-        &:active{
-            >span{
+
+        &:active {
+            >span {
                 color: #34D6FF
-            };
+            }
+
+            ;
         }
-        &.playType:active{
-            >img:nth-child(1){
+
+        &.playType:active {
+            >img:nth-child(1) {
                 content: url("./image/performAct.png");
-            }            
-            >img:nth-child(2){
+            }
+
+            >img:nth-child(2) {
                 content: url("./image/singAct.png");
             }
         }
-        &.playSource:active{
-            >img:nth-child(1){
+
+        &.playSource:active {
+            >img:nth-child(1) {
                 content: url("./image/musicAct.png");
-            }            
-            >img:nth-child(2){
+            }
+
+            >img:nth-child(2) {
                 content: url("./image/backgroundAct.png");
-            }            
-        }      
-        &.songSource:active{
-            >img:nth-child(1){
+            }
+        }
+
+        &.songSource:active {
+            >img:nth-child(1) {
                 content: url("./image/music1Act.png");
-            }            
-            >img:nth-child(2){
+            }
+
+            >img:nth-child(2) {
                 content: url("./image/background1Act.png");
-            }            
-            >img:nth-child(3){
+            }
+
+            >img:nth-child(3) {
                 content: url("./image/mingsongAct.png");
             }
         }
-        &.section:active{
-            >img{
+
+        &.section:active {
+            >img {
                 content: url("./image/section2.png");
             }
         }
-        &.isSection{
-            >span{
+
+        &.isSection {
+            >span {
                 color: #34D6FF
-            };
+            }
+
+            ;
         }
-        &.speed:active{
-            >img:nth-child(1){
+
+        &.speed:active {
+            >img:nth-child(1) {
                 content: url("./image/tickonAct.png");
-            }            
-            >img:nth-child(2){
+            }
+
+            >img:nth-child(2) {
                 content: url("./image/tickoffAct.png");
-            } 
+            }
         }
-        &.isSpeed{
-            >img:nth-child(1){
+
+        &.isSpeed {
+            >img:nth-child(1) {
                 content: url("./image/tickonAct.png");
-            }            
-            >img:nth-child(2){
+            }
+
+            >img:nth-child(2) {
                 content: url("./image/tickoffAct.png");
-            } 
-            >span{
+            }
+
+            >span {
                 color: #34D6FF
-            }; 
-        }      
-        &.settingMode:active{
-            >img{
+            }
+
+            ;
+        }
+
+        &.settingMode:active {
+            >img {
                 content: url("./image/icon_menuAct.png");
-            }            
-        }  
-        &.isSettingMode{
-            >img{
+            }
+        }
+
+        &.isSettingMode {
+            >img {
                 content: url("./image/icon_menuAct.png");
-            }            
-            >span{
+            }
+
+            >span {
                 color: #34D6FF
-            }; 
-        }  
-        &.musicSheet:active{
-            >img{
+            }
+
+            ;
+        }
+
+        &.musicSheet:active {
+            >img {
                 content: url("./image/shengguiAct.png");
-            }            
-        }       
-        &.isMusicSheet{
-            >img{
+            }
+        }
+
+        &.isMusicSheet {
+            >img {
                 content: url("./image/shengguiAct.png");
-            }            
-            >span{
+            }
+
+            >span {
                 color: #34D6FF
-            }; 
+            }
+
+            ;
         }
     }
-    .metronomeBtn{
+
+    .metronomeBtn {
         position: relative;
-        .speedCon{
+
+        .speedCon {
             transform: scale(0.83);
             transform-origin: left bottom;
             padding: 2px;
@@ -244,11 +294,13 @@
             background: #FFC121;
             border-radius: 120px 120px 120px 1px;
             border: 1px solid #FFFFFF;
-            >img{
+
+            >img {
                 width: 15px;
                 height: 11px;
             }
-            >div{
+
+            >div {
                 margin-left: 1px;
                 font-weight: 600;
                 font-size: 12px;
@@ -270,6 +322,7 @@
     right: 30px;
     bottom: 12px;
     transition: bottom .2s ease;
+
     .btnWrap {
         width: 50px;
         height: 50px;
@@ -280,6 +333,7 @@
             height: 100%;
         }
     }
+
     &.playLeftButton {
         left: 30px !important;
         right: auto !important;
@@ -291,7 +345,7 @@
         left: auto !important;
         bottom: 12px !important;
     }
-    
+
     .progress {
         position: absolute;
         left: 50%;
@@ -354,11 +408,13 @@
     background: url(./image/bg.png) no-repeat;
     background-size: cover;
     transition: all .3s;
-    &.hidden{
+
+    &.hidden {
         opacity: 0;
         transform: translateY(100%);
         pointer-events: none;
     }
+
     .back {
         position: absolute;
         width: 38px;
@@ -367,6 +423,7 @@
         top: 17px;
         cursor: pointer;
     }
+
     .name {
         position: absolute;
         left: 50%;
@@ -375,6 +432,7 @@
         width: 87px;
         height: 21px;
     }
+
     .modeBox {
         width: 100%;
         display: flex;
@@ -383,9 +441,11 @@
         position: relative;
         top: 50%;
         transform: translateY(-50%);
-        &.twoModeBox{
+
+        &.twoModeBox {
             justify-content: center;
-            > .modeImg + .modeImg{
+
+            >.modeImg+.modeImg {
                 margin-left: 150px;
             }
         }
@@ -404,6 +464,6 @@
     opacity: 0;
 }
 
-.socketErrorStatus{
+.socketErrorStatus {
     top: 20vh;
 }

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

@@ -102,7 +102,7 @@ export const headTopData = reactive({
   // 改变模式之前的状态
   oldPlayType: "play",
   // 记录切换模式前的状态
-  oldModeType: "practise" as "practise" | "follow" | "evaluating"
+  oldModeType: "practise" as "practise" | "follow" | "evaluating",
 });
 
 export const headData = reactive({
@@ -115,7 +115,7 @@ let resetBtn: ComputedRef<{
   disabled: boolean;
 }>;
 // 点击切换的时候才触发提醒
-let isClickMode = false
+let isClickMode = false;
 /**
  * 处理模式切换
  * @param oldPlayType   没改变之前的播放模式
@@ -138,13 +138,13 @@ export function handlerModeChange(oldPlayType: "play" | "sing", oldPlaySource: I
     resetBtn && (resetBtn.value.display = false);
   }
   // 当模式改变的时候  放在这里是因为需要等谱面加载完成之后再提示（点击按钮模式切换才提示）
-  if(isClickMode){
+  if (isClickMode) {
     showToast({
       message: state.playType === "play" ? "已切换为演奏场景" : "已切换为演唱场景",
       position: "top",
       className: "selectionToast",
     });
-    isClickMode = false
+    isClickMode = false;
   }
 }
 // 模式切换之后重新给times赋值
@@ -268,7 +268,8 @@ export default defineComponent({
     // 是否显示引导
     const showGuide = ref(false);
     const showStudentGuide = ref(false);
-    let  displayFingeringCache = false // 指法缓存
+    const showWebGuide = ref(true);
+    let displayFingeringCache = false; // 指法缓存
     /** 设置按钮 */
     const settingBtn = computed(() => {
       // 音频播放中 禁用
@@ -366,7 +367,7 @@ export default defineComponent({
     /** 原声按钮 */
     const originBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式,跟练模式 不显示
       //if (headTopData.modeType !== "show" || state.modeType === "follow") return { display: false, disabled: false };
       if (state.modeType === "follow") return { display: false, disabled: false };
@@ -412,8 +413,8 @@ export default defineComponent({
         // 演唱和演奏 都有数据的时间不禁用
         if (songIndex > 0 && index > 0) {
           // 音频播放中 禁用
-          if(state.playState === "play"){
-            return { display: true, disabled: true }
+          if (state.playState === "play") {
+            return { display: true, disabled: true };
           }
           return { display: true, disabled: false };
         }
@@ -429,9 +430,9 @@ export default defineComponent({
       if (state.isPercussion && state.platform === IPlatform.PC) return { display: false, disabled: false };
       if(state.isCombineRender) return { display: false, disabled: false };
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 不是演奏模式 影藏
-      if(state.playType !== "play") return { display: false, disabled: false }
+      if (state.playType !== "play") return { display: false, disabled: false };
       // 选择模式, url设置模式 不显示
       if (headTopData.modeType !== "show" || !headTopData.showBack) return { display: false, disabled: false };
       // 跟练开始, 评测开始 播放开始 隐藏
@@ -446,7 +447,7 @@ export default defineComponent({
     /** 播放按钮 */
     const playBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式 不显示
       if (headTopData.modeType !== "show") return { display: false, disabled: false };
       // 评测模式 不显示,跟练模式 不显示
@@ -462,7 +463,7 @@ export default defineComponent({
     /** 重播按钮 */
     resetBtn = computed(() => {
       // 没有音源不显示
-      if(state.noMusicSource) return { display: false, disabled: false };
+      if (state.noMusicSource) return { display: false, disabled: false };
       // 选择模式 不显示
       if (headTopData.modeType !== "show") return { display: false, disabled: false };
       // 评测模式 不显示,跟练模式 不显示
@@ -558,6 +559,16 @@ export default defineComponent({
       if (res?.data?.api === "setPlayState") {
         togglePlay("paused", true);
       }
+      if(res?.data?.api === 'togglePlayState') {
+        // if(state.playState === "play") {
+        //   togglePlay("paused");
+        // }
+        // if(state.playState === 'paused') {
+        //   togglePlay("play");
+        // }
+        console.log('togglePlayState', state.playState)
+        togglePlay(state.playState === "play" ? "paused" : "play");
+      }
       // 上课页面，按钮方向
       if (res?.data?.api === "imagePos") {
         if (res?.data.data) {
@@ -589,21 +600,38 @@ export default defineComponent({
       } else {
         showStudentGuide.value = true;
       }
+
+      if (query.showWebGuide === "false") {
+        showWebGuide.value = false;
+      }
+
+      document.addEventListener("keydown", (e: KeyboardEvent) => {
+        if (e.code === "Tab") {
+          e.stopPropagation();
+          e.preventDefault();
+          // onStartPlayState();
+          togglePlay(state.playState === "play" ? "paused" : "play");
+        }
+      });
     });
 
     onUnmounted(() => {
       window.removeEventListener("message", changePlay);
     });
-    const noticeBarWidth = ref<number>()
-    watch(()=>smoothAnimationState.isShow.value, ()=>{
-      // NoticeBar能不能滚动
-      if((smoothAnimationState.isShow.value || state.isCombineRender) && isMusicList.value){
-        nextTick(()=>{
-          const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined
-          noticeBarWidth.value = widthCon
-        })
-      }
-    },{ immediate: true })
+    const noticeBarWidth = ref<number>();
+    watch(
+      () => smoothAnimationState.isShow.value,
+      () => {
+        // NoticeBar能不能滚动
+        if ((smoothAnimationState.isShow.value || state.isCombineRender) && isMusicList.value) {
+          nextTick(() => {
+            const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined;
+            noticeBarWidth.value = widthCon;
+          });
+        }
+      },
+      { immediate: true }
+    );
     // 设置改变触发
     watch(state.setting, () => {
       console.log(state.setting, "state.setting");
@@ -654,61 +682,64 @@ export default defineComponent({
           }}
         >
           {/* 返回和标题 */}
-          {
-            !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
-              <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
-                <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
-                {
-                  smoothAnimationState.isShow.value || state.isCombineRender ?
-                    <div 
-                      style={
-                        noticeBarWidth.value ? {
-                          "--noticeBarWidth":noticeBarWidth.value + "px"
-                        } : {}
-                      }
-                      class={[styles.title, "driver-8"]} 
-                      onClick={()=>{
-                        isMusicList.value && (musicListShow.value = true)
-                      }}>
-                        {
-                          isMusicList.value && <div class={styles.symbolNote}></div>
+          {!(state.playState == "play" || followData.start || evaluatingData.startBegin) && (
+            <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
+              <img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+              {smoothAnimationState.isShow.value || state.isCombineRender ? (
+                <div
+                  style={
+                    noticeBarWidth.value
+                      ? {
+                          "--noticeBarWidth": noticeBarWidth.value + "px",
                         }
-                        <NoticeBar
-                          text={state.examSongName}
-                          background="none"
-                        />
-                    </div> :
-                    isMusicList.value &&
-                    <img src={listImg} class={[styles.img, styles.listImg, "driver-8"]} onClick={()=>{
-                      musicListShow.value = true
-                    }} />
-                }
-              </div>
-          }
+                      : {}
+                  }
+                  class={[styles.title, "headeTopTitleBtn"]}
+                  onClick={() => {
+                    isMusicList.value && (musicListShow.value = true);
+                  }}
+                >
+                  {isMusicList.value && <div class={[styles.symbolNote, "driver-8"]}></div>}
+                  <NoticeBar text={state.examSongName} background="none" />
+                </div>
+              ) : (
+                isMusicList.value && (
+                  <img
+                    src={listImg}
+                    class={[styles.img, styles.listImg, "driver-8"]}
+                    onClick={() => {
+                      musicListShow.value = true;
+                    }}
+                  />
+                )
+              )}
+            </div>
+          )}
+
           {/* 模式切换 */}
           {
-            <div 
+            <div
               id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
               style={{ display: toggleBtn.value.display ? "" : "none" }}
-              class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
+              class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
               onClick={() => {
-                  headTopData.oldModeType = state.modeType
-                  handleRessetState();
-                  headTopData.modeType = "init";
+                headTopData.oldModeType = state.modeType;
+                handleRessetState();
+                headTopData.modeType = "init";
               }}
             >
               <img class={styles.img} src={iconMode} />
-              <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
+              <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
             </div>
           }
+
           {/* 模式提醒 */}
-          {
-            state.modeType === "practise" &&
+          {state.modeType === "practise" && (
             <div class={[styles.modeWarn, "practiseModeWarn", state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.modeWarnRight : ""]}>
-                <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
-                <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
-              </div>
-          }
+              <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
+              <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
+            </div>
+          )}
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}
@@ -745,10 +776,10 @@ export default defineComponent({
             ) : null} */}
             <div
               style={{ display: playTypeBtn.value.display ? "" : "none" }}
-              class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled,styles.playType]}
+              class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled, styles.playType]}
               onClick={() => {
                 const oldPlayType = state.playType;
-                headTopData.oldPlayType = oldPlayType
+                headTopData.oldPlayType = oldPlayType;
                 const oldPlaySource = state.playSource;
                 if (state.playType === "play") {
                   state.playType = "sing";
@@ -757,7 +788,7 @@ export default defineComponent({
                   state.playType = "play";
                   state.playSource = state.music ? "music" : "background";
                 }
-                isClickMode = true
+                isClickMode = true;
                 // 有指法并且显示指法的时候 切换到演唱模式 需要影藏指法
                 let isRefresh = false;
                 if (state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)) {
@@ -788,7 +819,7 @@ export default defineComponent({
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}
-              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled,state.playType === "play"?styles.playSource:styles.songSource]}
+              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled, state.playType === "play" ? styles.playSource : styles.songSource]}
               onClick={() => {
                 const oldPlayType = state.playType;
                 const oldPlaySource = state.playSource;
@@ -816,17 +847,22 @@ export default defineComponent({
               <img style={{ display: state.playSource === "mingSong" ? "" : "none" }} class={styles.iconBtn} src={headImg(`mingsong.png`)} />
               <span>{state.playSource === "music" ? (state.playType === "play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType === "play" ? "伴奏" : "伴唱") : "唱名"}</span>
             </div>
-            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled, styles.section, state.sectionStatus && styles.isSection]} onClick={() => handleChangeSection()}>
+            <div
+              id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"}
+              style={{ display: selectBtn.value.display ? "" : "none" }}
+              class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled, styles.section, state.sectionStatus && styles.isSection]}
+              onClick={() => handleChangeSection()}
+            >
               <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.png`)} />
               <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.png`)} />
               <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
               <span>选段</span>
             </div>
-            {(
+            {
               <>
                 <div
                   style={{ display: metronomeBtn.value.display ? "" : "none" }}
-                  class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled,headData.speedShow && styles.isSpeed,styles.speed]}
+                  class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled, headData.speedShow && styles.isSpeed, styles.speed]}
                   onClick={async () => {
                     headData.speedShow = !headData.speedShow;
                   }}
@@ -846,7 +882,7 @@ export default defineComponent({
                   </Popup>
                 }
               </>
-            )}
+            }
             {/* {state.enableNotation ? (
               <Popover trigger="manual" v-model:show={headData.musicTypeShow} class={state.platform === IPlatform.PC && styles.pcTransPop} placement={state.platform === IPlatform.PC ? "top-end" : "bottom-end"} overlay={false} offset={state.platform === IPlatform.PC ? [0, 40] : [0, 8]}>
                 {{
@@ -870,7 +906,7 @@ export default defineComponent({
             ) : null} */}
             {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
               <div
-                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled,toggleMusicSheet.show&&styles.isMusicSheet,styles.musicSheet]}
+                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, toggleMusicSheet.show && styles.isMusicSheet, styles.musicSheet, "driver-10"]}
                 onClick={() => {
                   toggleMusicSheet.toggle(true);
                 }}
@@ -879,7 +915,12 @@ export default defineComponent({
                 <span>声部</span>
               </div>
             )}
-            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled,headTopData.settingMode&&styles.isSettingMode,styles.settingMode]} onClick={() => (headTopData.settingMode = true)}>
+            <div
+              id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"}
+              style={{ display: settingBtn.value.display ? "" : "none" }}
+              class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled, headTopData.settingMode && styles.isSettingMode, styles.settingMode]}
+              onClick={() => (headTopData.settingMode = true)}
+            >
               <img class={styles.iconBtn} src={headImg("icon_menu.png")} />
               <span>设置</span>
             </div>
@@ -952,17 +993,22 @@ export default defineComponent({
         {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}
 
         {/* 练习模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && (
+        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
           <PractiseDriver
             statusAll={{
+              playBtnStatus: playBtn.value.display,
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
               modelTypeStatus: toggleBtn.value.display,
               playType: playTypeBtn.value.display,
+              originPlayType: state.playType === "play" ? true : false,
+              originBtnStatus: originBtn.value.display,
+              backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin) && isMusicList.value,
+              titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? "IMG" : "NONE",
             }}
           />
         )}
         {/* 跟练模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "follow" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && (
+        {state.modeType === "follow" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
           <FollowDriver
             statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
@@ -970,7 +1016,7 @@ export default defineComponent({
           />
         )}
         {/* 评测模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
+        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && showWebGuide.value && (
           <EvaluatingDriver
             statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
@@ -980,4 +1026,4 @@ export default defineComponent({
       </>
     );
   },
-});
+});

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

@@ -10,6 +10,20 @@
     --van-skeleton-paragraph-height: .8rem;
 }
 
+:global {
+
+    // .headHeight>.driver-active-element,
+    // #noticeBarRollDom>.driver-active-element,
+    // :not(body):has(>.headHeight),
+    // :not(body):has(>#noticeBarRollDom),
+    body .headeTopTitleBtn,
+    body #noticeBarRollDom {
+        overflow: initial !important;
+    }
+
+
+}
+
 .detail {
     position: relative;
     width: 100vw;
@@ -17,6 +31,7 @@
     overflow: hidden;
     --header-height: 80px;
     --pc-header-height: 72px;
+
     // &.practise{
     //     background: url("./images/bg1.png") no-repeat;
     //     background-size: 100% 100%;
@@ -47,6 +62,7 @@
             background-color: #142979;
         }
     }
+
     .headHeight {
         position: absolute;
         bottom: 0;
@@ -57,15 +73,18 @@
 
         &.headHide {
             margin-bottom: calc(0Px - var(--header-height));
-            :global{
-                .practiseModeWarn{
+
+            :global {
+                .practiseModeWarn {
                     opacity: 1;
+
                     img {
                         opacity: 0.7;
                     }
                 }
             }
         }
+
     }
 
     .container {
@@ -76,17 +95,20 @@
         transition: height .2s;
         transition: padding-bottom .2s;
         overflow: hidden;
-        :global{
+
+        :global {
             #musicAndSelection {
                 --musicAndSelectionTop: 40px;
                 padding-top: var(--musicAndSelectionTop);
             }
         }
     }
+
     .pcContainer {
         // height: calc(100vh - var(--header-height) - var(--pc-header-height));
     }
-    .fingeringCon{
+
+    .fingeringCon {
         transition: scale 0.2s;
     }
 }
@@ -187,17 +209,21 @@
 
 .preViewDetail {
     background: #fff !important;
+
     >.pageBg {
         display: none;
     }
+
     .headHeight {
         background: #fff !important;
     }
+
     .container {
         height: 100%;
         padding-bottom: 0 !important;
         padding-right: 0 !important;
     }
+
     :global {
         .authorName {
             display: none !important;
@@ -208,14 +234,17 @@
         #osmdCanvasPage1 {
             padding-bottom: 0 !important;
         }
+
         #cursorImg-0 {
             opacity: 0 !important;
         }
+
         .noteActive {
             path {
                 fill: #000000;
                 stroke: #000000;
             }
+
             rect {
                 stroke: #000000;
             }
@@ -267,9 +296,11 @@
     align-items: center;
     z-index: 10000;
     background: rgba(0, 0, 0, .6);
-    &.isPreView{
-        background:transparent;
-        .loadingTip{
+
+    &.isPreView {
+        background: transparent;
+
+        .loadingTip {
             color: #999;
         }
     }
@@ -296,6 +327,7 @@
     .lottie{
         width: 120px;
     }
+
     .loadingTip {
         font-size: 14px;
         color: #fff;
@@ -308,6 +340,7 @@
     left: 0px;
     top: 0;
 }
+
 .bg2Right {
     width: 52px;
     position: absolute;

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,14 +28,14 @@ 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 LoadingCss from "./loadingCss"
@@ -125,14 +125,14 @@ export default defineComponent({
       const settting = store.get("musicscoresetting");
       if (settting) {
         //state.setting = settting;
-        Object.assign(state.setting, settting)
+        Object.assign(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);
           }
         }
@@ -163,12 +163,12 @@ 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 = query.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)
@@ -179,7 +179,7 @@ export default defineComponent({
       try { 
         await getMusicDetail(id);
       } catch (err) {
-        console.error(err)
+        console.error(err);
         state.isLoading = false;
         isEmptyMusicShow.value = true
         // 需要向外面（iframe）派发计时器数据的时候触发
@@ -198,8 +198,8 @@ export default defineComponent({
       detailData.isLoading = false;
       // 如果后台设置了不显示指法，关闭指法开关   如果默认进来是演奏模式 不显示指法开关
       if (!state.isShowFingering || state.playType === "sing") {
-        state.setting.displayFingering = false
-      }      
+        state.setting.displayFingering = false;
+      }
       // api_setEventTracking();
     });
 
@@ -219,15 +219,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
@@ -236,69 +236,69 @@ 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 }),
           },
           "*"
         );
         return
       }
       // 刷新时值
-      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 === 'left' ? 'left' : 'right';
@@ -358,7 +358,7 @@ export default defineComponent({
             }
           };
         } else {
-          console.log('指法',state.playBtnDirection,state.platform)
+          console.log("指法", state.playBtnDirection, state.platform);
           // 老师端，竖向指法，需要根据功能按钮方向进行设置
           if (state.platform === IPlatform.PC) {
             return {
@@ -402,13 +402,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;
         }
       }
     );
@@ -514,9 +513,9 @@ 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 && state.modeType === 'evaluating' ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
@@ -532,11 +531,11 @@ export default defineComponent({
               </div>    
         }
         {
-          state.modeType === 'evaluating' ? <>
+          state.modeType === 'evaluating' ? (<>
             <img src={bg2Left} class={styles.bg2Left} />
             <img src={bg2Right} class={styles.bg2Right} />
-          </> : null
-        }
+          </>
+        ) : null}
         {/* 骨架屏 */}
         {/* <Transition name="van-fade">
           {detailData.skeletonLoading && (
@@ -548,10 +547,7 @@ export default defineComponent({
         {/* 曲目加载错误的缺省 */}
         <EmptyMusic></EmptyMusic>
         {/** 功能按钮 */}
-        {
-          !state.isPreView && 
-          <div class={[styles.headHeight, headerColumnHide.value && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>
-        }
+        {!state.isPreView && <div class={["headHeight", styles.headHeight, headerColumnHide.value && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>}
         <div
           id="scrollContainer"
           style={{ ...fingerConfig.value.container }}

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

@@ -442,7 +442,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"]}>

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

@@ -151,6 +151,7 @@ export default defineComponent({
           <div
             class={[styles.btn, styles.confirmBtn]}
             onClick={() => {
+              console.log(state.selectList, state.instrumentCode);
               if (state.selectList.length > 0 && !state.instrumentCode) {
                 showToast("请选择乐器");
                 return;

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

@@ -44,7 +44,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const query = getQuery();
     const browsInfo = browser();
-    const code = mappingVoicePart(query.code, "INSTRUMENT");
+    const tempCode = query.code ? query.code.split(",")[0] : "";
+    const code = mappingVoicePart(tempCode, "INSTRUMENT");
     const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
     const data = reactive({
       linkSource: query.linkSource, // 来源，目前只有课件里使用
@@ -341,39 +342,17 @@ export default defineComponent({
           };
           if (Array.isArray(row.instruments)) {
             row.instruments.forEach((i: any) => {
+              const code = i.code ? i.code.split(",") : [];
               tempList.children.push({
                 text: i.name,
                 id: i.id,
-                value: mappingVoicePart(i.code, "INSTRUMENT"),
+                value: mappingVoicePart(code[0] || "", "INSTRUMENT"),
               });
             });
           }
           tempSubjects.push(tempList);
-          // if (row.instruments && row.instruments.length > 0) {
-          //   if (row.instruments.length > 1) {
-          //     row.instruments.forEach((i: any) => {
-          //       tempList.children.push({
-          //         text: i.name,
-          //         id: i.id,
-          //         value: mappingVoicePart(i.code, "INSTRUMENT"),
-          //       });
-          //     });
-          //   } else {
-          //     const singleRow = row.instruments[0];
-          //     if (singleRow.code) {
-          //       tempList.value = mappingVoicePart(singleRow.code, "INSTRUMENT");
-          //       tempList.id = singleRow.id;
-          //     }
-          //   }
-          // }
-          // data.subjects.push(tempList);
         });
         console.log(data.subject, "data.subject");
-        // tempSubjects.forEach((item: any) => {
-        //   if (item.value === data.subject && item.children?.length > 1) {
-        //     data.subject = item.children[0].value;
-        //   }
-        // });
         data.subjects = tempSubjects;
       } catch (e) {
         //

src/view/fingering/fingering-config.ts

@@ -122,7 +122,7 @@ export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU"
       tenorsaxophone: 6,
       saxophone: 6,
       upbasshorn: 15,
-      melodica: 137,
+      // melodica: 137,
       hulusiFlute: 136,
       panflute: 135,
       recorder: 120,
@@ -144,11 +144,15 @@ export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU"
       29: 15,
       30: 17,
       tenorrecorder: "piccolo",
+      germanrecorder: "piccolo",
       woodwind: "hulusi-flute",
+      hulusi: "hulusi-flute",
       panpipes: "pan-flute",
       ocarina: "ocarina", // 陶笛
+      altoocarina: "ocarina", // 陶笛
       whistling: "whistling", // 高音陶笛
       nai: "melodica",
+      melodica: "melodica",  // 口风琴
       15: "baroque-recorder",
       16: "baroque-recorder",
     };
@@ -321,6 +325,7 @@ export const matchVoicePart = (id: number | string, type: "SINGLE" | "CONCERT"):
       5: "melodica",
       26: 12,
       tenorrecorder: "piccolo",
+      germanrecorder: "piccolo",
       woodwind: "hulusi-flute",
       panpipes: "pan-flute",
       ocarina: "ocarina",