优化字体选择器，第一次下拉时也可以显示本地字体、去掉重复的本地字体

frontend/src/api/chat/ChatClientTest.js

@@ -43,6 +43,7 @@ const CONTENTS = [
   '無駄無駄無駄無駄無駄無駄無駄無駄',
   '我衰咗三年，我等緊個機會，爭番口氣',
   '因为你的缘故，我的心中萌生了多余的情感',
+  'CJK令化天家少房所沪港漢澳直真空角言门骨',
   '迷えば、敗れる',
   '逃げるんだよォ！',
   '届かない恋をしていても',

frontend/src/lang/zh.js

@@ -102,8 +102,8 @@ export default {
 
     global: '全局',
     scalingNotice: '如果觉得字体太小，优先修改这里的比例而不是在OBS里拉伸浏览器源。求求你们不要拉伸然后问为什么看不清了😭',
-    globalScale: '全局比例',
-    fontScale: '字体比例',
+    globalScale: '全局缩放比例',
+    fontScale: '字体缩放比例',
 
     outlines: '描边',
     showOutlines: '显示描边',

frontend/src/views/StyleGenerator/FontSelect.vue

@@ -5,40 +5,51 @@
     >
       <el-option-group
         v-for="(groupCfg, index) in [
-          { fonts: recentFonts, label: $t('stylegen.recentFonts'), isRecent: true },
-          { fonts: PRESET_FONTS, label: $t('stylegen.presetFonts') },
+          { fonts: recentFonts, label: $t('stylegen.recentFonts'), showSample: true, isRecent: true },
+          { fonts: PRESET_FONTS, label: $t('stylegen.presetFonts'), showSample: true },
+          { fonts: NETWORK_FONTS, label: $t('stylegen.networkFonts') },
+          { fonts: localFonts, label: $t('stylegen.localFonts') },
         ]"
         :key="index"
         :label="groupCfg.label"
       >
-        <el-option v-for="font in groupCfg.fonts" :key="font" :value="font">
-          <span class="fonts-select-name-line">
-            <span>{{ font }}</span>
-            <el-button v-if="groupCfg.isRecent" type="text" class="fonts-select-btn" style="color: #f56c6c;"
-              @click="() => deleteRecentFont(font)"
-            >
-              <i class="el-icon-delete"></i>
-            </el-button>
-          </span>
-          <span class="fonts-select-sample" :style="{'font-family': font}">Sample 样例 サンプル</span>
-        </el-option>
-      </el-option-group>
+        <!-- 留一个占位，不然model更新时显示的列表不会更新... -->
+        <el-option v-if="groupCfg.fonts.length === 0" value="-" disabled></el-option>
 
-      <el-option-group :label="$t('stylegen.networkFonts')">
-        <el-option v-for="font in NETWORK_FONTS" :key="font" :value="font"></el-option>
-      </el-option-group>
+        <template v-else>
+          <template v-if="groupCfg.showSample">
+            <el-option v-for="font in groupCfg.fonts" :key="font" :value="font">
+              <span class="fonts-select-name-line">
+                <span>{{ font }}</span>
 
-      <el-option-group :label="$t('stylegen.localFonts')">
-        <el-option v-for="font in localFonts" :key="font" :value="font"></el-option>
+                <el-button v-if="groupCfg.isRecent" type="text" class="fonts-select-btn" style="color: #f56c6c;"
+                  @click="() => deleteRecentFont(font)"
+                >
+                  <i class="el-icon-delete"></i>
+                </el-button>
+              </span>
+              <span class="fonts-select-sample" :style="{'font-family': font}">Sample 样例 サンプル</span>
+            </el-option>
+          </template>
+
+          <template v-else>
+            <el-option v-for="font in groupCfg.fonts" :key="font" :value="font"></el-option>
+          </template>
+        </template>
       </el-option-group>
     </el-select>
   </el-tooltip>
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import * as common from './common'
 import * as fonts from './fonts'
 
+let sharedRecentFonts = ref([]) // 这里只作为缓存，以localStorage为准
+let sharedLocalFonts = ref([])
+
 export default {
   name: 'FontSelect',
   props: {
@@ -46,14 +57,20 @@ export default {
   },
   data() {
     return {
-      recentFonts: this.getRecentFonts(), // 这里只作为缓存，以localStorage为准
       PRESET_FONTS: fonts.PRESET_FONTS,
       NETWORK_FONTS: fonts.NETWORK_FONTS,
-      localFonts: [],
 
       innerValue: [],
     }
   },
+  computed: {
+    recentFonts() {
+      return sharedRecentFonts.value
+    },
+    localFonts() {
+      return sharedLocalFonts.value
+    }
+  },
   watch: {
     value: {
       immediate: true,
@@ -78,15 +95,14 @@ export default {
         return
       }
       this.updateRecentFonts()
-      // 在这里更新第一次下拉时不会显示本地字体，但没什么好办法
       this.updateLocalFonts()
     },
 
     updateRecentFonts() {
-      this.recentFonts = this.getRecentFonts()
+      sharedRecentFonts.value = this.getRecentFonts()
     },
     async updateLocalFonts() {
-      this.localFonts = await fonts.getLocalFonts()
+      sharedLocalFonts.value = await fonts.getLocalFonts()
     },
     getRecentFonts() {
       return common.fontsStrToArr(window.localStorage.recentFonts || '')

frontend/src/views/StyleGenerator/fonts.js

@@ -58,10 +58,17 @@ export async function getLocalFonts() {
 
 async function doGetLocalFonts() {
   try {
-    return (await window.queryLocalFonts()).map(fontData => {
-      // 理论上应该用family，但fullName可读性更好
-      return fontData.fullName
-    })
+    let familyToFullName = new Map()
+    for (let fontData of await window.queryLocalFonts()) {
+      let oldFullName = familyToFullName.get(fontData.family)
+      if (!oldFullName || fontData.fullName.length < oldFullName.length) {
+        familyToFullName.set(fontData.family, fontData.fullName)
+      }
+    }
+    // 理论上应该用family，但fullName可读性更好
+    let fullNames = [...familyToFullName.values()]
+    fullNames.sort()
+    return fullNames
   } catch (e) {
     console.error(e)
     return []