修改引导

src/page-instrument/component/mode-type-mode/index.tsx

@@ -48,6 +48,7 @@ export default defineComponent({
       // console.log("🚀 ~ student:", student);
       if (storeData.user.vipMember) {
         data.showVip = false;
+        state.isVip = false;
         openGuid();
       }
     };

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

@@ -193,6 +193,19 @@
   background-size: contain;
 }
 
+.popoverClass10 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/practise/d10.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+}
+
+
 .popoverClose {
   .driver-popover-navigation-btns {
     position: absolute;

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

@@ -1,4 +1,4 @@
-import { Teleport, defineComponent, nextTick, onMounted, ref } from "vue";
+import { PropType, Teleport, defineComponent, nextTick, onMounted, ref } from "vue";
 import { Config, DriveStep, PopoverDOM, State, driver } from "driver.js";
 import "driver.js/dist/driver.css";
 import state from "/src/state";
@@ -12,10 +12,26 @@ const endGuide = (guideInfo: any) => {
   }
 };
 
+/**
+ * 按钮状态
+ */
+type ButtonStatus = {
+  /** 声部状态 */
+  subjectStatus?: Boolean;
+};
+
 /** 练习模式 */
 export const PractiseDriver = defineComponent({
   name: "PractiseDriver",
-  setup() {
+  props: {
+    // 按钮状态
+    stautsAll: {
+      type: Object as PropType<ButtonStatus>,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const driverNextStatus = ref(false);
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
@@ -27,7 +43,12 @@ export const PractiseDriver = defineComponent({
     };
 
     const driverOptions = (): Config => {
-      let length = state.setting.displayFingering ? 9 : 8;
+      // 指法
+      let length = state.setting.displayFingering ? 10 : 9;
+      // 声部
+      if (!props.stautsAll.subjectStatus) {
+        length -= 1;
+      }
 
       // 乐器方向不一样引导位置不一样
       const instrumentDirection: DriveStep = {
@@ -56,6 +77,12 @@ export const PractiseDriver = defineComponent({
         onCloseClick: () => {
           onDriverClose();
         },
+        onHighlightStarted: () => {
+          driverNextStatus.value = true;
+        },
+        onHighlighted: () => {
+          driverNextStatus.value = false;
+        },
         steps: [
           {
             element: ".driver-1",
@@ -133,23 +160,42 @@ export const PractiseDriver = defineComponent({
               },
             },
           },
-          {
-            element: ".driver-6",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass6",
-              align: "start",
-              side: "top",
-              nextBtnText: "下一步6/" + length,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-              },
-            },
-          },
         ] as DriveStep[],
       };
+
+      if (props.stautsAll.subjectStatus) {
+        options.steps?.push({
+          element: ".driver-10",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass10",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步${options.steps.length + 1}/${length}`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
+            },
+          },
+        });
+      }
+
+      options.steps?.push({
+        element: ".driver-6",
+        popover: {
+          title: "",
+          description: "",
+          popoverClass: "popoverClass popoverClass6",
+          align: "start",
+          side: "top",
+          nextBtnText: `下一步${options.steps.length + 1}/${length}`, //"下一步6/" + length,
+          showButtons: ["next"],
+          onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+            driverInitialPosition(popover, options);
+          },
+        },
+      });
       // 是否有指法图
       if (state.setting.displayFingering) {
         options.steps?.push(
@@ -162,7 +208,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass8",
               align: "start",
               side: "bottom",
-              nextBtnText: "下一步8/" + length,
+              nextBtnText: `下一步${options.steps.length + 1}/${length}`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 1000;
@@ -212,7 +258,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass8",
               align: "start",
               side: "bottom",
-              nextBtnText: "下一步8/9",
+              nextBtnText: `下一步${options.steps.length + 1}/${length}`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 1000;
@@ -258,14 +304,20 @@ export const PractiseDriver = defineComponent({
 
     let driverObj: any;
 
+    let timer: any;
     const handleClickOutside = (event: any) => {
-      if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
-        if (driverObj.isLastStep()) {
-          onDriverClose();
-        } else {
-          driverObj.moveNext(); // 跳转到下一步
+      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"))) {
+          if (driverObj.isLastStep()) {
+            onDriverClose();
+          } else {
+            driverObj.moveNext(); // 跳转到下一步
+          }
         }
-      }
+      }, 200);
     };
 
     const guideInfo = ref({} as any);
@@ -329,7 +381,15 @@ export const PractiseDriver = defineComponent({
 /** 跟练模式 */
 export const FollowDriver = defineComponent({
   name: "FollowDriver",
-  setup() {
+  props: {
+    // 按钮状态
+    stautsAll: {
+      type: Object as PropType<ButtonStatus>,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const driverNextStatus = ref(false);
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
@@ -340,11 +400,22 @@ export const FollowDriver = defineComponent({
       } catch {}
     };
 
+    // 声部
+    let length = props.stautsAll.subjectStatus ? 4 : 3;
     const driverOptions: Config = {
       showProgress: false,
       allowClose: false,
       popoverOffset: 3,
       disableActiveInteraction: true,
+      onCloseClick: () => {
+        onDriverClose();
+      },
+      onHighlightStarted: () => {
+        driverNextStatus.value = true;
+      },
+      onHighlighted: () => {
+        driverNextStatus.value = false;
+      },
       steps: [
         {
           element: ".follow-1",
@@ -354,15 +425,12 @@ export const FollowDriver = defineComponent({
             popoverClass: "popoverClass popoverClassF1",
             align: "end",
             side: "top",
-            nextBtnText: "下一步1/3",
+            nextBtnText: `下一步1/${length}`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
               options.config.stagePadding = 0;
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -373,47 +441,61 @@ export const FollowDriver = defineComponent({
             popoverClass: "popoverClass popoverClass5",
             align: "start",
             side: "top",
-            nextBtnText: "下一步2/3",
+            nextBtnText: `下一步2/${length}`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
-          },
-        },
-        {
-          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();
-            },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
       ],
     };
 
+    if (props.stautsAll.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) => {
+      if (driverNextStatus.value) return;
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();
@@ -482,7 +564,15 @@ export const FollowDriver = defineComponent({
 // 评测模式
 export const EvaluatingDriver = defineComponent({
   name: "EvaluatingDriver",
-  setup() {
+  props: {
+    // 按钮状态
+    stautsAll: {
+      type: Object as PropType<ButtonStatus>,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const driverNextStatus = ref(false);
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
@@ -498,6 +588,15 @@ export const EvaluatingDriver = defineComponent({
       allowClose: false,
       popoverOffset: 3,
       disableActiveInteraction: true,
+      onCloseClick: () => {
+        onDriverClose();
+      },
+      onHighlightStarted: () => {
+        driverNextStatus.value = true;
+      },
+      onHighlighted: () => {
+        driverNextStatus.value = false;
+      },
       steps: [
         {
           element: ".evaluting-1",
@@ -513,9 +612,6 @@ export const EvaluatingDriver = defineComponent({
               options.config.stageRadius = 1000;
               options.config.stagePadding = 0;
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -531,9 +627,6 @@ export const EvaluatingDriver = defineComponent({
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -556,9 +649,6 @@ export const EvaluatingDriver = defineComponent({
             onNextClick: () => {
               onDriverClose();
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
       ],
@@ -566,6 +656,7 @@ export const EvaluatingDriver = defineComponent({
     let driverObj: any;
 
     const handleClickOutside = (event: any) => {
+      if (driverNextStatus.value) return;
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();
@@ -637,6 +728,7 @@ export const EvaluatingDriver = defineComponent({
 export const EvaluatingResultDriver = defineComponent({
   name: "EvaluatingResultDriver",
   setup() {
+    const driverNextStatus = ref(false);
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }, position = 1) => {
       options.config.stageRadius = 1000;
@@ -652,6 +744,15 @@ export const EvaluatingResultDriver = defineComponent({
       allowClose: false,
       popoverOffset: 3,
       disableActiveInteraction: true,
+      onCloseClick: () => {
+        onDriverClose();
+      },
+      onHighlightStarted: () => {
+        driverNextStatus.value = true;
+      },
+      onHighlighted: () => {
+        driverNextStatus.value = false;
+      },
       steps: [
         {
           element: ".evaluting-result-1",
@@ -667,9 +768,6 @@ export const EvaluatingResultDriver = defineComponent({
               options.config.stageRadius = 12;
               options.config.stagePadding = 10;
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -690,9 +788,6 @@ export const EvaluatingResultDriver = defineComponent({
                 popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
               } catch {}
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -708,9 +803,6 @@ export const EvaluatingResultDriver = defineComponent({
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options, -1);
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -733,9 +825,6 @@ export const EvaluatingResultDriver = defineComponent({
             onNextClick: () => {
               onDriverClose();
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
       ],
@@ -743,6 +832,7 @@ export const EvaluatingResultDriver = defineComponent({
     let driverObj: any;
 
     const handleClickOutside = (event: any) => {
+      if (driverNextStatus.value) return;
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();
@@ -819,6 +909,7 @@ export const EvaluatingReportDriver = defineComponent({
     },
   },
   setup(props) {
+    const driverNextStatus = ref(false);
     // state.isPercussion 是否为打击乐
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }, position = 1) => {
@@ -848,9 +939,6 @@ export const EvaluatingReportDriver = defineComponent({
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
               },
-              onCloseClick: () => {
-                onDriverClose();
-              },
             },
           },
           {
@@ -878,9 +966,6 @@ export const EvaluatingReportDriver = defineComponent({
               onNextClick: () => {
                 onDriverClose();
               },
-              onCloseClick: () => {
-                onDriverClose();
-              },
             },
           },
         ];
@@ -905,9 +990,6 @@ export const EvaluatingReportDriver = defineComponent({
               onNextClick: () => {
                 onDriverClose();
               },
-              onCloseClick: () => {
-                onDriverClose();
-              },
             },
           },
         ];
@@ -928,9 +1010,6 @@ export const EvaluatingReportDriver = defineComponent({
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
         {
@@ -946,9 +1025,6 @@ export const EvaluatingReportDriver = defineComponent({
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         },
       ];
@@ -967,9 +1043,6 @@ export const EvaluatingReportDriver = defineComponent({
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
               },
-              onCloseClick: () => {
-                onDriverClose();
-              },
             },
           },
           {
@@ -997,9 +1070,6 @@ export const EvaluatingReportDriver = defineComponent({
               onNextClick: () => {
                 onDriverClose();
               },
-              onCloseClick: () => {
-                onDriverClose();
-              },
             },
           }
         );
@@ -1024,9 +1094,6 @@ export const EvaluatingReportDriver = defineComponent({
             onNextClick: () => {
               onDriverClose();
             },
-            onCloseClick: () => {
-              onDriverClose();
-            },
           },
         });
       }
@@ -1037,6 +1104,15 @@ export const EvaluatingReportDriver = defineComponent({
       allowClose: false,
       popoverOffset: 3,
       disableActiveInteraction: true,
+      onCloseClick: () => {
+        onDriverClose();
+      },
+      onHighlightStarted: () => {
+        driverNextStatus.value = true;
+      },
+      onHighlighted: () => {
+        driverNextStatus.value = false;
+      },
       steps: steps,
     };
 
@@ -1045,6 +1121,7 @@ export const EvaluatingReportDriver = defineComponent({
     const guideInfo = ref({} as any);
 
     const handleClickOutside = (event: any) => {
+      if (driverNextStatus.value) return;
       if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
         if (driverObj.isLastStep()) {
           onDriverClose();

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

@@ -604,51 +604,53 @@ export default defineComponent({
           }}
         >
           {/* 返回和标题 */}
-          {
-            !(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.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={() => {
-                    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.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>
-          }
+          {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]}
@@ -735,7 +737,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" }}
@@ -759,7 +761,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]}>
                 {{
@@ -783,7 +785,7 @@ export default defineComponent({
             ) : null} */}
             {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
               <div
-                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled]}
+                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, "driver-10"]}
                 onClick={() => {
                   toggleMusicSheet.toggle(true);
                 }}
@@ -843,13 +845,31 @@ export default defineComponent({
         {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}
 
         {/* 练习模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "practise" && !query.isCbs && state.audioDone && !state.isVip && <PractiseDriver />}
+        {state.modeType === "practise" && headTopData.modeType !== "show" && !query.isCbs && state.audioDone && !state.isVip && (
+          <PractiseDriver
+            stautsAll={{
+              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
+            }}
+          />
+        )}
         {/* 跟练模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "follow" && !query.isCbs && state.audioDone && !state.isVip && <FollowDriver />}
+        {state.modeType === "follow" && headTopData.modeType !== "show" && !query.isCbs && state.audioDone && !state.isVip && (
+          <FollowDriver
+            stautsAll={{
+              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
+            }}
+          />
+        )}
         {/* 评测模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingDriver />}
+        {state.modeType === "evaluating" && headTopData.modeType !== "show" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
+          <EvaluatingDriver
+            stautsAll={{
+              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
+            }}
+          />
+        )}
         {/* 评测模式-结果弹窗 功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && evaluatingData.resulstMode && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingResultDriver />}
+        {state.modeType === "evaluating" && headTopData.modeType !== "show" && evaluatingData.resulstMode && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && <EvaluatingResultDriver />}
       </>
     );
   },

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

@@ -1,116 +1,109 @@
-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;
+          state.isVip = 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 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;
+        state.isVip = 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()
-            }
-         })
-      })
-      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>
+    );
+  },
+});

vite.config.ts

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