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

src/page-instrument/component/the-music-list/index.module.less

@@ -3,7 +3,7 @@
 }
 .tabs {
     height: 100vh;
-    width: 320px;
+    width: 380px;
     padding: 10px 0;
     :global {
         .van-tabs{
@@ -31,8 +31,8 @@
                             }
                         }                   
                         &:nth-child(2){
-                            margin-left: 24px;
-                            margin-right: 34px;
+                            margin-left: 30px;
+                            margin-right: 60px;
                             width: 100px;
                             height: 30px;
                             background: url("./imgs/zjlx.png") no-repeat;
@@ -58,6 +58,22 @@
             }
         }
     }
+    &.follow{
+        :global{
+            .van-tabs .van-tabs__content{
+                background: url("./imgs/bg1.png") no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+    &.evaluating{
+        :global{
+            .van-tabs .van-tabs__content{
+                background: url("./imgs/bg2.png") no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
 }
 
 .wrap {

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

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

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

@@ -31,7 +31,7 @@ export function startCountdown() {
 				clearTimeout(_time)
 				countdownData.isAnimating = false
 				countdownData.step--
-			}, 300)
+			}, 300) // css 动画是300毫秒 所以这里加了定时器
 		}
 	}, 1000)
 	return new Promise( resolve => {

src/page-instrument/evaluat-model/index.module.less

@@ -118,4 +118,13 @@
     visibility: hidden;
     background: transparent;
     opacity: 0;
+}
+
+.beginMask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10000;
 }

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

@@ -463,7 +463,10 @@ export default defineComponent({
         
         {/* 倒计时 */}
         <Countdown />
-
+        {/* 遮罩 */}
+        {
+          evaluatingData.isBeginMask && <div class={styles.beginMask}></div>
+        }
         <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.earphoneMode}>
           <Earphone
             earphoneType={evaluatingData.earPhoneType}

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

@@ -22,6 +22,21 @@
     }
     .title{
         width: 216px;
+        &.isMusicList{
+            :global{
+                .van-notice-bar .van-notice-bar__content::after{
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    content: "";
+                    width: 11px;
+                    height: 6px;
+                    background: url("./image/sj.png") no-repeat;
+                    background-size: 100% 100%;                         
+                }
+            }
+        }
         :global{
             .van-notice-bar{
                 height: 30px;
@@ -33,17 +48,6 @@
                 .van-notice-bar__content{
                     position: relative;
                     padding-right: 16px;
-                    &::after{
-                        position: absolute;
-                        top: 50%;
-                        right: 0;
-                        transform: translateY(-50%);
-                        content: "";
-                        width: 11px;
-                        height: 6px;
-                        background: url("./image/sj.png") no-repeat;
-                        background-size: 100% 100%;                         
-                    }
                 }
             }
         }
@@ -251,11 +255,11 @@
         padding: 0 36px;
         &.twoModeBox{
             justify-content: center;
-            > img + img{
+            > .modeImg + .modeImg{
                 margin-left: 150px;
             }
         }
-        > img {
+        > .modeImg {
             width: calc((100% - 2*40px)/3);
             max-width: 220px;
         }

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

@@ -78,7 +78,7 @@ export const headTopData = reactive({
       state.playIngSpeed = state.originSpeed;
       handleStartEvaluat();
       // 开发模式，把此处打开
-      // state.modeType = "evaluating"
+      state.modeType = "evaluating"
       // evaluatingData.rendered = true;
       // evaluatingData.soundEffectMode = true;
     } else if (value === "follow") {
@@ -605,8 +605,8 @@ export default defineComponent({
           <div class={styles.headTopLeftBox}>
             <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
             {
-              state.modeType === "practise" && smoothAnimationState.isShow.value ? 
-                <div class={styles.title} onClick={()=>{
+              state.modeType === "practise" && smoothAnimationState.isShow.value ?
+                <div class={[styles.title,isMusicList.value && styles.isMusicList]} onClick={()=>{
                   isMusicList.value && (musicListShow.value = true)
                 }}>
                   <NoticeBar
@@ -614,9 +614,10 @@ export default defineComponent({
                     background="none"
                   />
               </div> :
-              <img src={listImg} class={[styles.img]} onClick={()=>{
-                  isMusicList.value && (musicListShow.value = true)
-              }} />
+                isMusicList.value &&
+                <img src={listImg} class={[styles.img]} onClick={()=>{
+                  musicListShow.value = true
+                }} />
             }
           </div>
           {/* 模式切换 */}
@@ -721,7 +722,7 @@ export default defineComponent({
               <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
               <span>选段</span>
             </div>
-            {state.modeType !== "evaluating" && (
+            {(
               <>
                 <div
                   style={{ display: metronomeBtn.value.display ? "" : "none" }}

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

@@ -1,10 +1,10 @@
-import { defineComponent, onMounted, watch, reactive } from "vue"
+import { defineComponent, onMounted, watch, reactive, ref, nextTick } from "vue"
 import styles from "./index.module.less"
 import backImg from "./image/back.png"
 import nameImg from "./image/zt.png"
-import lxImg from "./image/lx.png"
-import glImg from "./image/gl.png"
-import pcImg from "./image/pc.png"
+import lxMode from "./image/lxMode.json"
+import glMode from "./image/glMode.json"
+import pcMode from "./image/pcMode.json"
 import { headTopData } from "./index"
 import TheVip from "../custom-plugins/the-vip"
 import { getQuery } from "/src/utils/queryString"
@@ -12,6 +12,7 @@ import { storeData } from "/src/store"
 import state from "/src/state"
 import { studentQueryUserInfo } from "../api"
 import { usePageVisibility } from "@vant/use"
+import { Vue3Lottie } from "vue3-lottie";
 
 export default defineComponent({
    name: "modeView",
@@ -22,6 +23,9 @@ export default defineComponent({
          showStudent: false,
          showVip: false
       })
+      const modeImgDom1 = ref()
+      const modeImgDom2 = ref()
+      const modeImgDom3 = ref()
       const openGuid = () => {
          // 加载后 判断 端口号 加载对应的引导
          if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
@@ -60,6 +64,21 @@ export default defineComponent({
             }
          }
       )
+      watch(() => headTopData.modeType, (value,oldValue) => {
+         // headTopData.modeType 值 刚开始是 ""  所以 第一次切换时候不触发播放动画
+         if(!oldValue) return
+         nextTick(()=>{
+            if(value === "show"){
+               modeImgDom1.value?.pause()
+               modeImgDom2.value?.pause()
+               modeImgDom3.value?.pause()
+            }else if(value === "init"){
+               modeImgDom1.value?.play()
+               modeImgDom2.value?.play()
+               modeImgDom3.value?.play()
+            }
+         })
+      })
       onMounted(() => {
          openGuid()
       })
@@ -82,9 +101,13 @@ export default defineComponent({
                      styles.twoModeBox
                ]}
             >
-               <img src={lxImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("practise")} />
-               {!state.isPercussion && <img src={glImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("follow")} />}
-               {state.enableEvaluation && <img src={pcImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("evaluating")} />}
+               <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("practise")}></Vue3Lottie>
+               {
+                  !state.isPercussion && <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("follow")}></Vue3Lottie>
+               }
+               {
+                  state.enableEvaluation && <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("evaluating")}></Vue3Lottie>
+               }
             </div>
             {data.showVip && <TheVip />}
          </div>

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

@@ -452,22 +452,9 @@ export default defineComponent({
       detailData.fingerPreView = false;
       detailData.fingerPreViewGuide = false;
     };
-    // 模式样式
-    const modeClass = computed(() => {
-      const modeType = state.modeType
-      if(modeType === "practise"){
-        return styles.practise
-      }
-      if(modeType === "evaluating"){
-        return styles.evaluating
-      }
-      if(modeType === "follow"){
-        return styles.follow
-      }
-    }) 
     return () => (
       <div
-        class={[styles.detail, modeClass.value, 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={{
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",

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

@@ -0,0 +1,9 @@
+.brid{
+    width: 100%;
+}
+.note{
+    position: absolute;
+    width: 40Px;
+    top: -16Px;
+    left: -28Px;
+}

src/page-instrument/view-detail/smoothAnimation/bird/index.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue"
+import { Vue3Lottie } from "vue3-lottie";
+import styles from "./index.module.less"
+import state from "/src/state"
+import fly from "./imgs/fly.json"
+import stilln from "./imgs/stilln.json"
+import note from "./imgs/note.json"
+
+export default defineComponent({
+    name: "Bird",
+    setup() {
+        return () => <>
+                {
+                    state.playState === "paused" ?
+                        <Vue3Lottie key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
+                        :
+                        <>
+                            <Vue3Lottie key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
+                            <Vue3Lottie key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
+                        </>
+                }
+            
+        </>
+    }
+})

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

@@ -11,8 +11,6 @@
         position: relative;
         .smoothBot{
             position: absolute;
-            background: url("./bird.png") no-repeat;
-            background-size: 100% 100%;
             width: 40Px;
             height: 50Px;
             left: 0;

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -1,10 +1,11 @@
 /**
  * 一行谱动画
  */
-import { watch, ref, Ref } from "vue"
+import { watch, ref, Ref, h, render } from "vue"
 import { getAudioCurrentTime } from "/src/view/audio-list"
 import state from "/src/state"
 import "./index.less"
+import Bird from "./bird"
 
 type pointsPosType = { x: number; y: number; MeasureNumberXML: number }[]
 type smoothAnimationType = {
@@ -301,6 +302,8 @@ function createSmoothAnimation() {
    const smoothBotDom = document.createElement("div")
    smoothBotDom.className = "smoothBot"
    smoothAnimationState.smoothBotDom = smoothBotDom
+   // 添加小鸟
+   render(h(Bird), smoothBotDom)
    smoothAnimationConDom.appendChild(smoothCanvasDom)
    smoothAnimationConDom.appendChild(smoothBotDom)
    smoothAnimationBoxDom.appendChild(smoothAnimationConDom)

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

@@ -194,20 +194,20 @@ export default defineComponent({
 				if (!audioCtx) {
 					audioCtx = new AudioContext()
 					source = audioCtx.createMediaElementSource(audioDom)
+					analyser = audioCtx.createAnalyser()
+					analyser.fftSize = fftSize
+					source?.connect(analyser)
+					analyser.connect(audioCtx.destination)
 				}
-				analyser = audioCtx.createAnalyser()
-				analyser.fftSize = fftSize
-				source?.connect(analyser)
-				analyser.connect(audioCtx.destination)
-				audioCtx.resume()
+				//audioCtx.resume()  // 重新更新状态   加了暂停和恢复音频音质发生了变化  所以这里取消了
 				isPause = false
 				requestAnimationFrameFun()
 			}
 			const pauseVisualDraw = () => {
 				isPause = true
-				audioCtx?.suspend()
-				source?.disconnect()
-				analyser?.disconnect()
+				//audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
+				// source?.disconnect()
+				// analyser?.disconnect()
 			}
 			return {
 				playVisualDraw,

src/view/audio-list/index.module.less

@@ -81,9 +81,11 @@
     align-items: center;
     z-index: 10000;
     background: rgba(0, 0, 0, .6);
+    .lottie{
+        width: 120px;
+    }
     .loadingTip {
         font-size: 14px;
         color: #fff;
-        margin-top: 14px;
     }
 }

src/view/audio-list/loading.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
       return () =>
          !state.audioDone && (
             <div class={styles.loadingPop}>
-               <Vue3Lottie animationData={animBg}></Vue3Lottie>
+               <Vue3Lottie class={styles.lottie} animationData={animBg}></Vue3Lottie>
                <div class={styles.loadingTip}>{props.tipText}</div>
             </div>
          )

src/view/evaluating/index.tsx

@@ -114,6 +114,7 @@ export const evaluatingData = reactive({
 	jsonLoadDone: true, // 延迟检测的动画dom加载完成状态
 	hideResultModal: false, // 评测作业，如果不是完整评测，需要隐藏评测结果弹窗
 	oneselfCancleEvaluating: false, // 是否是自主取消评测，自主取消评测，不生产评测记录
+	isBeginMask: false // 倒计时和系统节拍器时候的遮罩，防止用户点击
 });
 
 const sendOffsetTime = async (offsetTime: number) => {
@@ -372,6 +373,7 @@ export const handleStartBegin = async (preTimes?: number) => {
 	}
 	evaluatingData.startBegin = true;
 	if (evaluatingData.isDisabledPlayMusic) {
+		evaluatingData.isBeginMask = true
 		// 先播放倒计时
 		await startCountdown()
 		state.playState = state.playState === "paused" ? "play" : "paused";
@@ -385,12 +387,14 @@ export const handleStartBegin = async (preTimes?: number) => {
 				if (!tickend) {
 					state.playState = "paused";
 					evaluatingData.startBegin = false;
+					evaluatingData.isBeginMask = false
 					return;
 				}
 			}else{
 				handleStartTick()
 			}
 		}
+		evaluatingData.isBeginMask = false
 		onPlay();
 	}
 	if (evaluatingData.isErrorState) return

vite.config.ts

@@ -78,7 +78,7 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         //target: "https://dev.resource.colexiu.com",
-        target: "https://dev.kt.colexiu.com",
+        target: "https://test.kt.colexiu.com",
         //target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),