word 文档搜索

src/views/common/DocumentSearchWord.vue

@@ -1,28 +1,36 @@
 <template>
     <div class="document-search-word">
-        <div class="search-toolbar">
-            <el-input v-model="keyword" class="search-input" placeholder="请输入关键字" clearable
-                @keyup.enter.native="handleSearch" @clear="resetSearch">
-                <el-button slot="append" class="search-btn" icon="el-icon-search" @click="handleSearch"
-                    :loading="searching" :disabled="searching">
-                    <span v-if="!searching">搜索</span>
-                    <span v-else>搜索中...</span>
-                </el-button>
-            </el-input>
-            <div class="search-status" v-if="searchResults.length">
-                <span class="result-indicator">{{ currentResultIndex + 1 }}/{{ searchResults.length }}</span>
-                <el-button class="nav-btn" type="text" icon="el-icon-arrow-up" :disabled="!searchResults.length"
-                    @click="goToPrevious">
-                    上一处
-                </el-button>
-                <el-button class="nav-btn" type="text" icon="el-icon-arrow-down" :disabled="!searchResults.length"
-                    @click="goToNext">
-                    下一处
-                </el-button>
-            </div>
-        </div>
-
         <div class="viewer-container">
+            <transition name="slide-fade">
+                <div v-if="showSearchBar" class="floating-search">
+                    <div class="search-toolbar" :class="{ 'is-searching': searching }">
+                        <div class="search-box">
+                            <el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
+                                ref="keywordInput" @keyup.enter.native="handleSearch" @clear="resetSearch">
+                            </el-input>
+                            <button class="icon-btn search-icon" :disabled="searching" @click="handleSearch">
+                                <i class="el-icon-search" v-if="!searching"></i>
+                                <i class="el-icon-loading" v-else></i>
+                            </button>
+                        </div>
+                        <div class="search-status">
+                            <span class="result-indicator">{{ resultDisplay }}</span>
+                            <button class="icon-btn" :disabled="!searchResults.length" @click="goToPrevious">
+                                <i class="el-icon-arrow-up"></i>
+                            </button>
+                            <button class="icon-btn" :disabled="!searchResults.length" @click="goToNext">
+                                <i class="el-icon-arrow-down"></i>
+                            </button>
+                            <button class="icon-btn" @click="handleCloseSearch">
+                                <i class="el-icon-close"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+            <button v-if="!showSearchBar" class="floating-search-btn" @click="toggleSearchBar">
+                <i class="el-icon-search"></i>
+            </button>
             <div ref="docWrapper" class="doc-wrapper">
                 <div ref="docxContainer" class="doc-content"></div>
             </div>
@@ -59,6 +67,14 @@ export default {
             default: ''
         }
     },
+    computed: {
+        resultDisplay() {
+            const total = this.searchResults.length
+            if (!total) return '0/0'
+            const current = this.currentResultIndex >= 0 ? this.currentResultIndex + 1 : 0
+            return `${current}/${total}`
+        }
+    },
     data() {
         return {
             docUrl: '',
@@ -72,6 +88,7 @@ export default {
             docRendered: false,
             abortController: null,
             scrollAnimationFrame: null,
+            showSearchBar: false,
         }
     },
     mounted() {
@@ -102,6 +119,19 @@ export default {
         },
     },
     methods: {
+        toggleSearchBar() {
+            this.showSearchBar = true
+            this.$nextTick(() => {
+                if (this.$refs.keywordInput) {
+                    this.$refs.keywordInput.focus()
+                }
+            })
+        },
+        handleCloseSearch() {
+            this.keyword = ''
+            this.resetSearch()
+            this.showSearchBar = false
+        },
         applyDocUrl(url) {
             const resolved = url || ''
             if (resolved === this.docUrl) {
@@ -899,34 +929,168 @@ export default {
     font-size: 14px;
 }
 
+.floating-search {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: auto;
+    max-width: calc(100% - 40px);
+    z-index: 6;
+    pointer-events: none;
+}
+
+.floating-search-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: #2b68ff;
+    color: #fff;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 10px 26px rgba(31, 114, 234, 0.25);
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    z-index: 5;
+}
+
+.floating-search-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 30px rgba(31, 114, 234, 0.3);
+}
+
 .search-toolbar {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    gap: 14px;
-    gap: 16px;
+    background: rgba(255, 255, 255, 0.98);
-    margin-bottom: 16px;
+    border-radius: 999px;
-    flex-wrap: wrap;
+    padding: 8px 12px;
+    box-shadow: 0 8px 26px rgba(31, 114, 234, 0.18);
+    border: 1px solid rgba(226, 231, 239, 0.8);
+    pointer-events: auto;
+    position: relative;
+    overflow: hidden;
+}
+
+.search-toolbar::after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    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;
+}
+
+@keyframes search-pulse {
+    0% {
+        opacity: 0.25;
+        transform: scale(0.98);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0.25;
+        transform: scale(0.98);
+    }
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: #fff;
+    border: 1px solid #e4e7f0;
+    border-radius: 999px;
+    padding: 0 6px 0 10px;
 }
 
 .search-input {
-    flex: 0 0 360px;
+    width: 190px;
-    width: 360px;
+}
-    max-width: 100%;
+
+.search-input ::v-deep .el-input__inner {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+    height: 30px;
+    font-size: 13px;
+}
+
+.search-input ::v-deep .el-input__suffix,
+.search-input ::v-deep .el-input__prefix {
+    display: none;
+}
+
+.icon-btn {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6c7388;
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease;
+}
+
+.icon-btn:hover {
+    background: rgba(64, 158, 255, 0.12);
+    color: #2b68ff;
+}
+
+.icon-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+.search-icon {
+    background: #2b68ff;
+    color: #fff;
+}
+
+.search-icon:hover {
+    background: #1d4fd8;
+    color: #fff;
 }
 
 .search-status {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: #506dff;
 }
 
 .result-indicator {
-    font-weight: 600;
+    font-size: 12px;
-}
+    color: #4f5875;
-
+    padding-left: 10px;
-.nav-btn {
+    font-weight: 500;
-    padding: 0 8px;
 }