修改样式

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

@@ -19,7 +19,8 @@
 }
 
 .popoverClass .driver-popover-next-btn:hover,
-.popoverClass .driver-popover-prev-btn:hover {
+.popoverClass .driver-popover-prev-btn:hover,
+.popoverClass .driver-popover-prev-btn:focus {
   background-color: transparent;
 }
 
@@ -27,12 +28,14 @@
   display: none;
 }
 
-.driver-popover-close-btn {
+.driver-popover-close-btn,
+.driver-popover-close-btn-custom {
   position: fixed;
   left: 20px;
   top: 20px;
   width: 48px;
   height: 24px;
+  z-index: 99999;
   background: url('./images/btn-close.png') no-repeat center;
   background-size: contain;
   color: transparent;
@@ -43,6 +46,10 @@
   }
 }
 
+.driver-popover-close-btn-custom {
+  pointer-events: auto !important;
+}
+
 .popoverClass {
   box-shadow: none;
   padding: 0;

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

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, ref } from "vue";
+import { 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";
@@ -26,186 +26,234 @@ export const PractiseDriver = defineComponent({
       } catch {}
     };
 
-    // 乐器方向不一样引导位置不一样
-    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/9",
-        showButtons: ["next", "close"],
-        onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-          if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
+    const driverOptions = (): Config => {
+      let length = state.setting.displayFingering ? 9 : 8;
+
+      // 乐器方向不一样引导位置不一样
+      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();
+          },
         },
+      };
+      let options: Config = {
+        showProgress: false,
+        allowClose: false,
+        popoverOffset: 3,
+        disableActiveInteraction: true,
         onCloseClick: () => {
           onDriverClose();
         },
-      },
-    };
-
-    const driverOptions: Config = {
-      showProgress: false,
-      allowClose: false,
-      popoverOffset: 3,
-      disableActiveInteraction: true,
-      onCloseClick: () => {
-        onDriverClose();
-      },
-      steps: [
-        {
-          element: ".driver-1",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass1",
-            align: "end",
-            side: "top",
-            nextBtnText: "下一步1/9",
-            showButtons: ["next", "close"],
-            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              // console.log(popover, "popover", popover.wrapper, options.state.activeElement, options.state.__overlaySvg);
-              options.config.stageRadius = 1000;
-              options.config.stagePadding = 0;
-
-              // popover.wrapper.addEventListener("click", (e) => {
-              //   e.stopPropagation;
-              //   console.log("12121212");
-              //   // driverObj.drive(1);
-              // });
-
-              // document.querySelector(".popoverClass1")?.addEventListener("click", () => {
-              //   console.log("11111");
-              // });
+        steps: [
+          {
+            element: ".driver-1",
+            popover: {
+              title: "",
+              description: "",
+              popoverClass: "popoverClass popoverClass1",
+              align: "end",
+              side: "top",
+              nextBtnText: "下一步1/" + length,
+              showButtons: ["next"],
+              onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
+                options.config.stageRadius = 1000;
+                options.config.stagePadding = 0;
+              },
             },
           },
-        },
-        {
-          element: ".driver-2",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass2",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步2/9",
-            showButtons: ["next", "close"],
-            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              driverInitialPosition(popover, options);
+          {
+            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);
+              },
             },
           },
-        },
-        {
-          element: ".driver-3",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass3",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步3/9",
-            showButtons: ["next", "close"],
-            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);
+              },
             },
           },
-        },
-        {
-          element: ".driver-4",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass4",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步4/9",
-            showButtons: ["next", "close"],
-            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-5",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass5",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步5/9",
-            showButtons: ["next", "close"],
-            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-6",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass6",
-            align: "start",
-            side: "top",
-            nextBtnText: "下一步6/9",
-            showButtons: ["next", "close"],
-            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              driverInitialPosition(popover, options);
+          {
+            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);
+              },
             },
           },
-        },
-        instrumentDirection,
-        {
-          element: ".driver-8",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass8",
-            align: "start",
-            side: "bottom",
-            nextBtnText: "下一步8/9",
-            showButtons: ["next", "close"],
-            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 {}
+        ] as DriveStep[],
+      };
+      // 是否有指法图
+      if (state.setting.displayFingering) {
+        options.steps?.push(
+          instrumentDirection,
+          {
+            element: ".driver-8",
+            popover: {
+              title: "",
+              description: "",
+              popoverClass: "popoverClass popoverClass8",
+              align: "start",
+              side: "bottom",
+              nextBtnText: "下一步8/" + 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-9",
-          popover: {
-            title: "",
-            description: "",
-            popoverClass: "popoverClass popoverClass9 popoverClose",
-            align: "end",
-            side: "bottom",
-            prevBtnText: "再看一遍",
-            doneBtnText: "完成",
-            showButtons: ["next", "previous", "close"],
-            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);
+          {
+            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 {}
+              },
+              onPrevClick: () => {
+                driverObj.drive(0);
+              },
+              onNextClick: () => {
+                onDriverClose();
+              },
             },
-            onNextClick: () => {
-              onDriverClose();
+          }
+        );
+      } else {
+        options.steps?.push(
+          {
+            element: ".driver-8",
+            popover: {
+              title: "",
+              description: "",
+              popoverClass: "popoverClass popoverClass8",
+              align: "start",
+              side: "bottom",
+              nextBtnText: "下一步8/9",
+              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-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();
+              },
+            },
+          }
+        );
+      }
+      return options;
     };
 
     let driverObj: any;
@@ -221,6 +269,7 @@ export const PractiseDriver = defineComponent({
     };
 
     const guideInfo = ref({} as any);
+    const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
         if (state.guideInfo) {
@@ -233,11 +282,13 @@ export const PractiseDriver = defineComponent({
             guideInfo.value = {};
           }
         }
+
         if (!(guideInfo.value && guideInfo.value.practiseDriver)) {
           document.addEventListener("click", handleClickOutside, true);
-          driverObj = driver(driverOptions);
+          driverObj = driver(driverOptions());
           nextTick(() => {
             driverObj.drive(0);
+            showCloseBtn.value = true;
           });
         }
       } catch (e) {
@@ -256,10 +307,22 @@ export const PractiseDriver = defineComponent({
       }
       endGuide(guideInfo.value);
       driverObj.destroy();
+      document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
     };
 
-    return () => <div></div>;
+    return () => (
+      <Teleport to="body">
+        {showCloseBtn.value && (
+          <div
+            class="driver-popover-close-btn-custom"
+            onClick={(e: any) => {
+              onDriverClose();
+            }}
+          ></div>
+        )}
+      </Teleport>
+    );
   },
 });
 
@@ -292,7 +355,7 @@ export const FollowDriver = defineComponent({
             align: "end",
             side: "top",
             nextBtnText: "下一步1/3",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
               options.config.stagePadding = 0;
@@ -311,7 +374,7 @@ export const FollowDriver = defineComponent({
             align: "start",
             side: "top",
             nextBtnText: "下一步2/3",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -330,7 +393,7 @@ export const FollowDriver = defineComponent({
             side: "top",
             prevBtnText: "再看一遍",
             doneBtnText: "完成",
-            showButtons: ["next", "previous", "close"],
+            showButtons: ["next", "previous"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -360,6 +423,7 @@ export const FollowDriver = defineComponent({
       }
     };
     const guideInfo = ref({} as any);
+    const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
         if (state.guideInfo) {
@@ -377,6 +441,7 @@ export const FollowDriver = defineComponent({
           driverObj = driver(driverOptions);
           nextTick(() => {
             driverObj.drive(0);
+            showCloseBtn.value = true;
           });
         }
       } catch (e) {
@@ -395,10 +460,22 @@ export const FollowDriver = defineComponent({
       }
       endGuide(guideInfo.value);
       driverObj.destroy();
+      document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
     };
 
-    return () => <div></div>;
+    return () => (
+      <Teleport to="body">
+        {showCloseBtn.value && (
+          <div
+            class="driver-popover-close-btn-custom"
+            onClick={(e: any) => {
+              onDriverClose();
+            }}
+          ></div>
+        )}
+      </Teleport>
+    );
   },
 });
 
@@ -431,7 +508,7 @@ export const EvaluatingDriver = defineComponent({
             align: "end",
             side: "top",
             nextBtnText: "下一步1/3",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
               options.config.stagePadding = 0;
@@ -450,7 +527,7 @@ export const EvaluatingDriver = defineComponent({
             align: "start",
             side: "top",
             nextBtnText: "下一步2/3",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -469,7 +546,7 @@ export const EvaluatingDriver = defineComponent({
             side: "top",
             prevBtnText: "再看一遍",
             doneBtnText: "完成",
-            showButtons: ["next", "previous", "close"],
+            showButtons: ["next", "previous"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -499,6 +576,7 @@ export const EvaluatingDriver = defineComponent({
     };
 
     const guideInfo = ref({} as any);
+    const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
         if (state.guideInfo) {
@@ -516,6 +594,7 @@ export const EvaluatingDriver = defineComponent({
           driverObj = driver(driverOptions);
           nextTick(() => {
             driverObj.drive(0);
+            showCloseBtn.value = true;
           });
         } else {
           driverObj.destroy();
@@ -539,7 +618,18 @@ export const EvaluatingDriver = defineComponent({
       document.removeEventListener("click", handleClickOutside);
     };
 
-    return () => <div></div>;
+    return () => (
+      <Teleport to="body">
+        {showCloseBtn.value && (
+          <div
+            class="driver-popover-close-btn-custom"
+            onClick={(e: any) => {
+              onDriverClose();
+            }}
+          ></div>
+        )}
+      </Teleport>
+    );
   },
 });
 
@@ -572,7 +662,7 @@ export const EvaluatingResultDriver = defineComponent({
             align: "start",
             side: "right",
             nextBtnText: "下一步1/4",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 12;
               options.config.stagePadding = 10;
@@ -591,7 +681,7 @@ export const EvaluatingResultDriver = defineComponent({
             align: "start",
             side: "top",
             nextBtnText: "下一步2/4",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
               options.config.stagePadding = 0;
@@ -614,7 +704,7 @@ export const EvaluatingResultDriver = defineComponent({
             align: "end",
             side: "top",
             nextBtnText: "下一步3/4",
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options, -1);
             },
@@ -633,7 +723,7 @@ export const EvaluatingResultDriver = defineComponent({
             side: "top",
             prevBtnText: "再看一遍",
             doneBtnText: "完成",
-            showButtons: ["next", "previous", "close"],
+            showButtons: ["next", "previous"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options, -1);
             },
@@ -662,6 +752,7 @@ export const EvaluatingResultDriver = defineComponent({
       }
     };
     const guideInfo = ref({} as any);
+    const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
         if (state.guideInfo) {
@@ -679,6 +770,7 @@ export const EvaluatingResultDriver = defineComponent({
           driverObj = driver(driverOptions);
           nextTick(() => {
             driverObj.drive(0);
+            showCloseBtn.value = true;
           });
         }
       } catch (e) {
@@ -697,10 +789,22 @@ export const EvaluatingResultDriver = defineComponent({
       }
       endGuide(guideInfo.value);
       driverObj.destroy();
+      document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
     };
 
-    return () => <div></div>;
+    return () => (
+      <Teleport to="body">
+        {showCloseBtn.value && (
+          <div
+            class="driver-popover-close-btn-custom"
+            onClick={(e: any) => {
+              onDriverClose();
+            }}
+          ></div>
+        )}
+      </Teleport>
+    );
   },
 });
 
@@ -740,7 +844,7 @@ export const EvaluatingReportDriver = defineComponent({
               align: "start",
               side: "bottom",
               nextBtnText: "下一步1/2",
-              showButtons: ["next", "close"],
+              showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
               },
@@ -759,7 +863,7 @@ export const EvaluatingReportDriver = defineComponent({
               side: "bottom",
               prevBtnText: "再看一遍",
               doneBtnText: "完成",
-              showButtons: ["next", "previous", "close"],
+              showButtons: ["next", "previous"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 8;
                 options.config.stagePadding = 5;
@@ -791,7 +895,7 @@ export const EvaluatingReportDriver = defineComponent({
               align: "start",
               side: "bottom",
               doneBtnText: "完成",
-              showButtons: ["next", "close"],
+              showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
               },
@@ -820,7 +924,7 @@ export const EvaluatingReportDriver = defineComponent({
             align: "start",
             side: "bottom",
             nextBtnText: "下一步1/" + count,
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -838,7 +942,7 @@ export const EvaluatingReportDriver = defineComponent({
             align: "start",
             side: "bottom",
             nextBtnText: "下一步2/" + count,
-            showButtons: ["next", "close"],
+            showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -859,7 +963,7 @@ export const EvaluatingReportDriver = defineComponent({
               align: "start",
               side: "bottom",
               nextBtnText: "下一步3/4",
-              showButtons: ["next", "close"],
+              showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
               },
@@ -878,7 +982,7 @@ export const EvaluatingReportDriver = defineComponent({
               side: "bottom",
               prevBtnText: "再看一遍",
               doneBtnText: "完成",
-              showButtons: ["next", "previous", "close"],
+              showButtons: ["next", "previous"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 8;
                 options.config.stagePadding = 5;
@@ -910,7 +1014,7 @@ export const EvaluatingReportDriver = defineComponent({
             side: "bottom",
             prevBtnText: "再看一遍",
             doneBtnText: "完成",
-            showButtons: ["next", "previous", "close"],
+            showButtons: ["next", "previous"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
@@ -949,6 +1053,7 @@ export const EvaluatingReportDriver = defineComponent({
         }
       }
     };
+    const showCloseBtn = ref(false);
     const getAllGuidance = async () => {
       try {
         if (state.guideInfo) {
@@ -967,6 +1072,8 @@ export const EvaluatingReportDriver = defineComponent({
           driverObj = driver(driverOptions);
           nextTick(() => {
             driverObj.drive();
+
+            showCloseBtn.value = true;
           });
         }
       } catch (e) {
@@ -985,9 +1092,21 @@ export const EvaluatingReportDriver = defineComponent({
       }
       endGuide(guideInfo.value);
       driverObj.destroy();
+      document.querySelector(".driver-popover-close-btn-custom")?.remove();
       document.removeEventListener("click", handleClickOutside);
     };
 
-    return () => <div></div>;
+    return () => (
+      <Teleport to="body">
+        {showCloseBtn.value && (
+          <div
+            class="driver-popover-close-btn-custom"
+            onClick={(e: any) => {
+              onDriverClose();
+            }}
+          ></div>
+        )}
+      </Teleport>
+    );
   },
 });

vite.config.ts

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