hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-24 02:03:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(api): 新增 MinerU相关接口并优化 PDF预览功能

Browse Source 
- 新增 getPdfUrl 接口用于获取 PDF 预览 URL
- 新增 minerUMarkDownUpdate 接口用于更新 Markdown 内容- 优化了 RenderMinerU 组件，增加保存并处理功能
- 调整了知识库详情页面布局
- 修复了规则管理相关组件的样式问题
This commit is contained in:
陈昱达
2025-04-11 18:08:27 +08:00
parent 93dd8483e4
commit 09a9b696e5
14 changed files with 535 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/RenderMinerU/index.vue
View File

@@ -1,6 +1,10 @@
<template>
<div style="height: 100%;">
<div class="flex" style="height:calc(100% - 20px);flex:1">
<div class="mv10 mh20 text-right">
<el-button type="primary" size="medium" @click="saveMarkDown">保存并处理</el-button>
<el-button size="medium">取消</el-button>
</div>
<div class="flex" style="height:calc(100% - 35px);flex:1">
<iframe
id="iframe"
:src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(prdUrl)}`"
@@ -9,7 +13,7 @@
<div style="flex:1;max-width: 800px;" class="mh20 miner-u-md">
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab">
<el-tab-pane label="预览" style="overflow:scroll;">
<div v-html="markdownHtml" class="view-body"></div>
<div v-html="markdownHtml" class="view-body" id="viewBody" ref="viewBody"></div>
</el-tab-pane>
<el-tab-pane label="编辑">
<div class="lineH25" contenteditable id="md-editor" @blur="emitMarkDown">{{ markdown }}</div>
@@ -20,34 +24,109 @@
</div>
</template>
<script>
import { minerUBbox, minerUMarkDown } from '@/api/generatedApi/index'
import { getPdfUrl, minerUBbox, minerUMarkDown, minerUMarkDownUpdate } from '@/api/generatedApi/index'
import { DEFAULT_COLOR_SECTION, PDF_COLOR_PICKER } from './pdf-color'
import MarkdownIt from 'markdown-it'
import markdownItKatex from 'markdown-it-katex'
const md = new MarkdownIt({
html: true
}).use(markdownItKatex)
export default {
name: 'index',
data() {
return {
prdUrl: ``,
iframeSrc: window.location.href,
iframeSrc: window.location.origin,
bboxList: [],
markdown: '',
md,
markdownHtml: ''
markdownHtml: '',
page: 1
}
},
props: {
documentId: {
type: String,
default: '1359571867133448192'
}
},
props: {},
watch: {},
components: {},
filters: {},
methods: {
// 生成视觉模型
viewHtmlModel() {
// 创建一个唯一的按钮容器
const buttonContainer = document.createElement('div')
buttonContainer.style.position = 'absolute'
buttonContainer.style.pointerEvents = 'none'
// document.body.appendChild(buttonContainer)
// 当鼠标滑动view-body下的table 时 增加浮层按钮
window.addEventListener('mouseover', e => {
// 检查是否在 viewBody 内部
const viewBody = document.getElementById('viewBody')
if (viewBody.contains(e.target)) {
// 检查目标元素是否为 table 或其子元素
const tableElement = e.target.closest('table')
if (tableElement) {
// 清除之前的按钮
// buttonContainer.innerHTML = ''
//
// // 在这里添加浮层按钮的逻辑
// console.log('Mouse over table or TD element inside viewBody')
// // 生成两个按钮
// const button = document.createElement('button')
// button.innerText = '标注'
// button.style.position = 'absolute'
// // 按钮位置在表格正中间浮动
// // 设置按钮位置在鼠标位置
// const rect = tableElement.getBoundingClientRect()
// console.log(rect)
// // 按钮s生成在鼠标位置
// button.style.left = `-10px`
// button.style.top = `-10px`
//
// button.style.backgroundColor = 'transparent'
// button.style.border = 'none'
// button.style.cursor = 'pointer'
// button.style.padding = '0'
// button.style.fontSize = '16px'
// button.style.zIndex = '9999'
// button.style.pointerEvents = 'auto'
// button.addEventListener('click', () => {
// alert(1)
// })
// buttonContainer.appendChild(button)
// tableElement.appendChild(buttonContainer)
}
}
})
// 当鼠标离开 view-body 下的 table 时 删除按钮
window.addEventListener('mouseout', e => {
// 检查是否在 viewBody 内部
const viewBody = document.getElementById('viewBody')
if (!viewBody.contains(e.target) || !e.target.closest('table')) {
buttonContainer.innerHTML = ''
}
})
},
// 导出
emitMarkDown() {
let pre = document.getElementById('md-editor').innerText
this.$emit('getMarkDownIt', { innerText: pre })
},
saveMarkDown() {
let pre = document.getElementById('md-editor').innerText
minerUMarkDownUpdate({
documentId: this.documentId,
newMd: pre
})
},
// 给文件增加色块
formatJson(data) {
return data.map(item => {
let bboxes = []
@@ -80,19 +159,24 @@ export default {
},
// bbox 解析 传递 颜色
getPDFDetailBbox() {
minerUBbox({ documentId: 1 }).then(res => {
minerUBbox({ documentId: this.documentId }).then(res => {
this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content)))
})
},
changeTab() {
let pre = document.getElementById('md-editor').innerText
this.markdownHtml = md.render(pre)
let copyMdHtml = md.render(pre)
console.log(copyMdHtml)
// 给 copyMdHtml 里面的table 增加 class m-view
copyMdHtml = copyMdHtml.replace(/<table/g, '<table class="m-view"')
this.markdownHtml = copyMdHtml
},
async getPDFDetailMarkDown() {
const response = await fetch(minerUMarkDown({ documentId: 1 }))
const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
this.markdown = await response.text()
this.markdownHtml = this.md.render(this.markdown)
this.markdownHtml = this.md.render(this.markdown).replace(/<table/g, '<table class="m-view"')
},
// 向 iframe 发送消息
sendMessageToIframe(type, message) {
@@ -113,12 +197,15 @@ export default {
created() {
this.getPDFDetailBbox()
this.getPDFDetailMarkDown()
this.prdUrl = getPdfUrl({ documentId: this.documentId })
console.log(this.prdUrl)
},
mounted() {
// 监听 iframe 的 postMessage 事件
window.addEventListener('message', event => {
// 检查消息来源是否合法
if (event.origin + '/' === process.env.BASE_URL) {
if (event.origin === window.location.origin) {
// 根据消息状态执行不同操作
switch (event.data.status) {
case 'loaded':
@@ -136,10 +223,12 @@ export default {
if (event.data.pageNumDetail) {
const pageNumDetail = event.data.pageNumDetail || 1
this.page.value = pageNumDetail
this.page = pageNumDetail
this.sendMessageToIframe('pageNumDetail', pageNumDetail)
}
})
this.viewHtmlModel()
},
computed: {}
}