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

src/page-instrument/component/the-music-list/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
 	setup() {
 		return () => (
 			<>
-				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
+				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
 					<div class={[styles.tabs, styles[state.modeType], state.platform === IPlatform.PC && styles.isPc]}>
 						<Tabs>
 							<Tab title="其他曲谱">

src/page-instrument/component/the-music-list/list.tsx

@@ -182,7 +182,7 @@ export default defineComponent({
                   <span>暂无内容</span>
                 </div>}
         </List>
-        <Popup  style={positionInfo.styleDrag.value} v-model:show={filterShow.value} class="popup-custom van-scale center-closeBtn musicListClass_drag" transition="van-scale" teleport="body" overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup  style={positionInfo.styleDrag.value} v-model:show={filterShow.value} class="popup-custom van-scale center-closeBtn musicListClass_drag" transition="van-scale" teleport="body" overlay-style={{ background: "rgba(0, 0, 0, 0.6)" }}>
           <FilterList onClose={() => { filterShow.value = false }} onHandleConfirm={(queryObj) => {
             filterShow.value = false
             forms.audioPlayTypes = queryObj.audioPlayTypes

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" || state.modeType === "evaluating") {
+    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++;
@@ -939,7 +966,7 @@ export default defineComponent({
                   </div>
                 </div>
                 {
-                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.6)" }}>
                     <Speed />
                     {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
                   </Popup>
@@ -1045,7 +1072,7 @@ export default defineComponent({
           <img class={styles.iconBtn} src={headImg("icon_reset.png")} />
         </div>
 
-        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.6)" }}>
           <Settting />
           {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
         </Popup>
@@ -1091,7 +1118,7 @@ export default defineComponent({
         )}
 
         {/** 评测作业，没有完成时，提示弹窗 */}
-        <Popup v-model:show={headTopData.workHomeNoDone} class="popup-custom van-scale center-closeBtn" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup v-model:show={headTopData.workHomeNoDone} class="popup-custom van-scale center-closeBtn" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.6)" }}>
           <WorkHomePop onClose={handleResult} />
         </Popup>
       </>

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

@@ -295,7 +295,7 @@ export default defineComponent({
 					class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
 					transition="van-scale"
 					teleport="body"
-                    overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
+                    overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}
                     style={positionInfo.styleDrag.value}
 				>
                     <Recommendation

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

@@ -63,7 +63,7 @@
     }
     .content{
         width: 354px;
-        height: 225px;
+        height: 250px;
         background: #B0D8FF;
         box-shadow: 0px 4px 0px 0px #7AAEE0;
         border-radius: 0px 0px 24px 24px;

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: cover;
+                }
             }
         }
     }
@@ -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/plugins/toggleMusicSheet/index.tsx

@@ -112,7 +112,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
+      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
         <ChoosePartName
           partIndex={trackIdx.value || 0}
           partListNames={partListNames.value}

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;
@@ -105,6 +104,9 @@
                     border-radius: 28px;
                     box-shadow: 0 0 0 4px #FFFFFF;
                     background-color: #35A8FF;
+                    &.highlight {
+                        background-color: #fff;
+                    }
                 }
             }
         }

src/view/rhythm/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeMount, ref } from "vue"
+import { computed, defineComponent, onMounted, ref, nextTick } from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { headTopData } from "/src/page-instrument/header-top"
@@ -29,8 +29,16 @@ export default defineComponent({
       }
       const rhythmData = ref<rhythmData[][]>([])
       const actRhythmData = computed<rhythmData[]>(() => {
+         if (headTopData.rhythmModeDirection === "vertical") {
+            isFlash.value = true
+            const _time = setTimeout(() => {
+               clearTimeout(_time)
+               isFlash.value = false
+            }, 80)
+         }
          return rhythmData.value[Math.floor(state.activeNoteIndex / 6)]
       })
+      const isFlash = ref(false)
       function initRhythmData() {
          const rhythmArr = state.times.map(item => {
             const noteElement = item.noteElement
@@ -57,15 +65,33 @@ 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]}`]]}
+                           class={[
+                              styles.rhythmImg,
+                              styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`],
+                              isFlash.value && styles.highlight
+                           ]}
                         ></div>
                      )}
                      {actRhythmData.value.map((item, index) => {

src/view/selection/index.module.less

@@ -83,7 +83,7 @@
 
 .scoreItem {
     position: absolute;
-    left: 60%;
+    left: 80%;
     top: -120%;
     transform: translateX(-50%);
     font-size: 18px;

src/view/selection/index.tsx

@@ -134,9 +134,9 @@ const calcNoteData = () => {
 					} catch (error) {}
 
 					// console.log("🚀 ~ staveEle:", staveBbox.height)
-					selectData.measureHeight = staveBbox.height
 					let compareVal = staveBbox.height - minMeasureHeigt
 					compareVal = compareVal > 0 ? compareVal : 0
+					selectData.measureHeight = staveBbox.height - compareVal
 					noteItem.staveBox = {
 						left: staveBbox.x - parentLeft + "px",
 						// top: ((item.stave.y || 0) - 5) * state.zoom + "px",