Merge remote-tracking branch 'origin/hqyDev' into ktyq-test-new

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

@@ -58,7 +58,7 @@ export const PractiseDriver = defineComponent({
     };
 
     const driverOptions = (): Config => {
-      let length = 10;
+      let length = 11;
 
       if (!props.statusAll.playBtnStatus) {
         length -= 1;

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

@@ -63,6 +63,15 @@ export const headTopData = reactive({
       metronomeData.cursorMode = 1;
     }
     if (value === "practise") {
+      // 切回当前的时值
+      const isModeChange = modeChangeHandleTimes("play", "music")
+      // 没有切换的时候 不处理下面的
+      if (isModeChange) {
+        try {
+          metronomeData.metro.calculation(state.times);
+        } catch (error) {}
+        console.log("重新之后的times", state.times, state.fixtime);
+      }
       // state.playIngSpeed = state.speed
     }
     if (value === "evaluating") {
@@ -87,6 +96,17 @@ export const headTopData = reactive({
       //   state.isSingleLine = true;
       //   refreshMusicSvg();
       // }
+      /* 当前是唱名的模式 */
+      if(state.playSource === "mingSong") {
+        const isModeChange = modeChangeHandleTimes("play","mingSong","play","music")
+        // 没有切换的时候 不处理下面的
+        if (isModeChange) {
+          try {
+            metronomeData.metro.calculation(state.times);
+          } catch (error) {}
+          console.log("重新之后的times", state.times, state.fixtime);
+        }
+      }
       // 关闭节奏律动
       headTopData.rhythmMode = false
       smoothAnimationState.isShow.value = false; // 隐藏旋律线
@@ -162,11 +182,19 @@ export async function handlerModeChange(oldPlayType: "play" | "sing", oldPlaySou
   }
 }
 // 模式切换之后重新给times赋值
-function modeChangeHandleTimes(oldPlayType: "play" | "sing", oldPlaySource: IPlayState) {
-  const playType = state.playType;
-  const playSource = state.playSource;
+function modeChangeHandleTimes(oldPlayType: "play" | "sing", oldPlaySource: IPlayState, nowPlayType?:"play" | "sing", nowPlaySource?: IPlayState) {
+  const playType = nowPlayType || state.playType;
+  const playSource = nowPlaySource || state.playSource;
   const { notBeatFixtime, xmlMp3BeatFixTime, difftime } = state.times[0];
   const { isOpenMetronome, isSingOpenMetronome } = state;
+  // 跟练模式不切换时值  因为演奏加了唱名，所以往跟练模式切换的时候，刷新谱面的时候需要更新时值，这时候调用handleRessetState 会回到练习模式
+  if(state.modeType === "follow") {
+    return false
+  }
+  // 当相同时候也不处理
+  if(oldPlayType === playType && oldPlaySource === playSource) {
+    return false
+  }
   // 原声向伴奏和伴奏向原声不处理  范唱向伴唱和伴唱向范唱切不处理
   if((oldPlaySource==="music"&&playSource==="background")||(oldPlaySource==="background"&&playSource==="music")){
     return false
@@ -387,7 +415,6 @@ export default defineComponent({
         let index = 0;
         state.music && index++;
         state.accompany && index++;
-        state.mingSong && index++;
         let songIndex = 0;
         state.fanSong && songIndex++;
         state.banSong && songIndex++;

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

@@ -82,7 +82,6 @@
         position: sticky;
         top: 0;
         height: 100vh;
-        border-radius: 10px;
         transition: height .2s;
         transition: padding-bottom .2s;
         overflow: hidden;

src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -252,6 +252,7 @@
         .plyr {
             width: 100%;
             height: 100%;
+            border-radius: 16px;
             .plyr__control.plyr__control--overlaid {
                 width: 48px;
                 height: 48px;
@@ -374,6 +375,9 @@
                 .plyr__controls__item.plyr__time{
                     color: #ffffff;
                 }
+                .plyr__poster{
+                    background-size: 100% 100%;
+                }
             }
         }
     }
@@ -400,6 +404,7 @@
         }
         .audioBga{
             position: absolute;
+            width: 100%;
             top: 44%;
             transform: translateY(-50%);
         }

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -498,7 +498,7 @@ export default defineComponent({
                   <div class={styles.item}>
                     {/* <Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} /> */}
                     <Note fill="#EF231D" />
-                    <span>玫红色音符：演奏偏高</span>
+                    <span>红色音符：演奏偏高</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#01B996" />
@@ -506,27 +506,27 @@ export default defineComponent({
                   </div>
                   <div class={styles.item}>
                     <Note fill="#0E79FF" />
-                    <span>黄色音符：演奏偏低</span>
+                    <span>蓝色音符：演奏偏低</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#8F4EFB" />
-                    <span>红色音符：演奏错误</span>
+                    <span>紫色音符：演奏错误</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#F63582" />
-                    <span>紫色音符：节奏偏快</span>
+                    <span>玫红色音符：节奏偏快</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#FF8219" />
-                    <span>蓝色音符：时值不足</span>
+                    <span>橙色音符：时值不足</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#FFAA00" />
-                    <span>橙色音符：节奏偏慢</span>
+                    <span>黄色音符：节奏偏慢</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#ADADAD" />
-                    <span>白色音符：未演奏</span>
+                    <span>灰色音符：未演奏</span>
                   </div>
                 </div>
               </div>
@@ -536,7 +536,7 @@ export default defineComponent({
                 <div class={styles.items}>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.high }}></i>
-                    <span>玫红色音符：演奏偏高</span>
+                    <span>红色音符：演奏偏高</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: "#01B996" }}></i>
@@ -544,27 +544,27 @@ export default defineComponent({
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.low }}></i>
-                    <span>黄色音符：演奏偏低</span>
+                    <span>蓝色音符：演奏偏低</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.wrong }}></i>
-                    <span>红色音符：演奏错误</span>
+                    <span>紫色音符：演奏错误</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.fast }}></i>
-                    <span>紫色音符：节奏偏快</span>
+                    <span>玫红色音符：节奏偏快</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.lack }}></i>
-                    <span>蓝色音符：时值不足</span>
+                    <span>橙色音符：时值不足</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.slow }}></i>
-                    <span>橙色音符：节奏偏慢</span>
+                    <span>黄色音符：节奏偏慢</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.not }}></i>
-                    <span>白色音符：未演奏</span>
+                    <span>灰色音符：未演奏</span>
                   </div>
                 </div>
               </div>

src/state.ts

@@ -1606,8 +1606,6 @@ const setState = (data: any, index: number) => {
         state.playSource = "music"
       }else if(state.accompany){
         state.playSource = "background"
-      }else if(state.mingSong){
-        state.playSource = "mingSong"
       }else{
         if(state.fanSong){
           state.playType = "sing"

src/view/rhythm/index.module.less

@@ -3,14 +3,11 @@
     height: 100%;
     position: relative;
     .titImg{
-        position: absolute;
-        left: 30px;
-        top: 50%;
-        transform: translateY(-50%);
         width: 100px;
         height: 38px;
         background: url("./imgs/tit.png") no-repeat;
         background-size: 100% 100%;
+        margin-right: 30px;
     }
     .rhythmBox{
         position: absolute;
@@ -67,9 +64,11 @@
         overflow: hidden;
         background: linear-gradient( 180deg, #AFE8FF 0%, #D9F3FE 100%);
         .titImg{
+            position: absolute;
             top: 10px;
             left: 50%;
             transform: translateX(-50%);
+            margin-right: 0;
         }
         .rhythmBox{
             flex-wrap: wrap;

src/view/rhythm/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeMount, ref } from "vue"
+import { computed, defineComponent, onMounted, ref } from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { headTopData } from "/src/page-instrument/header-top"
@@ -57,12 +57,26 @@ export default defineComponent({
          }, [])
       }
       initRhythmData()
+      onMounted(() => {
+         // 横屏的时候 当宽度大于屏幕的时候缩小一点
+         if (headTopData.rhythmModeDirection !== "vertical") {
+            const element = document.querySelector(".rhythmBox-scale-element") as HTMLElement | null
+            if (element) {
+               const screenWidth = document.documentElement.clientWidth
+               const originalWidth = element.offsetWidth
+               // 保留一位小数
+               const scale = screenWidth < originalWidth ? Math.floor((screenWidth / originalWidth) * 10) / 10 : 1
+               element.style.transform = `translate(-50%, -50%) scale(${scale})`
+            }
+         }
+      })
       return () => {
          return (
             <>
                <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
-                  <div class={styles.titImg}></div>
-                  <div class={styles.rhythmBox}>
+                  {headTopData.rhythmModeDirection === "vertical" && <div class={styles.titImg}></div>}
+                  <div class={[styles.rhythmBox, "rhythmBox-scale-element"]}>
+                     {headTopData.rhythmModeDirection !== "vertical" && <div class={styles.titImg}></div>}
                      {headTopData.rhythmModeDirection === "vertical" && (
                         <div
                            class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}