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

src/common/defaultSetting.ts

@@ -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,

src/common/types/app_setting.d.ts

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

src/common/types/desktop_lyric.d.ts

@@ -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']

src/lang/en-us.json

@@ -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",

src/lang/zh-cn.json

@@ -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": "数据同步",

src/lang/zh-tw.json

@@ -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": "數據同步",

src/main/modules/winLyric/utils.ts

@@ -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',

src/renderer-lyric/components/layout/LyricHorizontal/index.vue

@@ -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 styles = useCssModule()
-    const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
+    // const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
-    const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
+    // const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
-    const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
+    // 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

@@ -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 styles = useCssModule()
-    const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
+    // const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
-    const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
+    // const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
-    const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
+    // const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
-    // const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
+    // 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

@@ -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,

src/renderer/views/Setting/components/SettingDesktopLyric.vue

@@ -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