🎈 perf: 优化ko字体

Author: kazukokawagawa

src/components/Setting/GeneralSetting.vue

@@ -242,81 +242,29 @@
         </n-flex>
       </n-card>
       <n-collapse-transition :show="settingStore.LyricFont !== 'follow'">
-        <n-card class="set-item">
+        <n-card
+          v-for="item in languageFontSettings"
+          :key="item.key"
+          class="set-item"
+        >
           <div class="label">
-            <n-text class="name">英语歌词字体</n-text>
-            <n-text class="tip" :depth="3"> 是否在歌词为英语时单独设置字体 </n-text>
+            <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.englishLyricFont !== 'follow'"
+                v-if="settingStore[item.key] !== 'follow'"
                 type="primary"
                 strong
                 secondary
-                @click="settingStore.englishLyricFont = 'follow'"
+                @click="settingStore[item.key] = 'follow'"
               >
                 恢复默认
               </n-button>
             </Transition>
             <n-select
-              v-model:value="settingStore.englishLyricFont"
-              :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>
-            <n-text class="tip" :depth="3"> 是否在歌词为韩语时单独设置字体 </n-text>
-          </div>
-          <n-flex>
-            <Transition name="fade" mode="out-in">
-              <n-button
-                v-if="settingStore.koreanLyricFont !== 'follow'"
-                type="primary"
-                strong
-                secondary
-                @click="settingStore.koreanLyricFont = 'follow'"
-              >
-                恢复默认
-              </n-button>
-            </Transition>
-            <n-select
-              v-model:value="settingStore.koreanLyricFont"
+              v-model:value="settingStore[item.key]"
               :options="[
                 { label: '跟随全局', value: 'follow' },
                 ...allFontsData.filter((v) => v.value !== 'default'),
@@ -431,6 +379,25 @@ const closeTaskbarProgress = (val: boolean) => {
   if (!val) window.electron.ipcRenderer.send("set-bar", "none");
 };
 
+// 语言字体配置
+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");

src/utils/format.ts

@@ -47,19 +47,19 @@ export const formatSongsList = (data: any[]): SongType[] => {
         typeof item.album === "string"
           ? item.album
           : {
-              id: (item.album || item.al)?.id,
-              name: (item.album || item.al)?.name,
-              cover: (item.album || item.al)?.picUrl,
-            },
+            id: (item.album || item.al)?.id,
+            name: (item.album || item.al)?.name,
+            cover: (item.album || item.al)?.picUrl,
+          },
       alia: isArray(item.alia || item.alias || item.transNames || item.tns)
         ? item.alia?.[0] || item.alias?.[0] || item.transNames?.[0] || item.tns?.[0]
         : item.alia,
       dj: item.dj
         ? {
-            id: item.mainTrackId || item.id,
-            name: item.dj?.brand,
-            creator: item.dj?.nickname,
-          }
+          id: item.mainTrackId || item.id,
+          name: item.dj?.brand,
+          creator: item.dj?.nickname,
+        }
         : undefined,
       ...getCoverUrl(item),
       duration: Number(item.duration || item.dt || 0),
@@ -175,13 +175,13 @@ export const formatCommentList = (data: any[]): CommentType[] => {
     beReplied:
       item.beReplied?.length > 0
         ? {
-            content: item.beReplied[0]?.content,
-            user: {
-              id: item.beReplied[0]?.user.userId,
-              name: item.beReplied[0]?.user.nickname,
-              avatarUrl: item.beReplied[0]?.user.avatarUrl,
-            },
-          }
+          content: item.beReplied[0]?.content,
+          user: {
+            id: item.beReplied[0]?.user.userId,
+            name: item.beReplied[0]?.user.nickname,
+            avatarUrl: item.beReplied[0]?.user.avatarUrl,
+          },
+        }
         : undefined,
     time: item.time,
     likedCount: item.likedCount,
@@ -197,9 +197,9 @@ export const formatCommentList = (data: any[]): CommentType[] => {
     },
     ip: item?.ip
       ? {
-          ip: item.ip,
-          location: item.location,
-        }
+        ip: item.ip,
+        location: item.location,
+      }
       : undefined,
   }));
 };
@@ -280,6 +280,8 @@ const getCoverSizeUrl = (url: string, size: number | null = null) => {
 export const getLyricLanguage = (lyric: string): string => {
   // 判断日语 根据平假名和片假名
   if (/[\u3040-\u309f\u30a0-\u30ff]/.test(lyric)) return "ja";
+  // 判断韩语 根据韩文音节
+  if (/[\uac00-\ud7af]/.test(lyric)) return "ko";
   // 判断简体中文 根据中日韩统一表意文字基本区
   if (/[\u4e00-\u9fa5]/.test(lyric)) return "zh-CN";
   // 默认英语