feat(FontManager): 增加「多字体备选」的输入模式

Author: MoYingJi

src/components/Modal/Setting/FontManager.vue

@@ -4,14 +4,32 @@
       <n-h3 prefix="bar">通用字体</n-h3>
       <n-card v-if="isElectron" class="set-item">
         <div class="label">
-          <n-text class="name">自定义 CSS 字体</n-text>
-          <n-text class="tip" :depth="3"> 开启后可手动输入字体名称，支持 CSS 字体族 </n-text>
+          <n-text class="name">字体设置样式</n-text>
+          <n-text class="tip" :depth="3"> 下面的字体如何显示，如何设置 </n-text>
         </div>
-        <n-switch v-model:value="settingStore.useCustomFont" class="set" :round="false" />
+        <n-select
+          v-model:value="settingStore.fontSettingStyle"
+          :options="[
+            {
+              label: '自定义 CSS 字体',
+              value: 'custom',
+            },
+            {
+              label: '多字体备选',
+              value: 'multi',
+            },
+            {
+              label: '单字体选择',
+              value: 'single',
+            },
+          ]"
+          class="set"
+          :round="false"
+        />
       </n-card>
       <n-card
         class="set-item"
-        :class="{ 'input-mode': settingStore.useCustomFont || !isElectron }"
+        :class="{ 'input-mode': isInputMode }"
       >
         <div class="label">
           <div style="display: flex; justify-content: space-between; align-items: center">
@@ -34,14 +52,24 @@
         </div>
         <n-flex align="center">
           <s-input
-            v-if="settingStore.useCustomFont || !isElectron"
+            v-if="settingStore.fontSettingStyle === 'custom' || !isElectron"
             v-model:value="settingStore.globalFont"
             :update-value-on-input="false"
             placeholder="输入字体名称"
             class="set"
           />
           <n-select
-            v-else
+            v-else-if="settingStore.fontSettingStyle === 'multi'"
+            :value="settingStore.globalFont.split(',').map(s => s.trim())"
+            :on-update-value="(value: Array<string>) => settingStore.globalFont = value.join(', ')"
+            :options="getOptions('globalFont')"
+            class="set"
+            filterable
+            multiple
+            tag
+          />
+          <n-select
+            v-else-if="settingStore.fontSettingStyle === 'single'"
             v-model:value="settingStore.globalFont"
             :options="getOptions('globalFont')"
             class="set"
@@ -54,7 +82,7 @@
       <n-h3 prefix="bar">桌面歌词</n-h3>
       <n-card
         class="set-item"
-        :class="{ 'input-mode': settingStore.useCustomFont }"
+        :class="{ 'input-mode': isInputMode }"
       >
         <div class="label">
           <div class="label-header">
@@ -82,15 +110,25 @@
         </div>
         <n-flex align="center">
           <s-input
-            v-if="settingStore.useCustomFont"
+            v-if="settingStore.fontSettingStyle === 'custom'"
             v-model:value="desktopLyricConfig.fontFamily"
             :update-value-on-input="false"
             placeholder="输入字体名称"
             class="set"
             @change="saveDesktopLyricConfig"
           />
           <n-select
-            v-else
+            v-else-if="settingStore.fontSettingStyle === 'multi'"
+            :value="desktopLyricConfig.fontFamily.split(',').map(s => s.trim())"
+            :on-update-value="(value: Array<string>) => desktopLyricConfig.fontFamily = value.join(', ')"
+            :options="getOptions('desktop')"
+            class="set"
+            filterable
+            multiple
+            tag
+          />
+          <n-select
+            v-else-if="settingStore.fontSettingStyle === 'single'"
             v-model:value="desktopLyricConfig.fontFamily"
             :options="getOptions('desktop')"
             class="set"
@@ -106,7 +144,7 @@
         v-for="font in lyricFontConfigs"
         :key="font.keySetting"
         class="set-item"
-        :class="{ 'input-mode': settingStore.useCustomFont || !isElectron }"
+        :class="{ 'input-mode': isInputMode }"
       >
         <div class="label">
           <div class="label-header">
@@ -129,14 +167,24 @@
         </div>
         <n-flex align="center">
           <s-input
-            v-if="settingStore.useCustomFont || !isElectron"
+            v-if="settingStore.fontSettingStyle === 'custom' || !isElectron"
             v-model:value="settingStore[font.keySetting]"
             :update-value-on-input="false"
             placeholder="输入字体名称"
             class="set"
           />
           <n-select
-            v-else
+            v-else-if="settingStore.fontSettingStyle === 'multi'"
+            :value="settingStore[font.keySetting].split(',').map(s => s.trim())"
+            :on-update-value="(value: Array<string>) => settingStore[font.keySetting] = value.join(', ')"
+            :options="getOptions(font.keySetting)"
+            class="set"
+            filterable
+            multiple
+            tag
+          />
+          <n-select
+            v-else-if="settingStore.fontSettingStyle === 'single'"
             v-model:value="settingStore[font.keySetting]"
             :options="getOptions(font.keySetting)"
             class="set"
@@ -165,6 +213,9 @@ const systemFonts = ref<SelectOption[]>([]);
 // 桌面歌词配置
 const desktopLyricConfig = reactive<LyricConfig>({ ...defaultDesktopLyricConfig });
 
+// 是否为输入模式
+const isInputMode = computed(() => settingStore.fontSettingStyle !== "single" || !isElectron);
+
 // 获取下拉选项
 const getOptions = (key: string) => {
   const isGlobal = key === "globalFont";

src/stores/setting.ts

@@ -25,6 +25,8 @@ export interface SettingState {
   themeVariant: "primary" | "secondary" | "tertiary" | "neutral" | "neutralVariant" | "error";
   /** 主题跟随封面 */
   themeFollowCover: boolean;
+  /** 字体设置样式 */
+  fontSettingStyle: "single" | "multi" | "custom";
   /** 全局字体 */
   globalFont: "default" | string;
   /** 歌词区域字体 */
@@ -408,8 +410,6 @@ export interface SettingState {
   playerFollowCoverColor: boolean;
   /** 进度条悬浮时显示歌词 */
   progressLyricShow: boolean;
-  /** 是否使用自定义字体输入 */
-  useCustomFont: boolean;
   /** Discord RPC 配置 */
   discordRpc: {
     /** 是否启用 Discord RPC */
@@ -448,6 +448,7 @@ export const useSettingStore = defineStore("setting", {
     themeFollowCover: false,
     themeGlobalColor: false,
     themeVariant: "secondary",
+    fontSettingStyle: "single",
     globalFont: "default",
     LyricFont: "follow",
     japaneseLyricFont: "follow",
@@ -666,7 +667,6 @@ export const useSettingStore = defineStore("setting", {
     },
     playerFollowCoverColor: true,
     progressLyricShow: true,
-    useCustomFont: false,
     discordRpc: {
       enabled: false,
       showWhenPaused: true,