gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2023-11-06 19:50:29 +08:00
parent 93be846064
commit 1c00f568fa
12 changed files with 148 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/advancedSearch/TagMode.vue
View File

@@ -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)

11
src/components/advancedSearch/TextMode.vue
View File

@@ -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]))
}

3
src/main.js
View File

@@ -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)

43
src/utils/tools.js
View File

@@ -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
// }
// }
}
}
}
}

44
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -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 () {

4
src/views/entityExplorer/entityList/EntityList.vue
View File

@@ -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,

19
src/views/entityExplorer/entityList/Row.vue
View File

@@ -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,

11
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -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: {}

9
src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue
View File

@@ -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,

9
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -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 {

9
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -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',

4
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -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)