feat: fuse.js from 3.6.1 to 5.2.3 & 完善页面搜索相关代码

dependencies-cdn.js

@@ -12,7 +12,7 @@ module.exports = [
   { name: 'js-cookie', library: 'Cookies', js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', css: '' },
   { name: 'nprogress', library: 'NProgress', js: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', css: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css' },
   { name: 'dayjs', library: 'dayjs', js: 'https://cdn.jsdelivr.net/npm/dayjs@1.8.17/dayjs.min.js', css: '' },
-  { name: 'fuse.js', library: 'Fuse', js: 'https://cdn.jsdelivr.net/npm/fuse.js@3.4.6/dist/fuse.min.js', css: '' },
+  { name: 'fuse.js', library: 'Fuse', js: 'https://cdn.jsdelivr.net/npm/fuse.js@5.2.3/dist/fuse.min.js', css: '' },
   { name: 'hotkeys-js', library: 'hotkeys', js: 'https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.3/dist/hotkeys.min.js', css: '' },
   { name: 'lowdb', library: 'low', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/low.min.js', css: '' },
   { name: 'lowdb/adapters/LocalStorage', library: 'LocalStorage', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/LocalStorage.min.js', css: '' },

package-lock.json

@@ -7617,9 +7617,9 @@
       "dev": true
     },
     "fuse.js": {
-      "version": "3.6.1",
+      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-5.2.3.tgz",
-      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw=="
+      "integrity": "sha512-ld3AEgKtKnnXCtJavtygAb+aLlD5aVvLwTocXXBSStLA6JGFI6oMxTvumwh46N2/3gs3A7JNDu1px5F1/cq84g=="
     },
     "gensync": {
       "version": "1.0.0-beta.1",

package.json

@@ -25,7 +25,7 @@
     "element-ui": "^2.13.1",
     "faker": "^4.1.0",
     "flex.css": "^1.1.7",
-    "fuse.js": "^3.4.6",
+    "fuse.js": "^5.2.3",
     "github-markdown-css": "^4.0.0",
     "highlight.js": "^10.0.2",
     "hotkeys-js": "^3.7.3",

src/layout/header-aside/components/panel-search/index.vue

@@ -66,25 +66,10 @@ export default {
         value: e.fullTitle,
         ...e
       })) : this.results
-    }
     },
-  methods: {
+    // 根据 pool 更新 fuse 实例
-    /**
+    fuse () {
-     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+      return new Fuse(this.pool, {
-     */
-    querySearch (queryString, callback) {
-      var pool = this.pool
-      const results = this.query(queryString ? pool : [], queryString)
-      this.results = results
-      callback(results)
-    },
-    /**
-     * @description 指定的数据源中根据指定的查询字符串过滤数据
-     * @param {Object} pool 需要过滤的数据
-     * @param {String} queryString 查询字符串
-     */
-    query (pool, queryString) {
-      return new Fuse(pool, {
         shouldSort: true,
         tokenize: true,
         threshold: 0.6,
@@ -97,11 +82,16 @@ export default {
           'path'
         ]
       })
-        .search(queryString)
+    }
-        .map(e => ({
+  },
-          value: e.fullTitle,
+  methods: {
-          ...e
+    /**
-        }))
+     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+     */
+    querySearch (queryString, callback) {
+      const results = this.fuse.search(queryString).map(e => e.item)
+      this.results = results
+      callback(results)
     },
     /**
      * @description 聚焦输入框