为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小

publish/changeLog.md

@@ -13,6 +13,7 @@
 - 调整Mac平台下的图标大小
 - 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
 - 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
+- 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
 
 ### 修复
 

src/renderer-lyric/components/core/Lyric.vue

@@ -122,10 +122,13 @@ export default {
       immediate: true,
     },
     'lyric.line': {
-      handler(n) {
+      handler(n, o) {
         if (n < 0) return
         if (n == 0 && this.isSetedLines) return this.isSetedLines = false
-        this.handleScrollLrc()
+        if (o == null || n - o != 1) return this.handleScrollLrc()
+        setTimeout(() => {
+          this.handleScrollLrc(600)
+        }, 600)
       },
       immediate: true,
     },
@@ -229,7 +232,7 @@ export default {
     handleResize() {
       this.setProgressWidth()
     },
-    handleScrollLrc() {
+    handleScrollLrc(duration = 300) {
       if (!this.dom_lines.length) return
       if (cancelScrollFn) {
         cancelScrollFn()
@@ -237,7 +240,7 @@ export default {
       }
       if (this.lyricEvent.isStopScroll) return
       let dom_p = this.dom_lines[this.lyric.line]
-      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0)
+      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0, duration)
     },
     handleLyricDown(target, x, y) {
       if (target.classList.contains('font') ||
@@ -454,7 +457,7 @@ export default {
     .lrc-content {
       &.active {
         .translation {
-          font-size: 1em;
+          font-size: .94em;
         }
         span {
           font-size: 1.2em;

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

@@ -119,12 +119,12 @@ export default {
           color: @color-theme;
         }
         .translation {
-          font-size: 1em;
+          font-size: .94em;
           color: @color-theme;
         }
         span {
           // color: @color-theme;
-          font-size: 1.2em;
+          font-size: 1.1em;
         }
       }
 

src/renderer/utils/compositions/useLyric.js

@@ -14,7 +14,7 @@ export default ({ isPlay, lyric }) => {
   let dom_lines
   let isSetedLines = false
 
-  const handleScrollLrc = () => {
+  const handleScrollLrc = (duration = 300) => {
     if (!dom_lines?.length || !dom_lyric.value) return
     if (cancelScrollFn) {
       cancelScrollFn()
@@ -22,7 +22,7 @@ export default ({ isPlay, lyric }) => {
     }
     if (isStopScroll) return
     let dom_p = dom_lines[lyric.line]
-    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.38) : 0)
+    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.38) : 0, duration)
   }
   const clearLyricScrollTimeout = () => {
     if (!timeout) return
@@ -103,10 +103,14 @@ export default ({ isPlay, lyric }) => {
     }
   }
 
-  const scrollLine = line => {
+  const scrollLine = (line, oldLine) => {
     if (line < 0) return
     if (line == 0 && isSetedLines) return isSetedLines = false
-    handleScrollLrc()
+    if (oldLine == null || line - oldLine != 1) return handleScrollLrc()
+
+    setTimeout(() => {
+      handleScrollLrc(600)
+    }, 600)
   }
 
   watch(() => lyric.lines, initLrc)