feat: 更换字体v，以及页面加载之前就设置字体 #96

src/views/Config/Global/FaceConfig/components/SelectFont.vue

@@ -0,0 +1,118 @@
+<script setup lang='ts'>
+import { refDebounced } from '@vueuse/core'
+import { ChevronRight, ChevronsUpDownIcon } from 'lucide-vue-next'
+import { PopoverArrow } from 'reka-ui'
+import { ref } from 'vue'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { useLocalFonts } from '@/hooks/useLocalFonts'
+import { cn } from '@/lib/utils'
+
+const selectedFont = defineModel('selectedFont', {
+  type: String,
+  required: true,
+})
+
+const { getFonts, disabled, fonts } = useLocalFonts()
+const open = ref(false)
+const activeKey = ref('')
+const debouncedActiveKey = refDebounced(activeKey, 20)
+
+function selectFont(selectedValue: any) {
+  open.value = false
+  activeKey.value = ''
+  selectedFont.value = selectedValue
+}
+
+function handelActiveKey(val: string) {
+  activeKey.value = val
+}
+
+function handleScroll() {
+  activeKey.value = ''
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex justify-center items-center max-w-xs">
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child :disabled="disabled">
+        <Button
+          variant="outline"
+          role="combobox"
+          :aria-expanded="open"
+          class="w-full justify-between truncate bg-transparent hover:bg-transparent hover:text-inherit"
+          @click="getFonts"
+        >
+          <span class="w-7/8 text-left truncate" :style="{ fontFamily: `${selectedFont}` }">
+            {{ selectedFont || "选择字体..." }}
+          </span>
+          <ChevronsUpDownIcon class="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-full p-0">
+        <Command>
+          <CommandInput class="h-9" placeholder="Search framework..." />
+          <CommandList @scroll="handleScroll">
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="[key, value] in fonts"
+                :key="key"
+                :value="key"
+                class="w-full hover:bg-gray-200/50"
+                @select="selectFont(key)"
+              >
+                <Popover :open="debouncedActiveKey === key" class="w-full">
+                  <PopoverTrigger class="w-full">
+                    <div :style="{ fontFamily: `${key}` }" class="w-full flex justify-between items-center" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
+                      {{ key }}
+                      <ChevronRight
+                        :class="cn(
+                          'ml-auto',
+                        )"
+                      />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent class="p-2" side="right" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
+                    <PopoverArrow />
+                    <Command>
+                      <CommandGroup>
+                        <CommandItem
+                          v-for="child in value"
+                          :key="child.value"
+                          :value="child.value"
+                          class="w-full hover:bg-gray-200/50"
+                          :style="{ fontFamily: `${key}` }"
+                          @select="selectFont(child.value)"
+                        >
+                          {{ child.name }}
+                        </CommandItem>
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Config/Global/FaceConfig/index.vue

@@ -6,12 +6,12 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { z as zod } from 'zod'
 import { daisyuiThemes } from '@/constant/theme'
-import { useLocalFonts } from '@/hooks/useLocalFonts'
 import i18n, { languageList } from '@/locales/i18n'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
 import { clearAllDbStore } from '@/utils/localforage'
 import PatternSetting from './components/PatternSetting.vue'
+import SelectFont from './components/SelectFont.vue'
 import 'vue3-colorpicker/style.css'
 
 const router = useRouter()
@@ -22,7 +22,6 @@ const prizeConfig = useStore().prizeConfig
 const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getFont: currentFont, getImageList: imageList, getIsShowAvatar: isShowAvatar,
 } = storeToRefs(globalConfig)
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
-const { getFonts, disabled: disabledFonts, fonts } = useLocalFonts()
 const colorPickerRef = ref()
 const resetDataDialogRef = ref()
 interface ThemeDaType {
@@ -156,7 +155,8 @@ watch(backgroundImageValue, (val) => {
 watch(currentFontValue, (val) => {
   console.log('currentFontValue', val)
   globalConfig.setFont(val)
-})
+  document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
+}, { immediate: true })
 watch(languageValue, (val: string) => {
   globalConfig.setLanguage(val)
 })
@@ -237,10 +237,7 @@ onMounted(() => {
           <div class="label">
             <span class="label-text">字体</span>
           </div>
-          <select v-model="currentFontValue" class="w-full max-w-xs border-solid select border-1" @click="getFonts">
-            <option disabled selected>选择字体</option>
-            <option v-for="item in fonts" :key="item.fullName" :style="{ fontFamily: `${item.fullName}`, fontSize: 'normal', fontWeight: 'normal' }" :value="item.fullName">{{ item.fullName }}</option>
-          </select>
+          <SelectFont v-model:selected-font="currentFontValue" />
         </label>
       </fieldset>
       <!-- 布局设置（列数、卡片宽度、卡片高度 -->