Merge pull request #634 from imsyy/dev-perf

imsyy · web-flow · commit 20b7ec15b80b · 2025-12-15T14:06:29.000+08:00
🎈 perf: 完善歌词字体自定义
diff --git a/src/components/Player/MainAMLyric.vue b/src/components/Player/MainAMLyric.vue
@@ -20,6 +20,10 @@
           '--amll-lyric-player-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 : '',
         }"
@@ -157,10 +161,15 @@ onBeforeUnmount(() => {
       }
     }
   }
-
   :lang(ja) {
     font-family: var(--ja-font-family);
   }
+  :lang(en) {
+    font-family: var(--en-font-family);
+  }
+  :lang(ko) {
+    font-family: var(--ko-font-family);
+  }
 }
 
 .lyric-loading {
diff --git a/src/components/Player/MainLyric.vue b/src/components/Player/MainLyric.vue
@@ -7,6 +7,10 @@
       '--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',
     }"
@@ -447,6 +451,12 @@ onBeforeUnmount(() => {
       &:lang(ja) {
         font-family: var(--ja-font-family);
       }
+      &:lang(en) {
+        font-family: var(--en-font-family);
+      }
+      &:lang(ko) {
+        font-family: var(--ko-font-family);
+      }
     }
     .tran {
       margin-top: 8px;
diff --git a/src/components/Setting/GeneralSetting.vue b/src/components/Setting/GeneralSetting.vue
@@ -213,62 +213,6 @@
           />
         </n-flex>
       </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">歌词区域字体</n-text>
-          <n-text class="tip" :depth="3"> 是否独立更改歌词区域字体 </n-text>
-        </div>
-        <n-flex>
-          <Transition name="fade" mode="out-in">
-            <n-button
-              v-if="settingStore.LyricFont !== 'follow'"
-              type="primary"
-              strong
-              secondary
-              @click="settingStore.LyricFont = 'follow'"
-            >
-              恢复默认
-            </n-button>
-          </Transition>
-          <n-select
-            v-model:value="settingStore.LyricFont"
-            :options="[
-              { label: '跟随全局', value: 'follow' },
-              ...allFontsData.filter((v) => v.value !== 'default'),
-            ]"
-            class="set"
-            filterable
-          />
-        </n-flex>
-      </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">日语歌词字体</n-text>
-          <n-text class="tip" :depth="3"> 是否在歌词为日语时单独设置字体 </n-text>
-        </div>
-        <n-flex>
-          <Transition name="fade" mode="out-in">
-            <n-button
-              v-if="settingStore.japaneseLyricFont !== 'follow'"
-              type="primary"
-              strong
-              secondary
-              @click="settingStore.japaneseLyricFont = 'follow'"
-            >
-              恢复默认
-            </n-button>
-          </Transition>
-          <n-select
-            v-model:value="settingStore.japaneseLyricFont"
-            :options="[
-              { label: '跟随全局', value: 'follow' },
-              ...allFontsData.filter((v) => v.value !== 'default'),
-            ]"
-            class="set"
-            filterable
-          />
-        </n-flex>
-      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">关闭软件时</n-text>
@@ -322,7 +266,12 @@
             该协议通常用于官方网页端唤起官方客户端， 启用后可能导致官方客户端无法被唤起
           </n-text>
         </div>
-        <n-switch v-model:value="settingStore.registryProtocol.orpheus" class="set" :round="false" @update:value="orpheusChange" />
+        <n-switch
+          v-model:value="settingStore.registryProtocol.orpheus"
+          class="set"
+          :round="false"
+          @update:value="orpheusChange"
+        />
       </n-card>
       <n-card class="set-item">
         <div class="label">
@@ -448,12 +397,12 @@ const modeChange = (val: boolean) => {
 
 // 全局着色更改
 const themeGlobalColorChange = (val: boolean) => {
-  if (val)  getCoverColor(musicStore.songCover);
+  if (val) getCoverColor(musicStore.songCover);
 };
 
 // 注册或取消注册协议
 const orpheusChange = async (isRegistry: boolean) => {
-  sendRegisterProtocol("orpheus", isRegistry)
+  sendRegisterProtocol("orpheus", isRegistry);
 };
 
 onMounted(() => {
diff --git a/src/components/Setting/LyricsSetting.vue b/src/components/Setting/LyricsSetting.vue
@@ -119,6 +119,64 @@
           </n-input-number>
         </n-flex>
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">歌词区域字体</n-text>
+          <n-text class="tip" :depth="3"> 是否独立更改歌词区域字体 </n-text>
+        </div>
+        <n-flex>
+          <Transition name="fade" mode="out-in">
+            <n-button
+              v-if="settingStore.LyricFont !== 'follow'"
+              type="primary"
+              strong
+              secondary
+              @click="settingStore.LyricFont = 'follow'"
+            >
+              恢复默认
+            </n-button>
+          </Transition>
+          <n-select
+            v-model:value="settingStore.LyricFont"
+            :options="[
+              { label: '跟随全局', value: 'follow' },
+              ...allFontsData.filter((v) => v.value !== 'default'),
+            ]"
+            class="set"
+            filterable
+          />
+        </n-flex>
+      </n-card>
+      <n-collapse-transition :show="settingStore.LyricFont !== 'follow'">
+        <n-card v-for="item in languageFontSettings" :key="item.key" class="set-item">
+          <div class="label">
+            <n-text class="name">{{ item.name }}歌词字体</n-text>
+            <n-text class="tip" :depth="3"> {{ item.tip }} </n-text>
+          </div>
+          <n-flex>
+            <Transition name="fade" mode="out-in">
+              <n-button
+                v-if="settingStore[item.key] !== 'follow'"
+                type="primary"
+                strong
+                secondary
+                @click="settingStore[item.key] = 'follow'"
+              >
+                恢复默认
+              </n-button>
+            </Transition>
+            <n-select
+              v-model:value="settingStore[item.key]"
+              :options="[
+                { label: '跟随全局', value: 'follow' },
+                ...allFontsData.filter((v) => v.value !== 'default'),
+              ]"
+              class="set"
+              filterable
+            />
+          </n-flex>
+        </n-card>
+      </n-collapse-transition>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">歌词字体加粗</n-text>
@@ -649,6 +707,25 @@ const restoreDesktopLyricConfig = () => {
   }
 };
 
+// 语言字体配置
+const languageFontSettings = [
+  {
+    name: "英语",
+    key: "englishLyricFont" as const,
+    tip: "是否在歌词为英语时单独设置字体",
+  },
+  {
+    name: "日语",
+    key: "japaneseLyricFont" as const,
+    tip: "是否在歌词为日语时单独设置字体",
+  },
+  {
+    name: "韩语",
+    key: "koreanLyricFont" as const,
+    tip: "是否在歌词为韩语时单独设置字体",
+  },
+];
+
 // 获取全部系统字体
 const getAllSystemFonts = async () => {
   const allFonts = await window.electron.ipcRenderer.invoke("get-all-fonts");
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -12,17 +12,17 @@ export interface SettingState {
   themeMode: "light" | "dark" | "auto";
   /** 主题类别 */
   themeColorType:
-    | "default"
-    | "orange"
-    | "blue"
-    | "pink"
-    | "brown"
-    | "indigo"
-    | "green"
-    | "purple"
-    | "yellow"
-    | "teal"
-    | "custom";
+  | "default"
+  | "orange"
+  | "blue"
+  | "pink"
+  | "brown"
+  | "indigo"
+  | "green"
+  | "purple"
+  | "yellow"
+  | "teal"
+  | "custom";
   /** 主题自定义颜色 */
   themeCustomColor: string;
   /** 全局着色 */
@@ -35,6 +35,10 @@ export interface SettingState {
   LyricFont: "follow" | string;
   /** 日语歌词字体 */
   japaneseLyricFont: "follow" | string;
+  /** 英语歌词字体 */
+  englishLyricFont: "follow" | string;
+  /** 韩语歌词字体 */
+  koreanLyricFont: "follow" | string;
   /** 隐藏 VIP 标签 */
   showCloseAppTip: boolean;
   /** 关闭应用方式 */
@@ -99,14 +103,14 @@ export interface SettingState {
   proxyPort: number;
   /** 歌曲音质 */
   songLevel:
-    | "standard"
-    | "higher"
-    | "exhigh"
-    | "lossless"
-    | "hires"
-    | "jyeffect"
-    | "sky"
-    | "jymaster";
+  | "standard"
+  | "higher"
+  | "exhigh"
+  | "lossless"
+  | "hires"
+  | "jyeffect"
+  | "sky"
+  | "jymaster";
   /** 播放设备 */
   playDevice: "default" | string;
   /** 自动播放 */
@@ -259,6 +263,8 @@ export const useSettingStore = defineStore("setting", {
     globalFont: "default",
     LyricFont: "follow",
     japaneseLyricFont: "follow",
+    englishLyricFont: "follow",
+    koreanLyricFont: "follow",
     hideVipTag: false,
     showSearchHistory: true,
     menuShowCover: true,
@@ -426,12 +432,11 @@ export const useSettingStore = defineStore("setting", {
       }
       window.$message.info(
         `已切换至
-        ${
-          this.themeMode === "auto"
-            ? "跟随系统"
-            : this.themeMode === "light"
-              ? "浅色模式"
-              : "深色模式"
+        ${this.themeMode === "auto"
+          ? "跟随系统"
+          : this.themeMode === "light"
+            ? "浅色模式"
+            : "深色模式"
         }`,
         {
           showIcon: false,
diff --git a/src/utils/format.ts b/src/utils/format.ts
@@ -277,11 +277,14 @@ const getCoverSizeUrl = (url: string, size: number | null = null) => {
  * @param lyric 歌词内容
  * @returns 语言代码（"ja" | "zh-CN" | "en"）
  */
-export const getLyricLanguage = (lyric: string): string => {
+export const getLyricLanguage = (lyric: string): "ja" | "ko" | "zh-CN" | "en" => {
+  if (!lyric || typeof lyric !== "string") return "en";
   // 判断日语 根据平假名和片假名
-  if (/[\u3040-\u309f\u30a0-\u30ff]/.test(lyric)) return "ja";
+  if (/[\u3040-\u309F\u30A0-\u30FF]/.test(lyric)) return "ja";
+  // 判断韩语 根据韩文音节
+  if (/[\uAC00-\uD7AF]/.test(lyric)) return "ko";
   // 判断简体中文 根据中日韩统一表意文字基本区
-  if (/[\u4e00-\u9fa5]/.test(lyric)) return "zh-CN";
+  if (/[\u4E00-\u9FFF]/.test(lyric)) return "zh-CN";
   // 默认英语
   return "en";
 };

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,10 @@`
`20`	`20`	`'--amll-lyric-player-font-size': settingStore.lyricFontSize + 'px',`
`21`	`21`	`'--ja-font-family':`
`22`	`22`	`settingStore.japaneseLyricFont !== 'follow' ? settingStore.japaneseLyricFont : '',`
	`23`	`+ '--en-font-family':`
	`24`	`+ settingStore.englishLyricFont !== 'follow' ? settingStore.englishLyricFont : '',`
	`25`	`+ '--ko-font-family':`
	`26`	`+ settingStore.koreanLyricFont !== 'follow' ? settingStore.koreanLyricFont : '',`
`23`	`27`	`'font-weight': settingStore.lyricFontBold ? 'bold' : 'normal',`
`24`	`28`	`'font-family': settingStore.LyricFont !== 'follow' ? settingStore.LyricFont : '',`
`25`	`29`	`}"`
`@@ -157,10 +161,15 @@ onBeforeUnmount(() => {`
`157`	`161`	`}`
`158`	`162`	`}`
`159`	`163`	`}`
`160`		`-`
`161`	`164`	`:lang(ja) {`
`162`	`165`	`font-family: var(--ja-font-family);`
`163`	`166`	`}`
	`167`	`+ :lang(en) {`
	`168`	`+ font-family: var(--en-font-family);`
	`169`	`+ }`
	`170`	`+ :lang(ko) {`
	`171`	`+ font-family: var(--ko-font-family);`
	`172`	`+ }`
`164`	`173`	`}`
`165`	`174`
`166`	`175`	`.lyric-loading {`