样式生成器支持选择本地字体

frontend/src/lang/en.js

@@ -117,6 +117,7 @@ export default {
     recentFonts: 'Recent fonts',
     presetFonts: 'Preset fonts',
     networkFonts: 'Network fonts',
+    localFonts: 'Local fonts',
     fontSize: 'Font size',
     lineHeight: 'Line height (0 for default)',
     normalColor: 'Normal color',

frontend/src/lang/ja.js

@@ -117,6 +117,7 @@ export default {
     recentFonts: '最近のフォント',
     presetFonts: 'プリセットフォント',
     networkFonts: 'ネットワークフォント',
+    localFonts: 'ローカルフォント',
     fontSize: 'フォントサイズ',
     lineHeight: '行の高さ（0はデフォルト）',
     normalColor: 'ノーマルの色',

frontend/src/lang/zh.js

@@ -115,6 +115,7 @@ export default {
     recentFonts: '最近使用的字体',
     presetFonts: '预设字体',
     networkFonts: '网络字体',
+    localFonts: '本地字体',
     fontSize: '字体尺寸',
     lineHeight: '行高（0为默认）',
     normalColor: '普通颜色',

frontend/src/views/StyleGenerator/FontSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <el-tooltip :content="$t('stylegen.fontSelectTip')">
-    <el-select :value="innerValue" @input="onInnerInput" @visible-change="updateRecentFonts"
+    <el-select :value="innerValue" @input="onInnerInput" @visible-change="onSelectVisibleChange"
       multiple filterable allow-create default-first-option popper-class="font-select-popper" style="position: relative;"
     >
       <el-option-group
@@ -27,6 +27,10 @@
       <el-option-group :label="$t('stylegen.networkFonts')">
         <el-option v-for="font in NETWORK_FONTS" :key="font" :value="font"></el-option>
       </el-option-group>
+
+      <el-option-group :label="$t('stylegen.localFonts')">
+        <el-option v-for="font in localFonts" :key="font" :value="font"></el-option>
+      </el-option-group>
     </el-select>
   </el-tooltip>
 </template>
@@ -45,6 +49,7 @@ export default {
       recentFonts: this.getRecentFonts(), // 这里只作为缓存，以localStorage为准
       PRESET_FONTS: fonts.PRESET_FONTS,
       NETWORK_FONTS: fonts.NETWORK_FONTS,
+      localFonts: [],
 
       innerValue: [],
     }
@@ -68,10 +73,21 @@ export default {
         this.addRecentFont(font)
       }
     },
+    onSelectVisibleChange(visible) {
+      if (!visible) {
+        return
+      }
+      this.updateRecentFonts()
+      // 在这里更新第一次下拉时不会显示本地字体，但没什么好办法
+      this.updateLocalFonts()
+    },
+
     updateRecentFonts() {
       this.recentFonts = this.getRecentFonts()
     },
-
+    async updateLocalFonts() {
+      this.localFonts = await fonts.getLocalFonts()
+    },
     getRecentFonts() {
       return common.fontsStrToArr(window.localStorage.recentFonts || '')
     },

frontend/src/views/StyleGenerator/fonts.js

@@ -46,3 +46,24 @@ export const NETWORK_FONTS = [
   'ZCOOL XiaoWei',
   'Zhi Mang Xing',
 ]
+
+let localFontsPromise = null
+
+export async function getLocalFonts() {
+  if (!localFontsPromise) {
+    localFontsPromise = doGetLocalFonts()
+  }
+  return localFontsPromise
+}
+
+async function doGetLocalFonts() {
+  try {
+    return (await window.queryLocalFonts()).map(fontData => {
+      // 理论上应该用family，但fullName可读性更好
+      return fontData.fullName
+    })
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+}