ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lyswhut
2023-02-09 17:52:58 +08:00
parent 02402f5207
commit ef9427122e
11 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer-lyric/components/layout/LyricHorizontal/index.vue
+26 -10
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;
src/renderer-lyric/components/layout/LyricVertical/index.vue
+18 -11
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,
src/renderer-lyric/store/state.ts
+1
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,