新增通过播放详情页歌词调整播放进度

src/renderer/components/core/PlayDetail/LyricPlayer.vue

@@ -1,10 +1,21 @@
 <template>
-<div :class="['right', $style.right]">
+<div :class="['right', $style.right]" :style="lrcFontSize">
   <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
-    <div :class="$style.lyricSpace"></div>
+    <div :class="['pre', $style.lyricSpace]"></div>
     <div ref="dom_lyric_text"></div>
     <div :class="$style.lyricSpace"></div>
   </div>
+  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+    <div :class="$style.skip" v-show="isStopScroll">
+      <div :class="$style.line" ref="dom_skip_line"></div>
+      <span :class="$style.label">{{timeStr}}</span>
+      <base-btn :class="$style.skipBtn" @mouseenter="handleSkipMouseEnter" @mouseleave="handleSkipMouseLeave" @click="handleSkipPlay">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 170 170" space="preserve">
+          <use xlink:href="#icon-play"></use>
+        </svg>
+      </base-btn>
+    </div>
+  </transition>
   <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
     <div :class="[$style.lyricSelectContent, 'select', 'scroll', 'lyricSelectContent']" v-if="isShowLrcSelectContent" @contextmenu="handleCopySelectText">
       <div v-for="(info, index) in lyric.lines" :key="index" :class="[$style.lyricSelectline, { [$style.lrcActive]: lyric.line == index }]">
@@ -31,9 +42,15 @@ export default {
     const {
       dom_lyric,
       dom_lyric_text,
+      dom_skip_line,
       isMsDown,
+      isStopScroll,
+      timeStr,
       handleLyricMouseDown,
       handleWheel,
+      handleSkipPlay,
+      handleSkipMouseEnter,
+      handleSkipMouseLeave,
     } = useLyric({ isPlay, lyric })
 
     const fontSizeUp = () => {
@@ -48,6 +65,10 @@ export default {
     const lrcStyles = computed(() => {
       return {
         textAlign: setting.value.playDetail.style.align,
+      }
+    })
+    const lrcFontSize = computed(() => {
+      return {
         '--playDetail-lrc-font-size': setting.value.playDetail.style.fontSize / 100 + 'rem',
       }
     })
@@ -69,13 +90,20 @@ export default {
     return {
       dom_lyric,
       dom_lyric_text,
+      dom_skip_line,
       isMsDown,
+      timeStr,
       handleLyricMouseDown,
       handleWheel,
+      handleSkipPlay,
+      handleSkipMouseEnter,
+      handleSkipMouseLeave,
       lyric,
       isShowLrcSelectContent,
       lrcStyles,
+      lrcFontSize,
       isZoomActiveLrc,
+      isStopScroll,
     }
   },
   methods: {
@@ -133,11 +161,11 @@ export default {
   :global {
     .lrc-content {
       line-height: 1.2;
-      margin: var(--playDetail-lrc-font-size, 16px) 0;
+      padding: calc(var(--playDetail-lrc-font-size, 16px) / 2) 0;
       overflow-wrap: break-word;
       color: @color-player-detail-lyric;
       transition: @transition-theme;
-      transition-property: margin;
+      transition-property: padding;
 
       .translation {
         transition: @transition-theme !important;
@@ -203,6 +231,50 @@ export default {
     }
   }
 }
+
+.skip {
+  position: absolute;
+  top: calc(38% + var(--playDetail-lrc-font-size, 16px) + 4px);
+  left: 0;
+  // height: 6px;
+  width: 100%;
+  pointer-events: none;
+  // opacity: .5;
+  .line {
+    border-top: 1px dashed @color-player-detail-lyric-active;
+    opacity: .15;
+    margin-right: 30px;
+  }
+  .label {
+    position: absolute;
+    right: 30px;
+    top: -14px;
+    line-height: 1;
+    font-size: 12px;
+    color: @color-player-detail-lyric-active;
+    opacity: .7;
+  }
+  .skipBtn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateY(-50%);
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none !important;
+    pointer-events: initial;
+    transition: @transition-theme;
+    transition-property: opacity;
+    opacity: .8;
+    &:hover {
+      opacity: .6;
+    }
+  }
+}
 .lyricSelectContent {
   position: absolute;
   left: 0;
@@ -267,6 +339,14 @@ each(@themes, {
     // .lrc-active {
     //   color: ~'@{color-@{value}-theme}';
     // }
+    .skip {
+      .line {
+        border-top-color: ~'@{color-@{value}-player-detail-lyric-active}';
+      }
+      .label {
+        color:~'@{color-@{value}-player-detail-lyric-active}';
+      }
+    }
     .lyricSelectContent {
       background-color: ~'@{color-@{value}-theme_2-background_1}';
       color: ~'@{color-@{value}-player-detail-lyric}';