From 04f81d279a8e1b8d63a16dc9538a1f3db66831af Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 28 Nov 2025 13:12:43 +0800
Subject: [PATCH] =?UTF-8?q?word=20=E6=96=87=E6=A1=A3=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/common/DocumentSearchWord.vue | 51 +++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/views/common/DocumentSearchWord.vue b/src/views/common/DocumentSearchWord.vue
index 230ddb3..3427d5e 100644
--- a/src/views/common/DocumentSearchWord.vue
+++ b/src/views/common/DocumentSearchWord.vue
@@ -327,10 +327,18 @@ export default {
             if (!this.docRendered) {
                 this.prepareSearchSegments()
             }
+            // 立即设置 searching 状态，确保动画能够显示
             this.searching = true
+            // 使用 requestAnimationFrame 确保 DOM 更新后再执行搜索
             await this.$nextTick()
+            await new Promise(resolve => requestAnimationFrame(() => {
+                requestAnimationFrame(resolve)
+            }))
             try {
-                this.highlightMatches()
+                // 执行搜索，确保有足够时间显示动画
+                const searchPromise = Promise.resolve(this.highlightMatches())
+                const minDelayPromise = new Promise(resolve => setTimeout(resolve, 300))
+                await Promise.all([searchPromise, minDelayPromise])
             } finally {
                 this.searching = false
             }
@@ -1014,9 +1022,19 @@ export default {
     pointer-events: none;
 }
 
-.search-toolbar.is-searching::after {
-    border-color: rgba(43, 104, 255, 0.4);
-    animation: search-pulse 1.2s ease-in-out infinite;
+.search-toolbar.is-searching {
+    &::after {
+        border-color: rgba(43, 104, 255, 0.4);
+        animation: search-pulse 1.2s ease-in-out infinite;
+    }
+    
+    // 确保搜索图标在搜索时显示加载动画
+    .search-icon {
+        i.el-icon-loading {
+            display: inline-block !important;
+            animation: rotating 1s linear infinite !important;
+        }
+    }
 }
 
 @keyframes search-pulse {
@@ -1100,6 +1118,17 @@ export default {
 .search-icon {
     background: #2b68ff;
     color: #fff;
+    
+    // 确保加载图标有旋转动画
+    i.el-icon-loading {
+        display: inline-block;
+        animation: rotating 1s linear infinite;
+        font-size: 16px;
+    }
+    
+    i.el-icon-search {
+        font-size: 16px;
+    }
 }
 
 .search-icon:hover {
@@ -1107,6 +1136,20 @@ export default {
     color: #fff;
 }
 
+.search-icon:disabled {
+    opacity: 0.8;
+    cursor: wait;
+}
+
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .search-status {
     display: flex;
     align-items: center;