style: UI自测修改

instrument.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport"
     content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
-  <title>AI学练</title>
+  <title>管乐迷</title>
   <link rel="icon" href="/favicon.ico?v=1" />
   <script src="/flexible.js" charset="UTF-8"></script>
   <style>

src/helpers/metronome.ts

@@ -179,6 +179,42 @@ class Metronome {
 		// toggleLine()
 		metronomeData.isClick = false;
 	};
+	
+	// 暂停的时候，点击音符，需要找到对应的节拍器的位置
+	findMetronomePosition = (currentTime: number) => {
+		console.log('取消选段',currentTime)
+		const originTime = currentTime;
+		// if (!state.sectionStatus){
+		// 	currentTime = setCurrentTime(currentTime);
+		// }
+		let index = -1;
+		let activeMetro = -1;
+		for (let i = 0; i < metronomeData.metroList.length; i++) {
+			const item = metronomeData.metroList[i];
+			if (currentTime >= item) {
+				// console.log(currentTime , item)
+				index = i;
+				activeMetro = item;
+			} else {
+				break;
+			}
+		}
+		if (index > -1 && metronomeData.activeIndex !== index) {
+			metronomeData.activeIndex = index;
+			// console.log("节拍器播放", '节拍器索引:',metronomeData.activeIndex, '节拍器时间:',currentTime, '实际时间:',originTime,'xml计算的时间:',metronomeData.metroList[metronomeData.activeIndex]);
+			metronomeData.activeMetro = this.getStep(activeMetro);
+			console.log("🚀 ~ metronomeData.activeMetro",metronomeData.activeMetro.measureNumberIndex, metronomeData.activeMetro.index)
+			tickTockPlayTime = currentTime
+			// this.playAudio();
+			metronomeData.isClick = false;
+			return;
+		}
+		metronomeData.isClick = false;
+		if (currentTime === 0) {
+			metronomeData.activeMetro = {}
+		}
+	};
+
 	// 播放
 	playAudio = () => {
 		/* 如果是 评测模式且不为MIDI并且节拍器资源加载成功的时候  不运行节拍器播放*/

src/page-instrument/custom-plugins/guide-driver/index.less

@@ -506,33 +506,37 @@
 }
 
 .popoverClassReport1 {
+  transform: translateY(10px);
   width: 270px;
-  height: 142px;
+  height: 145px;
   background: url("./images/report/r1.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -51px;
+    bottom: -36px;
     right: 17px;
   }
 }
 
 .popoverClassReport2 {
+  transform: translateY(10px);
   width: 270px;
-  height: 142px;
+  height: 145px;
   background: url("./images/report/r2.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -51px;
+    bottom: -36px;
     right: 17px;
   }
 
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -51px;
+      bottom: -36px;
       left: 0;
+      right: 15px;
+      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {
@@ -549,21 +553,24 @@
 }
 
 .popoverClassReport3 {
+  transform: translateY(10px);
   width: 270px;
-  height: 142px;
+  height: 145px;
   background: url("./images/report/r3.png") no-repeat center;
   background-size: contain;
 
   .driver-popover-next-btn {
-    bottom: -51px;
+    bottom: -36px;
     right: 17px;
   }
 
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -51px;
+      bottom: -36px;
       left: 0;
+      right: 15px;
+      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {
@@ -580,8 +587,9 @@
 }
 
 .popoverClassReport4 {
+  transform: translateY(10px);
   width: 270px;
-  height: 142px;
+  height: 145px;
   background: url("./images/report/r5.png") no-repeat center;
   background-size: contain;
 
@@ -592,8 +600,10 @@
   &.popoverClose {
     .driver-popover-navigation-btns {
       position: absolute;
-      bottom: -51px;
+      bottom: -36px;
       left: 0;
+      right: 15px;
+      justify-content: flex-start;
     }
 
     .driver-popover-next-btn {

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -1122,7 +1122,7 @@ export const EvaluatingReportDriver = defineComponent({
       options.config.stagePadding = 0;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
-        popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * position - 4 + "px";
+        popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 34 + "px";
       } catch {}
     };
 
@@ -1146,7 +1146,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 0;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
                 } catch {}
               },
             },
@@ -1167,7 +1167,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 5;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
                 } catch {}
               },
               onPrevClick: () => {
@@ -1196,7 +1196,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 0;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
                 } catch {}
               },
               onPrevClick: () => {
@@ -1218,7 +1218,7 @@ export const EvaluatingReportDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassReport1",
-            align: "start",
+            align: "end",
             side: "bottom",
             nextBtnText: `下一步 (1/${count})`,
             showButtons: ["next"],
@@ -1242,7 +1242,7 @@ export const EvaluatingReportDriver = defineComponent({
               options.config.stagePadding = 0;
               try {
                 const rect = options.state.activeElement?.getBoundingClientRect();
-                popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
               } catch {}
             },
           },
@@ -1266,7 +1266,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 0;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
                 } catch {}
               },
             },
@@ -1287,7 +1287,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 5;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 34 + "px";
                 } catch {}
               },
               onPrevClick: () => {

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

@@ -298,6 +298,7 @@
 
                     input[type="range"]::-webkit-slider-runnable-track {
                         height: 4px;
+                        //background: #fff;
                     }
 
                     input[type="range"]::-webkit-slider-thumb {
@@ -305,6 +306,7 @@
                         height: 12px;
                         margin-top: -4px;
                         box-shadow: initial;
+                        background: #01C1B5;
                     }
 
                     .plyr__progress__buffer {
@@ -398,6 +400,40 @@
         }
     }
 }
+.videoPlayerBox {
+    :global {
+        .plyr {
+            .plyr__controls {
+                .plyr__controls__item.plyr__control {
+                    .icon--pressed {
+                        background: url("./image/pause2.png") no-repeat;
+                    }
+
+                    .icon--not-pressed {
+                        background: url("./image/play2.png") no-repeat;
+                    }
+                }
+
+                .plyr__controls__item.plyr__progress__container {
+                    input[type=range] {
+                        color: #fff;
+                    }
+                    input[type="range"]::-webkit-slider-thumb {
+                        background: #fff;
+                    }
+
+                    .plyr__progress__buffer {
+                        height: 4px;
+                        color: rgba(255, 255, 255, 0.30);
+                        background-color: rgba(255, 255, 255, 0.30);
+                        margin-top: -2px;
+                    }
+                }
+
+            }
+        }
+    }
+}
 
 .demos {
     position: fixed;

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

@@ -473,7 +473,7 @@ export default defineComponent({
               shareData._plrl?.pause();
             }}
           >
-            <div class={[styles.playerBox, isPad && styles.padPlayerBox]}>
+            <div class={[styles.playerBox, isPad && styles.padPlayerBox, mediaType.value === "video" && styles.videoPlayerBox]}>
               {mediaType.value === "audio" ? (
                 <div class={styles.audioBox}>
                   <div class={styles.gramoBox}>

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

@@ -1065,7 +1065,7 @@ export default defineComponent({
       window.removeEventListener("resize", onResize);
       const fingeringContainer = document.getElementById("fingeringContainer");
       fingeringContainer?.removeEventListener("wheel", handleWheel);
-      document.title = "Ai学练";
+      document.title = "管乐迷";
     });
 
     const containerBox = computed(() => {

src/state.ts

@@ -800,6 +800,7 @@ export const skipNotePlay = async (itemIndex: number, isStart = false, handType?
     gotoNext(item, true);
     // 不需要播放节拍器的声音，因为音频带有节拍器的声音
     // metronomeData.metro?.sound(itemTime);
+    metronomeData?.metro?.findMetronomePosition(itemTime);
     if (state.isAppPlay) {
       await api_cloudSetCurrentTime({
         currentTime: itemTime * 1000,