feat(RenderMinerU): 优化界面样式和功能

- 添加文件名显示 - 调整按钮布局和样式 - 优化预览和编辑切换逻辑 - 调整页面滚动逻辑- 修复部分样式问题
2025-12-11 03:46:50 +08:00 · 2025-04-24 19:35:38 +08:00
parent 9a8902576a
commit c1a96c4e29
6 changed files with 189 additions and 59 deletions
--- a/src/components/RenderMinerU/index.vue
+++ b/src/components/RenderMinerU/index.vue
@@ -1,31 +1,74 @@
 <template>
  <div style="height: 100%;">
-    <div class="mv10 mh20 text-right" v-if="isEdit">
-      <!-- 重试按钮 -->
-      <el-button type="" size="medium" @click="retryMiner" :disabled="finishedMiner" style="margin-right: 10px;" plain>重试</el-button>
-      <!-- 保存并处理按钮 -->
-      <el-button type="primary" size="medium" @click="saveMarkDown" :disabled="finishedMiner">保存并处理</el-button>
+    <div class="flex align-items-c justify-content-b mb10">
+      <div class="fileName flex align-items-c">
+        <svg-icon
+          icon-class="pdf"
+          style="width: 20px;height: 20px"
+          class-name="mr10"
+        />
+        {{ fileName }}
+      </div>
+      <div style="margin-left: 50px">
+        <el-radio-group v-model="tab" @change="changeTab" class="group-medium">
+          <el-radio-button label="0" name="0">预览</el-radio-button>
+          <el-radio-button label="1" name="1">编辑</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="  text-right" v-if="isEdit">
+        <!-- 重试按钮 -->
+        <el-button
+          size="medium"
+          class="default"
+          @click="retryMiner"
+          :disabled="finishedMiner"
+          style="margin-right: 10px;"
+          plain
+          >重试</el-button
+        >
+        <!-- 保存并处理按钮 -->
+        <el-button
+          type="primary"
+          size="medium"
+          @click="saveMarkDown"
+          :disabled="finishedMiner"
+          >保存并处理</el-button
+        >
+      </div>
    </div>
-    <div :class="!isEdit ? 'mt10 flex' : 'flex'" style="height:calc(100% - 35px);flex:1">
+
+    <div
+      :class="!isEdit ? 'mt10 flex' : 'flex'"
+      style="height:calc(100%);flex:1"
+    >
      <iframe
        v-if="isShowPdf"
        id="iframe"
        ref="iframe"
-        :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(prdUrl)}`"
-        class="miner-u el-card is-always-shadow ml20"
+        :src="
+          `${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(
+            prdUrl
+          )}`
+        "
+        class="ebiz-pdf el-card "
      ></iframe>
-      <div style="flex:1;" class="mh20 miner-u-md" v-loading="finishedMiner" element-loading-text="正在识别中...">
-        <el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab" v-model="tab">
-          <el-tab-pane label="预览" style="overflow:scroll;" ref="scrollView" name="0">
+      <div
+        style="flex:1;"
+        class="ml10 ebiz-pdf-md"
+        v-loading="finishedMiner"
+        element-loading-text="正在识别中..."
+      >
+        <div class="el-card ebiz-pdf" style="height: 100%;overflow: hidden">
+          <div ref="scrollView" v-show="tab === '0'">
            <div
              v-html="markdownHtml"
              class="view-body"
              id="viewBody"
              ref="viewBody"
-              style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
+              style="height:calc(100vh - 180px);overflow-y: scroll;overflow-x:hidden "
            ></div>
-          </el-tab-pane>
-          <el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit" name="1">
+          </div>
+          <div :disabled="!isEdit" v-if="isEdit" v-show="tab === '1'">
            <div
              class="lineH25 view-body"
              contenteditable
@@ -33,10 +76,10 @@
              ref="mdEditor"
              @blur="emitMarkDown"
              v-html="markdown"
-              style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
+              style="height:calc(100vh - 180px);overflow-y: scroll;overflow-x:hidden "
            ></div>
-          </el-tab-pane>
-        </el-tabs>
+          </div>
+        </div>
      </div>
    </div>
  </div>
@@ -64,6 +107,7 @@ export default {
  name: 'index',
  data() {
    return {
+      fileName: '',
      endEmit: false,
      tab: '0',
      mdPges: 0,
@@ -115,9 +159,15 @@ export default {
            this.copyTable = tableElement.innerHTML
            tableElement.classList.remove('m-view')
            tableElement.setAttribute('contenteditable', 'true')
-            let buttonContainer = tableElement.querySelector('.md-editor-setting')
+            let buttonContainer = tableElement.querySelector(
+              '.md-editor-setting'
+            )
            buttonContainer.innerHTML = null
-            this.generateButton(tableElement, buttonContainer, this.tableActionConfirm)
+            this.generateButton(
+              tableElement,
+              buttonContainer,
+              this.tableActionConfirm
+            )
          }
        },
        {
@@ -133,7 +183,9 @@ export default {
                  text: '正在撤销中....'
                })
                let chooseItem = this.findMatchingTable(tableElement)
-                let tableMatch = chooseItem.html.match(/<table>([\s\S]*)<\/table>/)
+                let tableMatch = chooseItem.html.match(
+                  /<table>([\s\S]*)<\/table>/
+                )
                if (tableMatch) {
                  let div = document.createElement('table')
                  div.innerHTML = tableMatch[1]
@@ -158,9 +210,15 @@ export default {
          click: tableElement => {
            tableElement.classList.add('m-view')
            tableElement.setAttribute('contenteditable', 'false')
-            let buttonContainer = tableElement.querySelector('.md-editor-setting')
+            let buttonContainer = tableElement.querySelector(
+              '.md-editor-setting'
+            )
            buttonContainer.innerHTML = null
-            this.generateButton(tableElement, buttonContainer, this.tableActionButtons)
+            this.generateButton(
+              tableElement,
+              buttonContainer,
+              this.tableActionButtons
+            )
          }
        }
        // {
@@ -221,7 +279,7 @@ export default {
      }
      if (documentId) {
        viewBody.scrollTo({
-          top: documentId.offsetTop - 16,
+          top: documentId.offsetTop - 130,
          behavior: 'smooth'
        })
      }
@@ -253,7 +311,9 @@ export default {
          const tableElement = e.target.closest('table')
          if (tableElement) {
            // 检查是否已经存在按钮容器，避免重复创建
-            let buttonContainer = tableElement.querySelector('.md-editor-setting')
+            let buttonContainer = tableElement.querySelector(
+              '.md-editor-setting'
+            )
            if (!buttonContainer) {
              buttonContainer = document.createElement('div')
              buttonContainer.style.position = 'absolute'
@@ -276,7 +336,9 @@ export default {
        mdHtml.addEventListener('mouseout', e => {
          const tableElement = e.target.closest('table')
          if (!tableElement || !tableElement.contains(e.relatedTarget)) {
-            const buttonContainer = tableElement.querySelector('.md-editor-setting')
+            const buttonContainer = tableElement.querySelector(
+              '.md-editor-setting'
+            )
            if (buttonContainer) {
              buttonContainer.remove()
            }
@@ -289,7 +351,11 @@ export default {
      // 获取表格的可编辑状态
      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
      let pathId = tableElement.getAttribute('data-path-id')

      // 循环按钮配置，动态生成按钮并绑定点击事件
@@ -300,7 +366,8 @@ export default {
        button.appendChild(icon)
        // 悬浮提示
        button.setAttribute('title', buttons[i].label)
-        button.className = 'el-button el-button--primary el-button--mini editor-button is-plain'
+        button.className =
+          'el-button el-button--primary el-button--mini editor-button is-plain'
        button.style.pointerEvents = 'auto'
        button.addEventListener('click', () => {
          buttons[i].click(tableElement)
@@ -360,7 +427,10 @@ export default {
    },
    // 更新表格属性
    updateTableAttributes(tableElement, chooseItem) {
-      tableElement.setAttribute('data-path-id', this.selectionImagePath.replace(/\.[^/.]+$/, ''))
+      tableElement.setAttribute(
+        'data-path-id',
+        this.selectionImagePath.replace(/\.[^/.]+$/, '')
+      )
      let fileType = this.selectionImagePath.match(/\.[^/.]+$/)[0]
      tableElement.setAttribute('data-path-type', fileType)
    },
@@ -369,7 +439,10 @@ export default {
      ;(table.blocks ? table.blocks : []).map(lines => {
        lines.lines.map(spans => {
          spans.spans.map(span => {
-            this.selectionTable.push({ html: span.html, image_path: span.image_path })
+            this.selectionTable.push({
+              html: span.html,
+              image_path: span.image_path
+            })
          })
        })
      })
@@ -444,7 +517,9 @@ export default {
    // bbox 解析  传递 颜色
    getPDFDetailBbox() {
      minerUBbox({ documentId: this.documentId }).then(res => {
-        this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content)))
+        this.bboxList = this.formatJson(
+          JSON.parse(JSON.stringify(res.content.content))
+        )

        this.fillSelectionTable(JSON.parse(JSON.stringify(res.content.content)))
        // this.$refs.iframe 重新刷新iframe
@@ -479,7 +554,11 @@ ${text}`
        })
        .replace(/<script/g, '< script')

-      this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
+      this.markdownHtml = this.md.render(
+        this.markdown
+          .replace(/class="m-view"/g, '')
+          .replace(/ebiz-code/g, 'view-code')
+      )
    },
    // tab 切换
    changeTab(evt) {
@@ -493,15 +572,23 @@ ${text}`
          if (!pathId) {
            let ite = this.findMatchingTable(item)
            if (ite) {
-              item.setAttribute('data-path-id', ite.image_path.replace(/\.[^/.]+$/, ''))
-              item.setAttribute('data-path-type', ite.image_path.match(/\.[^/.]+$/)[0])
+              item.setAttribute(
+                'data-path-id',
+                ite.image_path.replace(/\.[^/.]+$/, '')
+              )
+              item.setAttribute(
+                'data-path-type',
+                ite.image_path.match(/\.[^/.]+$/)[0]
+              )
            }
          }
        })
      }
      // 给 copyMdHtml 里面的table 增加 class m-view
      // copyMdHtml = copyMdHtml.re
-      this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
+      this.markdownHtml = md.render(
+        pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code')
+      )
      setTimeout(() => {
        this.changePage(this.page, evt)
      }, 100)
@@ -509,7 +596,9 @@ ${text}`
    // 初始md 文档
    async getPDFDetailMarkDown() {
      // responseText 判断是否包含ebiz-code
-      const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
+      const response = await fetch(
+        minerUMarkDown({ documentId: this.documentId })
+      )
      this.markdown = await response.text()
      // this.markdown 包含 ebiz-code
      if (this.markdown.indexOf('<ebiz-code ') < 0) {
@@ -541,6 +630,7 @@ ${text}`
      this.finishedMiner = true
      minerUQuery({ id: this.documentId }).then(res => {
        let mineruStatus = res.content.content.mineruStatus
+        this.fileName = res.content.content.fileName
        switch (mineruStatus) {
          case 0:
          case '0':
@@ -597,7 +687,10 @@ ${text}`
      for (let i = 0; i < viewCodes.length; i++) {
        const viewCode = viewCodes[i]
        const viewCodeTop = viewCode.offsetTop
-        if (viewCodeTop >= viewBodyTop && viewCodeTop < viewBodyTop + viewBodyHeight / 2) {
+        if (
+          viewCodeTop >= viewBodyTop &&
+          viewCodeTop < viewBodyTop + viewBodyHeight / 2
+        ) {
          currentPage = i + 1
          break
        }
@@ -645,13 +738,19 @@ ${text}`
 }
 </script>
 <style scoped lang="scss">
-.miner-u {
+.fileName {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 600;
+  font-size: 12px;
+  color: #3a3f4f;
+  line-height: 17px;
+  text-align: left;
+  font-style: normal;
+}
+.ebiz-pdf {
  outline: none;
-  border: none;
+  border-radius: 7px;
  flex: 1;
-  border-radius: unset;
-  //width:500px;
-  //height:100%
 }

 #md-editor {
@@ -662,11 +761,20 @@ ${text}`
  outline: none;
  border: none;
 }
-.miner-u-md {
-  /deep/ .el-tabs--border-card > .el-tabs__content {
-    height: calc(100% - 30px);
-    overflow: auto;
+.ebiz-pdf-md {
+  border-radius: 7px;
+  box-shadow: unset;
+  /deep/ .el-tabs--border-card {
+    box-shadow: unset;
+    border-radius: 7px;
+    & .el-tabs__header {
+      border: none;
+    }
+    & .el-tabs__content {
+      overflow: auto;
+    }
  }
+  //height: calc(100% - 30px);
  .tabs__content {
  }
 }