pdf 搜索

src/views/common/DocumentSearch.vue

@@ -1,28 +1,31 @@
 <template>
     <div class="document-search">
-        <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">
+            <div class="floating-search">
+                <div class="search-toolbar">
+                    <div class="search-box">
+                        <el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
+                            @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" :disabled="!keyword" @click="resetSearch">
+                            <i class="el-icon-close"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
             <div ref="pdfWrapper" class="pdf-wrapper"></div>
 
             <transition name="fade">
@@ -89,6 +92,12 @@ export default {
             }
             return null
         },
+        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 {
@@ -1131,7 +1140,7 @@ export default {
     height: calc(100vh - 84px);
     overflow: hidden;
     background: #f4f7ff;
-    padding: 16px;
+    padding: 0;
     box-sizing: border-box;
     font-size: 14px;
     line-height: 1.6;
@@ -1141,38 +1150,104 @@ export default {
     text-rendering: optimizeLegibility;
 }
 
+.floating-search {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: auto;
+    max-width: calc(100% - 40px);
+    z-index: 5;
+    pointer-events: none;
+}
+
 .search-toolbar {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 14px;
-    margin-bottom: 16px;
+    background: rgba(255, 255, 255, 0.98);
-    flex-wrap: wrap;
+    border-radius: 999px;
-    justify-content: flex-end;
+    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;
 }
 
-.search-toolbar > * {
+.search-box {
-    margin-left: 0;
+    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;
+    gap: 6px;
-    color: #506dff;
+    color: #4f5875;
+    font-size: 12px;
+    padding-left: 10px;
+    border-left: 1px solid #e4e8f2;
 }
 
 .result-indicator {
     font-weight: 600;
-}
+    min-width: 48px;
-
+    text-align: center;
-.nav-btn {
-    padding: 0 8px;
 }
 
 .viewer-container {