更新

instrument.html

@@ -8,7 +8,6 @@
   <title>AI学练</title>
   <link rel="icon" href="/favicon.ico?v=1" />
   <script src="/flexible.js" charset="UTF-8"></script>
-  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
   <style>
     #loading {
       position: fixed;
@@ -23,10 +22,6 @@
     }
   </style>
   <script>
-    // VConsole will be exported to `window.VConsole` by default.
-    // var vConsole = new window.VConsole();
-  </script>
-  <script>
     function _postMessage(data, callback) {
       const instance = window.COLEXIU || (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.COLEXIU)
       if (instance) {

package-lock.json

@@ -7154,8 +7154,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
       "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "7.1.2",
@@ -7313,8 +7312,7 @@
     "@vant/use": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.1.tgz",
-      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==",
-      "requires": {}
+      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ=="
     },
     "@varlet/icons": {
       "version": "2.9.5",
@@ -7377,8 +7375,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
       "integrity": "sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "3.0.1",
@@ -8883,8 +8880,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
       "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "proxy-from-env": {
       "version": "1.1.0",
@@ -9693,8 +9689,7 @@
     "ws": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-      "requires": {}
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
     },
     "y18n": {
       "version": "5.0.8",

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

@@ -6,31 +6,49 @@
     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%);
 }
-
-.headTopLeftBox {
+.modeWarn{
+    position: fixed;
+    left: 30px;
+    bottom: 20px;
+    border-radius: 16px;
+    background-color: rgba(12,51,107,0.61);
+    padding: 6px 11px;
+    align-items: center;
+    display: flex;
+    opacity: 0;
+    transition: all .3s ease-in;
+    & > div{
+        margin-left: 4px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(255,255,255,0.7);
+    }    
+    & > img{
+        width: 18px;
+        height: 18px;
+    }
+}
+.headTopLeftBox{
     position: fixed;
     top: 20px;
     left: 30px;
     display: flex;
     align-items: center;
-
-    .img {
+    .img{
         width: 32px;
         height: 32px;
-
-        &:first-child {
+        &:first-child{
             margin-right: 10px;
         }
     }
-
-    .title {
+    .title{
         width: 216px;
-
-        &.isMusicList {
-            :global {
-                .van-notice-bar .van-notice-bar__content::after {
+        &.isMusicList{
+            :global{
+                .van-notice-bar .van-notice-bar__content::after{
                     position: absolute;
                     top: 50%;
                     right: 0;
@@ -39,35 +57,31 @@
                     width: 11px;
                     height: 6px;
                     background: url("./image/sj.png") no-repeat;
-                    background-size: 100% 100%;
+                    background-size: 100% 100%;                         
                 }
             }
         }
-
-        :global {
-            .van-notice-bar {
+        :global{
+            .van-notice-bar{
                 height: 30px;
                 line-height: 30px;
                 padding: 0;
                 font-weight: 600;
                 font-size: 18px;
                 color: #FFFFFF;
-
-                .van-notice-bar__content {
+                .van-notice-bar__content{
                     position: relative;
                     padding-right: 16px;
                 }
             }
         }
     }
-
     .hidenBack {
         opacity: 0;
         pointer-events: none;
     }
 }
-
-.modeChangeBox {
+.modeChangeBox{
     position: fixed;
     top: 20px;
     right: 30px;
@@ -77,47 +91,35 @@
     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;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
-        padding: 0 8px;
-        margin-right: 14px;
-
-        &:first-child {
-            margin-left: -8px;
-        }
-
-        &:last-child {
+        margin-right: 30px;
+        &:last-child{
             margin-right: 0;
         }
-
         .iconBtn {
             width: 24px;
             height: 24px;
         }
-
         span {
             margin-top: 3px;
             font-weight: 500;
@@ -126,11 +128,9 @@
             line-height: 17px;
         }
     }
-
-    .metronomeBtn {
+    .metronomeBtn{
         position: relative;
-
-        .speedCon {
+        .speedCon{
             transform: scale(0.83);
             transform-origin: left bottom;
             padding: 2px;
@@ -142,13 +142,11 @@
             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;
@@ -169,7 +167,6 @@
     right: 30px;
     bottom: 12px;
     transition: bottom .2s ease;
-
     .btnWrap {
         width: 50px;
         height: 50px;
@@ -180,7 +177,6 @@
             height: 100%;
         }
     }
-
     &.playLeftButton {
         left: 46px !important;
         right: auto !important;
@@ -192,7 +188,7 @@
         left: auto !important;
         bottom: 12px !important;
     }
-
+    
     .progress {
         position: absolute;
         left: 50%;
@@ -254,13 +250,11 @@
     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;
@@ -269,7 +263,6 @@
         top: 17px;
         cursor: pointer;
     }
-
     .name {
         position: absolute;
         left: 50%;
@@ -278,23 +271,19 @@
         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;
         }

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

@@ -80,7 +80,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") {
@@ -604,44 +604,51 @@ 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, "driver-8", isMusicList.value && styles.isMusicList]}
+          {
+            !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
+              <div class={styles.headTopLeftBox}>
+                <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+                {
+                  smoothAnimationState.isShow.value ?
+                    <div class={[styles.title,isMusicList.value && styles.isMusicList, "driver-8"]} onClick={()=>{
+                        isMusicList.value && (musicListShow.value = true)
+                      }}>
+                        <NoticeBar
+                          text={state.examSongName}
+                          background="none"
+                        />
+                    </div> :
+                    isMusicList.value &&
+                    <img src={listImg} class={[styles.img, "driver-8"]} onClick={()=>{
+                      musicListShow.value = true
+                    }} />
+                }
+              </div>
+          }
+          {/* 模式切换 */}
+          { 
+            state.playType === "play" &&
+              <div 
+                id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
+                style={{ display: toggleBtn.value.display ? "" : "none" }}
+                class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
                 onClick={() => {
-                  isMusicList.value && (musicListShow.value = true);
+                    handleRessetState();
+                    headTopData.modeType = "init";
                 }}
               >
-                <NoticeBar text={state.examSongName} background="none" />
+                <img class={styles.img} src={iconMode} />
+                <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
               </div>
-            ) : (
-              isMusicList.value && (
-                <img
-                  src={listImg}
-                  class={[styles.img, "driver-8"]}
-                  onClick={() => {
-                    musicListShow.value = true;
-                  }}
-                />
-              )
-            )}
-          </div>
-          {/* 模式切换 */}
-          {state.playType === "play" && (
-            <div
-              id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
-              style={{ display: toggleBtn.value.display ? "" : "none" }}
-              class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
-              onClick={() => {
-                handleRessetState();
-                headTopData.modeType = "init";
-              }}
-            >
-              <img class={styles.img} src={iconMode} />
-              <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
-            </div>
-          )}
+          }
+          {/* 模式提醒 */}
+          {
+            state.modeType === "practise" &&
+              <div class={[styles.modeWarn, "practiseModeWarn"]}>
+                <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
+                <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
+              </div>
+          }
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}
@@ -728,7 +735,7 @@ export default defineComponent({
               <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
               <span>选段</span>
             </div>
-            {
+            {(
               <>
                 <div
                   style={{ display: metronomeBtn.value.display ? "" : "none" }}
@@ -752,7 +759,7 @@ export default defineComponent({
                   </Popup>
                 }
               </>
-            }
+            )}
             {/* {state.enableNotation ? (
               <Popover trigger="manual" v-model:show={headData.musicTypeShow} class={state.platform === IPlatform.PC && styles.pcTransPop} placement={state.platform === IPlatform.PC ? "top-end" : "bottom-end"} overlay={false} offset={state.platform === IPlatform.PC ? [0, 40] : [0, 8]}>
                 {{
@@ -782,7 +789,7 @@ export default defineComponent({
                 }}
               >
                 <img class={styles.iconBtn} src={headImg(`shenggui.png`)} />
-                <span>声轨</span>
+                <span>声部</span>
               </div>
             )}
             <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>

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

@@ -1,107 +1,116 @@
-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 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";
-import { storeData } from "/src/store";
-import state from "/src/state";
-import { studentQueryUserInfo } from "../api";
-import { usePageVisibility } from "@vant/use";
+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 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"
+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",
-  setup() {
-    const query = getQuery();
-    const data = reactive({
-      showPC: false,
-      showStudent: false,
-      showVip: false,
-    });
-    const modeImgDom1 = ref();
-    const modeImgDom2 = ref();
-    const modeImgDom3 = ref();
-    const openGuid = () => {
-      // 加载后 判断 端口号 加载对应的引导
-      if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
-        // PC
-        data.showPC = true;
-      } else {
-        // 从课堂乐器学生端课件预览默认不显示会员
-        if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
-          // 学生端
-          data.showStudent = true;
-        } else {
-          // vip
-          data.showVip = true;
-        }
+   name: "modeView",
+   setup() {
+      const query = getQuery()
+      const data = reactive({
+         showPC: false,
+         showStudent: false,
+         showVip: false
+      })
+      const modeImgDom1 = ref()
+      const modeImgDom2 = ref()
+      const modeImgDom3 = ref()
+      const openGuid = () => {
+         // 加载后 判断 端口号 加载对应的引导
+         if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
+            // PC
+            data.showPC = true
+         } else {
+            // 从课堂乐器学生端课件预览默认不显示会员
+            if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
+               // 学生端
+               data.showStudent = true
+            } else {
+               // vip
+               data.showVip = true
+            }
+         }
       }
-    };
-    const getUserInfo = async () => {
-      const res = await studentQueryUserInfo();
-      const student = res?.data || {};
-      storeData.user.vipMember = student.vipMember;
-      // console.log("🚀 ~ student:", student);
-      if (storeData.user.vipMember) {
-        data.showVip = false;
-        openGuid();
-      }
-    };
 
-    const pageVisible = usePageVisibility();
-    watch(
-      () => pageVisible.value,
-      (val) => {
-        if (val === "visible") {
-          if (storeData.user.vipMember) return;
-          console.log("页面显示");
-          getUserInfo();
-        }
-      }
-    );
-    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();
-          }
-        });
+      const getUserInfo = async () => {
+         const res = await studentQueryUserInfo()
+         const student = res?.data || {}
+         storeData.user.vipMember = student.vipMember
+         // console.log("🚀 ~ student:", student);
+         if (storeData.user.vipMember) {
+            data.showVip = false
+            openGuid()
+         }
       }
-    );
-    onMounted(() => {
-      openGuid();
-    });
-    return () => (
-      <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
-        <img
-          src={backImg}
-          class={styles.back}
-          onClick={() => {
-            headTopData.modeType = "show";
-          }}
-        />
-        <img src={nameImg} class={styles.name} />
-        <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
-          <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>
-    );
-  },
-});
+      const pageVisible = usePageVisibility()
+      watch(
+         () => pageVisible.value,
+         val => {
+            if (val === "visible") {
+               if (storeData.user.vipMember) return
+               console.log("页面显示")
+               getUserInfo()
+            }
+         }
+      )
+      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()
+      })
+      return () => (
+         <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
+            <img
+               src={backImg}
+               class={styles.back}
+               onClick={() => {
+                  headTopData.modeType = "show"
+               }}
+            />
+            <img src={nameImg} class={styles.name} />
+            <div
+               class={[
+                  styles.modeBox,
+                  ((!state.isPercussion && !state.enableEvaluation) ||
+                     (state.isPercussion && state.enableEvaluation) ||
+                     (state.isPercussion && !state.enableEvaluation)) &&
+                     styles.twoModeBox
+               ]}
+            >
+               <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/header-top/title/index.module.less

@@ -25,4 +25,4 @@
 .status {
   margin-left: auto;
   flex-shrink: 0;
-}
+}

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

@@ -40,6 +40,11 @@
 
         &.headHide {
             margin-bottom: calc(0Px - var(--header-height));
+            :global{
+                .practiseModeWarn{
+                    opacity: 1;
+                }
+            }
         }
     }
 

src/state.ts

@@ -763,7 +763,8 @@ export const togglePlay = async (playState?: "play" | "paused", sourceType?: str
     closeTick()
   }
   // 设置为开始播放时, 如果需要节拍,先播放节拍器   只有在当前播放时间不为0的时候开启节拍器
-  if (state.playState === "play" && getAudioCurrentTime() === 0 && ((state.playType === "play" && state.needTick) || (state.playType === "sing" && state.needSingTick))) {
+  const isOneMeasureNumberXML = state.section.length === 2 && state.section[0].MeasureNumberXML === 2 //当是选段模式 并且开始小节是第二小节 就不播节拍器(这种情况有预选小节，currentTime是0)
+  if (state.playState === "play" && getAudioCurrentTime() === 0 && !isOneMeasureNumberXML && ((state.playType === "play" && state.needTick) || (state.playType === "sing" && state.needSingTick))) {
     // 如果是系统节拍器 等系统节拍器播完了再播，如果是mp3节拍器 直接播
     if ((state.playType === "play" && !state.isOpenMetronome) || (state.playType === "sing" && !state.isSingOpenMetronome)) {
       const tickend = await handleStartTick();
@@ -1238,7 +1239,9 @@ export default state;
 export const evaluatCreateMusicPlayer = () => {
   return api_createMusicPlayer({
     musicSrc: state.accompany || state.music, // 曲谱音频url
-    tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
+    // tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
+    tuneSrc: "https://oss.dayaedu.com/MECMP/1722336027096.mp3", //效音音频url
+    checkFrequence: 787,
   });
 };
 

src/view/evaluating/index.tsx

@@ -62,52 +62,52 @@ export const popImgs = {
 };
 
 export const evaluatingData = reactive({
-  /** 评测数据 */
-  contentData: {} as any,
-  /** 评测模块是否加载完成 */
-  rendered: false,
-  earphone: false, // 是否插入耳机
-  soundEffect: false, // 是否效音
-  soundEffectFrequency: 0, // 效音频率
-  checkStep: 0, // 执行步骤
-  checkEnd: false, // 检测结束
-  earphoneMode: false, // 耳机弹窗
-  earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机", // 耳机类型
-  soundEffectMode: false, // 效音弹窗
-  websocketState: false, // websocket连接状态
-  /**是否开始播放 */
-  startBegin: false, // 开始
-  backtime: 0, // 延迟时间
-  /** 已经评测的数据 */
-  evaluatings: {} as IEvaluatings,
-  /** 评测结果 */
-  resultData: {} as any,
-  /** 评测结果弹窗 */
-  resulstMode: false,
-  /** 是否是完整评测 */
-  isComplete: false,
-  /**  */
-  isDisabledPlayMusic: false,
-  /** socket异常状态弹窗 */
-  socketErrorPop: false,
-  /** 异常提示 */
-  errorContents: "",
-  /** socket异常状态弹窗的状态值 */
-  socketErrorStatus: 0,
-  /** 延迟检测，socket状态异常 */
-  delayCheckSocketError: false,
-  /** 异常状态，不生成评测记录，不调用保存接口 */
-  isErrorState: false,
-  /** accompanyError，错误类型 */
-  accompanyErrorType: "",
-  /** app播放结束状态，重新评测需要重置为 */
-  isAudioPlayEnd: false,
-  preloadJson: true, // 预加载延迟检测的资源
-  jsonLoading: true, // 延迟检测的资源加载中状态
-  jsonLoadDone: true, // 延迟检测的动画dom加载完成状态
-  hideResultModal: false, // 评测作业，如果不是完整评测，需要隐藏评测结果弹窗
-  oneselfCancleEvaluating: false, // 是否是自主取消评测，自主取消评测，不生产评测记录
-  isBeginMask: false, // 倒计时和系统节拍器时候的遮罩，防止用户点击
+	/** 评测数据 */
+	contentData: {} as any,
+	/** 评测模块是否加载完成 */
+	rendered: false,
+	earphone: false, // 是否插入耳机
+	soundEffect: false, // 是否效音
+	soundEffectFrequency: 0, // 效音频率
+	checkStep: 0, // 执行步骤
+	checkEnd: false, // 检测结束
+	earphoneMode: false, // 耳机弹窗
+	earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机", // 耳机类型
+	soundEffectMode: false, // 效音弹窗
+	websocketState: false, // websocket连接状态
+	/**是否开始播放 */
+	startBegin: false, // 开始
+	backtime: 0, // 延迟时间
+	/** 已经评测的数据 */
+	evaluatings: {} as IEvaluatings,
+	/** 评测结果 */
+	resultData: {} as any,
+	/** 评测结果弹窗 */
+	resulstMode: false,
+	/** 是否是完整评测 */
+	isComplete: false,
+	/**  */
+	isDisabledPlayMusic: false,
+	/** socket异常状态弹窗 */
+	socketErrorPop: false,
+	/** 异常提示 */
+	errorContents: '',
+	/** socket异常状态弹窗的状态值 */
+	socketErrorStatus: 0,
+	/** 延迟检测，socket状态异常 */
+	delayCheckSocketError: false,
+	/** 异常状态，不生成评测记录，不调用保存接口 */
+	isErrorState: false,
+	/** accompanyError，错误类型 */
+	accompanyErrorType: '',	
+	/** app播放结束状态，重新评测需要重置为 */
+	isAudioPlayEnd: false,
+	preloadJson: true, // 预加载延迟检测的资源
+	jsonLoading: true, // 延迟检测的资源加载中状态
+	jsonLoadDone: true, // 延迟检测的动画dom加载完成状态
+	hideResultModal: false, // 评测作业，如果不是完整评测，需要隐藏评测结果弹窗
+	oneselfCancleEvaluating: false, // 是否是自主取消评测，自主取消评测，不生产评测记录
+	isBeginMask: false // 倒计时和系统节拍器时候的遮罩，防止用户点击
 });
 
 const sendOffsetTime = async (offsetTime: number) => {
@@ -341,93 +341,91 @@ const handleScoreResult = (res?: IPostMessage) => {
 
 /** 开始评测 */
 export const handleStartBegin = async (preTimes?: number) => {
-  if (state.isAppPlay) {
-    await api_cloudSetCurrentTime({
-      currentTime: 0,
-      songID: state.examSongId,
-    });
-  }
-  evaluatingData.isComplete = false;
-  evaluatingData.evaluatings = {};
-  evaluatingData.resultData = {};
-  evaluatingData.backtime = 0;
-  resetPlaybackToStart();
-  evaluatingData.isAudioPlayEnd = false;
-  const res = await startEvaluating(evaluatingData.contentData);
-  if (res?.api !== "startEvaluating") {
-    Snackbar.error("请在APP端进行评测");
-    evaluatingData.startBegin = false;
-    return;
-  }
-  if (res?.content?.reson) {
-    showToast(res.content?.des);
-    evaluatingData.startBegin = false;
-    return;
-  }
-  evaluatingData.startBegin = true;
-  if (evaluatingData.isDisabledPlayMusic) {
-    evaluatingData.isBeginMask = true;
-    // 先播放倒计时
-    await startCountdown();
-    state.playState = state.playState === "paused" ? "play" : "paused";
-    // 设置为开始播放时, 如果需要节拍,先播放节拍器
-    if ((state.playState === "play" && state.playType === "play" && state.needTick) || (state.playType === "sing" && state.needSingTick)) {
-      // 如果是系统节拍器 等系统节拍器播完了再播，如果是mp3节拍器 直接播
-      if ((state.playType === "play" && !state.isOpenMetronome) || (state.playType === "sing" && !state.isSingOpenMetronome)) {
-        const tickend = await handleStartTick();
-        console.log("🚀 ~ tickend:", tickend);
-        // 节拍器返回false, 取消播放
-        if (!tickend) {
-          state.playState = "paused";
-          evaluatingData.startBegin = false;
-          evaluatingData.isBeginMask = false;
-          return;
-        }
-      } else {
-        handleStartTick();
-      }
-    }
-    evaluatingData.isBeginMask = false;
-    onPlay();
-  }
-  if (evaluatingData.isErrorState) return;
-  //开始录音
-  // await api_startRecording({
-  // 	accompanimentState: state.setting.enableAccompaniment ? 1 : 0,
-  // 	firstNoteTime: preTimes || 0,
-  // });
-  let rate = state.speed / state.originSpeed;
-  rate = parseFloat(rate.toFixed(2));
-  await api_startRecordingCb(
-    {
-      accompanimentState: state.setting.enableAccompaniment ? 1 : 0,
-      firstNoteTime: preTimes || 0,
-      speedRate: rate, // 播放倍率
-    },
-    () => {
-      if (state.isAppPlay) {
-        setTimeout(() => {
-          sendOffsetTime(0);
-        }, 300);
-      }
-    }
-  );
-  // 如果开启了摄像头, 开启录制视频
-  if (state.setting.camera) {
-    console.log("开始录制视频");
-    await api_startCapture();
-  }
-  // 如果是midi音频评测，需要调用cloudPlay
-  if (state.isAppPlay) {
-    await api_cloudChangeSpeed({
-      speed: state.originSpeed,
-      originalSpeed: state.originSpeed,
-      songID: state.examSongId,
-    });
-    audioData.progress = 0;
-    audioListStart(state.playState);
-  }
-  evaluatingData.oneselfCancleEvaluating = false;
+	if (state.isAppPlay) {
+		await api_cloudSetCurrentTime({
+			currentTime: 0,
+			songID: state.examSongId,
+		})
+	}
+	evaluatingData.isComplete = false;
+	evaluatingData.evaluatings = {};
+	evaluatingData.resultData = {};
+	evaluatingData.backtime = 0;
+	resetPlaybackToStart();
+	evaluatingData.isAudioPlayEnd = false;
+	const res = await startEvaluating(evaluatingData.contentData);
+	if (res?.api !== "startEvaluating") {
+		Snackbar.error("请在APP端进行评测");
+		evaluatingData.startBegin = false;
+		return;
+	}
+	if (res?.content?.reson) {
+		showToast(res.content?.des);
+		evaluatingData.startBegin = false;
+		return;
+	}
+	evaluatingData.startBegin = true;
+	if (evaluatingData.isDisabledPlayMusic) {
+		evaluatingData.isBeginMask = true
+		// 先播放倒计时
+		await startCountdown()
+		state.playState = state.playState === "paused" ? "play" : "paused";
+		// 设置为开始播放时, 如果需要节拍,先播放节拍器
+		if (state.playState === "play" && (state.playType==="play"&&state.needTick)||(state.playType==="sing"&&state.needSingTick)) {
+			// 如果是系统节拍器 等系统节拍器播完了再播，如果是mp3节拍器 直接播
+			if((state.playType==="play" && !state.isOpenMetronome)||(state.playType==="sing" && !state.isSingOpenMetronome)){
+				const tickend = await handleStartTick();
+				console.log("🚀 ~ tickend:", tickend)
+				// 节拍器返回false, 取消播放
+				if (!tickend) {
+					state.playState = "paused";
+					evaluatingData.startBegin = false;
+					evaluatingData.isBeginMask = false
+					return;
+				}
+			}else{
+				handleStartTick()
+			}
+		}
+		evaluatingData.isBeginMask = false
+		onPlay();
+	}
+	if (evaluatingData.isErrorState) return
+	//开始录音
+	// await api_startRecording({
+	// 	accompanimentState: state.setting.enableAccompaniment ? 1 : 0,
+	// 	firstNoteTime: preTimes || 0,
+	// });
+	let rate = state.speed / state.originSpeed;
+	rate = parseFloat(rate.toFixed(2));
+	await api_startRecordingCb({
+		// accompanimentState: state.setting.enableAccompaniment ? 1 : 0,
+		accompanimentState: !state.accompany ? 0 : 1, // 评测没有伴奏时，静音播放
+		firstNoteTime: preTimes || 0,
+		speedRate: rate, // 播放倍率
+	}, () => {
+		if (state.isAppPlay) {
+			setTimeout(() => {
+				sendOffsetTime(0)
+			}, 300);
+		}
+	})
+	// 如果开启了摄像头, 开启录制视频
+	if (state.setting.camera) {
+		console.log("开始录制视频");
+		await api_startCapture();
+	}
+	// 如果是midi音频评测，需要调用cloudPlay
+	if (state.isAppPlay) {
+		await api_cloudChangeSpeed({
+			speed: state.originSpeed,
+			originalSpeed: state.originSpeed,
+			songID: state.examSongId,
+		});
+		audioData.progress = 0
+		audioListStart(state.playState);
+	}
+	evaluatingData.oneselfCancleEvaluating = false;
 };
 
 /** 播放音乐 */

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -1,4 +1,30 @@
 .container {
+  &.follow{
+    .head{
+        background: url("../../../../page-instrument/header-top/image/headImg1.png") no-repeat;
+        background-size: 100% 100%; 
+    }
+    .pickerCon{
+        background: #ACDDEA;
+        box-shadow: 0px 4px 0px 0px #5EA2B9;
+        .pickerBox{
+            background: #E3F3F5;
+        }
+    }
+}
+&.evaluating{
+    .head{
+        background: url("../../../../page-instrument/header-top/image/headImg2.png") no-repeat;
+        background-size: 100% 100%; 
+    }
+    .pickerCon{
+        background: #B0CDFF;
+        box-shadow: 0px 4px 0px 0px #759CE4;
+        .pickerBox{
+            background: #EAF1FB;
+        }
+    }
+}
   .head {
       background: url("../../../../page-instrument/header-top/image/headImg.png") no-repeat;
       background-size: 100% 100%;
@@ -7,11 +33,11 @@
       position: relative;
       .headTit{
           position: absolute;
-          bottom: 9px;
+          bottom: 8px;
           left: 50%;
           transform: translateX(-50%);
-          width: 38px;
-          height: 18px;
+          width: 76px;
+          height: 20px;
       }        
       .closeImg{
           position: absolute;

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -39,7 +39,7 @@ export default defineComponent({
 			// console.log(myPicker.value,99999,selValues.value,props.partIndex)
 		});
     return () => (
-      <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer]}>
+      <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer, styles[state.modeType]]}>
         <div class={styles.head}>
           <img class={styles.headTit} src={changeName} />
           <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={() => emit("close")} />

vite.config.ts

@@ -77,7 +77,6 @@ export default defineConfig({
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
         target: "https://dev.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-        //target: "https://dev.resource.colexiu.com",
         // target: "https://test.kt.colexiu.com",
         //target: "https://mec.colexiu.com",
         changeOrigin: true,