From fa79e9b07ea62ff9c3e715017902337628e507e8 Mon Sep 17 00:00:00 2001
From: LOG1997 <2694233102@qq.com>
Date: Wed, 10 Dec 2025 22:12:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=8D=A2=E5=AD=97=E4=BD=93v?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8A=E9=A1=B5=E9=9D=A2=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E5=B0=B1=E8=AE=BE=E7=BD=AE=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=20#96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   5 +-
 pnpm-lock.yaml                                |  30 ++++
 src/App.vue                                   |  12 +-
 src/components.d.ts                           |  23 +++
 src/components/ui/button/Button.vue           |  29 ++++
 src/components/ui/button/index.ts             |  38 +++++
 src/components/ui/command/Command.vue         |  87 ++++++++++
 src/components/ui/command/CommandDialog.vue   |  31 ++++
 src/components/ui/command/CommandEmpty.vue    |  27 +++
 src/components/ui/command/CommandGroup.vue    |  45 +++++
 src/components/ui/command/CommandInput.vue    |  39 +++++
 src/components/ui/command/CommandItem.vue     |  76 +++++++++
 src/components/ui/command/CommandList.vue     |  25 +++
 .../ui/command/CommandSeparator.vue           |  21 +++
 src/components/ui/command/CommandShortcut.vue |  17 ++
 src/components/ui/command/index.ts            |  25 +++
 src/components/ui/dialog/Dialog.vue           |  19 +++
 src/components/ui/dialog/DialogClose.vue      |  15 ++
 src/components/ui/dialog/DialogContent.vue    |  53 ++++++
 .../ui/dialog/DialogDescription.vue           |  23 +++
 src/components/ui/dialog/DialogFooter.vue     |  15 ++
 src/components/ui/dialog/DialogHeader.vue     |  17 ++
 src/components/ui/dialog/DialogOverlay.vue    |  21 +++
 .../ui/dialog/DialogScrollContent.vue         |  59 +++++++
 src/components/ui/dialog/DialogTitle.vue      |  23 +++
 src/components/ui/dialog/DialogTrigger.vue    |  15 ++
 src/components/ui/dialog/index.ts             |  10 ++
 src/components/ui/popover/Popover.vue         |  19 +++
 src/components/ui/popover/PopoverAnchor.vue   |  15 ++
 src/components/ui/popover/PopoverContent.vue  |  45 +++++
 src/components/ui/popover/PopoverTrigger.vue  |  15 ++
 src/components/ui/popover/index.ts            |   4 +
 src/hooks/useLocalFonts.ts                    |   4 -
 src/main.ts                                   |  29 ++++
 src/style.css                                 |   1 +
 .../FaceConfig/components/SelectFont.vue      | 118 +++++++++++++
 src/views/Config/Global/FaceConfig/index.vue  |  11 +-
 src/views/Demo/index.vue                      | 160 +++++++++++-------
 .../Home/components/HeaderTitle/index.vue     |   2 +-
 39 files changed, 1135 insertions(+), 88 deletions(-)
 create mode 100644 src/components/ui/button/Button.vue
 create mode 100644 src/components/ui/button/index.ts
 create mode 100644 src/components/ui/command/Command.vue
 create mode 100644 src/components/ui/command/CommandDialog.vue
 create mode 100644 src/components/ui/command/CommandEmpty.vue
 create mode 100644 src/components/ui/command/CommandGroup.vue
 create mode 100644 src/components/ui/command/CommandInput.vue
 create mode 100644 src/components/ui/command/CommandItem.vue
 create mode 100644 src/components/ui/command/CommandList.vue
 create mode 100644 src/components/ui/command/CommandSeparator.vue
 create mode 100644 src/components/ui/command/CommandShortcut.vue
 create mode 100644 src/components/ui/command/index.ts
 create mode 100644 src/components/ui/dialog/Dialog.vue
 create mode 100644 src/components/ui/dialog/DialogClose.vue
 create mode 100644 src/components/ui/dialog/DialogContent.vue
 create mode 100644 src/components/ui/dialog/DialogDescription.vue
 create mode 100644 src/components/ui/dialog/DialogFooter.vue
 create mode 100644 src/components/ui/dialog/DialogHeader.vue
 create mode 100644 src/components/ui/dialog/DialogOverlay.vue
 create mode 100644 src/components/ui/dialog/DialogScrollContent.vue
 create mode 100644 src/components/ui/dialog/DialogTitle.vue
 create mode 100644 src/components/ui/dialog/DialogTrigger.vue
 create mode 100644 src/components/ui/dialog/index.ts
 create mode 100644 src/components/ui/popover/Popover.vue
 create mode 100644 src/components/ui/popover/PopoverAnchor.vue
 create mode 100644 src/components/ui/popover/PopoverContent.vue
 create mode 100644 src/components/ui/popover/PopoverTrigger.vue
 create mode 100644 src/components/ui/popover/index.ts
 create mode 100644 src/views/Config/Global/FaceConfig/components/SelectFont.vue

diff --git a/package.json b/package.json
index 1fbc2fd..402a81e 100644
--- a/package.json
+++ b/package.json
@@ -100,5 +100,6 @@
         "vite-plugin-vue-devtools": "^8.0.2",
         "vitest": "^4.0.15",
         "vue-tsc": "^3.0.7"
-    }
-}
\ No newline at end of file
+    },
+    "packageManager": "pnpm@10.8.1+sha1.a4eff733d0c4ccc179997f0ef4986f6e92427781"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 375e128..f80f2e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1430,36 +1430,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -1530,56 +1536,67 @@ packages:
     resolution: {integrity: sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.0':
     resolution: {integrity: sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.0':
     resolution: {integrity: sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.0':
     resolution: {integrity: sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.0':
     resolution: {integrity: sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.0':
     resolution: {integrity: sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.0':
     resolution: {integrity: sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.0':
     resolution: {integrity: sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.0':
     resolution: {integrity: sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.0':
     resolution: {integrity: sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.0':
     resolution: {integrity: sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.0':
     resolution: {integrity: sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==}
@@ -1667,24 +1684,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
     resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
     resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.13':
     resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.13':
     resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
@@ -1755,30 +1776,35 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-arm64-musl@2.9.5':
     resolution: {integrity: sha512-/gRBMnphS9E8riZ0LIbBhZ9Oy16A2rx/g3DGR0DcDBvUtkLfbL0lMu4s+sY85nkn9An15+cZ1ZK6d7AIqWahLA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-linux-riscv64-gnu@2.9.5':
     resolution: {integrity: sha512-NOzjPF9YIBodjdkFcJmqINT0k3YDoR5ANM/jg6Z6s3Zmk8ScN6inI60jTxcfgfWyITiKsPy7GJyYou3Cm2XNzw==}
     engines: {node: '>= 10'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-gnu@2.9.5':
     resolution: {integrity: sha512-SfGbwgvTphM5y+J91NyU/psleMUlyyPkZyDCFg8WU1HX8DpKUT3Vwhb/W1xpUBGb56tJgGCO46FCVkr8w4Areg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-musl@2.9.5':
     resolution: {integrity: sha512-ZfeoiASAOGDzyvN+TDAg8A1pCeS082h4uc0vZKvtWUN+9QBIMfz0yJwltAv+SN/afap6NS6DVkbPV3UVuI9V5A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tauri-apps/cli-win32-arm64-msvc@2.9.5':
     resolution: {integrity: sha512-ulg7irow+ekjaK4inFHVq7m1KQebDSYNb17DFKV+h+x7qnLZymz2gHK7df2u4YyEjqvzwRd3AJpU3HNxRurSFQ==}
@@ -3959,24 +3985,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
diff --git a/src/App.vue b/src/App.vue
index c7b1087..1af3e37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,9 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { onMounted, provide, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { provide } from 'vue'
 import { loadingKey, loadingState } from '@/components/Loading'
 // import PlayMusic from '@/components/PlayMusic/index.vue'
-import useStore from '@/store'
-import { themeChange } from '@/utils'
 
 provide(loadingKey, loadingState)
-const { t } = useI18n()
-const globalConfig = useStore().globalConfig
-const prizeConfig = useStore().prizeConfig
-const system = useStore().system
-const { getTheme: localTheme } = storeToRefs(globalConfig)
-const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
 </script>
 
 <template>
diff --git a/src/components.d.ts b/src/components.d.ts
index c507676..5fa85c9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,8 +11,27 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Button: typeof import('./components/ui/button/Button.vue')['default']
+    Command: typeof import('./components/ui/command/Command.vue')['default']
+    CommandDialog: typeof import('./components/ui/command/CommandDialog.vue')['default']
+    CommandEmpty: typeof import('./components/ui/command/CommandEmpty.vue')['default']
+    CommandGroup: typeof import('./components/ui/command/CommandGroup.vue')['default']
+    CommandInput: typeof import('./components/ui/command/CommandInput.vue')['default']
+    CommandItem: typeof import('./components/ui/command/CommandItem.vue')['default']
+    CommandList: typeof import('./components/ui/command/CommandList.vue')['default']
+    CommandSeparator: typeof import('./components/ui/command/CommandSeparator.vue')['default']
+    CommandShortcut: typeof import('./components/ui/command/CommandShortcut.vue')['default']
     DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
     Dialog: typeof import('./components/Dialog/index.vue')['default']
+    DialogClose: typeof import('./components/ui/dialog/DialogClose.vue')['default']
+    DialogContent: typeof import('./components/ui/dialog/DialogContent.vue')['default']
+    DialogDescription: typeof import('./components/ui/dialog/DialogDescription.vue')['default']
+    DialogFooter: typeof import('./components/ui/dialog/DialogFooter.vue')['default']
+    DialogHeader: typeof import('./components/ui/dialog/DialogHeader.vue')['default']
+    DialogOverlay: typeof import('./components/ui/dialog/DialogOverlay.vue')['default']
+    DialogScrollContent: typeof import('./components/ui/dialog/DialogScrollContent.vue')['default']
+    DialogTitle: typeof import('./components/ui/dialog/DialogTitle.vue')['default']
+    DialogTrigger: typeof import('./components/ui/dialog/DialogTrigger.vue')['default']
     DropdownMenu: typeof import('./components/ui/dropdown-menu/DropdownMenu.vue')['default']
     DropdownMenuCheckboxItem: typeof import('./components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
     DropdownMenuContent: typeof import('./components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
@@ -33,6 +52,10 @@ declare module 'vue' {
     ImageSync: typeof import('./components/ImageSync/index.vue')['default']
     Loading: typeof import('./components/Loading/index.vue')['default']
     PageHeader: typeof import('./components/PageHeader/index.vue')['default']
+    Popover: typeof import('./components/ui/popover/Popover.vue')['default']
+    PopoverAnchor: typeof import('./components/ui/popover/PopoverAnchor.vue')['default']
+    PopoverContent: typeof import('./components/ui/popover/PopoverContent.vue')['default']
+    PopoverTrigger: typeof import('./components/ui/popover/PopoverTrigger.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..374320b
--- /dev/null
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
new file mode 100644
index 0000000..26e2c55
--- /dev/null
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/src/components/ui/command/Command.vue b/src/components/ui/command/Command.vue
new file mode 100644
index 0000000..dcdf9d6
--- /dev/null
+++ b/src/components/ui/command/Command.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/src/components/ui/command/CommandDialog.vue b/src/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..7439736
--- /dev/null
+++ b/src/components/ui/command/CommandDialog.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: "Command Palette",
+  description: "Search for a command to run...",
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-slot="slotProps" v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/components/ui/command/CommandEmpty.vue b/src/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..489c406
--- /dev/null
+++ b/src/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/command/CommandGroup.vue b/src/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..a5dd55e
--- /dev/null
+++ b/src/components/ui/command/CommandGroup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/src/components/ui/command/CommandInput.vue b/src/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..653141e
--- /dev/null
+++ b/src/components/ui/command/CommandInput.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/src/components/ui/command/CommandItem.vue b/src/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..2ae4827
--- /dev/null
+++ b/src/components/ui/command/CommandItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/src/components/ui/command/CommandList.vue b/src/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..928d2f0
--- /dev/null
+++ b/src/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/src/components/ui/command/CommandSeparator.vue b/src/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..6def19e
--- /dev/null
+++ b/src/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/src/components/ui/command/CommandShortcut.vue b/src/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..e1d0e07
--- /dev/null
+++ b/src/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/src/components/ui/command/index.ts b/src/components/ui/command/index.ts
new file mode 100644
index 0000000..af18933
--- /dev/null
+++ b/src/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")
diff --git a/src/components/ui/dialog/Dialog.vue b/src/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..ade5260
--- /dev/null
+++ b/src/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/src/components/ui/dialog/DialogClose.vue b/src/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..c5fae04
--- /dev/null
+++ b/src/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..7f86b47
--- /dev/null
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/dialog/DialogDescription.vue b/src/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..f52e655
--- /dev/null
+++ b/src/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/src/components/ui/dialog/DialogFooter.vue b/src/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..0a936e6
--- /dev/null
+++ b/src/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/dialog/DialogHeader.vue b/src/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..bfc3c64
--- /dev/null
+++ b/src/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/dialog/DialogOverlay.vue b/src/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..7790077
--- /dev/null
+++ b/src/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/src/components/ui/dialog/DialogScrollContent.vue b/src/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..f2475db
--- /dev/null
+++ b/src/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/dialog/DialogTitle.vue b/src/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..860f01a
--- /dev/null
+++ b/src/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/src/components/ui/dialog/DialogTrigger.vue b/src/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..49667e9
--- /dev/null
+++ b/src/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/components/ui/dialog/index.ts b/src/components/ui/dialog/index.ts
new file mode 100644
index 0000000..6768b09
--- /dev/null
+++ b/src/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/src/components/ui/popover/Popover.vue b/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..4efdb98
--- /dev/null
+++ b/src/components/ui/popover/Popover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>
diff --git a/src/components/ui/popover/PopoverAnchor.vue b/src/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..49e01db
--- /dev/null
+++ b/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..cf1e55c
--- /dev/null
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/src/components/ui/popover/PopoverTrigger.vue b/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..fd3b497
--- /dev/null
+++ b/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/src/components/ui/popover/index.ts b/src/components/ui/popover/index.ts
new file mode 100644
index 0000000..66edf89
--- /dev/null
+++ b/src/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
diff --git a/src/hooks/useLocalFonts.ts b/src/hooks/useLocalFonts.ts
index 961696f..a94ae7b 100644
--- a/src/hooks/useLocalFonts.ts
+++ b/src/hooks/useLocalFonts.ts
@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue'
 export function useLocalFonts() {
     const fonts = ref<Map<string, { name: string, value: string }[]>>(new Map())
     const disabled = ref(false)
-
     const formatFonts = (list: FontData[]): Map<string, { name: string, value: string }[]> => {
         const res: Map<string, { name: string, value: string }[]> = new Map()
         for (const item of list) {
@@ -30,11 +29,8 @@ export function useLocalFonts() {
             return
         }
         const list = await window.queryLocalFonts()
-        console.log('list', list)
         const res = formatFonts(list)
-        console.log('fontlist', res)
         fonts.value = res
-        // 对比family，相同则移入第一个元素的children里面
     }
 
     onMounted(() => {
diff --git a/src/main.ts b/src/main.ts
index 3fbb435..b18df41 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,6 +16,35 @@ import './style/style.scss'
 // 全局svg组件
 import 'virtual:svg-icons-register'
 
+// 在应用初始化时尽早设置主题和字体，避免页面加载时的闪烁
+(function initializeThemeAndFont() {
+    try {
+        // 从localStorage获取全局配置
+        const globalConfigStr = localStorage.getItem('globalConfig')
+
+        if (globalConfigStr) {
+            const storageData = JSON.parse(globalConfigStr)
+            // 根据persist策略，数据存储在globalConfig属性下
+            const globalConfig = storageData.globalConfig || storageData
+
+            // 设置主题
+            if (globalConfig.theme?.name) {
+                const html = document.documentElement
+                html.setAttribute('data-theme', globalConfig.theme.name)
+            }
+
+            // 设置字体
+            if (globalConfig.theme?.font) {
+                // 更新CSS变量
+                document.documentElement.style.setProperty('--app-font-family', `"${globalConfig.theme.font}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
+            }
+        }
+    }
+    catch (e) {
+        console.warn('Failed to set initial theme and font:', e)
+    }
+})()
+
 const app = createApp(App)
 const pinia = createPinia()
 pinia.use(piniaPluginPersist)
diff --git a/src/style.css b/src/style.css
index fbd14f5..17b993b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -20,6 +20,7 @@ html {
     overflow-y: overlay;
     overflow-y: hidden;
     overflow-x: hidden;
+    font-family: var(--app-font-family);
 }
 
 ul {
diff --git a/src/views/Config/Global/FaceConfig/components/SelectFont.vue b/src/views/Config/Global/FaceConfig/components/SelectFont.vue
new file mode 100644
index 0000000..048176e
--- /dev/null
+++ b/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>
diff --git a/src/views/Config/Global/FaceConfig/index.vue b/src/views/Config/Global/FaceConfig/index.vue
index d0ee4a2..f0718e8 100644
--- a/src/views/Config/Global/FaceConfig/index.vue
+++ b/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>
       <!-- 布局设置（列数、卡片宽度、卡片高度 -->
diff --git a/src/views/Demo/index.vue b/src/views/Demo/index.vue
index ec9335b..dafd73d 100644
--- a/src/views/Demo/index.vue
+++ b/src/views/Demo/index.vue
@@ -1,76 +1,110 @@
 <script setup lang='ts'>
-import { ChevronDown, ChevronUp } from 'lucide-vue-next'
+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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { useLocalFonts } from '@/hooks/useLocalFonts'
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 
-const inputRef = ref()
+import { useLocalFonts } from '@/hooks/useLocalFonts'
+import { cn } from '@/lib/utils'
 
 const { getFonts, disabled, fonts } = useLocalFonts()
+const open = ref(false)
+const activeKey = ref('Arial')
+const debouncedActiveKey = refDebounced(activeKey, 20)
+const selectedFont = ref('')
+
+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="flex flex-col gap-4">
-    <div class="text-2xl">
-      code
-    </div>
-    <div class="text-2xl" style="font-family: 'Consolas Bold Italic';">
-      code
-    </div>
-    <font-select id="font-select-1" value="" style="display: initial;" />
-  </div>
   <div class="w-full h-full flex justify-center items-center">
-    <DropdownMenu>
-      <DropdownMenuTrigger as-child>
-        <label class="input cursor-default!" @click="getFonts">
-          <input ref="inputRef" type="search" class="grow" placeholder="Search">
-          <ChevronDown class="cursor-default" @click="inputRef.focus()" />
-          <ChevronUp class="cursor-default" @click="inputRef.focus()" />
-        </label>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent class="w-56" align="start">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <!-- <DropdownMenuItem v-for="[key, value] in Array.from(fonts)" :key="key" :style="{ fontFamily: `${key}` }">
-            {{ key }}
-          </DropdownMenuItem> -->
-          <DropdownMenuSub v-for="[key, children] in Array.from(fonts)" :key="key">
-            <DropdownMenuSubTrigger>
-              <span :style="{ fontFamily: `${key}` }">{{ key }}</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem v-for="child in children" :key="child.value">
-                  <span :style="{ fontFamily: `${child.value}` }">{{ child.name }}</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>
-            New Team
-            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>GitHub</DropdownMenuItem>
-        <DropdownMenuItem>Support</DropdownMenuItem>
-        <DropdownMenuItem disabled>
-          API
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child :disabled="disabled">
+        <Button
+          variant="outline"
+          role="combobox"
+          :aria-expanded="open"
+          class="w-[200px] justify-between"
+          @click="getFonts"
+        >
+          {{ selectedFont || "选择字体..." }}
+          <ChevronsUpDownIcon class="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[200px] 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>
 
diff --git a/src/views/Home/components/HeaderTitle/index.vue b/src/views/Home/components/HeaderTitle/index.vue
index 24e51a4..126dee3 100644
--- a/src/views/Home/components/HeaderTitle/index.vue
+++ b/src/views/Home/components/HeaderTitle/index.vue
@@ -22,7 +22,7 @@ const { t } = useI18n()
 <template>
   <div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
     <h2
-      class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
+      class="pt-12 m-0 mb-12 tracking-wide text-center leading-12 header-title"
       :style="{ fontSize: `${textSize * 1.5}px`, color: textColor }"
     >
       {{ topTitle }}