添加桌面歌词滚动对齐方式、歌词间距设置
parent
72418194e9
commit
07898cdfd6
|
@ -16,7 +16,7 @@
|
|||
- 新增歌词时是否歌词翻译、罗马音设置,默认关闭,可以去设置-下载设置开启(#344)
|
||||
- 新增界面字体大小设置
|
||||
- 桌面歌词新增竖排歌词显示功能(#971)
|
||||
- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色设置
|
||||
- 桌面歌词新增歌词对齐方式、是否不允许歌词换行、歌词颜色、滚动对齐方式、歌词间距设置
|
||||
- 桌面歌词新增歌曲频谱显示(得益于主窗口与桌面歌词进程通信的改进,可以将此功能以CPU使用率“相对较低”的方式带到桌面歌词中)
|
||||
- 添加kg源罗马音歌词的支持
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
||||
/**
|
||||
* 桌面歌词未播放字体颜色
|
||||
*/
|
||||
|
|
|
@ -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']
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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": "灰常美丽",
|
||||
|
|
|
@ -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": "灰常美麗",
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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 {
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue