feat(RenderMinerU): 添加 PDF 文件页面切换功能

- 在 PDF 预览页面添加了页码切换组件
- 实现了通过输入框和左右箭头进行页面切换
- 优化了页面滚动逻辑,确保切换到指定页面
- 调整了页面样式,增加了页码显示和边框
This commit is contained in:
陈昱达
2025-05-15 16:43:42 +08:00
parent 256f6af73a
commit cb44faa9ca
4 changed files with 101 additions and 16 deletions

View File

@@ -346,3 +346,6 @@
color: $--color-primary; color: $--color-primary;
} }
} }
.el-input__inner {
height: 100%;
}

View File

@@ -69,11 +69,36 @@
element-loading-text="正在识别中..." element-loading-text="正在识别中..."
> >
<div class="el-card ebiz-pdf" style="height: 100%;overflow: hidden"> <div class="el-card ebiz-pdf" style="height: 100%;overflow: hidden">
<div style="height: 47px;width: 100%;text-align: center;">
<div
class="flex align-items-c justify-content-c"
style="margin-top: 11px;border-bottom: 1px solid #EBEEF5;padding-bottom: 10px;gap: 10px"
>
<el-icon
class="el-icon-caret-left cursor-pointer"
@click.native="changePageDown('down')"
>
</el-icon>
<el-input
style="height: 23px;width: 50px;text-align: center"
v-model="copyValue"
:min="0"
@blur="blursChange"
></el-input>
<span class="ml5">/ {{ mdJsons.length }}</span>
<el-icon
class="el-icon-caret-right cursor-pointer"
@click.native="changePageUp('up')"
>
></el-icon
>
</div>
</div>
<div ref="scrollView" v-show="tab === '0'"> <div ref="scrollView" v-show="tab === '0'">
<div <div
class="view-body" class="view-body"
id="viewBody" id="viewBody"
style="height:calc(100vh - 180px);overflow-y: scroll;overflow-x:hidden" style="height:calc(100vh - 227px);overflow-y: scroll;overflow-x:hidden"
v-html="markdownHtml" v-html="markdownHtml"
></div> ></div>
</div> </div>
@@ -122,6 +147,7 @@ export default {
name: 'index', name: 'index',
data() { data() {
return { return {
copyValue: 1,
mdJsons: {}, mdJsons: {},
finishenEnd: false, finishenEnd: false,
fileName: '', fileName: '',
@@ -278,8 +304,6 @@ export default {
page: { page: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (newVal) { if (newVal) {
// this.changePage(newVal, this.tab)
this.getPDFDetailMarkDown() this.getPDFDetailMarkDown()
} }
} }
@@ -314,19 +338,77 @@ export default {
}, },
//changePage //changePage
// 分页发生改变时 // 分页发生改变时
changePage(page) { changePage(type) {
let documentId = document.getElementById(`view-code-${page - 1}`) // if (this.page <= 0 || this.page >= this.mdJsons.length) {
let viewBody = document.getElementById('viewBody') // return false
if (this.tab === '1') { // }
documentId = document.getElementById(`ebiz-code-${page - 1}`) //
viewBody = document.getElementById('md-editor') // switch (type) {
// case 'down':
// this.page -= 1
// break
// case 'up':
// this.page += 1
// break
// },
//
// let documentId = document.getElementById(`view-code-${page - 1}`)
// let viewBody = document.getElementById('viewBody')
// if (this.tab === '1') {
// documentId = document.getElementById(`ebiz-code-${page - 1}`)
// viewBody = document.getElementById('md-editor')
// }
// if (documentId) {
// viewBody.scrollTo({
// top: documentId.offsetTop - 130,
// behavior: 'smooth'
// })
// }
},
changePageDown(type) {
if (this.page <= 0) {
return false
} }
if (documentId) {
viewBody.scrollTo({ switch (type) {
top: documentId.offsetTop - 130, case 'down':
behavior: 'smooth' this.page -= 1
}) break
case 'up':
this.page += 1
break
} }
this.copyValue = this.page
},
blursChange(e) {
if (!e.target.value.trim()) {
this.copyValue = this.page
}
if (e.target.value < 0) {
this.copyValue = this.page
}
if (e.target.value > this.mdJsons.length) {
this.copyValue = this.page
}
this.page = this.copyValue
},
changePageUp(type) {
if (this.page >= this.mdJsons.length) {
return false
}
switch (type) {
case 'down':
this.page -= 1
break
case 'up':
this.page += 1
break
}
this.copyValue = this.page
}, },
//重新识别表格 //重新识别表格
retryMinerImage(chooseItem, loading, tableElement) { retryMinerImage(chooseItem, loading, tableElement) {

View File

@@ -76,7 +76,7 @@
:key="index" :key="index"
> >
<div class="section-title"> <div class="section-title">
拆分规则 {{ index + 1 }} 题词规则 {{ index + 1 }}
<div> <div>
<el-button <el-button
v-if="!isPreview && form.ruleList.length > 1" v-if="!isPreview && form.ruleList.length > 1"

View File

@@ -68,7 +68,7 @@
placement="top" placement="top"
width="400" width="400"
trigger="hover" trigger="hover"
content="设置分段之间的重叠长度可以保留分段之间的语义关系提升召回效果。建议设置为最大分段长度的1096-25%。" content="设置分段之间的重叠长度可以保留分段之间的语义关系提升召回效果。建议设置为最大分段长度的10%-25%。"
> >
<el-icon <el-icon
class="el-icon-question" class="el-icon-question"