Merge remote-tracking branch 'origin/hqyDev' into feature-tianyong-newVersion

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

@@ -51,6 +51,7 @@
         width: 100%;
         height: 100%;
         object-fit: cover; /* 保持宽高比 */
+        background-color: #fff;
     }
 
     .headHeight {
@@ -81,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;
@@ -29,13 +26,13 @@
             background-repeat: no-repeat;
             background-position: center;
             margin-right: 14px;
-            &:first-child{
-                width: 74px;
-                height: 74px;
-                background-size: 74px 74px;
+            &.active{
+                width: 70px;
+                height: 70px;
+                background-size: 70px 70px;
+                border-radius: 19px;
                 background-color: #35A8FF;
-                border-radius: 20px;
-                outline: 3px solid #FFFFFF;
+                box-shadow: 0 0 0 3px #ffffff; 
             }
             &:last-child{
                 margin-right: 0;
@@ -67,16 +64,19 @@
         overflow: hidden;
         background: linear-gradient( 180deg, #AFE8FF 0%, #D9F3FE 100%);
         .titImg{
+            position: absolute;
             top: 10px;
             left: 50%;
             transform: translateX(-50%);
+            margin-right: 0;
         }
         .rhythmBox{
-            position: initial;
-            transform: initial;
-            margin-top: 68px;
             flex-wrap: wrap;
             .rhythmImg{
+                &.active{
+                    background-color: #ffffff;
+                    box-shadow: 0 0 0 2px #35A8FF;   
+                }
                 margin-bottom: 20px;
                 width: 40px;
                 height: 40px;
@@ -85,8 +85,15 @@
                 &:nth-child(4){
                     margin-right: 0;
                 }
+                &:nth-child(5){
+                    margin-bottom: 0;
+                }
+                &:nth-child(6){
+                    margin-bottom: 0;
+                }
                 &:nth-child(7){
                     margin-right: 0;
+                    margin-bottom: 0;
                 }
                 &:first-child{
                     margin-left: 20px;
@@ -95,7 +102,8 @@
                     height: 110px;
                     background-size: 110px 110px;
                     border-radius: 28px;
-                    outline: 4px solid #FFFFFF;
+                    box-shadow: 0 0 0 4px #FFFFFF;
+                    background-color: #35A8FF;
                 }
             }
         }

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"
@@ -27,12 +27,12 @@ export default defineComponent({
          "1/32.": "6",
          rest: "7"
       }
-      const rhythmData = ref<rhythmData[]>([])
+      const rhythmData = ref<rhythmData[][]>([])
       const actRhythmData = computed<rhythmData[]>(() => {
-         return rhythmData.value.slice(state.activeNoteIndex, state.activeNoteIndex + 7)
+         return rhythmData.value[Math.floor(state.activeNoteIndex / 6)]
       })
       function initRhythmData() {
-         rhythmData.value = state.times.map(item => {
+         const rhythmArr = state.times.map(item => {
             const noteElement = item.noteElement
             const isDot = !!noteElement?.DotsXml
             const denominator = noteElement?.typeLength?.denominator || 4
@@ -44,16 +44,54 @@ export default defineComponent({
                rhythmImg: isRestFlag ? "rest" : `1/${denominator}${isDot ? "." : ""}`
             }
          })
+         rhythmData.value = splitArrayWithReduce(rhythmArr, 6)
+      }
+      function splitArrayWithReduce(arr: any[], chunkSize: number) {
+         return arr.reduce((result, item, index) => {
+            const chunkIndex = Math.floor(index / chunkSize)
+            if (!result[chunkIndex]) {
+               result[chunkIndex] = [] // 初始化一个新组
+            }
+            result[chunkIndex].push(item)
+            return result
+         }, [])
       }
       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}>
-                     {actRhythmData.value.map(item => {
-                        return <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[item.rhythmImg]}`]]}></div>
+                  {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]}`]]}
+                        ></div>
+                     )}
+                     {actRhythmData.value.map((item, index) => {
+                        return (
+                           <div
+                              class={[
+                                 styles.rhythmImg,
+                                 styles[`rhythm${rhythmImgObj[item.rhythmImg]}`],
+                                 state.activeNoteIndex % 6 === index && styles.active
+                              ]}
+                           ></div>
+                        )
                      })}
                   </div>
                </div>

src/view/selection/index.tsx

@@ -364,7 +364,7 @@ export default defineComponent({
 									<div class={[styles.followTipUp, 'tip-up']}>
 										<img src={IntonationUp} />
 										{/* <span>音准<i>高了</i></span> */}
-									</div>·
+									</div>
 									<div class={[styles.followTipDown, 'tip-down']}>
 										<img src={IntonationDown} />
 										{/* <span>音准<i>低了</i></span> */}