合并文件

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

@@ -17,6 +17,10 @@
   background-size: contain;
   background-color: transparent !important;
 }
+.popoverClass .driver-popover-prev-btn {
+  font-weight: 600;
+  font-size: 13px;
+}
 
 .popoverClass .driver-popover-next-btn:hover,
 .popoverClass .driver-popover-prev-btn:hover,
@@ -261,6 +265,18 @@
   }
 }
 
+.popoverClassF2 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/follow/f2.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+}
+
 .popoverClassE1 {
   width: 257px;
   height: 247px;
@@ -285,6 +301,18 @@
   }
 }
 
+.popoverClassE3 {
+  width: 264px;
+  height: 245px;
+  background: url("./images/evaluating/e2.png") no-repeat center;
+  background-size: contain;
+
+  .driver-popover-next-btn {
+    right: 24px;
+    bottom: 23px;
+  }
+}
+
 .popoverClassER1 {
   width: 257px;
   height: 178px;

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

@@ -81,7 +81,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass1",
               align: "end",
               side: "top",
-              nextBtnText: "下一步1/" + length,
+              nextBtnText: `下一步 (1/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 1000;
@@ -97,7 +97,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass2",
               align: "start",
               side: "top",
-              nextBtnText: "下一步2/" + length,
+              nextBtnText: `下一步 (2/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
@@ -112,7 +112,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass3",
               align: "start",
               side: "top",
-              nextBtnText: "下一步3/" + length,
+              nextBtnText: `下一步 (3/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
@@ -127,7 +127,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass4",
               align: "start",
               side: "top",
-              nextBtnText: "下一步4/" + length,
+              nextBtnText: `下一步 (4/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
@@ -142,7 +142,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass5",
               align: "start",
               side: "top",
-              nextBtnText: "下一步5/" + length,
+              nextBtnText: `下一步 (5/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
@@ -162,7 +162,7 @@ export const PractiseDriver = defineComponent({
             popoverClass: "popoverClass popoverClass10",
             align: "start",
             side: "top",
-            nextBtnText: `下一步${options.steps.length + 1}/${length}`,
+            nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -179,7 +179,7 @@ export const PractiseDriver = defineComponent({
           popoverClass: "popoverClass popoverClass6",
           align: "start",
           side: "top",
-          nextBtnText: `下一步${options.steps.length + 1}/${length}`, //"下一步6/" + length,
+          nextBtnText: `下一步 (${options.steps.length + 1}/${length})`, //"下一步6/" + length,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
             driverInitialPosition(popover, options);
@@ -189,27 +189,24 @@ export const PractiseDriver = defineComponent({
       // 是否有指法图
       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({
+          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.modelTypeStatus) {
@@ -250,7 +247,7 @@ export const PractiseDriver = defineComponent({
               popoverClass: "popoverClass popoverClass8",
               align: "start",
               side: "bottom",
-              nextBtnText: `下一步${options.steps.length + 1}/${length}`,
+              nextBtnText: `下一步 (${options.steps.length + 1}/${length})`,
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 options.config.stageRadius = 1000;
@@ -328,7 +325,7 @@ export const PractiseDriver = defineComponent({
           document.addEventListener("click", handleClickOutside, true);
           driverObj = driver(driverOptions());
           nextTick(() => {
-            driverObj.drive(6);
+            driverObj.drive();
             showCloseBtn.value = true;
             state.hasDriverPop = true;
           });
@@ -416,7 +413,7 @@ export const FollowDriver = defineComponent({
             popoverClass: "popoverClass popoverClassF1",
             align: "end",
             side: "top",
-            nextBtnText: `下一步1/${length}`,
+            nextBtnText: `下一步 (1/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
@@ -429,10 +426,10 @@ export const FollowDriver = defineComponent({
           popover: {
             title: "",
             description: "",
-            popoverClass: "popoverClass popoverClass5",
+            popoverClass: "popoverClass popoverClassF2",
             align: "start",
             side: "top",
-            nextBtnText: `下一步2/${length}`,
+            nextBtnText: `下一步 (2/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -451,7 +448,7 @@ export const FollowDriver = defineComponent({
           popoverClass: "popoverClass popoverClass10",
           align: "start",
           side: "top",
-          nextBtnText: `下一步${driverOptions.steps.length + 1}/${length}`,
+          nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
             driverInitialPosition(popover, options);
@@ -602,7 +599,7 @@ export const EvaluatingDriver = defineComponent({
             popoverClass: "popoverClass popoverClassE1",
             align: "end",
             side: "top",
-            nextBtnText: `下一步1/${length}`,
+            nextBtnText: `下一步 (1/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
@@ -618,7 +615,7 @@ export const EvaluatingDriver = defineComponent({
             popoverClass: "popoverClass popoverClassE2",
             align: "start",
             side: "top",
-            nextBtnText: `下一步2/${length}`,
+            nextBtnText: `下一步 (2/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -633,13 +630,13 @@ export const EvaluatingDriver = defineComponent({
             popoverClass: "popoverClass popoverClass5",
             align: "start",
             side: "top",
-            nextBtnText: `下一步3/${length}`,
+            nextBtnText: `下一步 (3/${length})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
             },
           },
-        }
+        },
       ],
     };
 
@@ -652,7 +649,7 @@ export const EvaluatingDriver = defineComponent({
           popoverClass: "popoverClass popoverClass10",
           align: "start",
           side: "top",
-          nextBtnText: `下一步${driverOptions.steps.length + 1}/${length}`,
+          nextBtnText: `下一步 (${driverOptions.steps.length + 1}/${length})`,
           showButtons: ["next"],
           onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
             driverInitialPosition(popover, options);
@@ -796,7 +793,7 @@ export const EvaluatingResultDriver = defineComponent({
             popoverClass: "popoverClass popoverClassER1",
             align: "start",
             side: "right",
-            nextBtnText: "下一步1/4",
+            nextBtnText: "下一步 (1/4)",
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 12;
@@ -812,7 +809,7 @@ export const EvaluatingResultDriver = defineComponent({
             popoverClass: "popoverClass popoverClassER2",
             align: "start",
             side: "top",
-            nextBtnText: "下一步2/4",
+            nextBtnText: "下一步 (2/4)",
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               options.config.stageRadius = 1000;
@@ -832,7 +829,7 @@ export const EvaluatingResultDriver = defineComponent({
             popoverClass: "popoverClass popoverClassER3",
             align: "end",
             side: "top",
-            nextBtnText: "下一步3/4",
+            nextBtnText: "下一步 (3/4)",
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options, -1);
@@ -974,7 +971,7 @@ export const EvaluatingReportDriver = defineComponent({
               popoverClass: "popoverClass popoverClassReport2",
               align: "start",
               side: "bottom",
-              nextBtnText: "下一步1/2",
+              nextBtnText: "下一步 (1/2)",
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);
@@ -1045,7 +1042,7 @@ export const EvaluatingReportDriver = defineComponent({
             popoverClass: "popoverClass popoverClassReport1",
             align: "start",
             side: "bottom",
-            nextBtnText: "下一步1/" + count,
+            nextBtnText: `下一步 (1/${count})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -1060,7 +1057,7 @@ export const EvaluatingReportDriver = defineComponent({
             popoverClass: "popoverClass popoverClassReport2",
             align: "start",
             side: "bottom",
-            nextBtnText: "下一步2/" + count,
+            nextBtnText: `下一步 (2/${count})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
               driverInitialPosition(popover, options);
@@ -1078,7 +1075,7 @@ export const EvaluatingReportDriver = defineComponent({
               popoverClass: "popoverClass popoverClassReport3",
               align: "start",
               side: "bottom",
-              nextBtnText: "下一步3/4",
+              nextBtnText: "下一步 (3/4)",
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
                 driverInitialPosition(popover, options);