refactor(knowledge): 重构知识库详情页面布局和功能

- 修改了 DocumentDrawer 组件的布局和样式，增加了更多详细信息展示
- 添加了 RenderFile 组件用于渲染 PDF 文件
- 更新了知识库详情页面的搜索和筛选功能
- 优化了分段列表的展示方式，增加了多选功能
- 调整了表格列的渲染逻辑，增加了操作按钮
- 修复 render dialog 退出异常的问题

.prettierrc

@@ -2,6 +2,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "printWidth": 160,
+  "printWidth": 80,
   "endOfLine": "auto"
-}
+}

src/components/RenderDialog/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="title" :append-to-body="appendToBody" :destroy-on-close="destroyOnClose" :width="width">
+  <el-dialog :visible.sync="visible" :title="title" :append-to-body="appendToBody" :destroy-on-close="destroyOnClose"
+    :width="width" :before-close="handleBeforeClose">
     <div class="render-dialog-body">
       <slot name="default"></slot>
     </div>
@@ -30,6 +31,10 @@ export default {
       type: Boolean,
       default: false
     },
+    beforeClose: {
+      type: Function,
+      default: () => { }
+    },
     visible: {
       type: Boolean,
       default: false
@@ -58,14 +63,13 @@ export default {
     confirm() {
       this.$emit('confirm')
       this.$emit('update:visible', false)
+    },
+    handleBeforeClose() {
+      this.beforeClose()
     }
   },
-  created() {},
-  mounted() {},
+  created() { },
+  mounted() { },
   computed: {}
 }
 </script>
-<style scoped lang="scss">
-#index-container {
-}
-</style>

src/components/RenderFile/Index.vue

@@ -0,0 +1,29 @@
+<script>
+import { getPdfUrl } from '@/api/generatedApi'
+
+export default {
+  name: 'RenderFile',
+  props: {
+    iframeSrc: {
+      type: String,
+      default: () => window.location.origin
+    },
+    // 文件ID
+    id: {
+      type: String,
+      default: () => ''
+    }
+  },
+  methods: {
+    getPdfUrl
+  }
+}
+</script>
+
+<template>
+  <iframe id="iframe" frameborder="0"
+    :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(getPdfUrl({ documentId: id }))}`"
+    class="miner-u" style="width: 100%; height: 800px;"></iframe>
+</template>
+
+<style lang="scss" scoped></style>

src/views/knowledge/detail/components/documentDetail/DocumentDrawer.vue

@@ -1,115 +1,139 @@
 <!-- src/views/knowledge/detail/components/DocumentDrawer.vue -->
 <template>
-  <el-drawer :visible.sync="visible" size="80%" :title="descriptions.knowledgeName" @close="$emit('update:visible', false)">
-    <!-- 原drawer内容整体拷贝至此 -->
+  <el-drawer :visible.sync="visible" size="80%" @close="$emit('update:visible', false)">
+    <!-- drawer title -->
+    <template #title>
+      <div class="flex align-items-c">
+        <div class="el-icon-document"></div>
+        <div class="ml10">{{ descriptions.dataset.knowledgeName }}</div>
+        <el-tag type="info" class="ml10" size="mini"> {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
+        </el-tag>
+      </div>
+    </template>
     <div class="drawer-content">
-      <div class="file-header">
-        <div class="file-icon">
-          <i class="el-icon-document"></i>
-        </div>
-        <div class="file-info">
-          <h3>{{ descriptions.knowledgeName }}</h3>
-          <el-tag type="primary" class="mr10">{{ getDocumentSourceLabel(descriptions.documentSource) }}</el-tag>
-          <el-tag type="info">{{ descriptions.createdDate }}</el-tag>
-        </div>
-      </div>
-
-      <el-divider></el-divider>
-
-      <div class="segment-info">
-        <div class="segment-header">
-          <h4>分段规则</h4>
-        </div>
-        <div class="rule-card">
-          <div class="rule-item">
-            <h5>是否使用预处理:</h5>
-            <span>{{ descriptions.usePreProcess | filterUseMineru }}</span>
-          </div>
-          <div class="rule-item">
-            <h5>是否使用OCR协助处理:</h5>
-            <span>{{ descriptions.useOcr | filterUseMineru }}</span>
-          </div>
-          <div class="rule-item">
-            <h5>知识拆分规则:</h5>
-            <span v-if="!documentDetail.splitRules">
-              -
-            </span>
-            <div v-else class="flex" style="flex-wrap: wrap">
-              <div v-for="item in documentDetail.splitRules" :key="item.id" class="rule-detail-item">
-                <div>
-                  <p class="rule-label">样式</p>
-                  <span class="rule-value">{{ item.titleLevel }}</span>
-                </div>
-                <div>
-                  <p class="rule-label">关键词</p>
-                  <span class="rule-value">{{ item.ruleRegex }}</span>
-                </div>
-                <div>
-                  <p class="rule-label">备注</p>
-                  <span class="rule-value">{{ item.description }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="rule-item">
-            <h5>知识题词规则:</h5>
-            <span v-if="!documentDetail.extractRules">
-              -
-            </span>
-            <div v-else class="flex" style="flex-wrap: wrap">
-              <div v-for="item in documentDetail.extractRules" :key="item.id" class="rule-detail-item">
-                <div>
-                  <p class="rule-label">属性</p>
-                  <span class="rule-value">{{ item.attribute }}</span>
-                </div>
-                <div>
-                  <p class="rule-label">属性描述</p>
-                  <span class="rule-value">{{ item.attributeDesc }}</span>
-                </div>
-                <div>
-                  <p class="rule-label">关键词</p>
-                  <span class="rule-value">{{ item.keyword }}</span>
-                </div>
-                <div>
-                  <p class="rule-label">关键词示例</p>
-                  <el-tooltip class="item" effect="dark" :content="item.example" placement="top">
-                    <p class="rule-value">{{ item.example }}</p>
-                  </el-tooltip>
-                </div>
-                <div>
-                  <p class="rule-label">提示词</p>
-                  <el-tooltip class="item" effect="dark" :content="item.prompt" placement="top">
-                    <p class="rule-value">{{ item.prompt }}</p>
-                  </el-tooltip>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <el-divider></el-divider>
-      <div class="segment-content-container">
-        <div class="segment-header mb15">
-          <h4>分段内容</h4>
-          <div class="segment-summary">
-            <span>共{{ descriptions.data ? descriptions.data.length : 0 }}个分段</span>
-          </div>
-        </div>
-        <text-model
-          v-if="descriptions.doc_form === 'text_model'"
-          :descriptions="descriptions"
-          :documentDetail="documentDetail"
-          :activeSegment="activeSegment"
-        />
-        <q-a-model
-          v-else-if="descriptions.doc_form === 'qa_model'"
-          :descriptions="descriptions"
-          :documentDetail="documentDetail"
-          :activeSegment="activeSegment"
-        />
-      </div>
+      <!-- 文件信息详情 -->
+      <el-card :shadow="'none'">
+        <el-descriptions size="small" :column="4">
+          <el-descriptions-item label="文件名称">
+            <i class="el-icon-document"></i>{{ descriptions.dataset.knowledgeName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="分段模式">
+            {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
+          </el-descriptions-item>
+          <el-descriptions-item label="上传时间">
+            {{ descriptions.createdDate }}
+          </el-descriptions-item>
+          <el-descriptions-item label="任务状态">
+            {{ descriptions.documentStatus | filterDocumentStatus }}
+          </el-descriptions-item>
+          <el-descriptions-item label="上传用户">
+            {{ descriptions.createdUser }}
+          </el-descriptions-item>
+          <el-descriptions-item label="高级模式">
+            {{ descriptions.documentSource ? '是' : '否' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="任务号">
+            {{ descriptions.datasetId }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
     </div>
+
+    <!-- 屏蔽规则内容 -->
+    <!-- <el-divider></el-divider>
+
+    <div class="segment-info">
+      <div class="segment-header">
+        <h4>分段规则</h4>
+      </div>
+      <div class="rule-card">
+        <div class="rule-item">
+          <h5>是否使用预处理:</h5>
+          <span>{{ descriptions.usePreProcess | filterUseMineru }}</span>
+        </div>
+        <div class="rule-item">
+          <h5>是否使用OCR协助处理:</h5>
+          <span>{{ descriptions.useOcr | filterUseMineru }}</span>
+        </div>
+        <div class="rule-item">
+          <h5>知识拆分规则:</h5>
+          <span v-if="!documentDetail.splitRules">
+            -
+          </span>
+          <div v-else class="flex" style="flex-wrap: wrap">
+            <div v-for="item in documentDetail.splitRules" :key="item.id" class="rule-detail-item">
+              <div>
+                <p class="rule-label">样式</p>
+                <span class="rule-value">{{ item.titleLevel }}</span>
+              </div>
+              <div>
+                <p class="rule-label">关键词</p>
+                <span class="rule-value">{{ item.ruleRegex }}</span>
+              </div>
+              <div>
+                <p class="rule-label">备注</p>
+                <span class="rule-value">{{ item.description }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rule-item">
+          <h5>知识题词规则:</h5>
+          <span v-if="!documentDetail.extractRules">
+            -
+          </span>
+          <div v-else class="flex" style="flex-wrap: wrap">
+            <div v-for="item in documentDetail.extractRules" :key="item.id" class="rule-detail-item">
+              <div>
+                <p class="rule-label">属性</p>
+                <span class="rule-value">{{ item.attribute }}</span>
+              </div>
+              <div>
+                <p class="rule-label">属性描述</p>
+                <span class="rule-value">{{ item.attributeDesc }}</span>
+              </div>
+              <div>
+                <p class="rule-label">关键词</p>
+                <span class="rule-value">{{ item.keyword }}</span>
+              </div>
+              <div>
+                <p class="rule-label">关键词示例</p>
+                <el-tooltip class="item" effect="dark" :content="item.example" placement="top">
+                  <p class="rule-value">{{ item.example }}</p>
+                </el-tooltip>
+              </div>
+              <div>
+                <p class="rule-label">提示词</p>
+                <el-tooltip class="item" effect="dark" :content="item.prompt" placement="top">
+                  <p class="rule-value">{{ item.prompt }}</p>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> -->
+
+    <section style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+      <el-card shadow="none">
+        <!-- 分段内容 -->
+        <div class="segment-content-container">
+          <div class="segment-header mb15">
+            <div class="segment-summary">
+              <span>{{ descriptions.data ? descriptions.data.length : 0 }}个分段</span>
+            </div>
+          </div>
+          <text-model v-if="descriptions.doc_form === 'text_model'" :descriptions="descriptions"
+                      :documentDetail="documentDetail" :activeSegment="activeSegment" />
+          <q-a-model v-else-if="descriptions.doc_form === 'qa_model'" :descriptions="descriptions"
+                     :documentDetail="documentDetail" :activeSegment="activeSegment" />
+        </div>
+      </el-card>
+      <!-- 文件展示 -->
+      <el-card shadow="none">
+        <render-file :id="descriptions.id" />
+      </el-card>
+    </section>
   </el-drawer>
 </template>
 
@@ -117,9 +141,10 @@
 import TextModel from './TextModel.vue'
 import QAModel from './QAModel.vue'
 import { documentSourceOptions, segmentedModeOptionsMap } from '@/assets/js/utils/utilOptions'
+import RenderFile from '@/components/RenderFile/Index.vue'
 
 export default {
-  components: { TextModel, QAModel },
+  components: { TextModel, QAModel, RenderFile },
   props: {
     visible: Boolean,
     descriptions: {
@@ -159,16 +184,33 @@ export default {
     }
   },
   filters: {
-    filterSegmentedMode(val) {
+    filterDocumentStatus(val) {
       switch (val) {
+        case -1:
+          return '上传中'
         case 0:
-          return '传统分段模式'
+          return '进行中'
         case 1:
-          return ' Q&A分段模式'
+          return '完成'
         default:
           return ''
       }
     },
+    filterSegmentedMode(val, simpleDesc = false) {
+      switch (val) {
+        case 0:
+          return simpleDesc ? '通用' : '通用分段模式'
+        case 1:
+          return simpleDesc ? 'Q&A' : ' Q&A分段模式'
+        default:
+          return ''
+      }
+    },
+    /**
+     * 是否使用预处理
+     * @param { number } val - 预处理状态
+     * @return { string } 预处理状态
+     */
     filterUseMineru(val) {
       let item = segmentedModeOptionsMap.find(item => item.value === String(val))
       return item ? item.label : '否'
@@ -186,7 +228,7 @@ export default {
 
 <style scoped lang="scss">
 .drawer-content {
-  padding: 20px;
+  padding-bottom: 10px;
   display: flex;
   flex-direction: column;
 }
@@ -259,9 +301,11 @@ export default {
       border-radius: 8px;
       border: 1px solid #e0e0e0;
       margin-right: 10px;
+
       div {
         display: flex;
       }
+
       p {
         margin: 5px 0;
       }
@@ -287,6 +331,7 @@ export default {
     }
   }
 }
+
 .segment-content-container {
   margin-top: 20px;
 }

src/views/knowledge/detail/components/documentDetail/TextModel.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="segment-split-view">
     <div class="segment-list">
-      <div
-        v-for="(segment, index) in descriptions.data"
-        :key="index"
-        class="segment-list-item"
-        :class="{ active: activeSegment === index }"
-        @click="handleSegmentClick(index)"
-      >
-        <div>
-          <span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
+      <el-checkbox-group v-model="selectedSegments">
+        <div class="segment-list-item" v-for="(segment, index) in descriptions.data" :key="index"
+          :class="{ active: activeSegment === index }">
+
+          <el-checkbox class="mr pt15" :label="index">
+            <span class="el-icon-s-unfold"></span>
+            <span class="segment-number">分段 - {{ (index + 1).toString().padStart(2, '0') }}</span>
+            <span v-if="segment.word_count > 0"> · {{ segment.word_count }}个字符 ·</span>
+            <span> {{ 0 }} 次召回次数</span>
+          </el-checkbox>
+          <div @click="handleSegmentClick(index)">
+            <p>{{ segment.content.slice(0, 20) + '.....' }}</p>
+            <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">
+              <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>
+            </div>
+          </div>
         </div>
-        <p>{{ segment.content.slice(0, 20) + '.....' }}</p>
-        <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">
-          <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>
-        </div>
-        <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
-      </div>
+      </el-checkbox-group>
     </div>
 
     <!-- 弹窗 -->
@@ -24,13 +26,12 @@
       <div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
         <div class="segment-content">
           {{ descriptions.data[activeSegment].content }}
-          <div
-            class="flex align-items-c mt20"
+          <div class="flex align-items-c mt20"
             v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length"
-            style="flex-wrap: wrap"
-          >
+            style="flex-wrap: wrap">
             <span>关键词 ：</span>
-            <el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index" class="mr10 ellipsis" size="mini" type="primary">
+            <el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index"
+              class="mr10 ellipsis" size="mini" type="primary">
               {{ item }}
             </el-tag>
           </div>
@@ -55,7 +56,8 @@ export default {
   data() {
     return {
       activeSegment: null,
-      dialogVisible: false
+      dialogVisible: false,
+      selectedSegments: []
     }
   },
   methods: {
@@ -76,7 +78,7 @@ export default {
 
 .segment-list {
   width: 100%;
-  height: 400px;
+  height: 100%;
   overflow-y: auto;
 }
 
@@ -86,8 +88,9 @@ export default {
   border-radius: 15px;
   transition: background-color 0.3s;
   font-size: 14px;
-  border: 1px solid #f3f5f7;
+  // border: 1px solid #f3f5f7;
   margin-bottom: 20px;
+
   &:hover {
     background: #f3f5f7;
   }
@@ -95,15 +98,19 @@ export default {
   &.active {
     background: #f3f5f7;
   }
+
   p {
     margin: 15px 0;
   }
+
   .segment-number {
     color: #0a84ff;
   }
+
   .segment-keywords {
     color: #606266;
     flex-wrap: wrap;
+
     p {
       margin: 0 10px 0 0;
     }

src/views/knowledge/detail/index.vue

@@ -6,7 +6,8 @@
         <div class="flex align-items-c">
           <div class="mr20 header" v-if="!editKnowledge">{{ knowledgeName }}</div>
           <el-input class="mr20 w400" size="small" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
-          <el-icon class="fs16 el-icon-edit-outline cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge" />
+          <el-icon class="fs16 el-icon-edit-outline cursor-pointer" @click.native="editKnowledgeName"
+            v-if="!editKnowledge" />
           <div v-else>
             <el-button type="primary" size="medium" class="render-button" @click="saveKnowledgeName">保存</el-button>
             <el-button size="medium" class="render-button" @click="cancelKnowledgeName">取消</el-button>
@@ -19,8 +20,10 @@
 
       <div>
         <!--        <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
-        <el-button type="primary" size="medium" icon="el-icon-edit-outline" class="primary-button" @click="jumpEditKnowledge">修改知识库</el-button>
-        <el-button type="primary" size="medium" icon="el-icon-plus" class="primary-button" @click="jumpAddKnowledge">上传知识</el-button>
+        <el-button type="primary" size="medium" icon="el-icon-edit-outline" class="primary-button"
+          @click="jumpEditKnowledge">修改知识库</el-button>
+        <el-button type="primary" size="medium" icon="el-icon-plus" class="primary-button"
+          @click="jumpAddKnowledge">上传知识</el-button>
       </div>
     </div>
     <div class="mt20 card-body">
@@ -34,16 +37,18 @@
         <div class="flex align-items-c justify-content-b">
           <el-form :model="form" label-width="100px" label-position="top" inline>
             <el-form-item label="知识文件名称" prop="fileName">
-              <el-input v-model="form.knowledgeNameLike" size="medium" placeholder="请输入知识文件名称" @keydown.enter.native="search"></el-input>
+              <el-input v-model="form.knowledgeNameLike" size="medium" placeholder="请输入知识文件名称"
+                @keydown.enter.native="search"></el-input>
             </el-form-item>
             <el-form-item label="知识文件来源" prop="documentSource">
-              <el-select v-model="form.documentSource" placeholder="请输入知识文件名称" size="medium">
+              <el-select v-model="form.documentSource" size="medium">
                 <el-option label="全部" value=""></el-option>
-                <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
+                <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value"
+                  :key="item.value"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="上传用户" prop="createdUserLike">
-              <el-select v-model="form.createdUserLike" placeholder="请输入知识文件名称" disabled size="medium">
+              <el-select v-model="form.createdUserLike" disabled size="medium">
                 <el-option label="暂无用户" value=""></el-option>
               </el-select>
             </el-form-item>
@@ -51,43 +56,24 @@
               <el-input v-model="form.name" placeholder="请输入关键字/敏感词" disabled size="medium"></el-input>
             </el-form-item>
             <el-form-item label="上传时间" prop="times">
-              <el-date-picker
-                size="medium"
-                style="width:100%"
-                v-model="form.times"
-                value-format="yyyy-MM-dd"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-                type="daterange"
-              ></el-date-picker>
+              <el-date-picker size="medium" style="width:100%" v-model="form.times" value-format="yyyy-MM-dd"
+                start-placeholder="开始时间" end-placeholder="结束时间" type="daterange"></el-date-picker>
             </el-form-item>
           </el-form>
-          <div class="mt15">
+          <div class="mt15 flex align-items-c justify-content-b">
             <el-button size="medium" type="primary" @click="search">查询</el-button>
             <el-button size="medium" @click="reset">重置</el-button>
           </div>
         </div>
-        <r-table
-          :columns="columns"
-          :data="list"
-          :deletion="false"
-          :total="total"
-          @page-change="pageChange"
-          @current-change="currentChange"
-          :current-page="page"
-          :page-size="pageSize"
-        ></r-table>
+        <r-table :columns="columns" :data="list" :deletion="false" :total="total" @page-change="pageChange"
+          @current-change="currentChange" :current-page="page" :page-size="pageSize"></r-table>
       </div>
     </div>
-    <document-drawer
-      :visible.sync="drawer"
-      :descriptions="descriptions"
-      :document-detail="documentDetail"
-      :active-segment="activeSegment"
-      @update:visible="val => (drawer = val)"
-    />
+    <document-drawer :visible.sync="drawer" :descriptions="descriptions" :document-detail="documentDetail"
+      :active-segment="activeSegment" @update:visible="val => (drawer = val)" />
 
-    <knowledgeForm :visible.sync="drawerForm" :datasetId="$route.query.datasetId" @update:visible="getKnowledgeDetail"></knowledgeForm>
+    <knowledgeForm :visible.sync="drawerForm" :datasetId="$route.query.datasetId" @update:visible="getKnowledgeDetail">
+    </knowledgeForm>
   </div>
 </template>
 <script>
@@ -251,8 +237,12 @@ export default {
         if (res) {
           console.log(res.content.content)
           this.descriptions = {
+            dataset: {
+              knowledgeName: this.knowledgeName,
+              segmentedMode: this.segmentedMode
+            },
             ...row,
-            ...res.content.content
+            ...res.content.content,
           }
           this.drawer = true
 
@@ -330,7 +320,7 @@ export default {
       return item ? item.label : '否'
     }
   },
-  created() {},
+  created() { },
   async mounted() {
     this.getKnowledgeDetail()
     // 获取知识库文件列表
@@ -345,6 +335,12 @@ export default {
     }
   },
   computed: {
+    datasetId() {
+      return {
+        datasetId: this.$route.query.datasetId,
+        segmentedMode: this.filterSegmentedMode(this.segmentedMode)
+      }
+    },
     columns(vm) {
       return [
         {
@@ -386,6 +382,22 @@ export default {
           isRedraw: true,
           render: (h, params) => {
             return h('div', [
+              h(
+                'el-button',
+                {
+                  class: 'floatSpan',
+                  props: {
+                    type: 'danger',
+                    size: 'mini',
+                    icon: 'el-icon-delete',
+                    title: '删除'
+                  },
+                  on: {
+                    click: () => this.deleteKnowledge(params.row)
+                  }
+                },
+
+              ),
               h('el-button', {
                 class: 'normal-button',
                 props: {
@@ -396,21 +408,7 @@ export default {
                   title: '编辑'
                 },
                 on: {}
-              }),
-              h(
-                'el-button',
-                {
-                  class: 'floatSpan',
-                  props: {
-                    type: 'danger',
-                    size: 'mini',
-                    icon: 'el-icon-delete'
-                  },
-                  on: {
-                    click: () => this.deleteKnowledge(params.row)
-                  }
-                },
-                '删除'
+              }, "编辑"
               ),
               h(
                 'el-button',
@@ -419,7 +417,8 @@ export default {
                   props: {
                     type: 'primary',
                     size: 'mini',
-                    icon: 'el-icon-tickets'
+                    icon: 'el-icon-tickets',
+                    title: '查看详情'
                   },
                   on: {
                     click: () => this.viewDocumentDetail(params.row)
@@ -658,9 +657,11 @@ export default {
   padding: 10px;
   text-align: center;
 }
+
 .clearfix {
   padding-bottom: 20px;
   position: relative;
+
   &:after {
     position: absolute;
     bottom: 0;
@@ -671,6 +672,7 @@ export default {
     //  宽度缩小
     transform: scaleY(0.2);
   }
+
   & .header {
     font-family: PingFangSC, PingFang SC;
     font-weight: 600;

src/views/track/views/knowledge-info/Index.vue

@@ -2,10 +2,11 @@
 import { datasetQuerySegments, getPdfUrl, queryTask } from '@/api/generatedApi'
 import TextModel from '@/views/knowledge/detail/components/documentDetail/TextModel.vue'
 import QAModel from '@/views/knowledge/detail/components/documentDetail/QAModel.vue'
+import RenderFile from '@/components/RenderFile/Index.vue'
 
 export default {
   name: 'index',
-  components: { QAModel, TextModel },
+  components: { QAModel, TextModel, RenderFile },
   data() {
     return {
       iframeSrc: window.location.origin,
@@ -165,12 +166,7 @@ export default {
             <div slot="header" class="clearfix">
               <span>原文内容</span>
             </div>
-            <iframe
-              id="iframe"
-              :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(getPdfUrl({ documentId: newForm.id }))}`"
-              class="miner-u"
-              style="width: 100%; height: 800px;"
-            ></iframe>
+            <render-file :id="newForm.id" />
           </el-card>
         </el-col>
       </el-row>
@@ -201,6 +197,7 @@ export default {
   display: table;
   content: '';
 }
+
 .clearfix:after {
   clear: both;
 }