Merge branch 'feature-wxl-newVersion' into ktyq-test-new

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -68,7 +68,7 @@ export const PractiseDriver = defineComponent({
       }
 
       // pc端不显示标题和模式切换引导
-      if(state.platform === IPlatform.PC) {
+      if (state.platform === IPlatform.PC) {
         length -= 2;
       } else {
         // 判断是否有标题
@@ -200,7 +200,6 @@ export const PractiseDriver = defineComponent({
         });
       }
 
-     
       if (state.platform === IPlatform.PC) {
         if (state.setting.displayFingering) {
           options.steps?.push({
@@ -267,21 +266,21 @@ export const PractiseDriver = defineComponent({
           });
         }
       } else {
-         options.steps?.push({
-           element: ".driver-6",
-           popover: {
-             title: "",
-             description: "",
-             popoverClass: "popoverClass popoverClass6",
-             align: "start",
-             side: "top",
-             nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
-             showButtons: ["next"],
-             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-               driverInitialPosition(popover, options);
-             },
-           },
-         });
+        options.steps?.push({
+          element: ".driver-6",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass6",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+          },
+        });
 
         if (state.setting.displayFingering) {
           // 是否有指法图
@@ -308,8 +307,8 @@ export const PractiseDriver = defineComponent({
 
         if (!props.statusAll.modelTypeStatus) {
           options.steps?.push({
-            //
-            element: props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" : '".driver-8',
+            //props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" :
+            element: ".driver-8",
             popover: {
               title: "",
               description: "",
@@ -345,7 +344,8 @@ export const PractiseDriver = defineComponent({
             {
               //  .van-notice-bar__content
               // element: ".driver-8 .van-notice-bar__content",
-              element: props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" : '".driver-8',
+              // props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" :
+              element: ".driver-8",
               popover: {
                 title: "",
                 description: "",
@@ -406,15 +406,15 @@ export const PractiseDriver = defineComponent({
     let driverObj: any;
 
     const handleClickOutside = (event: any) => {
-        // 如果高亮没有结束则下进行下一步
-        if (driverNextStatus.value) return;
-        if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
-          if (driverObj.isLastStep()) {
-            onDriverClose();
-          } else {
-            driverObj.moveNext(); // 跳转到下一步
-          }
+      // 如果高亮没有结束则下进行下一步
+      if (driverNextStatus.value) return;
+      if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
+        if (driverObj.isLastStep()) {
+          onDriverClose();
+        } else {
+          driverObj.moveNext(); // 跳转到下一步
         }
+      }
     };
 
     const guideInfo = ref({} as any);
@@ -459,14 +459,13 @@ export const PractiseDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside, true);
-      state.hasDriverPop = false
+      state.hasDriverPop = false;
     };
 
     onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside, true);
     });
 
-
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -652,12 +651,12 @@ export const FollowDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside, true);
-      state.hasDriverPop = false
+      state.hasDriverPop = false;
     };
 
     onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside, true);
-    })
+    });
 
     return () => (
       <Teleport to="body">
@@ -871,7 +870,6 @@ export const EvaluatingDriver = defineComponent({
       document.removeEventListener("click", handleClickOutside, true);
     });
 
-
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (
@@ -898,9 +896,9 @@ export const EvaluatingResultDriver = defineComponent({
     },
   },
   setup(props) {
-    let length = 4
-    if(!props.saveBtn) {
-      length -= 1
+    let length = 4;
+    if (!props.saveBtn) {
+      length -= 1;
     }
     console.log(props.saveBtn, "props.saveBtn");
     const driverNextStatus = ref(false);
@@ -1369,14 +1367,13 @@ export const EvaluatingReportDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside, true);
-      state.hasDriverPop = false
+      state.hasDriverPop = false;
     };
 
     onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside, true);
     });
 
-
     return () => (
       <Teleport to="body">
         {showCloseBtn.value && (

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

@@ -6,75 +6,86 @@
     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;
     }
 }
-.modeWarn{
+
+.modeWarn {
     position: fixed;
     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;
-        &.isMusicList{
-            :global{
-                .van-notice-bar{
-                    &::after{
+
+        &.isMusicList {
+            :global {
+                .van-notice-bar {
+                    &::after {
                         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;
@@ -84,12 +95,14 @@
             }
         }
     }
+
     .hidenBack {
         opacity: 0;
         pointer-events: none;
     }
 }
-.modeChangeBox{
+
+.modeChangeBox {
     position: fixed;
     top: 20px;
     right: 30px;
@@ -99,21 +112,25 @@
     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;
     height: 100%;
+
     .btn {
         position: relative;
         display: flex;
@@ -121,13 +138,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;
@@ -135,97 +155,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;
@@ -237,11 +290,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;
@@ -262,6 +317,7 @@
     right: 30px;
     bottom: 12px;
     transition: bottom .2s ease;
+
     .btnWrap {
         width: 50px;
         height: 50px;
@@ -272,6 +328,7 @@
             height: 100%;
         }
     }
+
     &.playLeftButton {
         left: 46px !important;
         right: auto !important;
@@ -283,7 +340,7 @@
         left: auto !important;
         bottom: 12px !important;
     }
-    
+
     .progress {
         position: absolute;
         left: 50%;
@@ -345,11 +402,13 @@
     background: url(./image/bg.png) no-repeat;
     background-size: 100% 100%;
     transition: all .3s;
-    &.hidden{
+
+    &.hidden {
         opacity: 0;
         transform: translateY(100%);
         pointer-events: none;
     }
+
     .back {
         position: absolute;
         width: 38px;
@@ -358,6 +417,7 @@
         top: 17px;
         cursor: pointer;
     }
+
     .name {
         position: absolute;
         left: 50%;
@@ -366,19 +426,23 @@
         width: 87px;
         height: 21px;
     }
+
     .modeBox {
         width: 100%;
         margin-top: 90px;
         display: flex;
         justify-content: space-between;
         padding: 0 36px;
-        &.twoModeBox{
+
+        &.twoModeBox {
             justify-content: center;
-            > .modeImg + .modeImg{
+
+            >.modeImg+.modeImg {
                 margin-left: 150px;
             }
         }
-        > .modeImg {
+
+        >.modeImg {
             width: calc((100% - 2*40px)/3);
             max-width: 220px;
         }
@@ -392,6 +456,6 @@
     opacity: 0;
 }
 
-.socketErrorStatus{
+.socketErrorStatus {
     top: 10vh;
 }

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

@@ -95,7 +95,7 @@ export const headTopData = reactive({
     headTopData.modeType = "show";
   },
   // 改变模式之前的状态
-  oldPlayType: "play"
+  oldPlayType: "play",
 });
 
 export const headData = reactive({
@@ -108,7 +108,7 @@ let resetBtn: ComputedRef<{
   disabled: boolean;
 }>;
 // 点击切换的时候才触发提醒
-let isClickMode = false
+let isClickMode = false;
 /**
  * 处理模式切换
  * @param oldPlayType   没改变之前的播放模式
@@ -131,13 +131,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赋值
@@ -261,7 +261,7 @@ export default defineComponent({
     // 是否显示引导
     const showGuide = ref(false);
     const showStudentGuide = ref(false);
-    let  displayFingeringCache = false // 指法缓存
+    let displayFingeringCache = false; // 指法缓存
     /** 设置按钮 */
     const settingBtn = computed(() => {
       // 音频播放中 禁用
@@ -398,8 +398,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 };
         }
@@ -412,7 +412,7 @@ export default defineComponent({
     /** 模式切换按钮 */
     const toggleBtn = computed(() => {
       // 不是演奏模式 影藏
-      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 };
       // 跟练开始, 评测开始 播放开始 隐藏
@@ -571,16 +571,20 @@ export default defineComponent({
     onUnmounted(() => {
       window.removeEventListener("message", changePlay);
     });
-    const noticeBarWidth = ref<number>()
-    watch(()=>smoothAnimationState.isShow.value, ()=>{
-      // NoticeBar能不能滚动
-      if(smoothAnimationState.isShow.value && 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 && 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");
@@ -725,7 +729,7 @@ export default defineComponent({
               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";
@@ -734,7 +738,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)) {
@@ -852,7 +856,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,  "driver-10"]}
+                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, toggleMusicSheet.show && styles.isMusicSheet, styles.musicSheet, "driver-10"]}
                 onClick={() => {
                   toggleMusicSheet.toggle(true);
                 }}
@@ -948,4 +952,4 @@ export default defineComponent({
       </>
     );
   },
-});
+});