word 文档搜索修改

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 {
+.search-toolbar.is-searching {
-    border-color: rgba(43, 104, 255, 0.4);
+    &::after {
-    animation: search-pulse 1.2s ease-in-out infinite;
+        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;