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

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)