askbot-dragon 1.8.30-beta → 1.8.31-beta

package/package.json

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

package/src/components/preview/docView.vue

@@ -19,6 +19,7 @@ export default {
     return{
       colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
       html:"",
+      loading:false
     }
   },
   props:{
@@ -55,20 +56,8 @@ export default {
       }).then(res => {
             if(res.data) {
                 this.$http.get(res.data).then(res => {
-                    this.html = res.data;
-                    let drawer = document.getElementById('drawer_content_pre')
-                    if (drawer){
-                        drawer.style.backgroundImage = 'none';
-                        drawer.style.overflowX = 'hidden';
-                    }
-                    this.$nextTick(() => {
-                        this.setColor();
-                        setTimeout(() => {
-                          if (this.textWatermarkStr){
-                            newInitWaterMark('docHtml',this.textWatermarkStr)
-                          }
-                        },500)
-        })})
+                  this.processImageUrls(res.data);
+                })
             }
       })
 
@@ -110,6 +99,118 @@ export default {
         this.$parent.scrollToParagraph('first')
       },500)
     },
+    // 处理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.html = htmlContent;
+        this.loading = false;
+        let drawer = document.getElementById('drawer_content_pre')
+        if (drawer){
+          drawer.style.backgroundImage = 'none';
+          drawer.style.overflowX = 'hidden';
+        }
+        this.$nextTick(() => {
+          this.setColor();
+          setTimeout(() => {
+            if (this.textWatermarkStr){
+              newInitWaterMark('docHtml',this.textWatermarkStr)
+            }
+          },500)
+        })
+        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.html = tempDiv.innerHTML;
+              this.loading = false;
+              let drawer = document.getElementById('drawer_content_pre')
+              if (drawer){
+                drawer.style.backgroundImage = 'none';
+                drawer.style.overflowX = 'hidden';
+              }
+              this.$nextTick(() => {
+                this.setColor();
+                setTimeout(() => {
+                  if (this.textWatermarkStr){
+                    newInitWaterMark('docHtml',this.textWatermarkStr)
+                  }
+                },500)
+              })
+            }
+          });
+        } else {
+          // 非OSS图片，直接跳过
+          processedCount++;
+          if (processedCount === totalImages) {
+            this.html = tempDiv.innerHTML;
+            this.loading = false;
+            let drawer = document.getElementById('drawer_content_pre')
+            if (drawer){
+              drawer.style.backgroundImage = 'none';
+              drawer.style.overflowX = 'hidden';
+            }
+            this.$nextTick(() => {
+              this.setColor();
+              setTimeout(() => {
+                if (this.textWatermarkStr){
+                  newInitWaterMark('docHtml',this.textWatermarkStr)
+                }
+              },500)
+            })
+          }
+        }
+      });
+    },
+
+    // 获取图片的签名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);
+      });
+    },
   },
   watch:{
     html_result:{