askbot-dragon 1.8.28-beta → 1.8.29-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.8.28-beta",
+  "version": "1.8.29-beta",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/preview/newPositionPreview.vue

@@ -18,6 +18,9 @@
       ></excel-view>
       <pdf-view v-else-if="fileType === 'PDF'" ref="pdfView" :split_paragraphs="splitParagraph" :ossPath="url" :isPC="isPC" :textWatermarkStr="textWatermarkStr"></pdf-view>
       <mark-down-view v-else-if="fileType === 'MD'" :url="url" :split_paragraphs="splitParagraph" :textWatermarkStr="textWatermarkStr"></mark-down-view>
+      <div v-else-if="fileType === 'URL'">
+        <div class="preview_iframe_html" style="text-align:left" v-html="fileText"></div>
+      </div>
     </div>
     <template v-if="splitParagraph.length > 1 && fileType !== 'XLS' && fileType !== 'XLSX'">
       <div class="btn_footer" v-if="!isPC">
@@ -54,8 +57,9 @@ export default {
       currentPage:0,
       excelHeaderData:"",
       excelRowList:[],
-      tableChunkData:[]
-
+      tableChunkData:[],
+      fileText:"",
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
     }
   },
   props:{
@@ -76,6 +80,10 @@ export default {
     textWatermarkStr: {
         type: String,
         default: ''
+    },
+    previewOssPath:{
+      type:String,
+      default:""
     }
   },
   methods:{
@@ -126,6 +134,11 @@ export default {
             this.excelRowList = res.data.data.extractChunkInfo.tableChunkData[0].table_md.table_data;
           }
           this.fileType = res.data.data.fileType
+          // 判断是否为 HTTP 链接，但排除包含 aliyuncs 的OSS链接
+          if ((this.previewOssPath.startsWith('http://') || this.previewOssPath.startsWith('https://')) && !this.previewOssPath.includes('aliyuncs')) {
+            this.fileType = 'URL';
+            this.getUrlContent(this.html_result)
+          }
         }
         this.$nextTick(() => {
           if (this.fileType === 'XLS' || this.fileType === 'XLSX'){
@@ -164,13 +177,18 @@ export default {
         }
         await this.$refs.pdfView.loadPage(page);
         this.$refs.pdfView.jumpToHighlight(this.currentPage)
-      } else if (this.fileType == 'DOC' || this.fileType == 'DOCX' || this.fileType == 'TXT' || this.fileType == 'MD' || this.fileType == 'HTML'){
+      } else if (this.fileType == 'DOC' || this.fileType == 'DOCX' || this.fileType == 'TXT' || this.fileType == 'MD' || this.fileType == 'HTML' || this.fileType == 'URL'){
         if (this.splitParagraph[this.currentPage] && this.splitParagraph[this.currentPage].original_paragraph){
           const id = this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id;
           let dom = document.getElementById(id);
           let paragraphs = this.$el.querySelectorAll(`[paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
-          if (this.fileType == 'HTML'){
-            paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
+          if (this.fileType == 'HTML' || this.fileType == 'URL'){
+            if (this.splitParagraph[this.currentPage].original_paragraph[0].images && this.splitParagraph[this.currentPage].original_paragraph[0].images.length > 0){
+              paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[1].paragraph_id}"]`);
+            } else {
+              paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
+            }
+
           }
           if (dom){
             dom.scrollIntoView({ behavior: 'smooth' });
@@ -217,7 +235,125 @@ export default {
           }
         }
       }
-    }
+    },
+    // 新增方法：获取URL内容并对图片地址进行签名处理
+    getUrlContent(url) {
+      this.loading = true;
+      console.log('url',url)
+      this.$http.get(url).then((res) => {
+        if (res.status === 200) {
+          // 处理HTML内容中的图片地址，添加签名
+          this.processImageUrls(res.data);
+        } else {
+          console.error('获取URL内容失败');
+          this.loading = false;
+        }
+      }).catch((err) => {
+        console.error('获取URL内容失败:', err);
+        this.loading = false;
+      });
+    },
+    setColor(){
+      this.splitParagraph.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            const paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${items.paragraph_id}"]`);
+            paragraphs.forEach(paragraph => {
+              paragraph.style.background = this.colors[colorIndex]
+            })
+          })
+        }
+      })
+    },
+    // 处理HTML内容中的图片地址，为OSS图片添加签名
+    processImageUrls(htmlContent) {
+      // 创建临时DOM元素来解析HTML
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = htmlContent;
+
+      // 查找所有图片标签
+      const imgTags = tempDiv.querySelectorAll('img');
+      let processedCount = 0;
+      let totalImages = imgTags.length;
+
+      if (totalImages === 0) {
+        // 没有图片，直接显示内容
+        this.fileText = htmlContent;
+        this.loading = false;
+        document.getElementById('drawer_content_pre').style.backgroundImage = 'none';
+        this.$nextTick(() => {
+          this.setColor()
+        })
+        this.$emit('loadingSuccess');
+        return;
+      }
+
+      // 处理每个图片地址
+      imgTags.forEach((img) => {
+        const imgSrc = img.getAttribute('src');
+        if (imgSrc && (imgSrc.includes('aliyuncs') || imgSrc.includes('oss-'))) {
+          // 为OSS图片获取签名URL
+          this.getSignedImageUrl(imgSrc, (signedUrl) => {
+            if (signedUrl) {
+              img.setAttribute('src', signedUrl);
+            }
+            processedCount++;
+
+            // 所有图片处理完成后，更新内容
+            if (processedCount === totalImages) {
+              this.fileText = tempDiv.innerHTML;
+              this.loading = false;
+              document.getElementById('drawer_content_pre').style.backgroundImage = 'none';
+              this.$nextTick(() => {
+                this.setColor()
+              })
+              this.$emit('loadingSuccess');
+            }
+          });
+        } else {
+          // 非OSS图片，直接跳过
+          processedCount++;
+          if (processedCount === totalImages) {
+            this.fileText = tempDiv.innerHTML;
+            this.loading = false;
+            document.getElementById('drawer_content_pre').style.backgroundImage = 'none';
+            this.$nextTick(() => {
+              this.setColor()
+            })
+            this.$emit('loadingSuccess');
+          }
+        }
+      });
+    },
+
+    // 获取图片的签名URL
+    getSignedImageUrl(imgSrc, callback) {
+      // 检查是否是相对路径，如果是则拼接完整URL
+      let fullImgUrl = imgSrc;
+      if (imgSrc.startsWith('/') || !imgSrc.startsWith('http')) {
+        // 从当前URL中提取域名
+        const urlObj = new URL(this.url);
+        fullImgUrl = urlObj.origin + (imgSrc.startsWith('/') ? imgSrc : '/' + imgSrc);
+      }
+
+      // 调用获取临时证书的API
+      this.$http.post('/knowledge-api/knowledge/getTemporaryCertificate', {
+        "fileInOssPath": fullImgUrl
+      }, {
+        params: { needEncrypt: false }
+      }).then(res => {
+        if (res.data.code === '0') {
+          callback(res.data.data);
+        } else {
+          console.error('获取图片签名失败:', res.data.message);
+          callback(null);
+        }
+      }).catch(err => {
+        console.error('获取图片签名失败:', err);
+        callback(null);
+      });
+    },
   },
   mounted() {
     this.getLocationInfo();
@@ -369,6 +505,48 @@ export default {
     }
   }
 }
+.preview_iframe_html {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 16px;
+
+  /deep/.lake-content {
+    margin-left: 10px;
+  }
+
+  /deep/a:link {
+    color: #0000ee !important;
+  }
+
+  /deep/a:visited {
+    color: #0000ee !important;
+  }
+
+  /deep/a:hover {
+    color: #0000ee !important;
+  }
+
+  /deep/a:active {
+    color: #0000ee !important;
+  }
+
+  /deep/li:not(.rich-text-li),
+  ol:not(.list-paddingleft-2),
+  ul:not(.list-paddingleft-2) {
+    list-style-type: auto !important;
+  }
+
+  /deep/img {
+    width: auto;
+  }
+
+  /deep/.ne-table {
+    width: 100% !important;
+  }
+}
 .animation {
   animation-name: highlight;
   animation-duration: 4s;

package/src/components/previewPdf.vue

@@ -106,7 +106,7 @@
             <new-position-preview ref="newPositionPreview"
                 v-else-if="tagIds && tagIds.length != 0 && newVersion && newFileType !== 'PPT' && newFileType !== 'PPTX' && newFileType !== 'IMAGE'"
                 :textWatermarkStr="textWatermarkStr"
-                :knowledgeId="knowledgeId" :tagIds="tagIds" :url="previewHref"></new-position-preview>
+                :knowledgeId="knowledgeId" :tagIds="tagIds" :url="previewHref" :previewOssPath="previewOssPath"></new-position-preview>
             <template v-else>
                 <div v-if="fileType == 'VIDEO'" style="width: 100%;height: 100%">
                     <video :src="url" controls width="100%;" height="98%"></video>