feat: 模糊搜索

package.json

@@ -47,6 +47,7 @@
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.16.1",
+    "fuse.js": "^6.6.2",
     "gsap": "^3.12.2",
     "medium-zoom": "^1.0.8",
     "nes-vue": "^1.6.10",

src/pages/components/game/GameList.vue

@@ -55,6 +55,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
+import Fuse from "fuse.js"
+
 import { roms } from "../game"
 
 import InnerLoading from "./InnerLoading.vue"
@@ -66,8 +68,12 @@ const props = defineProps<{
 }>()
 const emits = defineEmits(["select"])
 
+const romsFuse = new Fuse(roms, {
+  keys: ["title"],
+})
+
 const filterRoms = computed(() => {
-  if (props.keyword) return roms.filter(i => i.title.includes(props.keyword))
+  if (props.keyword) return romsFuse.search(props.keyword).map(i => i.item)
   return !props.curCategory
     ? roms
     : roms.filter(i => i.type === props.curCategory)

src/pages/components/software.vue

@@ -61,6 +61,8 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue"
+import Fuse from "fuse.js"
+
 import SearchCategory from "./common/SearchCategory.vue"
 import list from "./software"
 
@@ -73,13 +75,18 @@ const cate = ref()
 
 const filterList = computed(() => {
   const temp = JSON.parse(JSON.stringify(list))
+
   return temp.filter((i: any) => {
     if (cate.value) return i.title === cate.value
-    if (keyword.value)
-      i.children = i.children.filter((i: any) => {
-        if (i.title.includes(keyword.value) || i.desc?.includes(keyword.value))
-          return i
+    if (keyword.value) {
+      const listFuse = new Fuse(i.children, {
+        includeScore: true,
+        shouldSort: false,
+        keys: ["title", '"desc'],
       })
+
+      i.children = listFuse.search(keyword.value).map(i => i.item)
+    }
     return i
   })
 })