CN-1449 fix: 实体搜索结果对命中字段高亮显示

src/components/advancedSearch/TagMode.vue

@@ -202,6 +202,7 @@ export default {
       if (this.isCustomized(value)) {
         meta.column.type = columnType.fullText
         meta.column.label = value
+        meta.column.isFullText = true
         meta.resetOperator()
         meta.resetValue()
       } else {
@@ -248,6 +249,7 @@ export default {
         if (meta.column && meta.column.type === 'fullText') {
           meta.operator.value = '='
           meta.column.show = false
+          meta.column.isFullText = true
           meta.operator.show = false
           const label = JSON.parse(JSON.stringify(meta.column.label))
           meta.column.label = parser.getEntityTypeByValue(meta.column.label)
@@ -461,13 +463,21 @@ export default {
       if (this.metaList.length > 0) {
         const parser = new Parser(this.columnList)
         const errorList = parser.validateMeta(this.metaList)
+        const keywordList = []
+        this.metaList.forEach(item => {
+          if (item.column && item.column.isFullText) {
+            keywordList.push({ type: 'fullText', value: item.value.value })
+          } else if (item.column && !item.column.isFullText) {
+            keywordList.push({ type: item.column.type, value: item.value.value })
+          }
+        })
         if (_.isEmpty(errorList)) {
           const strObj = parser.handleMetaListToStr(this.metaList)
           const str = strObj.str ? strObj.str : strObj
           const str2 = strObj.str2 ? strObj.str2 : strObj
           // str为将metaList转成字符串的值，str2为地址栏展示的值
           const key = parser.handleEntityTypeByStr(str)
-          this.$emit('search', { ...parser.parseStr(key), str: str2 })
+          this.$emit('search', { ...parser.parseStr(key), str: str2, keywordList: keywordList })
         } else {
           this.$message.error(handleErrorTip(errorList[0]))
         }
@@ -653,6 +663,7 @@ export default {
             if (item.column && item.column.type === 'fullText') {
               item.operator.value = '='
               item.column.show = false
+              item.column.isFullText = true
               item.operator.show = false
               const label = JSON.parse(JSON.stringify(item.column.label))
               item.column.label = parser.getEntityTypeByValue(item.column.label)

src/components/advancedSearch/TextMode.vue

@@ -97,10 +97,19 @@ export default {
       if (str) {
         const parser = new Parser(this.columnList)
         const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str))
+        const metaList = parser.parseStr(_.cloneDeep(str)).metaList
+        const keywordList = []
+        metaList.forEach(item => {
+          if (item.column && item.column.type === columnType.fullText) {
+            keywordList.push({ type: item.column.type, value: item.column.label })
+          } else if (item.column && item.column.type === columnType.string) {
+            keywordList.push({ type: item.column.type, value: item.value.value })
+          }
+        })
         if (keyInfo.isKey) {
           const errorList = parser.validateStr(keyInfo.key)
           if (_.isEmpty(errorList)) {
-            this.$emit('search', { ...parser.parseStr(keyInfo.key), str: str })
+            this.$emit('search', { ...parser.parseStr(keyInfo.key), str: str, keywordList: keywordList })
           } else {
             this.$message.error(handleErrorTip(errorList[0]))
           }

src/main.js

@@ -7,7 +7,7 @@ import App from '@/App.vue'
 import '@/utils/http.js'
 import { hasPermission } from '@/permission'
 import commonMixin from '@/mixins/common'
-import { cancelWithChange, noData } from '@/utils/tools'
+import { cancelWithChange, noData, myHighLight } from '@/utils/tools'
 import { ClickOutside } from 'element-plus/lib/directives'
 import i18n from '@/i18n'
 // import '@/mock/index.js'
@@ -41,6 +41,7 @@ app.directive('has', hasPermission) // 注册指令
 app.directive('ele-click-outside', ClickOutside)
 app.directive('cancel', cancelWithChange)
 app.directive('no-data', noData)
+app.directive('high-light', myHighLight)
 app.config.globalProperties.$_ = _
 
 app.mixin(commonMixin)

src/utils/tools.js

@@ -7,6 +7,7 @@ import { format } from 'echarts'
 import router from '@/router'
 import store from '@/store'
 import indexedDBUtils from '@/indexedDB'
+import { columnType } from '@/components/advancedSearch/meta/meta'
 
 export const tableSort = {
   // 是否需要排序
@@ -1360,3 +1361,45 @@ export function getTagColor (color) {
     return `color: ${color};border-color: ${color};background-color: ${backgroundColor};`
   }
 }
+
+/**
+ * 字段高亮
+ * 用法： <span v-high-light=['搜索', '高亮']>搜索关键字高亮<span>
+ * @type {{updated(*, *): (*|undefined)}}
+ */
+export const myHighLight = {
+  updated (el, binding) {
+    if (el && binding.value) {
+      const { value } = binding
+      if (value && value.length > 0) {
+        const text = JSON.parse(JSON.stringify(el.innerHTML))
+        value.forEach(item => {
+          const regex = new RegExp(item.value, 'gi')
+          // 一旦高亮后，就不再添加class，不然会一直嵌套span
+          if (el.getElementsByClassName('highlight__text').length === 0) {
+            const newText = text.replace(regex, match => `<span class="highlight__text">${match}</span>`)
+            if (item.type === columnType.fullText) {
+              // el.innerHTML.toLowerCase().indexOf(item.value.toLowerCase()) > -1
+            }
+            if (newText && newText !== '-') {
+              el.innerHTML = newText
+            } else {
+              return newText
+            }
+          }
+        })
+        // const myValue = ['China', 'qq']
+        // const regex = new RegExp(myValue.join('|'), 'gi')
+        // // 一旦高亮后，就不再添加class，不然会一直嵌套span
+        // if (el.getElementsByClassName('highlight__text').length === 0) {
+        //   const newText = text.replace(regex, match => `<span class="highlight__text">${match}</span>`)
+        //   if (newText && newText !== '-') {
+        //     el.innerHTML = newText
+        //   } else {
+        //     return newText
+        //   }
+        // }
+      }
+    }
+  }
+}

src/views/entityExplorer/EntityExplorer.vue

@@ -46,6 +46,7 @@
               style="width: 100%;"
               :list-data="listData"
               :list-mode="listMode"
+              :keywordList="keywordList"
               :pageObj="pageObj"
               :time-filter="timeFilter"
               @pageSize="pageSize"
@@ -174,6 +175,7 @@ import Parser from '@/components/advancedSearch/meta/parser'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import { columnList } from '@/utils/static-data'
 import { useRoute } from 'vue-router'
+import { columnType } from '@/components/advancedSearch/meta/meta'
 
 export default {
   name: 'entity-explorer',
@@ -289,7 +291,8 @@ export default {
         ipCount: 0,
         appCount: 0
       },
-      loadingCount: false // 实体基数统计的loading
+      loadingCount: false, // 实体基数统计的loading
+      keywordList: []
     }
   },
   methods: {
@@ -361,6 +364,7 @@ export default {
         this.q = ''
         this.metaList = []
       }
+      this.getKeyword(param.keywordList)
 
       // 参数q，避免切换页码时，地址栏参数q为空
       let urlQ = ''
@@ -581,7 +585,7 @@ export default {
           this.summaryCount = { total: 0, domainCount: 0, ipCount: 0, appCount: 0 }
         }
       }).catch(e => {
-        console.log(e)
+        console.error(e)
         this.summaryCount = { total: 0, domainCount: 0, ipCount: 0, appCount: 0 }
       }).finally(() => {
         this.loadingCount = false
@@ -675,11 +679,20 @@ export default {
           }
         }
         const parser = new Parser(columnList)
+        const metaList = parser.parseStr(_.cloneDeep(str)).metaList
+        const keywordList = []
+        metaList.forEach(item => {
+          if (item.column && item.column.type === columnType.fullText) {
+            keywordList.push({ type: item.column.type, value: item.column.label })
+          } else if (item.column && item.column.type === columnType.string) {
+            keywordList.push({ type: item.column.type, value: item.value.value })
+          }
+        })
         const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str))
         if (keyInfo.isKey) {
           const errorList = parser.validateStr(keyInfo.key)
           if (_.isEmpty(errorList)) {
-            this.search({ ...parser.parseStr(keyInfo.key), str: str })
+            this.search({ ...parser.parseStr(keyInfo.key), str: str, keywordList: keywordList })
           } else {
             this.$message.error(handleErrorTip(errorList[0]))
           }
@@ -727,6 +740,31 @@ export default {
       }).catch((e) => {
       }).finally(() => {
       })
+    },
+    getKeyword (list) {
+      if (list) {
+        const metaList = JSON.parse(JSON.stringify(list))
+        const keyList = []
+        metaList.forEach(item => {
+          if (item.value) {
+            keyList.push({ type: item.type, value: this.getKeyValue(item.value) })
+          }
+        })
+        this.keywordList = keyList
+      }
+    },
+    getKeyValue (str) {
+      if (str[0] === "'" && str[str.length - 1] === "'") {
+        str = str.substring(1, str.length)
+        str = str.substring(0, str.length - 1)
+      }
+      if (str[0] === '%') {
+        str = str.substring(1, str.length)
+      }
+      if (str[str.length - 1] === '%') {
+        str = str.substring(0, str.length - 1)
+      }
+      return str
     }
   },
   mounted () {

src/views/entityExplorer/entityList/EntityList.vue

@@ -11,6 +11,7 @@
               v-for="(data, index) in listData"
               :entity="data"
               :listMode="listMode"
+              :keywordList="keywordList"
               :timeFilter="timeFilter"
               :key="index"
               :ref="`entityRow${index}`"
@@ -65,7 +66,8 @@ export default {
     pageObj: Object,
     loading: Boolean,
     timeFilter: Object,
-    listMode: String
+    listMode: String,
+    keywordList: Array
   },
   components: {
     'entity-card': Card,

src/views/entityExplorer/entityList/Row.vue

@@ -11,7 +11,7 @@
       <div class="cn-entity__row">
         <!--标签-->
         <div class="cn-entity__header" style="display: flex;">
-          <span class="cn-entity__header-title">{{ entityData.entityValue || 'Unknown' }}</span>
+          <span class="cn-entity__header-title" v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
           <span class="entity-detail" style="display: flex;margin-left: 6px;margin-top: 1px;flex-wrap: wrap;margin-bottom: -10px;">
             <span v-for="(item, index) in levelTwoTags"
                   :key="index"
@@ -30,29 +30,29 @@
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-country"></i>
                   <span class="row-item-label">{{ $t('overall.country') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ $_.get(entityData, 'location.country', '-') || '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'location.country', '-') || '-' }}</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-position"></i>
                   <span class="row-item-label">{{ $t('overall.city') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ entityData.location ? ipLocationRegion(entityData.location) : '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ entityData.location ? ipLocationRegion(entityData.location) : '-' }}</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-cloud"></i>
                   <span class="row-item-label">{{ $t('entities.asn') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ $_.get(entityData, 'asn.asn', '-') || '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'asn.asn', '-') || '-' }}</span>
                 </div>
               </template>
               <template v-else-if="entityData.entityType === 'domain'">
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-category-group"></i>
                   <span class="row-item-label">{{ $t('entities.category') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ $_.get(entityData, 'category.categoryGroup', '-') || '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'category.categoryGroup', '-') || '-' }}</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-sub-category"></i>
                   <span class="row-item-label">{{ $t('entities.subcategory') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ $_.get(entityData, 'category.categoryName', '-') || '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'category.categoryName', '-') || '-' }}</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-credit-rating"></i>
@@ -64,7 +64,7 @@
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-category2"></i>
                   <span class="row-item-label">{{ $t('entities.category') }}&nbsp;:&nbsp;&nbsp;</span>
-                  <span class="row-item-value">{{ $_.get(entityData, 'category.appCategory', '-') || '-' }}</span>
+                  <span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'category.appCategory', '-') || '-' }}</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-sub-category"></i>
@@ -176,7 +176,7 @@
       <el-collapse-transition>
         <div class="cn-entity__detail-overview" v-if="!isCollapse">
           <el-divider></el-divider>
-          <detail-overview :entity="entityData" :time-filter="timeFilter" @reloadEntity="getEntity" />
+          <detail-overview :entity="entityData" :time-filter="timeFilter" :key-word-list="keywordList" @reloadEntity="getEntity" />
         </div>
       </el-collapse-transition>
     </div>
@@ -199,7 +199,8 @@ export default {
   props: {
     index: Number,
     timeFilter: Object,
-    listMode: String
+    listMode: String,
+    keywordList: Array
   },
   components: {
     Loading,

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -8,11 +8,11 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">{{$_.get(entity, 'category.appCategory', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entity, 'category.appCategory', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
-        <div class="row__content">{{$_.get(entity, 'category.appSubcategory', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entity, 'category.appSubcategory', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
@@ -20,7 +20,9 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
-        <div class="row__content">{{$_.get(entity, 'category.appDescription', '-') || '-'}}</div>
+        <div class="row__content">
+          <span v-high-light="keywordList">{{ $_.get(entity, 'category.appDescription', '-') || '-' }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -225,6 +227,9 @@ export default {
     Chart,
     Loading
   },
+  props: {
+    keywordList: Array
+  },
   data () {
     return {
       // entityData: {}

src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="entity-detail-overview">
     <template v-if="entity.entityType === 'ip'">
-      <ip-overview :entity="entity" :time-filter="timeFilter" @reloadEntity="getEntity"></ip-overview>
+      <ip-overview :entity="entity" :time-filter="timeFilter" :key-word-list="keywordList" @reloadEntity="getEntity"></ip-overview>
     </template>
     <template v-else-if="entity.entityType === 'domain'">
-      <domain-overview :entity="entity" :time-filter="timeFilter" @reloadEntity="getEntity"></domain-overview>
+      <domain-overview :entity="entity" :time-filter="timeFilter" :key-word-list="keywordList" @reloadEntity="getEntity"></domain-overview>
     </template>
     <template v-else-if="entity.entityType === 'app'">
-      <app-overview :entity="entity" :time-filter="timeFilter" @reloadEntity="getEntity"></app-overview>
+      <app-overview :entity="entity" :time-filter="timeFilter" :key-word-list="keywordList" @reloadEntity="getEntity"></app-overview>
     </template>
   </div>
 </template>
@@ -22,7 +22,8 @@ export default {
   name: 'DetailOverview',
   props: {
     entity: Object,
-    timeFilter: Object
+    timeFilter: Object,
+    keywordList: Array
   },
   components: {
     'domain-overview': Domain,

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -4,11 +4,11 @@
     <div class="overview__content">
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">{{$_.get(entityData, 'category.categoryName', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entityData, 'category.categoryName', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.domainDetail.categoryGroup')}}</div>
-        <div class="row__content">{{$_.get(entityData, 'category.categoryGroup', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entityData, 'category.categoryGroup', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.reputationLevel')}}</div>
@@ -20,7 +20,7 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.org')}}</div>
-        <div class="row__content">{{$_.get(entityData, 'whois.registrantOrg', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entityData, 'whois.registrantOrg', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.icpCompanyName')}}</div>
@@ -229,6 +229,9 @@ export default {
     Loading,
     Chart
   },
+  props: {
+    keywordList: Array
+  },
   mixins: [entityDetailMixin, relatedServer],
   data () {
     return {

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -10,18 +10,18 @@
               <img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
               <img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
             </div>
-            {{ipLocationRegion(entity.location)}}
+            <span v-high-light="keywordList">{{ ipLocationRegion(entity.location) }}</span>
           </div>
           <div v-else>-</div>
         </div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">ASN</div>
-        <div class="row__content">{{$_.get(entity, 'asn.asn', '-') || '-'}}</div>
+        <div class="row__content" v-high-light="keywordList">{{ $_.get(entity, 'asn.asn', '-') || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.openPort')}}</div>
-        <div class="row__content" style="word-break: break-word;">{{ openPort }}</div>
+        <div class="row__content" style="word-break: break-word;" v-high-light="keywordList">{{ openPort }}</div>
       </div>
     </div>
   </div>
@@ -262,6 +262,9 @@ export default {
     Loading,
     Chart
   },
+  props: {
+    keywordList: Array
+  },
   data () {
     return {
       entityType: 'ip',

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -90,7 +90,7 @@ export default {
     }
   },
   methods: {
-    search ({ str, q, metaList }) {
+    search ({ str, q, metaList, keywordList }) {
       if (str) {
         // 加入搜索记录，将记录数量控制在30以内
         const oldHistory = localStorage.getItem(storageKey.entitySearchHistory)
@@ -113,7 +113,7 @@ export default {
         }
         localStorage.setItem(storageKey.entitySearchHistory, JSON.stringify(arr))
       }
-      this.$emit('search', { str, q, metaList })
+      this.$emit('search', { str, q, metaList, keywordList })
     },
     addParams (params) {
       this.$refs.search.addParams(params)