From 834651d471ed88d987ff5db544f1aeaf1c84b220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Fri, 23 Aug 2024 15:01:45 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=90=9C=E7=B4=A2=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=90=9C=E7=B4=A2=E7=BB=93=E6=9E=9C=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lang/en_us.js                    |  3 +-
 web/src/lang/zh_cn.js                    |  3 +-
 web/src/pages/Edit/components/Search.vue | 59 ++++++++++++++++++++----
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 5cd6ca70..d313a98e 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -318,7 +318,8 @@ export default {
     replacePlaceholder: 'Please enter replacement content',
     replace: 'Replace',
     replaceAll: 'Replace all',
-    cancel: 'Cancel'
+    cancel: 'Cancel',
+    noResult: 'No result'
   },
   nodeIconSidebar: {
     title: 'Icon/Sticker',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index f92b4c8e..cb351c11 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -310,7 +310,8 @@ export default {
     replacePlaceholder: '请输入替换内容',
     replace: '替换',
     replaceAll: '全部替换',
-    cancel: '取消'
+    cancel: '取消',
+    noResult: '暂无结果'
   },
   nodeIconSidebar: {
     title: '图标/贴纸',
diff --git a/web/src/pages/Edit/components/Search.vue b/web/src/pages/Edit/components/Search.vue
index e9f2800d..e0fc4eec 100644
--- a/web/src/pages/Edit/components/Search.vue
+++ b/web/src/pages/Edit/components/Search.vue
@@ -54,14 +54,20 @@
     <div
       class="searchResultList"
       :style="{ height: searchResultListHeight + 'px' }"
+      v-if="showSearchResultList"
     >
       <div
         class="searchResultItem"
-        v-for="item in searchResultList"
+        v-for="(item, index) in searchResultList"
         :key="item.id"
         :title="item.name"
         v-html="item.text"
+        @click.stop="onSearchResultItemClick(index)"
       ></div>
+      <div class="empty" v-if="searchResultList.length <= 0">
+        <span class="iconfont iconwushuju"></span>
+        <span class="text">{{ $t('search.noResult') }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -88,7 +94,8 @@ export default {
       total: 0,
       showSearchInfo: false,
       searchResultListHeight: 0,
-      searchResultList: []
+      searchResultList: [],
+      showSearchResultList: false
     }
   },
   computed: {
@@ -180,9 +187,8 @@ export default {
     },
 
     onSearchNext() {
-      this.mindMap.search.search(this.searchText, () => {
-        this.$refs.searchInputRef.focus()
-      })
+      this.showSearchResultList = true
+      this.mindMap.search.search(this.searchText)
     },
 
     replace() {
@@ -195,6 +201,7 @@ export default {
 
     close() {
       this.show = false
+      this.showSearchResultList = false
       this.showSearchInfo = false
       this.total = 0
       this.currentIndex = 0
@@ -212,10 +219,9 @@ export default {
           name = getTextFromHtml(name)
         }
         const reg = new RegExp(`${this.searchText.trim()}`, 'g')
-        name.replace(reg, (a, b, c) => {
-          console.log(a, b, c)
+        const text = name.replace(reg, a => {
+          return `<span class="match">${a}</span>`
         })
-        const text = ''
         return {
           data: item,
           id,
@@ -227,6 +233,10 @@ export default {
 
     setSearchResultListHeight() {
       this.searchResultListHeight = window.innerHeight - 267 - 24
+    },
+
+    onSearchResultItemClick(index) {
+      this.mindMap.search.jump(index)
     }
   }
 }
@@ -305,15 +315,44 @@ export default {
     border-radius: 12px;
     margin-top: 5px;
     overflow-y: auto;
+    padding: 12px 0;
 
     .searchResultItem {
       height: 30px;
+      line-height: 30px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      padding: 0 12px;
+      font-size: 14px;
+      cursor: pointer;
 
-      .match {
-        
+      &:hover {
+        background-color: #f2f4f7;
+      }
+
+      /deep/.match {
+        color: #409eff;
+        font-weight: bold;
+      }
+    }
+
+    .empty {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .iconfont {
+        font-size: 50px;
+        margin-bottom: 20px;
+      }
+
+      .text {
+        font-size: 14px;
+        color: rgba(26, 26, 26, 0.8);
       }
     }
   }