🎨 feat: 移动设置位置

Author: imsyy

src/components/Player/MainAMLyric.vue

@@ -161,15 +161,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);
   }

src/components/Setting/GeneralSetting.vue

@@ -213,68 +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-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>
@@ -328,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">
@@ -379,25 +322,6 @@ 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");
@@ -473,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(() => {

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");

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,
   }));
 };
@@ -277,13 +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 (/[\uAC00-\uD7AF]/.test(lyric)) return "ko";
   // 判断简体中文 根据中日韩统一表意文字基本区
-  if (/[\u4e00-\u9fa5]/.test(lyric)) return "zh-CN";
+  if (/[\u4E00-\u9FFF]/.test(lyric)) return "zh-CN";
   // 默认英语
   return "en";
 };