新增对播放详情页歌词大小、是否缩放、对齐方式的设置

src/renderer/components/core/PlayDetail/LyricPlayer.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="['right', $style.right]">
-  <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
+  <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
     <div :class="$style.lyricSpace"></div>
     <div ref="dom_lyric_text"></div>
     <div :class="$style.lyricSpace"></div>
@@ -21,11 +21,13 @@
 import { clipboardWriteText } from '@renderer/utils'
 import { lyric } from '@renderer/core/share/lyric'
 import { isPlay, isShowLrcSelectContent } from '@renderer/core/share/player'
-// import { ref } from '@renderer/utils/vueTools'
+import { onMounted, onBeforeUnmount, useCommit, useRefGetter, computed } from '@renderer/utils/vueTools'
 import useLyric from '@renderer/utils/compositions/useLyric'
 
 export default {
   setup() {
+    const setting = useRefGetter('setting')
+    const setPlayDetailLyricFont = useCommit('setPlayDetailLyricFont')
     const {
       dom_lyric,
       dom_lyric_text,
@@ -33,6 +35,37 @@ export default {
       handleLyricMouseDown,
       handleWheel,
     } = useLyric({ isPlay, lyric })
+
+    const fontSizeUp = () => {
+      if (setting.value.playDetail.style.fontSize >= 200) return
+      setPlayDetailLyricFont(setting.value.playDetail.style.fontSize + 1)
+    }
+    const fontSizeDown = () => {
+      if (setting.value.playDetail.style.fontSize <= 70) return
+      setPlayDetailLyricFont(setting.value.playDetail.style.fontSize - 1)
+    }
+
+    const lrcStyles = computed(() => {
+      return {
+        fontSize: setting.value.playDetail.style.fontSize / 100 + 'rem',
+        textAlign: setting.value.playDetail.style.align,
+      }
+    })
+    const isZoomActiveLrc = computed(() => setting.value.playDetail.isZoomActiveLrc)
+
+    onMounted(() => {
+      window.eventHub.on('key_shift++_down', fontSizeUp)
+      window.eventHub.on('key_numadd_down', fontSizeUp)
+      window.eventHub.on('key_-_down', fontSizeDown)
+      window.eventHub.on('key_numsub_down', fontSizeDown)
+    })
+    onBeforeUnmount(() => {
+      window.eventHub.off('key_shift++_down', fontSizeUp)
+      window.eventHub.off('key_numadd_down', fontSizeUp)
+      window.eventHub.off('key_-_down', fontSizeDown)
+      window.eventHub.off('key_numsub_down', fontSizeDown)
+    })
+
     return {
       dom_lyric,
       dom_lyric_text,
@@ -41,6 +74,8 @@ export default {
       handleWheel,
       lyric,
       isShowLrcSelectContent,
+      lrcStyles,
+      isZoomActiveLrc,
     }
   },
   methods: {
@@ -119,13 +154,12 @@ export default {
           color: @color-theme;
         }
         .translation {
-          font-size: .94em;
           color: @color-theme;
         }
-        span {
-          // color: @color-theme;
-          font-size: 1.1em;
-        }
+        // span {
+        //   // color: @color-theme;
+        //   font-size: 1.1em;
+        // }
       }
 
       span {
@@ -153,6 +187,20 @@ export default {
   //   font-size: 1.2em;
   // }
 }
+.lrcActiveZoom {
+  :global {
+    .lrc-content {
+      &.active {
+        .translation {
+          font-size: .94em;
+        }
+        span {
+          font-size: 1.1em;
+        }
+      }
+    }
+  }
+}
 .lyricSelectContent {
   position: absolute;
   left: 0;

src/renderer/components/core/PlayDetail/index.vue

@@ -297,7 +297,7 @@ export default {
       .right {
         flex-basis: 30%;
         .lyric {
-          font-size: 13px;
+          font-size: 13px !important;
         }
         .lyricSelectContent {
           font-size: 14px;

src/renderer/store/mutations.js

@@ -35,6 +35,9 @@ export default {
       state.setting.player.volume = val
     }
   },
+  setPlayDetailLyricFont(state, val) {
+    state.setting.playDetail.style.fontSize = val
+  },
   setPlayNextMode(state, val) {
     state.setting.player.togglePlayMethod = val
   },

src/renderer/views/setting/Setting.vue

@@ -20,6 +20,7 @@
     <dl ref="dom_setting_list">
       <SettingBasic />
       <SettingPlay />
+      <SettingPlayDetail />
       <SettingDesktopLyric />
       <SettingSearch />
       <SettingList />
@@ -43,6 +44,7 @@ import { currentStting } from './setting'
 
 import SettingBasic from './components/SettingBasic'
 import SettingPlay from './components/SettingPlay'
+import SettingPlayDetail from './components/SettingPlayDetail'
 import SettingDesktopLyric from './components/SettingDesktopLyric'
 import SettingSearch from './components/SettingSearch'
 import SettingList from './components/SettingList'
@@ -61,6 +63,7 @@ export default {
   components: {
     SettingBasic,
     SettingPlay,
+    SettingPlayDetail,
     SettingDesktopLyric,
     SettingSearch,
     SettingList,
@@ -94,6 +97,9 @@ export default {
     watch(() => setting.value.player.mediaDeviceId, val => {
       currentStting.value.player.mediaDeviceId = val
     })
+    watch(() => setting.value.playDetail.style.fontSize, val => {
+      currentStting.value.playDetail.style.fontSize = val
+    })
     watch(() => setting.value.player.isMute, val => {
       currentStting.value.player.isMute = val
     })

src/renderer/views/setting/components/SettingPlayDetail.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+dt#play_detail {{$t('setting__play_detail')}}
+dd
+  .gap-top
+    base-checkbox(id="setting_play_detail_font_zoom_enable" v-model="currentStting.playDetail.isZoomActiveLrc" :label="$t('setting__play_detail_font_zoom')")
+
+dd
+  h3#play_detail_align {{$t('setting__play_detail_align')}}
+  div
+    base-checkbox.gap-left(id="setting_play_detail_align_left" v-model="currentStting.playDetail.style.align" value="left" :label="$t('setting__play_detail_align_left')")
+    base-checkbox.gap-left(id="setting_play_detail_align_center" v-model="currentStting.playDetail.style.align" value="center" :label="$t('setting__play_detail_align_center')")
+    //- base-checkbox.gap-left(id="setting_play_detail_align_right" v-model="currentStting.playDetail.style.align" value="right" :label="$t('setting__play_detail_align_right')")
+
+dd
+  h3#play_detail_align {{$t('setting__play_detail_font_size')}}
+  div
+    p.gap-top {{$t('setting__play_detail_font_size_current', { size: currentStting.playDetail.style.fontSize })}}
+    base-btn.gap-top.btn(min @click="handleResetFont") {{$t('setting__play_detail_font_size_reset')}}
+
+</template>
+
+<script>
+// import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'SettingPlayDetail',
+  setup() {
+    const handleResetFont = () => {
+      currentStting.value.playDetail.style.fontSize = 100
+    }
+
+    return {
+      currentStting,
+      handleResetFont,
+    }
+  },
+}
+</script>

src/renderer/views/setting/setting.js

@@ -11,6 +11,13 @@ export const currentStting = ref({
     waitPlayEndStop: true,
     waitPlayEndStopTime: 0,
   },
+  playDetail: {
+    isZoomActiveLrc: true,
+    style: {
+      fontSize: 100,
+      align: 'center',
+    },
+  },
   desktopLyric: {
     enable: false,
     isLock: false,