chore: search by useFuse

Author: liuseen-l

src/client/pages/documentations.vue

@@ -2,6 +2,7 @@
 import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
+import { useFuse } from '@vueuse/integrations/useFuse'
 
 const rawItems = data
 const items = ref(data)
@@ -21,9 +22,12 @@ function navigate(data: DocumentInfo) {
 }
 
 const keywords = ref('')
+const { results: filterDocuments } = useFuse(keywords, rawItems.map(i => i.name), {
+  matchAllWhenSearchEmpty: true
+})
 
-watch(keywords, () => {
-  items.value = rawItems.filter(item => packagesName.includes(item.id) && (item.id.includes(keywords.value) || keywords.value.length === 0))
+watch(filterDocuments, () => {
+  items.value = rawItems.filter(item => (filterDocuments.value.map(i => i.item).includes(item.name) && packagesName.includes(item.id)))
 })
 
 function back() {
@@ -39,10 +43,8 @@ function back() {
     <div v-if="iframeViewUrl">
       <IframeView :src="iframeViewUrl" />
       <teleport to="body">
-        <span
-          fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
-          bg-base hover="text-primary" @click.prevent.stop="back"
-        >
+        <span fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
+          bg-base hover="text-primary" @click.prevent.stop="back">
           <i tabler:arrow-back-up />
         </span>
       </teleport>

src/types.ts

@@ -105,8 +105,8 @@ export interface DocumentInfo {
   website: string
   github: string
   icon: string
-  tips: string
-  openInBlank: boolean
+  tips?: string
+  openInBlank?: boolean
 }
 
 export interface PackageInfo {