fix: 更换字体高亮插件

nezha-fronted/package-lock.json

@@ -2493,6 +2493,14 @@
         }
       }
     },
+    "clone-regexp": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
+      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
+      "requires": {
+        "is-regexp": "^2.0.0"
+      }
+    },
     "clone-response": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
@@ -4497,6 +4505,11 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
+    "diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha1-PvqHMj67hj5mls67AILUj/PW96E="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -7425,6 +7438,11 @@
         "has": "^1.0.1"
       }
     },
+    "is-regexp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
+      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA=="
+    },
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
@@ -13888,11 +13906,6 @@
         "repeat-string": "^1.6.1"
       }
     },
-    "to-style": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/to-style/-/to-style-1.3.3.tgz",
-      "integrity": "sha1-Y6K3Cm9KfU/cLtV6C+TnI1y2aZw="
-    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -14541,15 +14554,6 @@
         "element-resize-detector": "^1.2.1"
       }
     },
-    "vue-highlight-text": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/vue-highlight-text/-/vue-highlight-text-1.6.2.tgz",
-      "integrity": "sha512-0mSzB/MyrHJm09boCev7yA9mEk3ROig9K5guLlpT+GePz/FH3ikMnY+8aXaAJA1mIHRjQv/gCCCCtohLC2Qq1g==",
-      "requires": {
-        "to-style": "^1.3.3",
-        "vue": "^2.5.11"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -14674,6 +14678,15 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-text-highlight": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/vue-text-highlight/-/vue-text-highlight-2.0.10.tgz",
+      "integrity": "sha512-6WMWqr3OYonmK257o87shm7efMaFTyevEo8u5fN15gceyy2463fITFj9Wuh+W5lqLUm4n6cAZUS+y6xfzYB2aA==",
+      "requires": {
+        "clone-regexp": "^2.1.0",
+        "diacritics": "^1.3.0"
+      }
+    },
     "vuedraggable": {
       "version": "2.23.2",
       "resolved": "https://registry.npm.taobao.org/vuedraggable/download/vuedraggable-2.23.2.tgz",

nezha-fronted/package.json

@@ -41,11 +41,11 @@
     "vue-countupjs": "^1.0.0",
     "vue-draggable-resizable": "^2.3.0",
     "vue-grid-layout": "^2.3.12",
-    "vue-highlight-text": "^1.6.2",
     "vue-i18n": "^8.15.1",
     "vue-quill-editor": "^3.0.6",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",
+    "vue-text-highlight": "^2.0.10",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.1.2",
     "xlsx": "^0.15.6",

nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss

@@ -107,9 +107,13 @@
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          .list-item-highlight{
+            background: none;
+            color: $--color-primary;
+          }
         }
         .list-item-sub{
-          ont-size: 14px;
+          font-size: 14px;
           color: $--color-info;
           font-weight: 400;
           margin-top: 2px;
@@ -158,6 +162,7 @@
         align-items: center;
         justify-content: space-around;
         .scope-box {
+          cursor: pointer;
           color: $--background-color-disabled;
           .nz-icon {
             margin-right: 5px;

nezha-fronted/src/components/common/globalSearch/globalSearch.vue

@@ -28,7 +28,7 @@
               >
                 <div class="list-item-content">
                   <i class="nz-icon" :class="selectIcon(item)" />
-                  <HighlightText :keyword="searchStr" :overWriteStyle="{color: '#FA901C'}" style="vertical-align: middle" :title="item.name">{{item.name}}</HighlightText>
+                  <TextHighlight :queries="searchStr"  :highlightClass='"list-item-highlight"' :overWriteStyle="{color: '#FA901C'}" style="vertical-align: middle" :title="item.name">{{item.name}}</TextHighlight>
                 </div>
                 <div class="list-item-sub" v-if="item.sub">
                   {{ item.sub }}
@@ -69,7 +69,7 @@
             {{$t('globalSearch.toEsc')}}
           </div>
           <div class="global-search-footer-right">
-            <div class="scope-box" v-for="item in scope" :class="item.isSelect ? 'is-select' : ''" :key="item.type">
+            <div class="scope-box" v-for="item in scope" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)">
               <i class="nz-icon" :class="selectIcon(item)" />
               {{stat[item.type] || 0}}
             </div>
@@ -81,12 +81,13 @@
 </template>
 
 <script>
-import HighlightText from 'vue-highlight-text'
+// import HighlightText from 'vue-highlight-text'
+import TextHighlight from 'vue-text-highlight';
 
 export default {
   name: 'globalSearch',
   components: {
-    HighlightText
+    TextHighlight
   },
   computed: {
     globalShow () {
@@ -267,6 +268,10 @@ export default {
       this.nextLoading = true
       this.getData()
     },
+    scopeChange () {
+      this.pageObj.pageNo = 1
+      this.loading = true
+    },
     getData () {
       const param = {
         pageNo: this.pageObj.pageNo,