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

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,