添加桌面歌词滚动对齐方式、歌词间距设置

src/renderer-lyric/components/layout/LyricHorizontal/index.vue

@@ -25,6 +25,8 @@ export default {
       fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
       opacity: setting['desktopLyric.style.opacity'] / 100,
       textAlign: setting['desktopLyric.style.align'],
+      '--line-gap': setting['desktopLyric.style.lineGap'] + 'px',
+      '--line-extended-gap': (setting['desktopLyric.style.lineGap'] / 3).toFixed(2) + 'px',
     }))
     const {
       dom_lyric,
@@ -74,7 +76,7 @@ export default {
     }
     .line-content {
       line-height: 1.2;
-      margin: 16px 0;
+      margin: var(--line-gap) 0;
       overflow-wrap: break-word;
 
       .font-lrc {
@@ -83,7 +85,7 @@ export default {
 
       .extended {
         font-size: 0.8em;
-        margin-top: 5px;
+        margin-top: var(--line-extended-gap);
       }
       &.line-mode {
         .font-lrc {
@@ -167,7 +169,7 @@ export default {
 //   // -webkit-text-stroke: thin #124628;
 // }
 .lyric-space {
-  height: 70%;
+  height: 80%;
 }
 // .lrc-active {
 

src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js

@@ -4,6 +4,13 @@ import { lyric } from '@lyric/store/lyric'
 import { isPlay, setting } from '@lyric/store/state'
 import { setWindowBounds } from '@lyric/utils/ipc'
 
+const getOffsetTop = (contentHeight, lineHeight) => {
+  switch (setting['desktopLyric.scrollAlign']) {
+    case 'top': return setting['desktopLyric.style.lineGap'] / 2
+    default: return contentHeight * 0.5 - lineHeight / 2
+  }
+}
+
 export default () => {
   const dom_lyric = ref(null)
   const dom_lyric_text = ref(null)
@@ -32,7 +39,7 @@ export default () => {
     }
     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.5 + dom_p.clientHeight / 2) : 0, duration)
+    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration)
   }
   const clearLyricScrollTimeout = () => {
     if (!timeout) return

src/renderer-lyric/components/layout/LyricVertical/index.vue

@@ -25,6 +25,8 @@ export default {
       fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
       opacity: setting['desktopLyric.style.opacity'] / 100,
       textAlign: setting['desktopLyric.style.align'],
+      '--line-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06) + 'px',
+      '--line-extended-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06 / 8).toFixed(2) + 'px',
     }))
     const {
       dom_lyric,
@@ -78,7 +80,7 @@ export default {
     }
     .line-content {
       line-height: 1.2;
-      margin: 0 16px;
+      margin: 0 var(--line-gap);
       overflow-wrap: break-word;
       letter-spacing: 5px;
 
@@ -88,7 +90,7 @@ export default {
 
       .extended {
         font-size: 0.8em;
-        margin-right: 2px;
+        margin-right: var(--line-extended-gap);
       }
       &.line-mode {
         .font-lrc {
@@ -173,7 +175,7 @@ export default {
 //   // -webkit-text-stroke: thin #124628;
 // }
 .lyric-space {
-  width: 70%;
+  width: 80%;
   height: 100%;
 }
 // .lrc-active {

src/renderer-lyric/components/layout/LyricVertical/useLyric.js

@@ -4,6 +4,13 @@ import { lyric } from '@lyric/store/lyric'
 import { isPlay, setting } from '@lyric/store/state'
 import { setWindowBounds } from '@lyric/utils/ipc'
 
+const getOffsetTop = (contentWidth, lineWidth) => {
+  switch (setting['desktopLyric.scrollAlign']) {
+    case 'top': return contentWidth - lineWidth - lineWidth * 0.1
+    default: return contentWidth * 0.5 - lineWidth / 2
+  }
+}
+
 export default () => {
   const dom_lyric = ref(null)
   const dom_lyric_text = ref(null)
@@ -32,7 +39,7 @@ export default () => {
     }
     if (isStopScroll) return
     let dom_p = dom_lines[lyric.line]
-    cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft - dom_lyric.value.clientWidth * 0.5 + dom_p.clientWidth / 2) : 0, duration)
+    cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration)
   }
   const clearLyricScrollTimeout = () => {
     if (!timeout) return

src/renderer-lyric/store/state.ts

@@ -12,6 +12,7 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
   'desktopLyric.y': null,
   'desktopLyric.isLockScreen': true,
   'desktopLyric.isDelayScroll': true,
+  'desktopLyric.scrollAlign': 'center',
   'desktopLyric.isHoverHide': false,
   'desktopLyric.direction': 'horizontal',
   'desktopLyric.style.align': 'center',
@@ -19,7 +20,8 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
   'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
   'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
   'desktopLyric.style.font': '',
-  'desktopLyric.style.fontSize': 120,
+  'desktopLyric.style.fontSize': 20,
+  'desktopLyric.style.lineGap': 15,
   // 'desktopLyric.style.fontWeight': true,
   'desktopLyric.style.opacity': 95,
   'desktopLyric.style.ellipsis': false,

src/renderer-lyric/useApp/useTheme.ts

@@ -12,7 +12,7 @@ export default () => {
       '--color-lyric-unplay': unplayColor,
       '--color-lyric-played': playedColor,
       '--color-lyric-shadow': shadowColor,
-      '--color-lyric-shadow-font-mode': RGB_Alpha_Shade(0.5, shadowColor),
+      '--color-lyric-shadow-font-mode': RGB_Alpha_Shade(0.49, shadowColor),
     })
   }, {
     immediate: true,