CN-1478 fix: detection事件列表搜索框增加历史记录

src/assets/css/components/views/detections/detection-filter.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 280px;
-  margin-right: 20px;
+  margin-right: 12px;
   overflow: auto;
   z-index: 1;
   border: 1px solid rgba(226, 229, 236, 1) !important;

src/assets/css/components/views/entityExplorer/entity-filter.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 320px;
-  margin-right: 20px;
+  margin-right: 12px;
   overflow: auto;
   z-index: 1;
   border: 1px solid rgba(226, 229, 236, 1) !important;

src/utils/constants.js

@@ -38,6 +38,7 @@ export const storageKey = {
   leftMenuShrink: 'cn-left-menu-shrink',
   unsavedChange: 'cn-unsaved-change',
   entitySearchHistory: 'cn-entity-search-history',
+  detectionSearchHistory: 'cn-detection-search-history',
   echartLegendFontSize: 'echartLegendFontSize',
   echartLabelFontSize: 'echartLabelFontSize',
   tokenExpireCurrentPath: 'token-expire-current-path',

src/views/detections/DetectionSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="explorer-search explorer-search--show-list">
-    <div class="explorer-search__input-case explorer-search__input-case--question-mark-in-line">
-      <div class="explorer-search__input">
+    <div class="explorer-search__input-case explorer-search__input-case--question-mark-in-line" style="position: relative">
+      <div class="explorer-search__input entity__search">
         <advanced-search
             ref="search"
             :column-list="columnList[pageType]"
@@ -13,6 +13,35 @@
             @search="search"
         ></advanced-search>
       </div>
+      <div class="explorer-search__foot-list" style="margin-top: -2px;" v-ele-click-outside="esc">
+        <div style="position: absolute;" class="explorer-search__block" @click="triggerHistory">
+          <i class="cn-icon cn-icon-time"></i>
+          <div class="search-dividing-line"></div>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div class="search__history" v-if="showHistory">
+            <div class="history__items-new">
+              <el-table
+                  :data="history"
+                  scrollbar-always-on="false"
+                  @row-click="selectHistory"
+                  style="overflow-x: unset"
+              >
+                <el-table-column prop="str" :label="$t('networkOverview.search')" min-width="560" />
+                <el-table-column prop="date" :label="$t('entity.search.lastRun')" sortable width="200">
+                  <template #default="scope">
+                    <span>{{ changeTimeByDate(scope.row.date) }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="clear-all">
+              <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('entity.clearAll')}}</span>
+              <div v-else>{{$t('overall.noRecords')}}</div>
+            </div>
+          </div>
+        </transition>
+      </div>
 <!--      <div class="search-symbol-inline">-->
 <!--        <i class="cn-icon cn-icon-help"></i>-->
 <!--      </div>-->
@@ -25,6 +54,9 @@ import AdvancedSearch from '@/components/advancedSearch/Index'
 import { schemaDetectionSecurity } from '@/utils/static-data'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
+import { storageKey } from '@/utils/constants'
+import _ from 'lodash'
+import { changeTimeByDate } from '@/utils/tools'
 export default {
   name: 'DetectionSearch',
   props: {
@@ -95,7 +127,9 @@ export default {
           label: 'OR'
         }
       ],
-      showList: true
+      showList: true,
+      showHistory: false,
+      history: []
     }
   },
   emits: ['search'],
@@ -122,11 +156,66 @@ export default {
       }
       this.$emit('search', metaList, sql)
     }, */
-    search ({ q, metaList }) {
+    changeTimeByDate,
+    search ({ str, q, metaList }) {
+      if (str) {
+        // 加入搜索记录，将记录数量控制在30以内
+        const oldHistory = localStorage.getItem(storageKey.detectionSearchHistory)
+        let arr = []
+        const newItem = { str, date: this.dateFormatByAppearance(new Date()) }
+        if (!_.isEmpty(oldHistory)) {
+          const oldArr = JSON.parse(oldHistory)
+          if (str === oldArr[0].str) {
+            oldArr[0].date = this.dateFormatByAppearance(new Date())
+          } else {
+            oldArr.unshift(newItem)
+          }
+          arr = [...oldArr]
+          if (arr.length > 30) {
+            arr = arr.slice(0, 30)
+          }
+        } else {
+          arr.push(newItem)
+        }
+        localStorage.setItem(storageKey.detectionSearchHistory, JSON.stringify(arr))
+      }
       this.$emit('search', { q, metaList })
     },
     changeParams (params) {
       this.$refs.search.addParams(params)
+    },
+    selectHistory (row) {
+      this.$refs.search.setStr(row.str)
+      this.showHistory = false
+      this.$nextTick(() => {
+        if (this.$refs.search.$refs.textMode) {
+          this.$refs.search.$refs.textMode.focus()
+        }
+      })
+      if (this.showList) {
+        this.$nextTick(() => {
+          this.emitter.emit('advanced-search')
+        })
+      }
+    },
+    clearHistory () {
+      localStorage.setItem(storageKey.detectionSearchHistory, '')
+      this.history = []
+    },
+    triggerHistory () {
+      this.showHistory = !this.showHistory
+      if (this.showHistory) {
+        const history = localStorage.getItem(storageKey.detectionSearchHistory)
+        if (!_.isEmpty(history)) {
+          this.history = JSON.parse(history)
+        }
+      }
+    },
+    esc () {
+      const timer = setTimeout(() => {
+        this.showHistory = false
+        clearTimeout(timer)
+      }, 100)
     }
   }
 }