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

2022-10-29 15:20:59 +08:00 · 2022-10-29 15:20:59 +08:00 · 07898cdfd6
parent 72418194e9
commit 07898cdfd6
15 changed files with 100 additions and 29 deletions
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@ -16,7 +16,7 @@
 - 新增歌词时是否歌词翻译、罗马音设置，默认关闭，可以去设置-下载设置开启（#344）
 - 新增界面字体大小设置
 - 桌面歌词新增竖排歌词显示功能（#971）
- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色设置
+- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色、滚动对齐方式、歌词间距设置
 - 桌面歌词新增歌曲频谱显示（得益于主窗口与桌面歌词进程通信的改进，可以将此功能以CPU使用率“相对较低”的方式带到桌面歌词中）
 - 添加kg源罗马音歌词的支持

--- a/src/common/defaultSetting.ts
+++ b/src/common/defaultSetting.ts
@ -50,14 +50,16 @@ const defaultSetting: LX.AppSetting = {
  'desktopLyric.y': null,
  'desktopLyric.isLockScreen': true,
  'desktopLyric.isDelayScroll': true,
+  'desktopLyric.scrollAlign': 'center',
  'desktopLyric.isHoverHide': false,
  'desktopLyric.direction': 'horizontal',
  'desktopLyric.style.align': 'center',
  'desktopLyric.style.font': '',
  'desktopLyric.style.fontSize': 20,
+  'desktopLyric.style.lineGap': 15,
  'desktopLyric.style.lyricUnplayColor': 'rgba(255, 255, 255, 1)',
  'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
-  'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
+  'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.15)',
  // 'desktopLyric.style.fontWeight': false,
  'desktopLyric.style.opacity': 95,
  'desktopLyric.style.ellipsis': false,
--- a/src/common/types/app_setting.d.ts
+++ b/src/common/types/app_setting.d.ts
@ -222,6 +222,11 @@ declare namespace LX {
     */
    'desktopLyric.isDelayScroll': boolean

+    /**
+     * 歌词滚动位置
+     */
+    'desktopLyric.scrollAlign': 'top' | 'center'
+
    /**
     * 是否在鼠标划过桌面歌词窗口时降低歌词透明度
     */
@ -233,7 +238,7 @@ declare namespace LX {
    'desktopLyric.direction': 'horizontal' | 'vertical'

    /**
-     * 是否在鼠标划过桌面歌词窗口时降低歌词透明度
+     * 歌词对齐方式
     */
    'desktopLyric.style.align': 'center' | 'left' | 'right'

@ -247,6 +252,11 @@ declare namespace LX {
     */
    'desktopLyric.style.fontSize': number

+    /**
+     * 歌词间距大小
+     */
+    'desktopLyric.style.lineGap': number
+
    /**
     * 桌面歌词未播放字体颜色
     */
--- a/src/common/types/desktop_lyric.d.ts
+++ b/src/common/types/desktop_lyric.d.ts
@ -12,11 +12,13 @@ declare namespace LX {
      'desktopLyric.y': LX.AppSetting['desktopLyric.y']
      'desktopLyric.isLockScreen': LX.AppSetting['desktopLyric.isLockScreen']
      'desktopLyric.isDelayScroll': LX.AppSetting['desktopLyric.isDelayScroll']
+      'desktopLyric.scrollAlign': LX.AppSetting['desktopLyric.scrollAlign']
      'desktopLyric.isHoverHide': LX.AppSetting['desktopLyric.isHoverHide']
      'desktopLyric.direction': LX.AppSetting['desktopLyric.direction']
      'desktopLyric.style.align': LX.AppSetting['desktopLyric.style.align']
      'desktopLyric.style.font': LX.AppSetting['desktopLyric.style.font']
      'desktopLyric.style.fontSize': LX.AppSetting['desktopLyric.style.fontSize']
+      'desktopLyric.style.lineGap': LX.AppSetting['desktopLyric.style.lineGap']
      'desktopLyric.style.lyricUnplayColor': LX.AppSetting['desktopLyric.style.lyricUnplayColor']
      'desktopLyric.style.lyricPlayedColor': LX.AppSetting['desktopLyric.style.lyricPlayedColor']
      'desktopLyric.style.lyricShadowColor': LX.AppSetting['desktopLyric.style.lyricShadowColor']
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@ -70,11 +70,6 @@
  "duplicate_list_tip": "You have favorited this list [{name}] before, do you need to update the songs in it?",
  "export": "Export",
  "fullscreen_exit": "Exit Full Screen",
-  "theme_edit_modal__copy": "Copy theme",
-  "theme_edit_modal__remove": "delete",
-  "theme_edit_modal__remove_tip": "Do you really want to remove this thread?",
-  "theme_edit_modal__save_new": "Save new",
-  "theme_edit_modal__select_bg_file": "Choose a background image",
  "history_clear": "Clear History",
  "history_remove": "Right click to remove this entry",
  "history_search": "History Searches",
@ -315,9 +310,15 @@
  "setting__desktop_lyric_font_default": "Default",
  "setting__desktop_lyric_font_weight": "Bold font",
  "setting__desktop_lyric_hover_hide": "Reduce the transparency of lyrics when the mouse moves into the lyrics area (this feature has platform compatibility issues)",
+  "setting__desktop_lyric_line_gap": "Lyric spacing ({num})",
+  "setting__desktop_lyric_line_gap_add": "increase the spacing",
+  "setting__desktop_lyric_line_gap_dec": "Reduce spacing",
  "setting__desktop_lyric_lock": "Lock lyrics",
  "setting__desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
  "setting__desktop_lyric_played_color": "color played",
+  "setting__desktop_lyric_scroll_align": "now playing lyrics scroll position",
+  "setting__desktop_lyric_scroll_align_center": "Center",
+  "setting__desktop_lyric_scroll_align_top": "Top",
  "setting__desktop_lyric_shadow_color": "shadow color",
  "setting__desktop_lyric_unplay_color": "Color not playing",
  "setting__download": "Download",
@ -521,6 +522,7 @@
  "theme_edit_modal__bg_image_remove": "remove background image",
  "theme_edit_modal__close_btn": "Closure",
  "theme_edit_modal__control_btn": "Left control button color",
+  "theme_edit_modal__copy": "Copy theme",
  "theme_edit_modal__dark": "Dark theme",
  "theme_edit_modal__hide_btn": "Hide play details page",
  "theme_edit_modal__main_bg": "Content area background color",
@ -531,6 +533,10 @@
  "theme_edit_modal__pick_save": "Confirm",
  "theme_edit_modal__preview": "Preview theme",
  "theme_edit_modal__primary": "Theme color",
+  "theme_edit_modal__remove": "delete",
+  "theme_edit_modal__remove_tip": "Do you really want to remove this thread?",
+  "theme_edit_modal__save_new": "Save new",
+  "theme_edit_modal__select_bg_file": "Choose a background image",
  "theme_edit_modal__title": "Edit topic",
  "theme_green": "Green",
  "theme_grey": "Grey",
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@ -70,11 +70,6 @@
  "duplicate_list_tip": "你之前已收藏过该列表 [{name}]，是否需要更新里面的歌曲？",
  "export": "导出",
  "fullscreen_exit": "退出全屏",
-  "theme_edit_modal__copy": "复制主题",
-  "theme_edit_modal__remove": "删除",
-  "theme_edit_modal__remove_tip": "是否真的要移除这个主题？",
-  "theme_edit_modal__save_new": "另存",
-  "theme_edit_modal__select_bg_file": "选择背景图片",
  "history_clear": "清空搜索历史",
  "history_remove": "右击移除该历史",
  "history_search": "历史搜索",
@ -317,9 +312,15 @@
  "setting__desktop_lyric_font_default": "默认",
  "setting__desktop_lyric_font_weight": "加粗字体",
  "setting__desktop_lyric_hover_hide": "鼠标移入歌词区域时降低歌词透明度（此功能存在平台兼容性问题）",
+  "setting__desktop_lyric_line_gap": "歌词间距（{num}）",
+  "setting__desktop_lyric_line_gap_add": "加大间距",
+  "setting__desktop_lyric_line_gap_dec": "减小间距",
  "setting__desktop_lyric_lock": "锁定歌词",
  "setting__desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
  "setting__desktop_lyric_played_color": "已播放颜色",
+  "setting__desktop_lyric_scroll_align": "正在播放歌词滚动位置",
+  "setting__desktop_lyric_scroll_align_center": "中心",
+  "setting__desktop_lyric_scroll_align_top": "顶部",
  "setting__desktop_lyric_shadow_color": "阴影颜色",
  "setting__desktop_lyric_unplay_color": "未播放颜色",
  "setting__download": "下载设置",
@ -523,6 +524,7 @@
  "theme_edit_modal__bg_image_remove": "移除背景图片",
  "theme_edit_modal__close_btn": "关闭",
  "theme_edit_modal__control_btn": "左侧控制按钮颜色",
+  "theme_edit_modal__copy": "复制主题",
  "theme_edit_modal__dark": "暗色主题",
  "theme_edit_modal__hide_btn": "隐藏播放详情页",
  "theme_edit_modal__main_bg": "内容区域背景颜色",
@ -533,6 +535,10 @@
  "theme_edit_modal__pick_save": "确认",
  "theme_edit_modal__preview": "预览主题",
  "theme_edit_modal__primary": "主题色",
+  "theme_edit_modal__remove": "删除",
+  "theme_edit_modal__remove_tip": "是否真的要移除这个主题？",
+  "theme_edit_modal__save_new": "另存",
+  "theme_edit_modal__select_bg_file": "选择背景图片",
  "theme_edit_modal__title": "编辑主题",
  "theme_green": "绿意盎然",
  "theme_grey": "灰常美丽",
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@ -70,11 +70,6 @@
  "duplicate_list_tip": "你之前已收藏過該列表 [{name}]，是否需要更新里面的歌曲？",
  "export": "導出",
  "fullscreen_exit": "退出全屏",
-  "theme_edit_modal__copy": "複製主題",
-  "theme_edit_modal__remove": "刪除",
-  "theme_edit_modal__remove_tip": "是否真的要移除這個主題？",
-  "theme_edit_modal__save_new": "另存",
-  "theme_edit_modal__select_bg_file": "選擇背景圖片",
  "history_clear": "清空搜索歷史",
  "history_remove": "右擊移除該歷史",
  "history_search": "歷史搜索",
@ -316,9 +311,15 @@
  "setting__desktop_lyric_font_default": "默認",
  "setting__desktop_lyric_font_weight": "加粗字體",
  "setting__desktop_lyric_hover_hide": "鼠標移入歌詞區域時降低歌詞透明度（此功能存在平台兼容性問題）",
+  "setting__desktop_lyric_line_gap": "歌詞間距（{num}）",
+  "setting__desktop_lyric_line_gap_add": "加大間距",
+  "setting__desktop_lyric_line_gap_dec": "減小間距",
  "setting__desktop_lyric_lock": "鎖定歌詞",
  "setting__desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
  "setting__desktop_lyric_played_color": "已播放顏色",
+  "setting__desktop_lyric_scroll_align": "正在播放歌詞滾動位置",
+  "setting__desktop_lyric_scroll_align_center": "中心",
+  "setting__desktop_lyric_scroll_align_top": "頂部",
  "setting__desktop_lyric_shadow_color": "陰影顏色",
  "setting__desktop_lyric_unplay_color": "未播放顏色",
  "setting__download": "下載設置",
@ -521,6 +522,7 @@
  "theme_edit_modal__bg_image_remove": "移除背景圖片",
  "theme_edit_modal__close_btn": "關閉",
  "theme_edit_modal__control_btn": "左側控制按鈕顏色",
+  "theme_edit_modal__copy": "複製主題",
  "theme_edit_modal__dark": "暗色主題",
  "theme_edit_modal__hide_btn": "隱藏播放詳情頁",
  "theme_edit_modal__main_bg": "內容區域背景顏色",
@ -531,6 +533,10 @@
  "theme_edit_modal__pick_save": "確認",
  "theme_edit_modal__preview": "預覽主題",
  "theme_edit_modal__primary": "主題色",
+  "theme_edit_modal__remove": "刪除",
+  "theme_edit_modal__remove_tip": "是否真的要移除這個主題？",
+  "theme_edit_modal__save_new": "另存",
+  "theme_edit_modal__select_bg_file": "選擇背景圖片",
  "theme_edit_modal__title": "編輯主題",
  "theme_green": "綠意盎然",
  "theme_grey": "灰常美麗",
--- a/src/main/modules/winLyric/utils.ts
+++ b/src/main/modules/winLyric/utils.ts
@ -87,6 +87,7 @@ export const watchConfigKeys = [
  'desktopLyric.y',
  'desktopLyric.isLockScreen',
  'desktopLyric.isDelayScroll',
+  'desktopLyric.scrollAlign',
  'desktopLyric.isHoverHide',
  'desktopLyric.direction',
  'desktopLyric.style.align',
@ -95,6 +96,7 @@ export const watchConfigKeys = [
  'desktopLyric.style.lyricShadowColor',
  'desktopLyric.style.font',
  'desktopLyric.style.fontSize',
+  'desktopLyric.style.lineGap',
  // 'desktopLyric.style.fontWeight',
  'desktopLyric.style.opacity',
  'desktopLyric.style.ellipsis',
--- a/src/renderer-lyric/components/layout/LyricHorizontal/index.vue
+++ b/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 {

--- a/src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js
+++ b/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
--- a/src/renderer-lyric/components/layout/LyricVertical/index.vue
+++ b/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 {
--- a/src/renderer-lyric/components/layout/LyricVertical/useLyric.js
+++ b/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
--- a/src/renderer-lyric/store/state.ts
+++ b/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,
--- a/src/renderer-lyric/useApp/useTheme.ts
+++ b/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,
--- a/src/renderer/views/Setting/components/SettingDesktopLyric.vue
+++ b/src/renderer/views/Setting/components/SettingDesktopLyric.vue
@ -30,6 +30,12 @@ dd
    base-checkbox.gap-left(id="setting_desktop_lyric_direction_horizontal" :modelValue="appSetting['desktopLyric.direction']" @update:modelValue="updateSetting({ 'desktopLyric.direction': $event })" need value="horizontal" :label="$t('setting__desktop_lyric_direction_horizontal')")
    base-checkbox.gap-left(id="setting_desktop_lyric_direction_vertical" :modelValue="appSetting['desktopLyric.direction']" @update:modelValue="updateSetting({ 'desktopLyric.direction': $event })" need value="vertical" :label="$t('setting__desktop_lyric_direction_vertical')")

+dd
+  h3#desktop_lyric_scroll_align {{$t('setting__desktop_lyric_scroll_align')}}
+  div
+    base-checkbox.gap-left(id="setting_desktop_lyric_scroll_align_top" :modelValue="appSetting['desktopLyric.scrollAlign']" @update:modelValue="updateSetting({ 'desktopLyric.scrollAlign': $event })" need value="top" :label="$t('setting__desktop_lyric_scroll_align_top')")
+    base-checkbox.gap-left(id="setting_desktop_lyric_scroll_align_center" :modelValue="appSetting['desktopLyric.scrollAlign']" @update:modelValue="updateSetting({ 'desktopLyric.scrollAlign': $event })" need value="center" :label="$t('setting__desktop_lyric_scroll_align_center')")
+
 dd
  h3#desktop_lyric_align {{$t('setting__desktop_lyric_align')}}
  div
@ -37,6 +43,12 @@ dd
    base-checkbox.gap-left(id="setting_desktop_lyric_align_center" :modelValue="appSetting['desktopLyric.style.align']" @update:modelValue="updateSetting({ 'desktopLyric.style.align': $event })" need value="center" :label="$t('setting__desktop_lyric_align_center')")
    base-checkbox.gap-left(id="setting_desktop_lyric_align_right" :modelValue="appSetting['desktopLyric.style.align']" @update:modelValue="updateSetting({ 'desktopLyric.style.align': $event })" need value="right" :label="$t('setting__desktop_lyric_align_right')")

+dd
+  h3#desktop_lyric_line_gap {{$t('setting__desktop_lyric_line_gap', { num: appSetting['desktopLyric.style.lineGap'] })}}
+  div
+    p
+      base-btn.btn(min @click="changeLineGap(-1)") {{$t('setting__desktop_lyric_line_gap_dec')}}
+      base-btn.btn(min @click="changeLineGap(1)") {{$t('setting__desktop_lyric_line_gap_add')}}
 dd
  h3#desktop_lyric_color {{$t('setting__desktop_lyric_color')}}
  div
@ -174,7 +186,7 @@ const useLyricColor = () => {
    const defaultSetting = {
      'desktopLyric.style.lyricUnplayColor': 'rgba(255, 255, 255, 1)',
      'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)',
-      'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.14)',
+      'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.15)',
    }
    updateSetting(defaultSetting)
    setLyricUnplayColor(defaultSetting['desktopLyric.style.lyricUnplayColor'])
@ -202,6 +214,10 @@ export default {
  setup() {
    const t = useI18n()

+    const changeLineGap = (step) => {
+      let gap = appSetting['desktopLyric.style.lineGap'] + step
+      updateSetting({ 'desktopLyric.style.lineGap': Math.min(Math.max(gap, 0), 25) })
+    }

    const {
      lyric_unplay_color_ref,
@ -221,6 +237,7 @@ export default {
    return {
      appSetting,
      updateSetting,
+      changeLineGap,
      lyric_unplay_color_ref,
      lyric_played_color_ref,
      lyric_shadow_color_ref,