修改引导显示、引导状态取缓存、兼容多乐器code

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

@@ -19,6 +19,7 @@
   padding: 0;
   font-family: inherit;
 }
+
 .popoverClass .driver-popover-prev-btn {
   font-weight: 600;
   font-size: 13px;
@@ -180,28 +181,29 @@
     right: 14px;
     bottom: 18px;
   }
-    &.popoverClose {
-  
-      .driver-popover-navigation-btns {
-        position: absolute;
-        bottom: 23px;
-        left: 0;
-        right: 15px;
-        justify-content: flex-start;
-      }
-  
-      .driver-popover-next-btn {
-        // right: 14px;
-        // bottom: 18px;
-        position: relative;
-        top: 0;
-        right: 0;
-      }
-  
-      .driver-popover-prev-btn {
-        margin-left: 14px;
-      }
+
+  &.popoverClose {
+
+    .driver-popover-navigation-btns {
+      position: absolute;
+      bottom: 23px;
+      left: 0;
+      right: 15px;
+      justify-content: flex-start;
     }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
+  }
 }
 
 .popoverClass7-1 {
@@ -214,28 +216,29 @@
     right: 14px;
     bottom: 18px;
   }
-    &.popoverClose {
-  
-      .driver-popover-navigation-btns {
-        position: absolute;
-        bottom: 23px;
-        left: 0;
-        right: 15px;
-        justify-content: flex-start;
-      }
-  
-      .driver-popover-next-btn {
-        // right: 14px;
-        // bottom: 18px;
-        position: relative;
-        top: 0;
-        right: 0;
-      }
-  
-      .driver-popover-prev-btn {
-        margin-left: 14px;
-      }
+
+  &.popoverClose {
+
+    .driver-popover-navigation-btns {
+      position: absolute;
+      bottom: 23px;
+      left: 0;
+      right: 15px;
+      justify-content: flex-start;
+    }
+
+    .driver-popover-next-btn {
+      // right: 14px;
+      // bottom: 18px;
+      position: relative;
+      top: 0;
+      right: 0;
     }
+
+    .driver-popover-prev-btn {
+      margin-left: 14px;
+    }
+  }
 }
 
 .popoverClass8 {

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

@@ -6,7 +6,8 @@ import { getGuidance, setGuidance } from "../guide-page/api";
 
 const endGuide = (guideInfo: any) => {
   try {
-    setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(guideInfo) });
+    // setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(guideInfo) });
+    localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
   } catch (e) {
     console.log(e);
   }
@@ -93,7 +94,7 @@ export const PractiseDriver = defineComponent({
           length -= 1;
         }
       }
-      console.log(props.statusAll, "statusAll", length);
+      console.log(props.statusAll, "statusAll", length, state.setting.displayFingering);
 
       let options: Config = {
         showProgress: false,
@@ -283,23 +284,31 @@ export const PractiseDriver = defineComponent({
           });
         }
       } else {
-        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 && !props.statusAll.backTitle && !props.statusAll.modelTypeStatus) {
+          options.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();
+              },
             },
-          },
-        });
-
-        if (state.setting.displayFingering) {
+          });
+        } else if (state.setting.displayFingering && !props.statusAll.backTitle && !props.statusAll.modelTypeStatus) {
           // 是否有指法图
           // 乐器方向不一样引导位置不一样
           options.steps?.push({
@@ -307,22 +316,46 @@ export const PractiseDriver = defineComponent({
             popover: {
               title: "",
               description: "",
-              popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
+              popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"} popoverClose`,
               align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
               side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
-              nextBtnText: `下一步 (${options.steps?.length + 1}/${length})`,
-              showButtons: ["next"],
+              prevBtnText: "再看一遍",
+              doneBtnText: "完成",
+              showButtons: ["next", "previous"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
               },
-              onCloseClick: () => {
+              onPrevClick: () => {
+                driverObj.drive(0);
+              },
+              onNextClick: () => {
                 onDriverClose();
               },
             },
           });
-        }
-
-        if (!props.statusAll.modelTypeStatus) {
+        } else if (props.statusAll.backTitle && !props.statusAll.modelTypeStatus) {
+          if (state.setting.displayFingering) {
+            // 是否有指法图
+            // 乐器方向不一样引导位置不一样
+            options.steps?.push({
+              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: `下一步 (${options.steps?.length + 1}/${length})`,
+                showButtons: ["next"],
+                onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+                  if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
+                },
+                onCloseClick: () => {
+                  onDriverClose();
+                },
+              },
+            });
+          }
           options.steps?.push({
             //props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" :
             element: ".driver-8",
@@ -357,8 +390,47 @@ export const PractiseDriver = defineComponent({
             },
           });
         } else {
-          options.steps?.push(
-            {
+          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({
+              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: `下一步 (${options.steps?.length + 1}/${length})`,
+                showButtons: ["next"],
+                onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+                  if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
+                },
+                onCloseClick: () => {
+                  onDriverClose();
+                },
+              },
+            });
+          }
+
+          if (props.statusAll.backTitle) {
+            options.steps?.push({
               //  .van-notice-bar__content
               // element: ".driver-8 .van-notice-bar__content",
               // props.statusAll.titleType === "TEXT" ? ".driver-8 .van-notice-bar__content" :
@@ -385,35 +457,36 @@ export const PractiseDriver = defineComponent({
                   } catch {}
                 },
               },
-            },
-            {
-              element: ".driver-9",
-              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 {}
-                },
-                onPrevClick: () => {
-                  driverObj.drive(0);
-                },
-                onNextClick: () => {
-                  onDriverClose();
-                },
+            });
+          }
+
+          options.steps?.push({
+            element: ".driver-9",
+            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 {}
               },
-            }
-          );
+              onPrevClick: () => {
+                driverObj.drive(0);
+              },
+              onNextClick: () => {
+                onDriverClose();
+              },
+            },
+          });
         }
       }
 
@@ -438,15 +511,12 @@ export const PractiseDriver = defineComponent({
     const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
-        if (state.guideInfo) {
-          guideInfo.value = state.guideInfo;
+        // const res = await getGuidance({ guideTag: "guideInfo" });
+        const res = localStorage.getItem("guideInfo");
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
-          const res = await getGuidance({ guideTag: "guideInfo" });
-          if (res.data) {
-            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-          } else {
-            guideInfo.value = {};
-          }
+          guideInfo.value = {};
         }
 
         if (!(guideInfo.value && guideInfo.value.practiseDriver)) {
@@ -631,16 +701,13 @@ export const FollowDriver = defineComponent({
     const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
-        if (state.guideInfo) {
-          guideInfo.value = state.guideInfo;
+        const res = localStorage.getItem("guideInfo");
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
-          const res = await getGuidance({ guideTag: "guideInfo" });
-          if (res.data) {
-            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-          } else {
-            guideInfo.value = {};
-          }
+          guideInfo.value = {};
         }
+
         if (!(guideInfo.value && guideInfo.value.followDriver)) {
           document.addEventListener("click", handleClickOutside, true);
           nextTick(() => {
@@ -839,16 +906,13 @@ export const EvaluatingDriver = defineComponent({
     const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
-        if (state.guideInfo) {
-          guideInfo.value = state.guideInfo;
+        const res = localStorage.getItem("guideInfo");
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
-          const res = await getGuidance({ guideTag: "guideInfo" });
-          if (res.data) {
-            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-          } else {
-            guideInfo.value = {};
-          }
+          guideInfo.value = {};
         }
+
         console.log(guideInfo.value, "guideInfo.value", showCloseBtn.value);
         if (!(guideInfo.value && guideInfo.value.evaluatingDriver)) {
           document.addEventListener("click", handleClickOutside, true);
@@ -1042,16 +1106,13 @@ export const EvaluatingResultDriver = defineComponent({
     const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
-        if (state.guideInfo) {
-          guideInfo.value = state.guideInfo;
+        const res = localStorage.getItem("guideInfo");
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
-          const res = await getGuidance({ guideTag: "guideInfo" });
-          if (res.data) {
-            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-          } else {
-            guideInfo.value = {};
-          }
+          guideInfo.value = {};
         }
+
         if (!(guideInfo.value && guideInfo.value.evaluatingResultDriver)) {
           setTimeout(() => {
             document.addEventListener("click", handleClickOutside, true);
@@ -1361,16 +1422,13 @@ export const EvaluatingReportDriver = defineComponent({
     const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
-        if (state.guideInfo) {
-          guideInfo.value = state.guideInfo;
+        const res = localStorage.getItem("guideInfo");
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
-          const res = await getGuidance({ guideTag: "guideInfo" });
-          if (res.data) {
-            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-          } else {
-            guideInfo.value = {};
-          }
+          guideInfo.value = {};
         }
+
         if (!(guideInfo.value && guideInfo.value.evaluatingReportDriver)) {
           // 监听点击事件以实现点击空白区域跳转到下一步
           document.addEventListener("click", handleClickOutside, true);

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

@@ -949,7 +949,7 @@ export default defineComponent({
               playType: playTypeBtn.value.display,
               originPlayType: state.playType === "play" ? true : false,
               originBtnStatus: originBtn.value.display,
-              backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin),
+              backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin) && isMusicList.value,
               titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? "IMG" : "NONE",
             }}
           />

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

@@ -44,7 +44,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const query = getQuery();
     const browsInfo = browser();
-    const code = mappingVoicePart(query.code, "INSTRUMENT");
+    const tempCode = query.code ? query.code.split(",")[0] : "";
+    const code = mappingVoicePart(tempCode, "INSTRUMENT");
     const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
     const data = reactive({
       linkSource: query.linkSource, // 来源，目前只有课件里使用