修改显示

osmd-extended

@@ -1 +1 @@
-Subproject commit ce9f135f2993b7b6955eb0376f7e89aa22e7041b
+Subproject commit e96ef0a67e70a21b7ea9a2a5a7925f8a9360a396

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

@@ -20,6 +20,8 @@ type ButtonStatus = {
   subjectStatus?: Boolean;
   /** 练习模式 */
   modelTypeStatus?: Boolean;
+  /** 播放模式 演唱 演奏 */
+  playType?: Boolean;
 };
 
 /** 练习模式 */
@@ -56,6 +58,10 @@ export const PractiseDriver = defineComponent({
         length -= 1;
       }
 
+      if(!props.statusAll.playType) {
+        length -= 1;
+      }
+
       console.log(props.statusAll, 'statusAll', length)
 
       let options: Config = {
@@ -88,69 +94,75 @@ export const PractiseDriver = defineComponent({
                 options.config.stagePadding = 0;
               },
             },
-          },
-          {
-            element: ".driver-2",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass2",
-              align: "start",
-              side: "top",
-              nextBtnText: `下一步 (2/${length})`,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-              },
+          }
+        ] as DriveStep[],
+      };
+
+      if(props.statusAll.playType) {
+        options.steps?.push({
+          element: ".driver-2",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass2",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
             },
           },
-          {
-            element: ".driver-3",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass3",
-              align: "start",
-              side: "top",
-              nextBtnText: `下一步 (3/${length})`,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-              },
+        });
+      }
+
+      options.steps?.push(
+        {
+          element: ".driver-3",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass3",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
             },
           },
-          {
-            element: ".driver-4",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass4",
-              align: "start",
-              side: "top",
-              nextBtnText: `下一步 (4/${length})`,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-              },
+        },
+        {
+          element: ".driver-4",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass4",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步 (${options.steps.length + 2}/${length})`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
             },
           },
-          {
-            element: ".driver-5",
-            popover: {
-              title: "",
-              description: "",
-              popoverClass: "popoverClass popoverClass5",
-              align: "start",
-              side: "top",
-              nextBtnText: `下一步 (5/${length})`,
-              showButtons: ["next"],
-              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                driverInitialPosition(popover, options);
-              },
+        },
+        {
+          element: ".driver-5",
+          popover: {
+            title: "",
+            description: "",
+            popoverClass: "popoverClass popoverClass5",
+            align: "start",
+            side: "top",
+            nextBtnText: `下一步 (${options.steps.length + 3}/${length})`,
+            showButtons: ["next"],
+            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+              driverInitialPosition(popover, options);
             },
           },
-        ] as DriveStep[],
-      };
+        }
+      );
 
 
       if (props.statusAll.subjectStatus) {
@@ -209,7 +221,7 @@ export const PractiseDriver = defineComponent({
         });
       }
 
-      if(props.statusAll.modelTypeStatus) {
+      if(!props.statusAll.modelTypeStatus) {
         options.steps?.push({
           element: ".driver-8",
           popover: {
@@ -325,6 +337,7 @@ export const PractiseDriver = defineComponent({
           document.addEventListener("click", handleClickOutside, true);
           driverObj = driver(driverOptions());
           nextTick(() => {
+            console.log('practiseDriver clicked')
             driverObj.drive();
             showCloseBtn.value = true;
             state.hasDriverPop = true;

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

@@ -606,50 +606,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, styles.listImg, "driver-8"]} onClick={()=>{
-                      musicListShow.value = true
-                    }} />
-                }
-              </div>
-          }
-          {/* 模式切换 */}
-          {
-            <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>
+          {!(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, styles.listImg, "driver-8"]}
+                    onClick={() => {
+                      musicListShow.value = true;
+                    }}
+                  />
+                )
+              )}
             </div>
-          }
+          )}
+          {/* 模式切换 */}
+
+          <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", state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.modeWarnRight : ""]}>
-                <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", state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.modeWarnRight : ""]}>
+              <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
+              <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
+            </div>
+          )}
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}
@@ -698,24 +701,24 @@ export default defineComponent({
                   state.playSource = state.music ? "music" : "background";
                 }
                 // 有指法并且显示指法的时候 切换到演唱模式 需要影藏指法
-                let isRefresh = false
-                if(state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)){
-                  if(state.playType === "sing"){
-                    state.setting.displayFingering = false
-                    displayFingeringCache = true
+                let isRefresh = false;
+                if (state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)) {
+                  if (state.playType === "sing") {
+                    state.setting.displayFingering = false;
+                    displayFingeringCache = true;
                   } else {
-                    state.setting.displayFingering = displayFingeringCache
-                    displayFingeringCache = false
+                    state.setting.displayFingering = displayFingeringCache;
+                    displayFingeringCache = false;
                   }
                   // 如果是竖屏指法和一行谱的时候 改变指法值的时候state 会调用刷新 refreshMusicSvg 所以下面不调用
                   if (state.fingeringInfo.direction === "vertical" && !state.isSingleLine) {
-                    isRefresh = true
+                    isRefresh = true;
                   }
                 }
                 // 有歌词的时候，切换播放模式，需要重新渲染谱面  指法不刷新谱面的时候
                 if (state.xmlHasLyric && !isRefresh) {
                   refreshMusicSvg();
-                } else if(!isRefresh) {
+                } else if (!isRefresh) {
                   handlerModeChange(oldPlayType, oldPlaySource, true);
                 }
                 showToast({
@@ -749,7 +752,7 @@ export default defineComponent({
                 }
                 handlerModeChange(oldPlayType, oldPlaySource);
                 showToast({
-                  message: state.playType === "play" ? (state.playSource === "music"?"已切换为原声":"已切换为伴奏") : (state.playSource === "music"?"已切换为范唱":(state.playSource === "background"?"已切换为伴唱":"已切换为唱名")),
+                  message: state.playType === "play" ? (state.playSource === "music" ? "已切换为原声" : "已切换为伴奏") : state.playSource === "music" ? "已切换为范唱" : state.playSource === "background" ? "已切换为伴唱" : "已切换为唱名",
                   position: "top",
                   className: "selectionToast",
                 });
@@ -878,7 +881,8 @@ export default defineComponent({
           <PractiseDriver
             statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
-              modelTypeStatus: toggleBtn.value.display
+              modelTypeStatus: toggleBtn.value.display,
+              playType: playTypeBtn.value.display,
             }}
           />
         )}

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

@@ -57,6 +57,7 @@ export default defineComponent({
         state.isVip = false;
         openGuid();
       }
+   }
       const pageVisible = usePageVisibility()
       watch(
          () => pageVisible.value,