CN-361 fix: 修复搜索框bug、优化交互

src/assets/css/components/views/charts/panel.scss

@@ -214,6 +214,7 @@
           position: relative;
           border-radius: 2px;
           flex-grow: 1;
+          overflow: hidden;
           width: 100%;
           .chart-drawing {
             height: 100%;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1645687921203') format('woff2'),
+  src: url('iconfont.woff2?t=1647073084945') format('woff2'),
-       url('iconfont.woff?t=1645687921203') format('woff'),
+       url('iconfont.woff?t=1647073084945') format('woff'),
-       url('iconfont.ttf?t=1645687921203') format('truetype');
+       url('iconfont.ttf?t=1647073084945') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-intercept:before {
+  content: "\e600";
+}
+
+.cn-icon-fraudulent-app:before {
+  content: "\e601";
+}
+
+.cn-icon-fraudulent-ip:before {
+  content: "\e602";
+}
+
+.cn-icon-fraudulent-domain:before {
+  content: "\e603";
+}
+
+.cn-icon-partly-cloudy:before {
+  content: "\e604";
+}
+
 .cn-icon-detection:before {
   content: "\e766";
 }
@@ -21,7 +41,7 @@
   content: "\e764";
 }
 
-.cn-icon-qingchu:before {
+.cn-icon-clear:before {
   content: "\e765";
 }
 

src/components/advancedSearch/Index.vue

@@ -20,7 +20,6 @@
         @changeMode="changeMode"
         @search="search"
     ></tag-mode>
-<!--    <div class="search-tip&#45;&#45;error">something error...</div>-->
   </div>
 </template>
 
@@ -102,8 +101,20 @@ export default {
           ElMessage.error(this.$t('tip.invalidExpression'))
         }
       }
+    },
+    enterListener (event) {
+      if (event.keyCode === 13) {
+        this.$refs.tagMode && this.$refs.tagMode.search()
+        this.$refs.textMode && this.$refs.textMode.search()
+      }
     }
   },
+  mounted () {
+    document.addEventListener('keydown', this.enterListener)
+  },
+  unmounted () {
+    document.removeEventListener('keydown', this.enterListener)
+  },
   setup (props) {
     // 默认为文本模式
     let searchMode = ref('text')

src/components/advancedSearch/TagMode.vue

@@ -308,6 +308,12 @@ export default {
       })
     }
   },
+  mounted () {
+    const vm = this
+    this.emitter.on('advanced-search', function () {
+      vm.search()
+    })
+  },
   watch: {
     convertMetaList: {
       immediate: true,

src/components/advancedSearch/TextMode.vue

@@ -23,6 +23,7 @@ import CodeMirror from 'codemirror'
 import { toRaw } from 'vue'
 import { columnType } from '@/components/advancedSearch/meta/meta'
 import { ElMessage } from 'element-plus'
+import { reg } from '@/utils/constants'
 
 export default {
   name: 'TextMode',
@@ -53,7 +54,20 @@ export default {
     search () {
       let originalSql = this.codeMirror.getValue()
       if (originalSql) {
-        originalSql = originalSql.replace(/"/g, '')
+        originalSql = originalSql.replaceAll(/"/g, '')
+        // 为解决ip无法校验通过的问题，先将带引号的ip转为不带引号的，再把不带引号的转为带引号的
+        originalSql = originalSql.replaceAll(reg.notStrictWithQuotIpv4, function (word) {
+          return word.replaceAll(/'/g, '')
+        })
+        originalSql = originalSql.replaceAll(reg.notStrictIpv4, function (word) {
+          return `'${word}'`
+        })
+        originalSql = originalSql.replaceAll(reg.notStrictWithQuotIpv6, function (word) {
+          return word.replaceAll(/'/g, '')
+        })
+        originalSql = originalSql.replaceAll(reg.notStrictIpv6, function (word) {
+          return `'${word}'`
+        })
         const parser = new SqlParser(originalSql, this.columnList)
         const errorList = parser.validate()
         if (this.$_.isEmpty(errorList)) {
@@ -144,6 +158,10 @@ export default {
   },
   mounted () {
     this.initCodeMirror()
+    const vm = this
+    this.emitter.on('advanced-search', function () {
+      vm.search()
+    })
   }
 }
 </script>

src/utils/api.js

@@ -130,13 +130,21 @@ export async function getEntityFilter (params) {
 export async function getDictList (params) {
   return await getData(api.dict, params, true)
 }
-
+function handleResult (response) {
+  if (response.data.list || response.data.result) {
+    return response.data.list || response.data.result
+  } else if (response.data.result === 0) {
+    return response.data.result
+  } else {
+    return response.data
+  }
+}
 export async function getData (url, params = {}, isQueryList) {
   const request = new Promise((resolve, reject) => {
     try {
       get(url, params).then(response => {
         if (response.code === 200) {
-          resolve(isQueryList ? response.data.list || response.data.result : response.data.result || response.data)
+          resolve(handleResult(response))
         } else {
           reject(response)
         }

src/utils/constants.js

@@ -410,3 +410,14 @@ export const iso36112 = {
   SZ: 'eswatiniLow',
   MN: 'mongoliaLow'
 }
+
+export const reg = {
+  // 不严格ipv4
+  notStrictIpv4: /(?:[0-9]{1,}\.){0,}[0-9]{1,}(\.)?/g,
+  // 不严格Ipv4带单引号
+  notStrictWithQuotIpv4: /'(?:[0-9]{1,}\.){0,}[0-9]{1,}(\.)?'/g,
+  // 不严格ipv6
+  notStrictIpv6: /(:{0,}[a-fA-F\d]{0,}){0,}:+([a-fA-F\d]{0,}:{0,}){0,}/g,
+  // 不严格Ipv6带单引号
+  notStrictWithQuotIpv6: /'(:{0,}[a-fA-F\d]{0,}){0,}:+([a-fA-F\d]{0,}:{0,}){0,}'/g
+}

src/views/charts/Chart.vue

@@ -210,6 +210,11 @@
         :entity="entity"
       >
       </chart-alarm-info>
+      <chart-domain-recursive-resolve
+        :chart-data="chartData"
+        v-else-if="isDomainRecursiveResolve"
+      ></chart-domain-recursive-resolve>
+
     </template>
   </div>
 </template>
@@ -242,6 +247,7 @@ import ChartSanKey from '@/views/charts/charts/ChartSanKey'
 import ChartOneSituationStatistics from '@/views/charts/charts/ChartOneSituationStatistics'
 import ChartTwoSituationStatistics from '@/views/charts/charts/ChartTwoSituationStatistics'
 import ChartAlarmInfo from '@/views/charts/charts/ChartAlarmInfo'
+import ChartDomainRecursiveResolve from '@/views/charts/charts/ChartDomainRecursiveResolve'
 import {
   isEcharts,
   isEchartsLine,
@@ -278,6 +284,7 @@ import {
   isSingleSupportStatistics,
   isTwoSupportStatistics,
   isAlarmInfo,
+  isDomainRecursiveResolve
 } from './charts/tools'
 import _ from 'lodash'
 
@@ -311,6 +318,7 @@ export default {
     ChartOneSituationStatistics,
     ChartTwoSituationStatistics,
     ChartAlarmInfo,
+    ChartDomainRecursiveResolve
   },
   data() {
     return {
@@ -428,17 +436,17 @@ export default {
       isDomainWhois: isDomainWhois(props.chartInfo.type),
       isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
       isCryptocurrencyEventList: isCryptocurrencyEventList(
-        props.chartInfo.type,
+        props.chartInfo.type
       ),
       isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
       isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
       isSingleSupportStatistics: isSingleSupportStatistics(
-        props.chartInfo.type,
+        props.chartInfo.type
       ),
       isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
       isAlarmInfo: isAlarmInfo(props.chartInfo.type),
-      
+      isDomainRecursiveResolve: isDomainRecursiveResolve(props.chartInfo.type)
     }
-  },
+  }
 }
 </script>

src/views/charts/charts/ChartDomainRecursiveResolve.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="overflow-y: auto; height: 100%; color: #555;">{{linuxLineSymbolConvert}}</div>
+</template>
+
+<script>
+export default {
+  name: 'ChartDomainRecursiveResolve',
+  props: {
+    chartInfo: Object,
+    chartData: String,
+    resultType: Object,
+    queryParams: Object
+  },
+  computed: {
+    linuxLineSymbolConvert () {
+      return this.chartData ? this.chartData.replaceAll(/\n/g, '\r\n') : ''
+    }
+  }
+}
+</script>

src/views/charts/charts/tools.js

@@ -167,6 +167,10 @@ export function isSingleSupportStatistics (type) {
 export function isTwoSupportStatistics (type) {
   return type === 87
 }
+/* 域名递归解析 */
+export function isDomainRecursiveResolve (type) {
+  return type === 88
+}
 /* 组 */
 export function isGroup (type) {
   return type === 94

src/views/detections/Index.vue

@@ -132,7 +132,8 @@ export default {
       pageObj: {
         pageNo: 1,
         pageSize: defaultPageSize,
-        total: 0
+        total: 0,
+        resetPageNo: true
       },
       q: '',
       detectionPageType,
@@ -1065,9 +1066,13 @@ export default {
         this.q = ''
         this.metaList = []
       }
+      if (this.pageObj.resetPageNo) {
+        this.pageObj.pageNo = 1
+      } else {
+        this.pageObj.resetPageNo = true
+      }
       this.queryFilter()
       this.queryList()
-      this.queryListTotal()
     },
     resetFilterData () {
       this.filterData.securityEvent.forEach(d => {
@@ -1096,9 +1101,6 @@ export default {
         this.initActiveEntity(params)
         this.initEventTypeData(params)
       }
-    },
-    queryListTotal () {
-
     },
     filter (filterColumn) {
       const params = {}
@@ -1113,6 +1115,7 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val || 1
+      this.pageObj.resetPageNo = false
       this.search(this.metaList, this.q)
     },
     // 点击上一页箭头

src/views/entityExplorer/EntityExplorer.vue

@@ -157,6 +157,8 @@ export default {
 
       pageObj: {
         pageNo: 1,
+        // 是否重置pageNo，在执行新搜索时是true
+        resetPageNo: true,
         pageSize: defaultPageSize,
         total: 0
       },
@@ -482,6 +484,11 @@ export default {
       if (!this.showList) {
         this.showList = true
       }
+      if (this.pageObj.resetPageNo) {
+        this.pageObj.pageNo = 1
+      } else {
+        this.pageObj.resetPageNo = true
+      }
       // 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
       if (formatSql) {
         // entity_type处理，不查其他两种entity_type对应的左侧筛选
@@ -529,6 +536,7 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val
+      this.pageObj.resetPageNo = false
       this.search(this.metaList, this.q)
     },
     // 点击上一页箭头
@@ -558,6 +566,9 @@ export default {
         value: name
       }
       this.$refs.search.addParams([params])
+      this.$nextTick(() => {
+        this.emitter.emit('advanced-search')
+      })
     },
     /* 查询filter数据 */
     queryFilter (params) {