更新优化

instrument.html

@@ -45,7 +45,7 @@
   <img id="loading" class="show" src="/loading.svg" alt="loading" />
   <script>
     // 处理课堂乐器老师端打开听音练习时去掉加载动画
-    if (location.href.indexOf('view-figner') >= 0 && location.href.indexOf('platform=pc') >= 0) {
+    if (location.href.indexOf('view-figner') >= 0 && location.href.indexOf('platform=pc') >= 0 && location.href.indexOf('linkSource=class') >= 0) {
       var _loading = document.getElementById("loading");
       _loading && document.body.removeChild(_loading);
     }

osmd-extended

@@ -1 +1 @@
-Subproject commit 4f276b25710d8d92e5985647329c152c9390b65c
+Subproject commit c61975028e8f71a7448a92ba440fc9297a17a2ed

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

@@ -436,14 +436,15 @@
     .noteContent {
         display: flex;
         position: relative;
-        max-width: calc(100% - 92px);
+        // max-width: calc(100% - 92px);
+        max-width: 73%;
         border-radius: 25px;
         background: rgba(255, 255, 255, 0.5);
         border: 1px solid rgba(255, 255, 255, 0.6);
         overflow: hidden;
 
         &.noteContentOther {
-            max-width: calc(100% - 92px - 52px - 5Px);
+            // max-width: calc(100% - 92px - 52px - 5Px);
         }
 
         &.noteContentWrap {
@@ -806,11 +807,18 @@
 }
 
 .fixedRightBtns {
+    // position: fixed;
+    // right: 12px;
+    // top: 50%;
+    // transform: translateY(-50%);
+
     position: fixed;
-    right: 12px;
+    left: 12px;
     top: 50%;
+    right: auto;
     transform: translateY(-50%);
 
+
     .baseBtn {
         // width: 60px;
         // height: 45px;
@@ -1256,4 +1264,25 @@
     // height: 310px;
     background: #FFFFFF;
     border-radius: 12px;
+}
+
+.linkSourceClass {
+    .head {
+        display: none;
+        opacity: 0;
+    }
+
+    .noteContentOther {
+        max-width: 75% !important
+    }
+
+    // .left {
+    //     // padding: 26px 5px 26px 18px;
+    //     padding-top: 26px;
+    //     padding-left: 18px;
+    // }
+
+    // .backBtn {
+    //     display: none;
+    // }
 }

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

@@ -41,6 +41,7 @@ export default defineComponent({
     const code = mappingVoicePart(query.code, "INSTRUMENT");
     const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
     const data = reactive({
+      linkSource: query.linkSource, // 来源，目前只有课件里使用
       loading: true,
       subject: subject as any,
       realKey: 0,
@@ -386,7 +387,7 @@ export default defineComponent({
       handleStop();
       if (props.isComponent) {
         // 返回的时候默认横屏
-        api_setRequestedOrientation(0);
+        // api_setRequestedOrientation(0);
         emit("close");
         return;
       } else if (state.platform === IPlatform.PC) {
@@ -490,7 +491,11 @@ export default defineComponent({
       () => pageVisible.value,
       (val) => {
         if (val === "hidden") {
-          console.log("页面隐藏停止播放");
+          clearTimeout(playAction.timer);
+          playAction.listenLock = false;
+          playAction.listenTipsStatus = false;
+          playAction.exampleAnser = {};
+          resetMode(true, 0);
           handleStop();
           gaumntPause();
         }
@@ -499,6 +504,11 @@ export default defineComponent({
     /** 课件播放 */
     const changePlay = (res: any) => {
       if (res?.data?.api === "setPlayState") {
+        clearTimeout(playAction.timer);
+        playAction.listenLock = false;
+        playAction.listenTipsStatus = false;
+        playAction.exampleAnser = {};
+        resetMode(true, 0);
         handleStop();
         gaumntPause();
       }
@@ -609,6 +619,7 @@ export default defineComponent({
       /** 0: 未答，1: 答对，2: 答错 */
       userAnswerStatus: 0 as 0 | 1 | 2, // 用户回答状态
       userAnswer: {} as any, // 用户答的数据
+      timer: null as any,
     });
     const onActionPlay = async () => {
       playAction.resetAction = false;
@@ -636,7 +647,7 @@ export default defineComponent({
     const fingeringPlay = (note: any, timer = 1500, showNote = true) => {
       return new Promise((resolve) => {
         noteClick(note, showNote);
-        setTimeout(() => {
+        playAction.timer = setTimeout(() => {
           resolve(note);
         }, timer);
       });
@@ -651,7 +662,7 @@ export default defineComponent({
       playAction.listenModeStatus = true; // 是否开始听音
       playAction.listenLock = true; // 锁
       playAction.listenTipsStatus = true;
-      setTimeout(() => {
+      playAction.timer = setTimeout(() => {
         playAction.listenTipsStatus = false;
         playAction.listenLock = false; // 锁
       }, 2000);
@@ -671,7 +682,7 @@ export default defineComponent({
       data.realKey = 0;
       playAction.exampleAnser = {};
       gaumntPause();
-      setTimeout(async () => {
+      playAction.timer = setTimeout(async () => {
         // 设置答题数据
         randomIndex = Math.floor(Math.random() * data.notes.length);
         playAction.standardAnswer = data.notes[randomIndex];
@@ -773,28 +784,28 @@ export default defineComponent({
       if (data.fingeringMode === "scaleMode") {
         if (data.subject === "hulusi-flute") {
           return {
-            paddingTop: "3.1rem",
-            paddingBottom: ".8rem",
+            paddingTop: "1rem",
+            paddingBottom: ".5rem",
           };
         } else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
           return {
-            paddingTop: "4rem",
-            paddingBottom: ".8rem",
+            paddingTop: "1rem",
+            paddingBottom: ".5rem",
           };
         } else if (data.subject === "pan-flute") {
           return {
-            paddingTop: "0",
+            paddingTop: "1rem",
             paddingBottom: "0",
           };
         } else if (data.subject === "ocarina") {
           return {
-            paddingTop: "1.2rem",
+            paddingTop: "1rem",
             paddingBottom: "0",
           };
         } else if (data.subject === "melodica") {
           return {
-            paddingTop: "2.8rem",
-            paddingBottom: "1.8rem",
+            paddingTop: "1.8rem",
+            paddingBottom: "0.2rem",
           };
         } else {
           return {
@@ -805,17 +816,17 @@ export default defineComponent({
       } else {
         if (data.subject === "hulusi-flute") {
           return {
-            paddingTop: "3.1rem",
+            paddingTop: "1rem",
             paddingBottom: "0rem",
           };
         } else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
           return {
-            paddingTop: "3rem",
+            paddingTop: "1rem",
             paddingBottom: ".5rem",
           };
         } else if (data.subject === "pan-flute") {
           return {
-            paddingTop: "0",
+            paddingTop: "1rem",
             paddingBottom: "0",
           };
         } else if (data.subject === "ocarina") {
@@ -825,8 +836,8 @@ export default defineComponent({
           };
         } else if (data.subject === "melodica") {
           return {
-            paddingTop: "2.8rem",
-            paddingBottom: "0.8rem",
+            paddingTop: "1.8rem",
+            paddingBottom: "0.2rem",
           };
         } else {
           return {
@@ -926,7 +937,7 @@ export default defineComponent({
       const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
       const canTizhi = Array.isArray(relationship[1]);
       return (
-        <div class={[styles.fingerBox, state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight]}>
+        <div class={[styles.fingerBox, state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight, data.linkSource === "class" ? styles.linkSourceClass : ""]}>
           <div
             class={styles.head}
             style={{
@@ -1300,7 +1311,7 @@ export default defineComponent({
                 data.activeTone = {} as any;
                 resetElement();
                 resetMode(true, 0);
-                api_setRequestedOrientation(orientationDirection.value);
+                // api_setRequestedOrientation(orientationDirection.value);
 
                 data.changeSubjectShow = false;
                 // 设置屏幕方向

vite.config.ts

@@ -7,77 +7,77 @@ import postCssPxToRem from "postcss-pxtorem";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	base: "./",
-	resolve: {},
-	plugins: [
-		// mkcert(), // 本地https
-		legacy({
-			targets: ['Chrome 63'],
-			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
-			modernPolyfills: true
-		  }),
-		vue(),
-		vueJsx(),
-	],
-	css: {
-		postcss: {
-			plugins: [
-				postCssPxToRem({
-					rootValue: 37.5,
-					propList: ["*"],
-					selectorBlackList: [".norem"],
-				}),
-			],
-		},
-	},
-	build: {
-		rollupOptions: {
-			input: {
-				gym: resolve(__dirname, "index.html"),
-				colexiu: resolve(__dirname, "colexiu.html"),
-				orchestra: resolve(__dirname, "orchestra.html"),
-				"report-share": resolve(__dirname, "report-share.html"),
-				instrument: resolve(__dirname, "instrument.html"),
-			},
-		},
-	},
-	server: {
-		cors: true,
-		port: 3000,
-		// https: true,
-		proxy: {
-			"^/gym/.*": {
-				target: "https://mstutest.dayaedu.com",
-				// target: "https://online.dayaedu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/gym/, ""),
-			},
-			"^/colexiu/.*": {
-				target: "https://dev.colexiu.com",
-				// target: "https://online.colexiu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/colexiu/, ""),
-			},
-			"^/orchestra/.*": {
-				target: "https://test.lexiaoya.cn",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/orchestra/, ""),
-			},
-			"^/instrument/.*": {
-				// target: "https://kt.colexiu.com",
-				// target: "https://test.lexiaoya.cn",
-				// target: "https://dev.kt.colexiu.com",
-				// target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-				target: "https://test.resource.colexiu.com",
-				// target: "https://test.kt.colexiu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/instrument/, ""),
-			},
-		},
-	},
-	preview:{
-		port: 3000,
-		host: '192.168.3.114'
-	}
+  base: "./",
+  resolve: {},
+  plugins: [
+    // mkcert(), // 本地https
+    legacy({
+      targets: ["Chrome 63"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+      modernPolyfills: true,
+    }),
+    vue(),
+    vueJsx(),
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: 37.5,
+          propList: ["*"],
+          selectorBlackList: [".norem"],
+        }),
+      ],
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        gym: resolve(__dirname, "index.html"),
+        colexiu: resolve(__dirname, "colexiu.html"),
+        orchestra: resolve(__dirname, "orchestra.html"),
+        "report-share": resolve(__dirname, "report-share.html"),
+        instrument: resolve(__dirname, "instrument.html"),
+      },
+    },
+  },
+  server: {
+    cors: true,
+    port: 3000,
+    // https: true,
+    proxy: {
+      "^/gym/.*": {
+        target: "https://mstutest.dayaedu.com",
+        // target: "https://online.dayaedu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/gym/, ""),
+      },
+      "^/colexiu/.*": {
+        target: "https://dev.colexiu.com",
+        // target: "https://online.colexiu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/colexiu/, ""),
+      },
+      "^/orchestra/.*": {
+        target: "https://test.lexiaoya.cn",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/orchestra/, ""),
+      },
+      "^/instrument/.*": {
+        // target: "https://kt.colexiu.com",
+        // target: "https://test.lexiaoya.cn",
+        target: "https://test.kt.colexiu.com",
+        // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        // target: "https://test.resource.colexiu.com",
+        // target: "https://test.kt.colexiu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/instrument/, ""),
+      },
+    },
+  },
+  preview: {
+    port: 3000,
+    host: "192.168.3.114",
+  },
 });
 // vite.config.js