Merge pull request #669 from MoYingJi/pr/f

refactor(font): 重构歌词字体配置管理

Author: imsyy

src/components/Modal/Setting/FontManager.vue

@@ -46,34 +46,34 @@
 
     <div class="set-list">
       <n-h3 prefix="bar">歌词字体</n-h3>
-      <n-card v-for="font in lyricFontConfigs" :key="font.key" class="set-item">
+      <n-card v-for="font in lyricFontConfigs" :key="font.keySetting" class="set-item">
         <div class="label">
           <n-text class="name">{{ font.name }}</n-text>
           <n-text class="tip" :depth="3">{{ font.tip }}</n-text>
         </div>
         <n-flex align="center">
           <Transition name="fade" mode="out-in">
             <n-button
-              v-if="settingStore[font.key] !== font.default"
+              v-if="settingStore[font.keySetting] !== font.default"
               type="primary"
               strong
               secondary
-              @click="settingStore[font.key] = font.default"
+              @click="settingStore[font.keySetting] = font.default"
             >
               恢复默认
             </n-button>
           </Transition>
           <s-input
             v-if="settingStore.useCustomFont || !isElectron"
-            v-model:value="settingStore[font.key]"
+            v-model:value="settingStore[font.keySetting]"
             :update-value-on-input="false"
             placeholder="输入字体名称"
             class="set"
           />
           <n-select
             v-else
-            v-model:value="settingStore[font.key]"
-            :options="getOptions(font.key)"
+            v-model:value="settingStore[font.keySetting]"
+            :options="getOptions(font.keySetting)"
             class="set"
             filterable
           />
@@ -87,43 +87,10 @@
 import { useSettingStore } from "@/stores";
 import { isElectron } from "@/utils/env";
 import type { SelectOption } from "naive-ui";
+import { lyricFontConfigs } from "@/utils/lyricFontConfig";
 
 const settingStore = useSettingStore();
 
-interface FontConfig {
-  name: string;
-  key: "globalFont" | "LyricFont" | "japaneseLyricFont" | "englishLyricFont" | "koreanLyricFont";
-  default: string;
-  tip: string;
-}
-
-const lyricFontConfigs: FontConfig[] = [
-  {
-    name: "歌词区域字体",
-    key: "LyricFont",
-    default: "follow",
-    tip: "主歌词区域的基础字体",
-  },
-  {
-    name: "英语歌词字体",
-    key: "englishLyricFont",
-    default: "follow",
-    tip: "当歌词包含英语时使用的特定字体",
-  },
-  {
-    name: "日语歌词字体",
-    key: "japaneseLyricFont",
-    default: "follow",
-    tip: "当歌词包含日语时使用的特定字体",
-  },
-  {
-    name: "韩语歌词字体",
-    key: "koreanLyricFont",
-    default: "follow",
-    tip: "当歌词包含韩语时使用的特定字体",
-  },
-];
-
 // 系统字体选项
 const systemFonts = ref<SelectOption[]>([]);
 

src/components/Player/MainAMLyric.vue

@@ -24,14 +24,9 @@
         :wordFadeWidth="settingStore.wordFadeWidth"
         :style="{
           '--amll-lp-font-size': settingStore.lyricFontSize + 'px',
-          '--ja-font-family':
-            settingStore.japaneseLyricFont !== 'follow' ? settingStore.japaneseLyricFont : '',
-          '--en-font-family':
-            settingStore.englishLyricFont !== 'follow' ? settingStore.englishLyricFont : '',
-          '--ko-font-family':
-            settingStore.koreanLyricFont !== 'follow' ? settingStore.koreanLyricFont : '',
           'font-weight': settingStore.lyricFontBold ? 'bold' : 'normal',
           'font-family': settingStore.LyricFont !== 'follow' ? settingStore.LyricFont : '',
+          ...lyricLangFontStyle(settingStore),
         }"
         class="am-lyric"
         @line-click="jumpSeek"
@@ -50,6 +45,7 @@ import { getLyricLanguage } from "@/utils/format";
 import { usePlayerController } from "@/core/player/PlayerController";
 import { cloneDeep } from "lodash-es";
 import "@applemusic-like-lyrics/core/style.css";
+import { lyricLangFontStyle } from "@/utils/lyricFontConfig";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();

src/components/Player/MainLyric.vue

@@ -6,14 +6,9 @@
       '--lrc-tran-size': settingStore.lyricTranFontSize + 'px',
       '--lrc-roma-size': settingStore.lyricRomaFontSize + 'px',
       '--lrc-bold': settingStore.lyricFontBold ? 'bold' : 'normal',
-      '--ja-font-family':
-        settingStore.japaneseLyricFont !== 'follow' ? settingStore.japaneseLyricFont : '',
-      '--en-font-family':
-        settingStore.englishLyricFont !== 'follow' ? settingStore.englishLyricFont : '',
-      '--ko-font-family':
-        settingStore.koreanLyricFont !== 'follow' ? settingStore.koreanLyricFont : '',
       'font-family': settingStore.LyricFont !== 'follow' ? settingStore.LyricFont : '',
       cursor: statusStore.playerMetaShow ? 'auto' : 'none',
+      ...lyricLangFontStyle(settingStore),
     }"
     :class="[
       'lyric',
@@ -169,6 +164,7 @@ import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { usePlayerController } from "@/core/player/PlayerController";
 import { getLyricLanguage } from "@/utils/format";
 import { isElectron } from "@/utils/env";
+import { lyricLangFontStyle } from "@/utils/lyricFontConfig";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();

src/utils/lyricFontConfig.ts

@@ -0,0 +1,57 @@
+import { useSettingStore } from "@/stores";
+
+export interface LyricFontConfig {
+  name: string;
+  keySetting: "LyricFont" | "japaneseLyricFont" | "englishLyricFont" | "koreanLyricFont";
+  default: string;
+  tip: string;
+}
+
+export interface LyricLangFontConfig extends LyricFontConfig {
+  keyCss: string;
+}
+
+export const lyricLangFontConfigs: LyricLangFontConfig[] = [
+  {
+    name: "英语歌词字体",
+    keySetting: "englishLyricFont",
+    keyCss: "--en-font-family",
+    default: "follow",
+    tip: "当歌词包含英语时使用的特定字体",
+  },
+  {
+    name: "日语歌词字体",
+    keySetting: "japaneseLyricFont",
+    keyCss: "--ja-font-family",
+    default: "follow",
+    tip: "当歌词包含日语时使用的特定字体",
+  },
+  {
+    name: "韩语歌词字体",
+    keySetting: "koreanLyricFont",
+    keyCss: "--ko-font-family",
+    default: "follow",
+    tip: "当歌词包含韩语时使用的特定字体",
+  },
+];
+
+export const lyricFontConfigs: LyricFontConfig[] = [
+  {
+    name: "歌词区域字体",
+    keySetting: "LyricFont",
+    default: "follow",
+    tip: "主歌词区域的基础字体",
+  },
+  ...lyricLangFontConfigs,
+];
+
+export const lyricLangFontStyle = (
+  settingStore = useSettingStore()
+) => {
+  return Object.fromEntries(
+    lyricLangFontConfigs.map((c) => {
+      const settingValue = settingStore[c.keySetting];
+      return [c.keyCss, settingValue !== c.default ? settingValue : ""];
+    }),
+  );
+};