feat(RenderMinerU): 优化 PDF 渲染组件功能

- 添加 isShowPdf 属性,控制 PDF 预览的显示- 调整编辑模式下的界面布局
- 优化按钮生成事件的命名
- 添加初始 Markdown 文档获取方法
This commit is contained in:
陈昱达
2025-04-14 16:47:54 +08:00
parent dba3fb787d
commit a3df6f38a5
3 changed files with 27 additions and 16 deletions

View File

@@ -1,21 +1,22 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%;">
<div class="mv10 mh20 text-right"> <div class="mv10 mh20 text-right" v-if="isEdit">
<el-button type="primary" size="medium" @click="saveMarkDown">保存并处理</el-button> <el-button type="primary" size="medium" @click="saveMarkDown">保存并处理</el-button>
<el-button size="medium">取消</el-button> <el-button size="medium">取消</el-button>
</div> </div>
<div class="flex" style="height:calc(100% - 35px);flex:1"> <div :class="!isEdit ? 'mt10 flex' : 'flex'" style="height:calc(100% - 35px);flex:1">
<iframe <iframe
v-if="isShowPdf"
id="iframe" id="iframe"
:src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(prdUrl)}`" :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(prdUrl)}`"
class="miner-u el-card is-always-shadow ml20" class="miner-u el-card is-always-shadow ml20"
></iframe> ></iframe>
<div style="flex:1;max-width: 800px;" class="mh20 miner-u-md"> <div style="flex:1;" class="mh20 miner-u-md">
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab"> <el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab">
<el-tab-pane label="预览" style="overflow:scroll;"> <el-tab-pane label="预览" style="overflow:scroll;">
<div v-html="markdownHtml" class="view-body" id="viewBody" ref="viewBody"></div> <div v-html="markdownHtml" class="view-body" id="viewBody" ref="viewBody"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="编辑"> <el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit">
<div class="lineH25 view-body" contenteditable id="md-editor" @blur="emitMarkDown" v-html="markdown"> <div class="lineH25 view-body" contenteditable id="md-editor" @blur="emitMarkDown" v-html="markdown">
<!-- <pre id="viewBody"></pre>--> <!-- <pre id="viewBody"></pre>-->
</div> </div>
@@ -96,13 +97,17 @@ export default {
isEdit: { isEdit: {
type: Boolean, type: Boolean,
default: true default: true
},
isShowPdf: {
type: Boolean,
default: true
} }
}, },
watch: {}, watch: {},
components: {}, components: {},
filters: {}, filters: {},
methods: { methods: {
// 封装 按钮生成时间 // 封装 按钮生成事件
generateButton(tableElement, buttonContainer, actionButtons) { generateButton(tableElement, buttonContainer, actionButtons) {
let contenteditable = tableElement.getAttribute('contenteditable') let contenteditable = tableElement.getAttribute('contenteditable')
let buttons = !actionButtons ? (contenteditable === 'false' ? this.tableActionButtons : this.tableActionConfirm) : actionButtons let buttons = !actionButtons ? (contenteditable === 'false' ? this.tableActionButtons : this.tableActionConfirm) : actionButtons
@@ -123,7 +128,6 @@ export default {
viewHtmlModel() { viewHtmlModel() {
this.$nextTick(() => { this.$nextTick(() => {
const mdHtml = document.getElementById('md-editor') const mdHtml = document.getElementById('md-editor')
mdHtml.addEventListener('mouseover', e => { mdHtml.addEventListener('mouseover', e => {
const tableElement = e.target.closest('table') const tableElement = e.target.closest('table')
if (tableElement) { if (tableElement) {
@@ -215,6 +219,7 @@ export default {
// copyMdHtml = copyMdHtml.re // copyMdHtml = copyMdHtml.re
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '')) this.markdownHtml = md.render(pre.replace(/class="m-view"/g, ''))
}, },
// 初始md 文档
async getPDFDetailMarkDown() { async getPDFDetailMarkDown() {
const response = await fetch(minerUMarkDown({ documentId: this.documentId })) const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
this.markdown = await response.text() this.markdown = await response.text()

View File

@@ -2,7 +2,7 @@
<div id="preprocessing-container " class="mt20"> <div id="preprocessing-container " class="mt20">
<el-form label-width="170px" :model="form" ref="processForm"> <el-form label-width="170px" :model="form" ref="processForm">
<el-form-item label="数据来源:" required prop="radio"> <el-form-item label="数据来源:" required prop="radio">
<el-radio-group v-model="form.radio" size="medium"> <el-radio-group v-model="form.radio" size="medium" @change="getFileType">
<el-radio-button label="1" size="medium">使用本地文件</el-radio-button> <el-radio-button label="1" size="medium">使用本地文件</el-radio-button>
<el-radio-button label="2" size="medium">使用通用知识文件模板</el-radio-button> <el-radio-button label="2" size="medium">使用通用知识文件模板</el-radio-button>
</el-radio-group> </el-radio-group>
@@ -100,6 +100,9 @@ export default {
components: {}, components: {},
filters: {}, filters: {},
methods: { methods: {
getFileType() {
this.$emit('getFileType', this.form.radio)
},
downloadTemplate() {}, downloadTemplate() {},
handleUploadSuccess(response, file) { handleUploadSuccess(response, file) {
this.fieldList = [file] this.fieldList = [file]
@@ -116,7 +119,9 @@ export default {
this.documentId = response.content.content.id this.documentId = response.content.content.id
// 向上导入documentId // 向上导入documentId
this.$emit('getDocumentId', this.documentId) this.$emit('getDocumentId', this.documentId)
// 文件内容
this.$emit('getUploadDetail', response.content.content) this.$emit('getUploadDetail', response.content.content)
// 表单内容
this.$emit('getForm', this.$refs.processForm, this.form) this.$emit('getForm', this.$refs.processForm, this.form)
} else { } else {
this.$message({ this.$message({

View File

@@ -5,7 +5,7 @@
<div class="flex align-items-c"> <div class="flex align-items-c">
<h3 class="mr20" v-if="!editKnowledge">{{ knowledgeName }}</h3> <h3 class="mr20" v-if="!editKnowledge">{{ knowledgeName }}</h3>
<el-input class="mr20 w400" size="medium" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input> <el-input class="mr20 w400" size="medium" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
<el-icon class="el-icon-edit cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge"></el-icon> <el-icon class="fs20 el-icon-edit cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge"></el-icon>
<div v-else> <div v-else>
<el-button type="primary" size="medium" @click="saveKnowledgeName">保存</el-button> <el-button type="primary" size="medium" @click="saveKnowledgeName">保存</el-button>
<el-button size="medium" @click="cancelKnowledgeName">取消</el-button> <el-button size="medium" @click="cancelKnowledgeName">取消</el-button>
@@ -47,11 +47,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="6">--> <el-col :span="6">
<!-- <el-form-item label="关键字">--> <el-form-item label="关键字">
<!-- <el-input v-model="form.name" placeholder="请输入关键字/敏感词"></el-input>--> <el-input v-model="form.name" placeholder="请输入关键字/敏感词" disabled></el-input>
<!-- </el-form-item>--> </el-form-item>
<!-- </el-col>--> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="上传时间" prop="times"> <el-form-item label="上传时间" prop="times">
@@ -59,14 +59,15 @@
style="width:100%" style="width:100%"
v-model="form.times" v-model="form.times"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="请输入知识文件名称" start-placeholder="开始时间"
end-placeholder="结束时间"
type="daterange" type="daterange"
></el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20 text-center"> <el-col :span="24" class="mb20 text-center">
<el-button size="medium" type="primary" @click="search">查询</el-button> <el-button size="medium" type="primary" @click="search">查询</el-button>
<el-button size="medium" type="primary" @click="reset">重置</el-button> <el-button size="medium" @click="reset">重置</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@@ -312,7 +313,7 @@ export default {
}, },
on: {} on: {}
}, },
'修改' '修改(暂不支持)'
), ),
h( h(
'el-button', 'el-button',