修改引导显示

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

@@ -184,6 +184,13 @@
     right: 24px;
     bottom: -48px;
   }
+
+  &.popoverClose {
+    .driver-popover-next-btn {
+      bottom: 0;
+      right: 0;
+    }
+  }
 }
 
 .popoverClass9 {
@@ -266,6 +273,18 @@
   }
 }
 
+.popoverClassE2 {
+  width: 257px;
+  height: 235px;
+  background: url("./images/evaluating/e4.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 17px;
+    bottom: 22px;
+  }
+}
+
 .popoverClassER1 {
   width: 257px;
   height: 178px;

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

@@ -18,6 +18,8 @@ const endGuide = (guideInfo: any) => {
 type ButtonStatus = {
   /** 声部状态 */
   subjectStatus?: Boolean;
+  /** 练习模式 */
+  modelTypeStatus?: Boolean;
 };
 
 /** 练习模式 */
@@ -25,7 +27,7 @@ export const PractiseDriver = defineComponent({
   name: "PractiseDriver",
   props: {
     // 按钮状态
-    stautsAll: {
+    statusAll: {
       type: Object as PropType<ButtonStatus>,
       default: () => {},
     },
@@ -46,29 +48,16 @@ export const PractiseDriver = defineComponent({
       // 指法
       let length = state.setting.displayFingering ? 10 : 9;
       // 声部
-      if (!props.stautsAll.subjectStatus) {
+      if (!props.statusAll.subjectStatus) {
+        length -= 1;
+      }
+      // 练习模式
+      if(!props.statusAll.modelTypeStatus) {
         length -= 1;
       }
 
-      // 乐器方向不一样引导位置不一样
-      const instrumentDirection: DriveStep = {
-        element: ".driver-7",
-        popover: {
-          title: "",
-          description: "",
-          popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
-          align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
-          side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
-          nextBtnText: "下一步7/" + length,
-          showButtons: ["next"],
-          onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-            if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
-          },
-          onCloseClick: () => {
-            onDriverClose();
-          },
-        },
-      };
+      console.log(props.statusAll, 'statusAll', length)
+
       let options: Config = {
         showProgress: false,
         allowClose: false,
@@ -163,7 +152,8 @@ export const PractiseDriver = defineComponent({
         ] as DriveStep[],
       };
 
-      if (props.stautsAll.subjectStatus) {
+
+      if (props.statusAll.subjectStatus) {
         options.steps?.push({
           element: ".driver-10",
           popover: {
@@ -198,56 +188,58 @@ export const PractiseDriver = defineComponent({
       });
       // 是否有指法图
       if (state.setting.displayFingering) {
+        // 乐器方向不一样引导位置不一样
         options.steps?.push(
-          instrumentDirection,
           {
-            element: ".driver-8",
+            element: ".driver-7",
             popover: {
               title: "",
               description: "",
-              popoverClass: "popoverClass popoverClass8",
-              align: "start",
-              side: "bottom",
-              nextBtnText: `下一步${options.steps.length + 1}/${length}`,
+              popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
+              align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
+              side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
+              nextBtnText: `下一步${options.steps?.length + 1}/${length}`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                options.config.stageRadius = 1000;
-                options.config.stagePadding = 0;
-                try {
-                  const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
-                } catch {}
-              },
-            },
-          },
-          {
-            element: ".driver/" + length,
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass9 popoverClose",
-              align: "end",
-              side: "bottom",
-              prevBtnText: "再看一遍",
-              doneBtnText: "完成",
-              showButtons: ["next", "previous"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                options.config.stageRadius = 1000;
-                options.config.stagePadding = 0;
-                try {
-                  const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = -((rect?.width || 0) / 2 - 8) + "px";
-                } catch {}
+                if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
               },
-              onPrevClick: () => {
-                driverObj.drive(0);
-              },
-              onNextClick: () => {
+              onCloseClick: () => {
                 onDriverClose();
               },
             },
-          }
+          },
+          
         );
+      }
+
+      if(props.statusAll.modelTypeStatus) {
+        options.steps?.push({
+          element: ".driver-8",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass8 popoverClose",
+            align: "start",
+            side: "bottom",
+            prevBtnText: "再看一遍",
+            doneBtnText: "完成",
+            showButtons: ["next", "previous"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              options.config.stageRadius = 1000;
+              options.config.stagePadding = 0;
+              try {
+                const rect = options.state.activeElement?.getBoundingClientRect();
+                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
+              } catch {}
+            },
+            onPrevClick: () => {
+              driverObj.drive(0);
+            },
+            onNextClick: () => {
+              onDriverClose();
+            },
+          },
+        });
       } else {
         options.steps?.push(
           {
@@ -299,15 +291,13 @@ export const PractiseDriver = defineComponent({
           }
         );
       }
+
       return options;
     };
 
     let driverObj: any;
 
-    let timer: any;
     const handleClickOutside = (event: any) => {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
         // 如果高亮没有结束则下进行下一步
         if (driverNextStatus.value) return;
         if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
@@ -317,7 +307,6 @@ export const PractiseDriver = defineComponent({
             driverObj.moveNext(); // 跳转到下一步
           }
         }
-      }, 200);
     };
 
     const guideInfo = ref({} as any);
@@ -339,8 +328,9 @@ export const PractiseDriver = defineComponent({
           document.addEventListener("click", handleClickOutside, true);
           driverObj = driver(driverOptions());
           nextTick(() => {
-            driverObj.drive(0);
+            driverObj.drive(6);
             showCloseBtn.value = true;
+            state.hasDriverPop = true;
           });
         }
       } catch (e) {
@@ -361,6 +351,7 @@ export const PractiseDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
+      state.hasDriverPop = false
     };
 
     return () => (
@@ -383,7 +374,7 @@ export const FollowDriver = defineComponent({
   name: "FollowDriver",
   props: {
     // 按钮状态
-    stautsAll: {
+    statusAll: {
       type: Object as PropType<ButtonStatus>,
       default: () => {},
     },
@@ -401,7 +392,7 @@ export const FollowDriver = defineComponent({
     };
 
     // 声部
-    let length = props.stautsAll.subjectStatus ? 4 : 3;
+    let length = props.statusAll.subjectStatus ? 4 : 3;
     const driverOptions: Config = {
       showProgress: false,
       allowClose: false,
@@ -451,7 +442,7 @@ export const FollowDriver = defineComponent({
       ],
     };
 
-    if (props.stautsAll.subjectStatus) {
+    if (props.statusAll.subjectStatus) {
       driverOptions.steps?.push({
         element: ".driver-10",
         popover: {
@@ -520,10 +511,11 @@ export const FollowDriver = defineComponent({
         }
         if (!(guideInfo.value && guideInfo.value.followDriver)) {
           document.addEventListener("click", handleClickOutside, true);
-          driverObj = driver(driverOptions);
           nextTick(() => {
+            driverObj = driver(driverOptions);
             driverObj.drive(0);
             showCloseBtn.value = true;
+            state.hasDriverPop = true;
           });
         }
       } catch (e) {
@@ -544,6 +536,7 @@ export const FollowDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
+      state.hasDriverPop = false
     };
 
     return () => (
@@ -566,7 +559,7 @@ export const EvaluatingDriver = defineComponent({
   name: "EvaluatingDriver",
   props: {
     // 按钮状态
-    stautsAll: {
+    statusAll: {
       type: Object as PropType<ButtonStatus>,
       default: () => {},
     },
@@ -583,6 +576,9 @@ export const EvaluatingDriver = defineComponent({
       } catch {}
     };
 
+    // 声部
+    let length = props.statusAll.subjectStatus ? 5 : 4;
+
     const driverOptions: Config = {
       showProgress: false,
       allowClose: false,
@@ -606,7 +602,7 @@ export const EvaluatingDriver = defineComponent({
             popoverClass: "popoverClass popoverClassE1",
             align: "end",
             side: "top",
-            nextBtnText: "下一步1/3",
+            nextBtnText: `下一步1/${length}`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
@@ -615,14 +611,14 @@ export const EvaluatingDriver = defineComponent({
           },
         },
         {
-          element: ".driver-5",
+          element: ".driver-4",
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass5",
+            popoverClass: "popoverClass popoverClassE2",
             align: "start",
             side: "top",
-            nextBtnText: "下一步2/3",
+            nextBtnText: `下一步2/${length}`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -630,29 +626,64 @@ export const EvaluatingDriver = defineComponent({
           },
         },
         {
-          element: ".driver-6",
+          element: ".driver-5",
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass6 popoverClose",
+            popoverClass: "popoverClass popoverClass5",
             align: "start",
             side: "top",
-            prevBtnText: "再看一遍",
-            doneBtnText: "完成",
-            showButtons: ["next", "previous"],
+            nextBtnText: `下一步3/${length}`,
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
-            onPrevClick: () => {
-              driverObj.drive(0);
-            },
-            onNextClick: () => {
-              onDriverClose();
-            },
           },
-        },
+        }
       ],
     };
+
+    if (props.statusAll.subjectStatus) {
+      driverOptions.steps?.push({
+        element: ".driver-10",
+        popover: {
+          title: "",
+          description: "",
+          popoverClass: "popoverClass popoverClass10",
+          align: "start",
+          side: "top",
+          nextBtnText: `下一步${driverOptions.steps.length + 1}/${length}`,
+          showButtons: ["next"],
+          onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+            driverInitialPosition(popover, options);
+          },
+        },
+      });
+    }
+
+    driverOptions.steps?.push({
+      element: ".driver-6",
+      popover: {
+        title: "",
+        description: "",
+        popoverClass: "popoverClass popoverClass6 popoverClose",
+        align: "start",
+        side: "top",
+        prevBtnText: "再看一遍",
+        doneBtnText: "完成",
+        showButtons: ["next", "previous"],
+        onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+          driverInitialPosition(popover, options);
+        },
+        onPrevClick: () => {
+          driverObj.drive(0);
+        },
+        onNextClick: () => {
+          onDriverClose();
+        },
+      },
+    });
+
     let driverObj: any;
 
     const handleClickOutside = (event: any) => {
@@ -682,10 +713,11 @@ export const EvaluatingDriver = defineComponent({
         }
         if (!(guideInfo.value && guideInfo.value.evaluatingDriver)) {
           document.addEventListener("click", handleClickOutside, true);
-          driverObj = driver(driverOptions);
           nextTick(() => {
+            driverObj = driver(driverOptions);
             driverObj.drive(0);
             showCloseBtn.value = true;
+            state.hasDriverPop = true;
           });
         } else {
           driverObj.destroy();
@@ -706,7 +738,9 @@ export const EvaluatingDriver = defineComponent({
       }
       endGuide(guideInfo.value);
       driverObj?.destroy();
+      document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
+      state.hasDriverPop = false;
     };
 
     return () => (
@@ -857,10 +891,11 @@ export const EvaluatingResultDriver = defineComponent({
         }
         if (!(guideInfo.value && guideInfo.value.evaluatingResultDriver)) {
           document.addEventListener("click", handleClickOutside, true);
-          driverObj = driver(driverOptions);
           nextTick(() => {
+            driverObj = driver(driverOptions);
             driverObj.drive(0);
             showCloseBtn.value = true;
+            state.hasDriverPop = true;
           });
         }
       } catch (e) {
@@ -868,7 +903,11 @@ export const EvaluatingResultDriver = defineComponent({
       }
     };
 
-    getAllGuidance();
+    onMounted(() => {
+      nextTick(() => {
+        getAllGuidance();
+      })
+    })
 
     // 结束关闭弹窗
     const onDriverClose = () => {
@@ -881,6 +920,7 @@ export const EvaluatingResultDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
+      state.hasDriverPop = false
     };
 
     return () => (
@@ -1146,10 +1186,10 @@ export const EvaluatingReportDriver = defineComponent({
         if (!(guideInfo.value && guideInfo.value.evaluatingReportDriver)) {
           // 监听点击事件以实现点击空白区域跳转到下一步
           document.addEventListener("click", handleClickOutside, true);
-          driverObj = driver(driverOptions);
           nextTick(() => {
+            driverObj = driver(driverOptions);
             driverObj.drive();
-
+            state.hasDriverPop = true;
             showCloseBtn.value = true;
           });
         }
@@ -1171,6 +1211,7 @@ export const EvaluatingReportDriver = defineComponent({
       driverObj.destroy();
       document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
+      state.hasDriverPop = false
     };
 
     return () => (

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

@@ -27,6 +27,7 @@ import { browser, getBehaviorId } from "/src/utils";
 import { api_musicPracticeRecordSave } from "../../api";
 import { getAudioDuration } from "/src/view/audio-list";
 import { debounce } from "/src/utils";
+import { EvaluatingResultDriver } from "../../custom-plugins/guide-driver";
 
 export default defineComponent({
   name: "evaluatResult",
@@ -180,6 +181,9 @@ export default defineComponent({
                 <img src={ckzpImg} class={[styles.ctrlsBtn, "evaluting-result-4", data.saveLoading ? styles.disablued : ""]} onClick={() => emit("close", "look")} />
               </div>
             </div>
+
+            {/* 评测模式-结果弹窗 功能引导 加载音频完成 不是会员 */}
+            {evaluatingData.resulstMode && !evaluatingData.hideResultModal && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingResultDriver />}
           </div>
         )}
       </>

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

@@ -845,31 +845,30 @@ export default defineComponent({
         {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}
 
         {/* 练习模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "practise" && headTopData.modeType !== "show" && !query.isCbs && state.audioDone && !state.isVip && (
+        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isVip && (
           <PractiseDriver
-            stautsAll={{
+            statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
+              modelTypeStatus: toggleBtn.value.display
             }}
           />
         )}
         {/* 跟练模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "follow" && headTopData.modeType !== "show" && !query.isCbs && state.audioDone && !state.isVip && (
+        {state.modeType === "follow" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isVip && (
           <FollowDriver
-            stautsAll={{
+            statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
             }}
           />
         )}
         {/* 评测模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && headTopData.modeType !== "show" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
+        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
           <EvaluatingDriver
-            stautsAll={{
+            statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
             }}
           />
         )}
-        {/* 评测模式-结果弹窗 功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && headTopData.modeType !== "show" && evaluatingData.resulstMode && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingResultDriver />}
       </>
     );
   },