Merge pull request #917 from MoYingJi/pr/f

refactor(FontManager): 优化字体的显示转换逻辑

Author: kazukokawagawa

electron/main/ipc/ipc-system.ts

@@ -42,7 +42,7 @@ const initSystemIpc = (): void => {
   // 获取系统全部字体
   ipcMain.handle("get-all-fonts", async () => {
     try {
-      const fonts = await getFonts();
+      const fonts = await getFonts({ disableQuoting: true });
       return fonts;
     } catch (error) {
       ipcLog.error(`❌ Failed to get all system fonts: ${error}`);

src/components/Modal/Setting/FontManager.vue

@@ -58,9 +58,7 @@
           <n-select
             v-else-if="settingStore.fontSettingStyle === 'multi'"
             :value="fontFamilyToArray(settingStore.globalFont)"
-            @update:value="
-              (value: string[]) => (settingStore.globalFont = fontArrayToFamily(value))
-            "
+            @update:value="(val: string[]) => (settingStore.globalFont = fontArrayToFamily(val))"
             :options="getOptions('globalFont')"
             class="set"
             filterable
@@ -69,7 +67,8 @@
           />
           <n-select
             v-else-if="settingStore.fontSettingStyle === 'single'"
-            v-model:value="settingStore.globalFont"
+            :value="fontFamilyToDisplay(settingStore.globalFont)"
+            @update:value="(val) => (settingStore.globalFont = fontDisplayToFamily(val))"
             :options="getOptions('globalFont')"
             class="set"
             filterable
@@ -127,18 +126,18 @@
             multiple
             tag
             @update:value="
-              (value: string[]) => (desktopLyricConfig.fontFamily = fontArrayToFamily(value))
+              (val: string[]) => (desktopLyricConfig.fontFamily = fontArrayToFamily(val))
             "
           />
           <n-select
             v-else-if="settingStore.fontSettingStyle === 'single'"
-            :value="desktopLyricConfig.fontFamily"
+            :value="fontFamilyToDisplay(desktopLyricConfig.fontFamily)"
             :options="getOptions('desktop')"
             class="set"
             filterable
             @update:value="
               (val) => {
-                desktopLyricConfig.fontFamily = val;
+                desktopLyricConfig.fontFamily = fontDisplayToFamily(val);
                 saveDesktopLyricConfig();
               }
             "
@@ -185,7 +184,7 @@
             v-else-if="settingStore.fontSettingStyle === 'multi'"
             :value="fontFamilyToArray(settingStore[font.keySetting])"
             @update:value="
-              (value: string[]) => (settingStore[font.keySetting] = fontArrayToFamily(value))
+              (val: string[]) => (settingStore[font.keySetting] = fontArrayToFamily(val))
             "
             :options="getOptions(font.keySetting)"
             class="set"
@@ -195,7 +194,8 @@
           />
           <n-select
             v-else-if="settingStore.fontSettingStyle === 'single'"
-            v-model:value="settingStore[font.keySetting]"
+            :value="fontFamilyToDisplay(settingStore[font.keySetting])"
+            @update:value="(val) => (settingStore[font.keySetting] = fontDisplayToFamily(val))"
             :options="getOptions(font.keySetting)"
             class="set"
             filterable
@@ -273,6 +273,51 @@ const getAllSystemFonts = async () => {
   }
 };
 
+/**
+ * 字符串是否拥有在开头和结尾的成对引号
+ * @note 不移除首尾空格，因为在下面的所有调用场景，都会先移除首尾空格
+ * @param s 字符串
+ * @returns 是否拥有成对引号
+ */
+const hasPairedQuotes = (s: string): boolean => {
+  const l = s.length;
+  if (l < 2) return false;
+  if (s.startsWith('"')) {
+    if (s.indexOf('"', 1) === l - 1) return true;
+  } else if (s.startsWith("'")) {
+    if (s.indexOf("'", 1) === l - 1) return true;
+  }
+  return false;
+};
+
+/**
+ * 将 Font Family 字符串转换为用户可见字符串
+ * @param fontFamily Font Family 字符串
+ * @return 用户可见字符串
+ */
+const fontFamilyToDisplay = (fontFamily: string): string => {
+  // 移除首尾空格
+  fontFamily = fontFamily.trim();
+  // 移除引号
+  if (hasPairedQuotes(fontFamily)) {
+    fontFamily = fontFamily.substring(1, fontFamily.length - 1);
+  }
+  return fontFamily.trim();
+};
+
+/**
+ * 用户可见字符串转换为 Font Family 字符串
+ * @param display 用户可见字符串（单一字体）
+ * @return Font Family 字符串
+ */
+const fontDisplayToFamily = (display: string): string => {
+  display = display.trim();
+  if ((display.includes(",") || display.includes(" ")) && !hasPairedQuotes(display)) {
+    return `"${display}"`;
+  }
+  return display;
+};
+
 /**
  * 字体字符串转数组
  * @param fontFamily 字体字符串
@@ -284,17 +329,7 @@ const fontFamilyToArray = (fontFamily: string): string[] => {
   const matches = fontFamily.match(regex);
   if (!matches) return [];
 
-  return matches
-    .map((s) => {
-      // 移除首尾空格
-      s = s.trim();
-      // 移除引号
-      if (s.match(/^"|^'/)) {
-        s = s.substring(1, s.length - 1);
-      }
-      return s.trim();
-    })
-    .filter(Boolean);
+  return matches.map(fontFamilyToDisplay).filter(Boolean);
 };
 
 /**
@@ -303,15 +338,7 @@ const fontFamilyToArray = (fontFamily: string): string[] => {
  * @returns 字体字符串
  */
 const fontArrayToFamily = (fontArray: string[]): string => {
-  return fontArray
-    .map((font) => {
-      font = font.trim();
-      if ((font.includes(",") || font.includes(" ")) && !/^["'].*["']$/.test(font)) {
-        return `"${font}"`;
-      }
-      return font;
-    })
-    .join(", ");
+  return fontArray.map(fontDisplayToFamily).join(", ");
 };
 
 // 获取桌面歌词配置