From c89397da977afffd7996c3ea76ba780652ae6150 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Tue, 7 Nov 2023 18:36:01 +0800
Subject: [PATCH] =?UTF-8?q?CN-1415=20fix:=20=E5=BB=BA=E8=AE=AEEntity?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E5=A2=9E=E5=8A=A0Search=20History?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E6=9F=A5=E7=9C=8B=E5=92=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../advancedSearch/advanced-search2.scss      |  7 +-
 .../components/advancedSearch/codemirror.scss |  5 +
 .../search/explorer-search.scss               | 99 +++++++++++++++++--
 src/components/advancedSearch/TextMode.vue    |  4 +-
 src/utils/tools.js                            | 19 ++++
 .../entityExplorer/search/ExplorerSearch.vue  | 69 ++++++++-----
 6 files changed, 169 insertions(+), 34 deletions(-)

diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index 75f4c5b3..9e3b2f91 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -65,8 +65,8 @@
 
     &.search__suffixes--tag-mode__block {
       background: #fff;
-      margin-top: -10px;
-      padding-top: 10px;
+      margin-top: -9px;
+      padding-top: 9px;
     }
   }
   /*.search-tip--error {
@@ -174,6 +174,9 @@
     }
   }
 }
+.entity__search .tag-search {
+  padding-left: 65px;
+}
 
 .el-popover.my-popper-class {
   width: auto !important;
diff --git a/src/assets/css/components/components/advancedSearch/codemirror.scss b/src/assets/css/components/components/advancedSearch/codemirror.scss
index 832c06a7..c707c07a 100644
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -13,6 +13,11 @@
     color: #ccc;
   }
 }
+.entity__search {
+  .CodeMirror {
+    padding-left: 60px;
+  }
+}
 
 /* PADDING */
 
diff --git a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
index 6779d74b..6867cba5 100644
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -26,7 +26,8 @@
     padding: 0 20px;
 
     &.explorer-search__input-case--question-mark-in-line {
-      flex-direction: row;
+      //flex-direction: row;
+      flex-direction: column;
       padding: 0;
 
       .explorer-search__input {
@@ -53,14 +54,14 @@
       max-width: 1000px;
       height: 40px;
     }
-    .explorer-search__foot {
+    .explorer-search__foot,.explorer-search__foot-list {
       display: flex;
-      padding-top: 18px;
+      padding-top: 9px;
       width: 100%;
       max-width: 1000px;
       position: relative;
-      justify-content: space-between;
-      font-weight: bold;
+      justify-content: flex-start;
+      //font-weight: bold;
 
       .foot__item {
         display: flex;
@@ -93,8 +94,8 @@
         width: 100%;
         max-width: 1000px;
         z-index: 2;
-        top: 47px;
-        border: 1px solid rgba(206,206,206,0.20);
+        //top: 47px;
+        border: 1px solid rgba(226,229,236,1);
         border-radius: 2px;
         background-color: white;
 
@@ -137,8 +138,32 @@
             color: #66b1ff;
           }
         }
+
+        .history__items-new {
+          max-height: 300px;
+          overflow: auto;
+          .el-table th,.el-table td {
+            padding: 6px 0;
+            border: none !important;
+          }
+          .el-table {
+            font-family: NotoSansSChineseRegular;
+            font-size: 14px;
+            color: #575757;
+            font-weight: 400;
+            thead {
+              font-family: NotoSansHans-Medium;
+              font-size: 14px;
+              color: #353636;
+              font-weight: 500;
+            }
+            .cell {
+              padding-left: 18px;
+            }
+          }
+        }
         .clear-all {
-          padding-left: 30px;
+          padding-left: 18px;
           font-weight: normal;
           font-size: 14px;
           height: 35px;
@@ -152,6 +177,64 @@
         }
       }
     }
+    .explorer-search__foot-list {
+      max-width: 756px;
+      position: absolute;
+      left: 196px;
+      top: 44px;
+      .search__history {
+        max-width: 756px;
+        margin-left: -196px;
+        .history__items-new {
+          max-height: 300px;
+          overflow: auto;
+          .el-table th,.el-table td {
+            padding: 4px 0;
+            border: none !important;
+          }
+          .el-table {
+            font-size: 12px;
+            thead {
+              font-size: 12px;
+            }
+          }
+          .el-table--scrollable-x .el-table__body-wrapper {
+            overflow-x: hidden;
+          }
+        }
+      }
+    }
   }
 
 }
+.highlight__text {
+  background: #FEECC2;
+  padding: 2px 3px;
+}
+.explorer-search__foot-list .explorer-search__block {
+  margin-left: -196px;
+  top: -42px;
+}
+.explorer-search__foot .explorer-search__block {
+  margin-left: 0;
+  top: -40px;
+}
+.explorer-search__block {
+  position: absolute;
+  padding: 10px 15px;
+  display: flex;
+  cursor: pointer;
+
+  i {
+    font-size: 20px;
+    color: #999;
+  }
+
+  .search-dividing-line {
+    width: 1px;
+    height: 30px;
+    background: #DEDEDE;
+    margin-left: 15px;
+    margin-top: -5px;
+  }
+}
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 663f7456..dad91f5e 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -1,8 +1,10 @@
 <template>
   <textarea
+      style="text-indent: 65px;"
+      cols="40"
       ref="textSearch"
   ></textarea>
-  <div class="search__suffixes search__suffixes--text-mode" style="background: #fff;">
+  <div class="search__suffixes search__suffixes--text-mode" style="padding-left: 1px">
     <div class="search__suffix">
       <el-popover
           popper-class="my-popper-class"
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 50d5a41e..fb3c3330 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1403,3 +1403,22 @@ export const myHighLight = {
     }
   }
 }
+
+export const changeTimeByDate = (date) => {
+  if (date) {
+    const nowDate = Date.now()
+    const oldDate = Date.parse(date)
+    const diff = Math.floor((nowDate - oldDate) / 1000)
+    if (diff < 60) {
+      return 60 + i18n.global.t('entity.search.secondsAgo')
+    } else if (diff >= 60 && diff < 3600) {
+      const minutes = Math.floor(diff / 60)
+      return minutes === 1 ? `${minutes} ${i18n.global.t('entity.search.minuteAgo')}` : `${minutes} ${i18n.global.t('entity.search.minutesAgo')}`
+    } else if (diff >= 3600 && diff < 86400) {
+      const hours = Math.floor(diff / 3600)
+      return hours === 1 ? `${hours} ${i18n.global.t('entity.search.hourAgo')}` : `${hours} ${i18n.global.t('entity.search.hoursAgo')}`
+    } else {
+      return new Date(oldDate)
+    }
+  }
+}
diff --git a/src/views/entityExplorer/search/ExplorerSearch.vue b/src/views/entityExplorer/search/ExplorerSearch.vue
index 2ced9881..8c983c2a 100644
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -2,7 +2,7 @@
   <div class="explorer-search">
     <div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
     <div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
-      <div class="explorer-search__input explorer-search__input__border">
+      <div class="explorer-search__input explorer-search__input__border entity__search">
         <advanced-search
           ref="search"
           :column-list="columnList"
@@ -17,26 +17,40 @@
 <!--      <div class="search-symbol-inline" v-if="showList">-->
 <!--        <i class="cn-icon cn-icon-help"></i>-->
 <!--      </div>-->
-      <div v-if="!showList" class="explorer-search__foot" v-ele-click-outside="esc">
-        <div class="foot__item" @click="triggerHistory">
-          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': showHistory }" style="padding-right: 5px;"></i>
-          <span>{{$t('search.searchHistory')}}</span>
-        </div>
-        <div class="foot__item">
-          <!-- <span @click="search">{{$t('overall.explore')}}</span>
-          <el-divider direction="vertical"></el-divider>
-          <span>{{$t('overall.help')}}</span>-->
+      <div :class="showList ? 'explorer-search__foot-list' : 'explorer-search__foot'" 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>
+<!--        <div class="foot__item" @click="triggerHistory">-->
+<!--          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': showHistory }" style="padding-right: 5px;"></i>-->
+<!--          <span>{{$t('search.searchHistory')}}</span>-->
+<!--        </div>-->
+<!--        <div class="foot__item">-->
+<!--          &lt;!&ndash; <span @click="search">{{$t('overall.explore')}}</span>-->
+<!--          <el-divider direction="vertical"></el-divider>-->
+<!--          <span>{{$t('overall.help')}}</span>&ndash;&gt;-->
+<!--        </div>-->
         <transition name="el-zoom-in-top">
-          <div class="search__history" v-show="showHistory">
-            <div class="history__items">
-              <div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.str)">
-                <span class="item-date">{{h.date}}</span>
-                <div class="item-value" :title="h.str">{{h.str}}</div>
-              </div>
+          <div class="search__history" v-if="showHistory">
+            <div class="history__items-new">
+              <el-table
+                  :data="history"
+                  :default-sort="{ prop: 'date', order: 'descending' }"
+                  scrollbar-always-on="false"
+                  @row-click="selectHistory"
+                  style="overflow-x: unset"
+              >
+                <el-table-column prop="str" label="Search" min-width="560" />
+                <el-table-column prop="date" label="Last Run" 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('overall.clear')}}</span>
+              <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('entity.clearAll')}}</span>
               <div v-else>{{$t('overall.noRecords')}}</div>
             </div>
           </div>
@@ -53,6 +67,7 @@ import { storageKey } from '@/utils/constants'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { columnList } from '@/utils/static-data'
+import { changeTimeByDate } from '@/utils/tools'
 export default {
   name: 'CnSearch',
   components: {
@@ -90,6 +105,7 @@ export default {
     }
   },
   methods: {
+    changeTimeByDate,
     search ({ str, q, metaList, keywordList }) {
       if (str) {
         // 加入搜索记录，将记录数量控制在30以内
@@ -98,9 +114,8 @@ export default {
         const newItem = { str, date: this.dateFormatByAppearance(new Date()) }
         if (!_.isEmpty(oldHistory)) {
           const oldArr = JSON.parse(oldHistory)
-          const obj = oldArr.find(d => d.str === str)
-          if (obj) {
-            oldArr[0].date = this.dateFormatByAppearance(new Date())
+          if (str === oldArr[0].str) {
+            oldArr[0].date = Date.now()
           } else {
             oldArr.unshift(newItem)
           }
@@ -118,14 +133,19 @@ export default {
     addParams (params) {
       this.$refs.search.addParams(params)
     },
-    selectHistory (str) {
-      this.$refs.search.setStr(str)
+    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.entitySearchHistory, '')
@@ -141,7 +161,10 @@ export default {
       }
     },
     esc () {
-      this.showHistory = false
+      const timer = setTimeout(() => {
+        this.showHistory = false
+        clearTimeout(timer)
+      }, 100)
     }
   }
 }