feat(font): 添加本地字体选择功能（not done） #96

src/views/Demo/index.vue

@@ -1,51 +1,76 @@
 <script setup lang='ts'>
-import { Grip } from 'lucide-vue-next'
-import { onMounted, ref, watch } from 'vue'
-import { VueDraggable } from 'vue-draggable-plus'
+import { ChevronDown, ChevronUp } from 'lucide-vue-next'
+import { ref } from 'vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useLocalFonts } from '@/hooks/useLocalFonts'
 
-const list = ref([
-  {
-    name: 'Joao',
-    id: '1',
-  },
-  {
-    name: 'Jean',
-    id: '2',
-  },
-  {
-    name: 'Johanna',
-    id: '3',
-  },
-  {
-    name: 'Juan',
-    id: '4',
-  },
-])
-onMounted(() => {
+const inputRef = ref()
 
-})
+const { getFonts, disabled, fonts } = useLocalFonts()
 </script>
 
 <template>
-  <div>
-    <button class="btn btn-error">
-      打印
-    </button>
-    <VueDraggable
-      v-model="list"
-      :animation="150"
-      handle=".handle"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
-    >
-      <div
-        v-for="(item, index) in list"
-        :key="item.id"
-        class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
-      >
-        <Grip class="handle cursor-move" />
-        <input v-model="item.name" type="text">
-      </div>
-    </VueDraggable>
+  <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>
   </div>
 </template>