bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

搜索修改

This commit is contained in:
cwchen 2025-11-10 16:33:22 +08:00
parent 2f3f56fbc2
commit 148c189a0a
1 changed files with 94 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/common/DocumentSearch.vue
View File

@ -3,7 +3,9 @@
<div class="search-toolbar">
<el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索 PDF" clearable
@keyup.enter.native="handleSearch" @clear="resetSearch">
<el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
<el-button slot="append" icon="el-icon-search" @click="handleSearch" :loading="searching" :disabled="searching">
搜索
</el-button>
</el-input>
<div class="search-status" v-if="searchResults.length">
<span class="result-indicator">{{ currentResultIndex + 1 }}/{{ searchResults.length }}</span>
@ -106,6 +108,7 @@ export default {
cMapUrl: '',
standardFontDataUrl: '',
pdfAssetsBase: '',
searching: false,
}
},
mounted() {
@ -510,25 +513,52 @@ export default {
container.classList.add('prefetched')
},
handleSearch: debounce(function () {
if (!this.keyword) {
this.resetSearch()
return
}
const hasRenderedContent = this.pageTextDivs.some((divs) => divs && divs.length)
if (!hasRenderedContent) {
this.$message.warning('页面正在准备内容，请稍后或滚动加载后再试')
return
}
this.highlightMatches()
}, 200),
highlightMatches() {
handleSearch: debounce(async function () {
const keyword = this.keyword.trim()
if (!keyword) {
this.resetSearch()
return
}
if (!this.pdfDoc) return
if (this.searching) return
this.searching = true
try {
const allPrepared = this.pageTextDivs.length === this.totalPages && this.pageTextDivs.every(items => items && items.length)
if (!allPrepared) {
try {
await this.ensureAllTextLayersLoaded()
} catch (error) {
console.error('全文预处理失败', error)
}
}
this.highlightMatches()
} finally {
this.searching = false
}
}, 200),
async ensureAllTextLayersLoaded() {
if (!this.pdfDoc || !this.totalPages) return
let total = this.totalPages
for (let pageNumber = 1; pageNumber <= total; pageNumber += 1) {
if (this.totalPages !== total) break
if (!this.pageTextDivs[pageNumber - 1] || !this.pageTextDivs[pageNumber - 1].length) {
await this.renderTextLayer(pageNumber, { visible: pageNumber === 1, force: true })
await this.$nextTick()
}
}
},
highlightMatches(options = {}) {
const { preserveIndex = false, skipNavigate = false } = options
const keyword = this.keyword.trim()
if (!keyword) {
this.resetSearch()
return
}
const previousIndex = preserveIndex ? this.currentResultIndex : 0
this.clearHighlights()
const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
@ -554,6 +584,7 @@ export default {
div.innerHTML = highlighted
const marks = div.querySelectorAll('mark.search-highlight')
marks.forEach((mark) => {
mark.dataset.matchIndex = results.length
results.push({
pageIndex,
element: mark,
@ -569,14 +600,36 @@ export default {
return
}
this.currentResultIndex = 0
this.focusCurrentResult()
if (preserveIndex && previousIndex < results.length && previousIndex >= 0) {
this.currentResultIndex = previousIndex
} else {
this.currentResultIndex = 0
}
if (!skipNavigate) {
this.navigateToResult(this.currentResultIndex, false)
}
},
focusCurrentResult() {
if (!this.searchResults.length || this.currentResultIndex < 0) return
this.searchResults.forEach((item, index) => {
if (index === this.currentResultIndex) {
this.navigateToResult(this.currentResultIndex)
},
async navigateToResult(index, ensureRendered = false) {
if (!this.searchResults.length || index < 0 || index >= this.searchResults.length) return
const currentResult = this.searchResults[index]
const pageNumber = currentResult.pageIndex + 1
if (ensureRendered || !this.pageTextDivs[pageNumber - 1] || !this.pageTextDivs[pageNumber - 1].length) {
await this.renderTextLayer(pageNumber, { visible: true, force: true })
await this.renderCanvas(pageNumber)
await this.$nextTick()
this.highlightMatches({ preserveIndex: true, skipNavigate: true })
}
this.currentResultIndex = index
this.searchResults.forEach((item, idx) => {
if (idx === this.currentResultIndex) {
item.element.classList.add('is-active')
} else {
item.element.classList.remove('is-active')
@ -585,30 +638,30 @@ export default {
const target = this.searchResults[this.currentResultIndex]?.element
if (!target) return
const wrapper = this.$refs.pdfWrapper
if (!wrapper) return
const targetRect = target.getBoundingClientRect()
const wrapperRect = wrapper.getBoundingClientRect()
const offset = targetRect.top - wrapperRect.top - wrapper.clientHeight / 2
wrapper.scrollTo({
top: wrapper.scrollTop + offset,
behavior: 'smooth',
this.$nextTick(() => {
const targetRect = target.getBoundingClientRect()
const wrapperRect = wrapper.getBoundingClientRect()
const offset = targetRect.top - wrapperRect.top - wrapper.clientHeight / 2
wrapper.scrollTo({
top: wrapper.scrollTop + offset,
behavior: 'smooth'
})
})
},
goToPrevious() {
if (!this.searchResults.length) return
this.currentResultIndex =
(this.currentResultIndex - 1 + this.searchResults.length) % this.searchResults.length
this.focusCurrentResult()
const idx = (this.currentResultIndex - 1 + this.searchResults.length) % this.searchResults.length
this.navigateToResult(idx)
},
goToNext() {
if (!this.searchResults.length) return
this.currentResultIndex = (this.currentResultIndex + 1) % this.searchResults.length
this.focusCurrentResult()
const idx = (this.currentResultIndex + 1) % this.searchResults.length
this.navigateToResult(idx)
},
resetSearch() {
@ -755,9 +808,17 @@ export default {
padding: 0 8px;
}
.search-preparing {
display: flex;
align-items: center;
gap: 8px;
color: #506dff;
font-size: 14px;
margin-top: 10px;
}
.viewer-container {
flex: 1;
height: 100%;
background: #ffffff;
border-radius: 12px;
overflow: hidden;