github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

新增是否加粗扩展歌词设置

pull/1211/head
lyswhut 2023-02-09 17:52:58 +08:00
parent 02402f5207
commit ef9427122e
11 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/defaultSetting.ts
View File

@ -71,6 +71,7 @@ const defaultSetting: LX.AppSetting = {
'desktopLyric.style.isZoomActiveLrc': true,
'desktopLyric.style.isFontWeightFont': true,
'desktopLyric.style.isFontWeightLine': false,
'desktopLyric.style.isFontWeightExtended': false,
'list.isClickPlayList': false,
'list.isShowSource': true,

5
src/common/types/app_setting.d.ts vendored
View File

@ -329,6 +329,11 @@ declare global {
*/
'desktopLyric.style.isFontWeightLine': boolean
/**
* 是否加粗翻译、罗马音字体
*/
'desktopLyric.style.isFontWeightExtended': boolean
/**
* 是否启用双击列表里的歌曲时自动切换到当前列表播放（仅对歌单、排行榜有效）
*/

1
src/common/types/desktop_lyric.d.ts vendored
View File

@ -28,6 +28,7 @@ declare namespace LX {
'desktopLyric.style.ellipsis': LX.AppSetting['desktopLyric.style.ellipsis']
'desktopLyric.style.isFontWeightFont': LX.AppSetting['desktopLyric.style.isFontWeightFont']
'desktopLyric.style.isFontWeightLine': LX.AppSetting['desktopLyric.style.isFontWeightLine']
'desktopLyric.style.isFontWeightExtended': LX.AppSetting['desktopLyric.style.isFontWeightExtended']
'desktopLyric.style.isZoomActiveLrc': LX.AppSetting['desktopLyric.style.isZoomActiveLrc']
'common.langId': LX.AppSetting['common.langId']
'player.isShowLyricTranslation': LX.AppSetting['player.isShowLyricTranslation']

1
src/lang/en-us.json
View File

@ -449,6 +449,7 @@
"setting__search_focus_search_box": "Automatically focus the search box on startup",
"setting__search_history": "Search history",
"setting__search_hot": "Top Searches",
"setting__setting__desktop_lyric_font_weight_extended": "translation, romanized lyrics",
"setting__setting__desktop_lyric_font_weight_font": "verbatim lyrics",
"setting__setting__desktop_lyric_font_weight_line": "progressive lyrics",
"setting__sync": "Data synchronization",

1
src/lang/zh-cn.json
View File

@ -452,6 +452,7 @@
"setting__search_focus_search_box": "启动时自动聚焦搜索框",
"setting__search_history": "显示历史搜索记录",
"setting__search_hot": "显示热门搜索",
"setting__setting__desktop_lyric_font_weight_extended": "翻译、罗马音歌词",
"setting__setting__desktop_lyric_font_weight_font": "逐字歌词",
"setting__setting__desktop_lyric_font_weight_line": "逐行歌词",
"setting__sync": "数据同步",

1
src/lang/zh-tw.json
View File

@ -450,6 +450,7 @@
"setting__search_focus_search_box": "啟動時自動聚焦搜索框",
"setting__search_history": "顯示歷史搜索記錄",
"setting__search_hot": "顯示熱門搜索",
"setting__setting__desktop_lyric_font_weight_extended": "翻譯、羅馬音歌詞",
"setting__setting__desktop_lyric_font_weight_font": "逐字歌詞",
"setting__setting__desktop_lyric_font_weight_line": "逐行歌詞",
"setting__sync": "數據同步",

1
src/main/modules/winLyric/utils.ts
View File

@ -78,6 +78,7 @@ export const watchConfigKeys = [
'desktopLyric.style.ellipsis',
'desktopLyric.style.isFontWeightFont',
'desktopLyric.style.isFontWeightLine',
'desktopLyric.style.isFontWeightExtended',
'desktopLyric.style.isZoomActiveLrc',
'common.langId',
'player.isShowLyricTranslation',

36
src/renderer-lyric/components/layout/LyricHorizontal/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:class="classNames"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@ -12,15 +12,27 @@
<script>
import { setting } from '@lyric/store/state'
import { computed } from '@common/utils/vueTools'
import { computed, useCssModule } from '@common/utils/vueTools'
import useLyric from './useLyric'
export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
const styles = useCssModule()
// const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
// const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
// const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
// const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
// const isFontWeightExtended = computed(() => setting['desktopLyric.style.isFontWeightExtended'])
const classNames = computed(() => {
const name = [styles.lyric]
if (isMsDown.value) name.push(styles.draging)
if (setting['desktopLyric.style.isZoomActiveLrc']) name.push(styles.lrcActiveZoom)
if (setting['desktopLyric.style.ellipsis']) name.push(styles.ellipsis)
if (setting['desktopLyric.style.isFontWeightFont']) name.push(styles.fontWeightFont)
if (setting['desktopLyric.style.isFontWeightLine']) name.push(styles.fontWeightLine)
if (setting['desktopLyric.style.isFontWeightExtended']) name.push(styles.fontWeightExtended)
return name
})
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
@ -39,11 +51,8 @@ export default {
} = useLyric()
return {
isZoomActiveLrc,
classNames,
lrcStyles,
ellipsis,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,
@ -251,6 +260,13 @@ export default {
}
}
}
.font-weight-extended {
:global {
.extended {
font-weight: bold;
}
}
}
// .footer {
// flex: 0 0 100px;
// overflow: hidden;

29
src/renderer-lyric/components/layout/LyricVertical/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:class="classNames"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@ -12,16 +12,26 @@
<script>
import { setting } from '@lyric/store/state'
import { computed } from '@common/utils/vueTools'
import { computed, useCssModule } from '@common/utils/vueTools'
import useLyric from './useLyric'
export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
// const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
const styles = useCssModule()
// const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
// const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
// const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
// const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
const classNames = computed(() => {
const name = [styles.lyric]
if (isMsDown.value) name.push(styles.draging)
if (setting['desktopLyric.style.isZoomActiveLrc']) name.push(styles.lrcActiveZoom)
if (setting['desktopLyric.style.ellipsis']) name.push(styles.ellipsis)
if (setting['desktopLyric.style.isFontWeightFont']) name.push(styles.fontWeightFont)
if (setting['desktopLyric.style.isFontWeightLine']) name.push(styles.fontWeightLine)
if (setting['desktopLyric.style.isFontWeightExtended']) name.push(styles.fontWeightExtended)
return name
})
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
@ -40,11 +50,8 @@ export default {
} = useLyric()
return {
isZoomActiveLrc,
classNames,
lrcStyles,
ellipsis,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,

1
src/renderer-lyric/store/state.ts
View File

@ -28,6 +28,7 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
'desktopLyric.style.ellipsis': false,
'desktopLyric.style.isFontWeightFont': false,
'desktopLyric.style.isFontWeightLine': false,
'desktopLyric.style.isFontWeightExtended': false,
'desktopLyric.style.isZoomActiveLrc': true,
'common.langId': 'zh-cn',
'player.isShowLyricTranslation': false,

1
src/renderer/views/Setting/components/SettingDesktopLyric.vue
View File

@ -31,6 +31,7 @@ dd
div
base-checkbox.gap-left(id="setting_setting__desktop_lyric_font_weight_font" :modelValue="appSetting['desktopLyric.style.isFontWeightFont']" @update:modelValue="updateSetting({ 'desktopLyric.style.isFontWeightFont': $event })" :label="$t('setting__setting__desktop_lyric_font_weight_font')")
base-checkbox.gap-left(id="setting_setting__desktop_lyric_font_weight_line" :modelValue="appSetting['desktopLyric.style.isFontWeightLine']" @update:modelValue="updateSetting({ 'desktopLyric.style.isFontWeightLine': $event })" :label="$t('setting__setting__desktop_lyric_font_weight_line')")
base-checkbox.gap-left(id="setting_setting__desktop_lyric_font_weight_extended" :modelValue="appSetting['desktopLyric.style.isFontWeightExtended']" @update:modelValue="updateSetting({ 'desktopLyric.style.isFontWeightExtended': $event })" :label="$t('setting__setting__desktop_lyric_font_weight_extended')")
dd