引导优化

src/subpages/colexiu/buttons/index.tsx

@@ -221,7 +221,7 @@ export default defineComponent({
           <div class={[styles.moreButton]} style={{ opacity: detailState.initRendered ? 1 : 0 }}>
             {!search?.modelType && modelType.value !== 'init' && !detailState.frozenMode && (
               <Button
-                data-step="m1"
+                data-step="m0"
                 class={[styles.button, styles.hasText]}
                 disabled={(runtime.evaluatingStatus && !startButtonShow.value) || followRef.value?.data.start}
                 onClick={() => {
@@ -306,7 +306,7 @@ export default defineComponent({
             {modelType.value === 'practice' && (
               <>
                 <Button
-                  data-step="m2"
+                  data-step="m1"
                   class={[styles.button, styles.hasText]}
                   onClick={() => RuntimeUtils.changeMode(runtime.mode === 'background' ? 'music' : 'background')}
                   disabled={changeModeIsDisabled}
@@ -317,7 +317,7 @@ export default defineComponent({
                 {/* 如果为单元测试和课后训练 */}
                 {unitTestData.isSelectMeasureMode ? null : (
                   <Button
-                    data-step="m3"
+                    data-step="m2"
                     class={[styles.button, styles.hasText]}
                     onClick={RuntimeUtils.sectionChange}
                     disabled={runtime.evaluatingStatus || runtime.playState === 'play'}
@@ -335,7 +335,7 @@ export default defineComponent({
                   </Button>
                 )}
                 <Button
-                  data-step="m4"
+                  data-step="m3"
                   class={[styles.button, styles.hasText]}
                   onClick={() => {
                     SettingState.sett.fingering = !SettingState.sett.fingering
@@ -359,7 +359,7 @@ export default defineComponent({
                 vSlots={{
                   reference: () => (
                     <Button
-                      data-step="m5"
+                      data-step="m4"
                       class={[styles.button, styles.hasText, styles.speedButton]}
                       disabled={runtime.evaluatingStatus || runtime.playState === 'play'}
                       onClick={() => {

src/subpages/colexiu/index.tsx

@@ -181,30 +181,30 @@ export default defineComponent({
         detailState.times = getAllNodes(osmd)
       }
       if (search.modeType === 'json' || getHasCache()) {
-        const { numerator, denominator } = getDuration(osmd)
-        try {
-          musicJSON.json = JSON.stringify({
-            musicId: musicInfo.musicId,
-            musicSheetName: encodeURIComponent(detailState.activeDetail.musicSheetName),
-            osmd: {
-              product: true,
-              bpm: osmd?.Sheet?.userStartTempoInBPM || (osmd as any)?.bpm,
-              numerator,
-              denominator,
-              scoreSize: SettingState.sett.scoreSize || 'middle',
-            },
-            times: detailState.times,
-          })
-          console.log('生成缓存数据', musicJSON)
-          musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
-          nextTick(() => {
-            musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
-            musicJSON.rended = true
-            productRef.value?.autoProduct()
-          })
-        } catch (error) {
-          console.log(error)
-        }
+        // const { numerator, denominator } = getDuration(osmd)
+        // try {
+        //   musicJSON.json = JSON.stringify({
+        //     musicId: musicInfo.musicId,
+        //     musicSheetName: encodeURIComponent(detailState.activeDetail.musicSheetName),
+        //     osmd: {
+        //       product: true,
+        //       bpm: osmd?.Sheet?.userStartTempoInBPM || (osmd as any)?.bpm,
+        //       numerator,
+        //       denominator,
+        //       scoreSize: SettingState.sett.scoreSize || 'middle',
+        //     },
+        //     times: detailState.times,
+        //   })
+        //   console.log('生成缓存数据', musicJSON)
+        //   musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
+        //   nextTick(() => {
+        //     musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
+        //     musicJSON.rended = true
+        //     productRef.value?.autoProduct()
+        //   })
+        // } catch (error) {
+        //   console.log(error)
+        // }
       }
       console.timeEnd('获取数据')
       console.log('🚀 ~ detailState.times', detailState.times)
@@ -378,7 +378,7 @@ export default defineComponent({
             {/** 曲目列表 */}
             <MusicList />
             {/* 保存json */}
-            <ProductJson ref={productRef} />
+            {/* <ProductJson ref={productRef} /> */}
 
             {/* 后台课后训练小节选择 */}
             <AfterClassTraining />

src/subpages/colexiu/tips/index.module.less

@@ -2,6 +2,7 @@
   background: transparent;
   width: 100vw;
   height: 100vh;
+  margin-left: 0;
 }
 .backBtn {
   position: absolute;

src/subpages/colexiu/tips/index.tsx

@@ -12,6 +12,7 @@ export default defineComponent({
   setup(props, ctx) {
     const tipShow = ref(false)
     const guide = reactive({
+      tipStep: 1,
       tip1: false,
       tip2: false,
     })
@@ -33,12 +34,10 @@ export default defineComponent({
       const isFirstModel = localStorage.getItem('isFirstModel')
       if (modelType.value == 'init' && !isFirstTip) {
         tipShow.value = true
-        guide.tip1 = true
-        guide.tip2 = false
+        guide.tipStep = 1
       } else if (modelType.value == 'practice' && !isFirstModel) {
         tipShow.value = true
-        guide.tip1 = false
-        guide.tip2 = true
+        guide.tipStep = 2
       }
     }
     onMounted(() => {
@@ -46,7 +45,7 @@ export default defineComponent({
     })
     return () => (
       <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
-        {guide.tip1 && (
+        {guide.tipStep == 1 && (
           <Tip1
             onHanldeStop={() => {
               tipShow.value = false
@@ -54,7 +53,7 @@ export default defineComponent({
             }}
           />
         )}
-        {guide.tip2 && (
+        {guide.tipStep == 2 && (
           <Tip2
             onHanldeStop={() => {
               tipShow.value = false

src/subpages/colexiu/tips/tip1.tsx

@@ -1,7 +1,6 @@
-import { Button, Popup } from 'vant'
+import { Button } from 'vant'
 import {} from 'vant'
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import state from '/src/pages/detail/state'
 import styles from './index.module.less'
 import { getImage } from './images'
 
@@ -9,150 +8,145 @@ export default defineComponent({
   name: 'tips-tip1',
   emits: ['hanldeStop'],
   setup(props, { emit }) {
-    const steps = [
-      {
-        img: getImage('step0.png'),
-        btnsStyle: {
-          top: '-2.13333rem',
-        },
-        handStyle: {
-          top: '-0.42667rem',
-        },
-        imgStyle: {
-          top: '-2.4rem',
-        },
-      },
-      {
-        img: getImage('step1.png'),
-        btnsStyle: {
-          top: '-2.2rem',
-        },
-        handStyle: {
-          top: '-0.42667rem',
-        },
-        imgStyle: {
-          top: '-2.4rem',
-        },
-      },
-      {
-        img: getImage('step2.png'),
-        btnsStyle: {
-          top: '-0.7rem',
-          left: '-2.5rem',
-          'justify-content': 'space-evenly',
-          padding: 0,
-        },
-        handStyle: {
-          top: '-0.42667rem',
-        },
-        imgStyle: {
-          top: '-2.7rem',
-          left: '-2.3rem',
-        },
-      },
-    ]
     const contentRef = ref<HTMLElement>()
     const data = reactive({
       show: false,
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('step0.png'),
+          btnsStyle: {
+            top: '-2.13333rem',
+          },
+          handStyle: {
+            top: '-0.42667rem',
+          },
+          imgStyle: {
+            top: '-2.4rem',
+          },
+        },
+        {
+          ele: '',
+          img: getImage('step1.png'),
+          btnsStyle: {
+            top: '-2.2rem',
+          },
+          handStyle: {
+            top: '-0.42667rem',
+          },
+          imgStyle: {
+            top: '-2.4rem',
+          },
+        },
+        {
+          ele: '',
+          img: getImage('step2.png'),
+          btnsStyle: {
+            top: '-0.7rem',
+            left: '-2.5rem',
+            'justify-content': 'space-evenly',
+            padding: 0,
+          },
+          handStyle: {
+            top: '-0.42667rem',
+          },
+          imgStyle: {
+            top: '-2.7rem',
+            left: '-2.3rem',
+          },
+        },
+      ],
       step: 0,
-      rect: {} as any,
     })
-    // 开始引导
-    const handleStart = () => {
-      getEle()
+
+    const getStepELe = () => {
+      for (let i = 0; i < data.steps.length; i++) {
+        const ele: HTMLElement = document.querySelector(`[data-step='step${i}']`)!
+        if (ele) {
+          const eleNode: any = ele.cloneNode(true)
+          const eleRect = ele.getBoundingClientRect()
+          const parentElement = document.createElement('div')
+          parentElement.classList.add(styles.parent)
+          parentElement.style.left = eleRect?.left - 10 + 'px'
+          parentElement.style.top = eleRect?.top - 10 + 'px'
+          parentElement.style.width = eleRect?.width + 20 + 'px'
+          parentElement.style.height = eleRect?.height + 20 + 'px'
+          parentElement.appendChild(eleNode)
+          data.steps[i].ele = parentElement.outerHTML
+          data.steps[i].eleRect = eleRect
+        }
+      }
+      // console.log(data.steps)
     }
     onMounted(() => {
-      handleStart()
+      getStepELe()
     })
-    // 移除之前的
-    const hanldeRemove = () => {
-      const nodes = document.querySelectorAll(`.${styles.parent}`)
-      for (let n of nodes) {
-        n.remove()
-      }
-    }
-    /**
-     * 获取需要引导的元素的位置大小
-     */
-    const getEle = () => {
-      hanldeRemove()
-      const ele = document.querySelector(`[data-step='step${data.step}']`)
-      const eleRect = ele?.getBoundingClientRect()
-      const eleNode: any = ele?.cloneNode(true)
-      if (ele && eleRect) {
-        const parentElement = document.createElement('div')
-        parentElement.classList.add(styles.parent)
-        parentElement.style.left = eleRect?.left - 10 + 'px'
-        parentElement.style.top = eleRect?.top - 10 + 'px'
-        parentElement.style.width = eleRect?.width + 20 + 'px'
-        parentElement.style.height = eleRect?.height + 20 + 'px'
-        parentElement.onclick = (e: Event) => e.stopPropagation()
-        data.rect = eleRect || {}
-        parentElement.appendChild(eleNode)
-        contentRef.value?.append(parentElement)
-        // console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
-      }
-    }
 
     const handleNext = (step?: number) => {
       if (step !== undefined) {
         data.step = step
       } else {
-        if (data.step + 1 >= steps.length) {
+        if (data.step + 1 >= data.steps.length) {
           handleStop()
           return
         }
         data.step += 1
       }
-
-      getEle()
     }
     const handleStop = () => {
       emit('hanldeStop')
     }
-    return () => {
-      const item = steps[data.step]
-      return (
-        <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
-          <div class={styles.backBtn} onClick={() => handleStop()}>
-            跳过引导
-          </div>
-          <div
-            onClick={(e: Event) => e.stopPropagation()}
-            class={styles.item}
-            style={{
-              left: `${data.rect?.left}px`,
-              top: `${data.rect?.top}px`,
-            }}
-          >
-            <img class={styles.img} style={item.imgStyle} src={item.img} />
-            <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-header.png')} />
-            <div class={styles.btns} style={item.btnsStyle}>
-              {data.step + 1 == steps.length ? (
-                <>
-                  <Button
-                    class={styles.btn}
-                    round
-                    color="transparent"
-                    style={{ 'border-color': '#fff' }}
-                    type="primary"
-                    onClick={() => handleNext(0)}
-                  >
-                    再看一遍
-                  </Button>
-                  <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
-                    完成
+    return () => (
+      <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
+        <div
+          class={styles.backBtn}
+          onClick={(e: Event) => {
+            e.stopPropagation()
+            handleStop()
+          }}
+        >
+          跳过引导
+        </div>
+        {data.steps.map((item: any, index) => (
+          <div style={{ display: index === data.step ? 'block' : 'none' }} onClick={(e: Event) => e.stopPropagation()}>
+            <div
+              class={styles.item}
+              style={{
+                left: `${item.eleRect?.left}px`,
+                top: `${item.eleRect?.top}px`,
+              }}
+            >
+              <img class={styles.img} style={item.imgStyle} src={item.img} />
+              <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-header.png')} />
+              <div class={styles.btns} style={item.btnsStyle}>
+                {data.step + 1 == data.steps.length ? (
+                  <>
+                    <Button
+                      class={styles.btn}
+                      round
+                      color="transparent"
+                      style={{ 'border-color': '#fff' }}
+                      type="primary"
+                      onClick={() => handleNext(0)}
+                    >
+                      再看一遍
+                    </Button>
+                    <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
+                      完成
+                    </Button>
+                  </>
+                ) : (
+                  <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+                    下一步 ({data.step + 1}/{data.steps.length})
                   </Button>
-                </>
-              ) : (
-                <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-                  下一步 ({data.step + 1}/{steps.length})
-                </Button>
-              )}
+                )}
+              </div>
             </div>
+            <div innerHTML={item.ele}></div>
           </div>
-        </div>
-      )
-    }
+        ))}
+      </div>
+    )
   },
 })

src/subpages/colexiu/tips/tip2.tsx

@@ -8,192 +8,190 @@ export default defineComponent({
   name: 'tips-tip1',
   emits: ['hanldeStop'],
   setup(props, { emit }) {
-    const steps = [
-      {
-        img: getImage('m1.png'),
-        btnsStyle: {
-          top: '2.6rem',
-        },
-        handStyle: {
-          top: '0.8rem',
-          left: '0.22rem',
-        },
-        imgStyle: {
-          top: '0.8rem',
-          left: '-0.1rem',
-        },
-      },
-      {
-        img: getImage('m2.png'),
-        btnsStyle: {
-          top: '2.6rem',
-        },
-        handStyle: {
-          top: '0.8rem',
-          left: '0.22rem',
-        },
-        imgStyle: {
-          width: '2.66667rem',
-          top: '0.9rem',
-          left: '-0.1rem',
-        },
-      },
-      {
-        img: getImage('m3.png'),
-        btnsStyle: {
-          top: '2.8rem',
-        },
-        handStyle: {
-          top: '0.8rem',
-          left: '0.22rem',
-        },
-        imgStyle: {
-          width: '2.45333rem',
-          top: '0.8rem',
-          left: '-0.1rem',
-        },
-      },
-      {
-        img: getImage('m4.png'),
-        btnsStyle: {
-          top: '2.8rem',
-          left: '-1.3rem',
-        },
-        handStyle: {
-          top: '0.8rem',
-          left: '0.22rem',
+    const contentRef = ref<HTMLElement>()
+    const data = reactive({
+      show: false,
+      step: 0,
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('m1.png'),
+          btnsStyle: {
+            top: '2.4rem',
+            left: '-0.1rem'
+          },
+          handStyle: {
+            top: '0.6rem',
+            left: '0.1rem',
+          },
+          imgStyle: {
+            top: '0.6rem',
+            left: '-0.2rem',
+          },
         },
-        imgStyle: {
-          width: '2.45333rem',
-          top: '0.8rem',
-          left: '-1.6rem',
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('m2.png'),
+          btnsStyle: {
+            top: '2.2rem',
+          },
+          handStyle: {
+            top: '0.6rem',
+            left: '0.1rem',
+          },
+          imgStyle: {
+            width: '2.6rem',
+            top: '0.6rem',
+            left: '-0.2rem',
+          },
         },
-      },
-      {
-        img: getImage('m5.png'),
-        btnsStyle: {
-          top: '2.6rem',
-          left: '-1.9rem',
-          width: '2.93333rem',
-          'justify-content': 'space-evenly',
-          padding: 0,
+        {
+          img: getImage('m3.png'),
+          btnsStyle: {
+            top: '2.6rem',
+          },
+          handStyle: {
+            top: '0.6rem',
+            left: '0.1rem',
+          },
+          imgStyle: {
+            width: '2.45333rem',
+            top: '0.6rem',
+            left: '-0.2rem',
+          },
         },
-        handStyle: {
-          top: '0.8rem',
-          left: '0.22rem',
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('m4.png'),
+          btnsStyle: {
+            top: '2.5rem',
+            left: '-1.5rem',
+          },
+          handStyle: {
+            top: '0.6rem',
+            left: '0.1rem',
+          },
+          imgStyle: {
+            width: '2.45333rem',
+            top: '0.6rem',
+            left: '-1.7rem',
+          },
         },
-        imgStyle: {
-          top: '0.7rem',
-          left: '-1.9rem',
-          width: '2.93333rem',
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('m5.png'),
+          btnsStyle: {
+            top: '2.2rem',
+            left: '-2rem',
+            width: '2.93333rem',
+            'justify-content': 'space-evenly',
+            padding: 0,
+          },
+          handStyle: {
+            top: '0.6rem',
+            left: '0.1rem',
+          },
+          imgStyle: {
+            top: '0.4rem',
+            left: '-2rem',
+            width: '2.93333rem',
+          },
         },
-      },
-    ]
-    const contentRef = ref<HTMLElement>()
-    const data = reactive({
-      show: false,
-      step: 0,
-      rect: {} as any,
+      ],
     })
-    // 开始引导
-    const handleStart = () => {
-      getEle()
+    const getStepELe = () => {
+      for (let i = 0; i < data.steps.length; i++) {
+        const ele: HTMLElement = document.querySelector(`[data-step='m${i}']`)!
+        if (ele) {
+          const eleNode: any = ele.cloneNode(true)
+          const eleRect = ele.getBoundingClientRect()
+          const parentElement = document.createElement('div')
+          parentElement.classList.add(styles.parent)
+          parentElement.style.left = eleRect?.left - 10 + 'px'
+          parentElement.style.top = '0'
+          parentElement.style.borderRadius = '0.1rem'
+          parentElement.appendChild(eleNode)
+          data.steps[i].ele = parentElement.outerHTML
+          data.steps[i].eleRect = eleRect
+        }
+      }
     }
     onMounted(() => {
-      handleStart()
+      getStepELe()
     })
-    // 移除之前的
-    const hanldeRemove = () => {
-      const nodes = document.querySelectorAll(`.${styles.parent}`)
-      for (let n of nodes) {
-        n.remove()
-      }
-    }
-    /**
-     * 获取需要引导的元素的位置大小
-     */
-    const getEle = () => {
-      hanldeRemove()
-      const ele = document.querySelector(`[data-step='m${data.step + 1}']`)
-      const eleRect = ele?.getBoundingClientRect()
-      const eleNode: any = ele?.cloneNode(true)
-      if (ele && eleRect && contentRef.value) {
-        const parentElement = document.createElement('div')
-        parentElement.classList.add(styles.parent)
-        parentElement.style.left = eleRect.left - 10 + 'px'
-        parentElement.style.top = '0px'
-        // parentElement.style.width = eleRect?.width + 'px'
-        // parentElement.style.height = eleRect?.height + 'px'
-        parentElement.style.borderRadius = '0.1rem'
-        parentElement.onclick = (e: Event) => e.stopPropagation()
-        data.rect = {
-          ...eleRect,
-          left : eleRect.left - eleRect.width / 2,
-          top: eleRect.top + 2
-        } || {}
-        parentElement.appendChild(eleNode)
-        contentRef.value?.append(parentElement)
-        // console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
-      }
-    }
 
     const handleNext = (step?: number) => {
       if (step !== undefined) {
         data.step = step
       } else {
-        if (data.step + 1 >= steps.length) {
+        if (data.step + 1 >= data.steps.length) {
           handleStop()
           return
         }
         data.step += 1
       }
-      getEle()
     }
     const handleStop = () => {
       emit('hanldeStop')
     }
     return () => {
-      const item = steps[data.step]
       return (
         <div class={styles.content} ref={contentRef} onClick={() => handleNext()}>
-          <div class={styles.backBtn} onClick={() => handleStop()}>
-            跳过引导
-          </div>
           <div
-            onClick={(e: Event) => e.stopPropagation()}
-            class={styles.item}
-            style={{
-              width: '2.18667rem',
-              left: `${data.rect?.left}px`,
-              top: `0px`,
+            class={styles.backBtn}
+            onClick={(e: Event) => {
+              e.stopPropagation()
+              handleStop()
             }}
           >
-            <img class={styles.img} style={item.imgStyle} src={item.img} />
-            <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-hand2.png')} />
-            <div class={styles.btns} style={item.btnsStyle}>
-              {data.step + 1 == steps.length ? (
-                <>
-                  <Button
-                    class={styles.btn}
-                    round
-                    color="transparent"
-                    style={{ 'border-color': '#fff' }}
-                    type="primary"
-                    onClick={() => handleNext(0)}
-                  >
-                    再看一遍
-                  </Button>
-                  <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
-                    完成
-                  </Button>
-                </>
-              ) : (
-                <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-                  下一步 ({data.step + 1}/{steps.length})
-                </Button>
-              )}
-            </div>
+            跳过引导
           </div>
+          {data.steps.map((item: any, index: number) => (
+            <div
+              style={{ display: index === data.step ? 'block' : 'none' }}
+              onClick={(e: Event) => e.stopPropagation()}
+            >
+              <div
+                onClick={(e: Event) => e.stopPropagation()}
+                class={styles.item}
+                style={{
+                  width: '2.18667rem',
+                  left: `${item.eleRect?.left}px`,
+                }}
+              >
+                <img class={styles.img} style={item.imgStyle} src={item.img} />
+                <img class={styles.iconHead} style={item.handStyle} src={getImage('icon-hand2.png')} />
+                <div class={styles.btns} style={item.btnsStyle}>
+                  {data.step + 1 == data.steps.length ? (
+                    <>
+                      <Button
+                        class={styles.btn}
+                        round
+                        color="transparent"
+                        style={{ 'border-color': '#fff' }}
+                        type="primary"
+                        onClick={() => handleNext(0)}
+                      >
+                        再看一遍
+                      </Button>
+                      <Button class={styles.btn} round type="primary" onClick={() => handleStop()}>
+                        完成
+                      </Button>
+                    </>
+                  ) : (
+                    <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+                      下一步 ({data.step + 1}/{data.steps.length})
+                    </Button>
+                  )}
+                </div>
+              </div>
+              <div innerHTML={item.ele}></div>
+            </div>
+          ))}
         </div>
       )
     }