askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/preview/docView.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="docView" id="docView">
+    <div class="docHtml"
+         ref="docHtml"
+         id="docHtml"
+         v-html="html"
+         @click="selectDiv"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+import { newInitWaterMark } from "../../assets/js/common";
+
+export default {
+  name: "docView",
+  data(){
+    return{
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+      html:"",
+      loading:false
+    }
+  },
+  props:{
+    html_result:{
+      type:String,
+      default:""
+    },
+    split_paragraphs:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    fileSuffix:{
+      type:String,
+      default:""
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    },
+    isLining:{
+      type:Boolean,
+      default:false
+    }
+  },
+  methods:{
+    selectDiv(e){
+      this.$emit('selectDiv',e)
+    },
+    getHtml(){
+      // let url = 'https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/123/2024/12/09/14/18/17/123/%E5%85%AC%E5%8F%B8%E5%91%98%E5%B7%A5%E6%89%8B%E5%86%8C_1733725097.html'
+      let url = this.html_result
+      this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
+        headers: {
+          "Content-Type": "application/json",
+        }
+      }).then(res => {
+            if(res.data) {
+                this.$http.get(res.data).then(res => {
+                  if (this.isLining){
+                    this.html = res.data;
+                    let drawer = document.getElementById('drawer_content_pre')
+                    if (drawer) {
+                      drawer.style.backgroundImage = 'none';
+                      drawer.style.overflowX = 'hidden';
+                    }
+                    this.$nextTick(() => {
+                      setTimeout(() => {
+                        this.setColor();
+                        if (this.textWatermarkStr){
+                          newInitWaterMark('docHtml',this.textWatermarkStr)
+                        }
+                      },500)
+                    })
+                  } else {
+                    this.processImageUrls(res.data);
+                  }
+                })
+            }
+      })
+
+    },
+    setColor(){
+      console.debug('split_paragraphs 87',this.fileSuffix,this.split_paragraphs)
+      this.split_paragraphs.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            let dom = document.getElementById(items.paragraph_id);
+            console.debug('dom 93',dom,this.fileSuffix)
+            if (this.fileSuffix === 'TXT' || this.fileSuffix === 'MD'){
+              const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${items.paragraph_id}"]`);
+              paragraphs.forEach(paragraph => {
+                paragraph.style.background = this.colors[colorIndex]
+              })
+            } else if (this.fileSuffix === 'HTML'){
+              const paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${items.paragraph_id}"]`);
+              paragraphs.forEach(paragraph => {
+                paragraph.style.background = this.colors[colorIndex]
+              })
+            } else if (dom){
+              dom.style.background = this.colors[colorIndex];
+            }
+          })
+          let newOriginal = item.original_paragraph.filter(items => !items.type)
+          let dom = document.getElementById(newOriginal[newOriginal.length - 1].paragraph_id);
+          if (dom){
+            dom.style.marginBottom = '8px';
+          }
+        }
+        if (item.tableId){
+          let dom = document.getElementById(item.tableId);
+          if (dom){
+            dom.style.backgroundColor = this.colors[colorIndex]
+          }
+        }
+      })
+      setTimeout(() => {
+        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(() => {
+          setTimeout(() => {
+            this.setColor();
+            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(() => {
+                setTimeout(() => {
+                  this.setColor();
+                  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(() => {
+              setTimeout(() => {
+                this.setColor();
+                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:{
+      handler(){
+        if (this.html_result){
+          this.getHtml();
+        }
+      },
+      immediate:true
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.docView{
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+  div{
+    position: relative;
+  }
+  /deep/img{
+    max-width: 200px;
+  }
+}
+</style>

package/src/components/preview/excelView.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="excelView">
+    <table border="1" v-if="false">
+      <thead>
+      <tr>
+        <th v-for="(person2,index2) in headerArray" :key="index2">{{person2}}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(person, index) in rowDataList" :key="index" :id="person.id">
+        <td v-for="(person2,index2) in headerArray" :key="index2">
+          {{person[person2]}}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <div id="excelTable">
+      <el-table
+          :data="pagedData"
+          border
+          ref="table"
+          :row-key="getRowKey"
+          :row-class-name="tableRowClassName"
+          height="100%"
+          style="width: 100%">
+        <template v-for="(item,index) in headerArray">
+          <el-table-column
+              :label="item"
+              :key="index"
+              min-width="100">
+            <template slot-scope="scope">
+              {{ getCellValue(scope.row, item, index) }}
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+    </div>
+    <pagination-page :pageSize="pageSize" :currentPage="currentPage" :total="rowDataList.length" @currentChange="handleCurrentChange"></pagination-page>
+  </div>
+</template>
+
+<script>
+
+import PaginationPage from "../pagination";
+import { newInitWaterMark } from "../../assets/js/common";
+export default {
+  name: "excelView",
+  components: { PaginationPage },
+  data(){
+    return{
+      rowData:[
+        {
+          "row_id": "659164be-19bd-4fd7-a47d-b04c3dbbfa6f",
+          "row_data_md": "| 王明宇 | 27 | 189 |",
+          "row_number": 2,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>王明宇</td><td>27</td><td>189</td></tr></tbody></table>"
+        },
+        {
+          "row_id": "fac98d6a-2580-4f62-8f50-61521debeeef",
+          "row_data_md": "| 老王 | 38 | 178 |",
+          "row_number": 3,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>老王</td><td>38</td><td>178</td></tr></tbody></table>"
+        },
+      ],
+      rowDataList:[],
+      headerArray:[],
+      currentPage:1,
+      pageSize:20,
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+      emptyHeaderKeys:[]
+    }
+  },
+  props:{
+    headerData:{
+      type:String,
+      default:""
+    },
+    excelRowList:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    tableChunkData:{
+      type:Array,
+      default(){
+        return [{
+          "sheet_name": null,
+          "table_md": null,
+          "tableChunkText": "| 序号 | 电子色片 | 旧色号 | 颜色名称 | R68-Y32 17w77b06c L32-1 | 新 | 色卡页码 | -ICN色号 | R | G | B | C | M | Y | | 154 | 22 | B99-G01 81w11b08c L88-4 | OW060-4 |  | 雪蓝 | 蓝色系 | 210 | 218 | 223 | 5.5761039841401502E-2 | 2.08606534553369E-2 | 0 | 0.12603452469972801 |",
+          "tableChunkId": "5e80ff30-ea7e-4c47-878b-59d9b1c833ce",
+          "tableId": null
+        }]
+      }
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    }
+  },
+  computed:{
+    pagedData() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.rowDataList.slice(start, end);
+    }
+  },
+  methods:{
+    tableRowData(){
+      const headerString = this.headerData.trim().replace(/^\||\|$/g, '');
+
+      // 使用竖线作为分隔符来分割字符串
+      const headerArray = headerString.split('|').map(item => item.trim());
+      this.headerArray = headerArray;
+      // 为每个空表头位置生成唯一标识符
+      const emptyHeaderKeys = {};
+
+      for (let i = 0; i < this.excelRowList.length; i++) {
+        const trimmedString = this.excelRowList[i].row_data_md.trim().replace(/^\||\|$/g, '');
+        const resultArray = trimmedString.split('|').map(item => item.trim());
+
+        let obj = {
+          id: this.excelRowList[i].row_id
+        };
+
+        for (let j = 0; j < headerArray.length; j++) {
+          const headerKey = headerArray[j];
+
+          if (headerKey && headerKey !== '') {
+            // 非空表头：正常设置
+            this.$set(obj, headerKey, resultArray[j] || '');
+          } else {
+            // 空表头：为这个位置生成唯一标识
+            if (!emptyHeaderKeys[j]) {
+              // 生成一个不显示但唯一的键名
+              emptyHeaderKeys[j] = `_empty_${j}`;
+            }
+
+            // 使用唯一键名存储数据
+            this.$set(obj, emptyHeaderKeys[j], resultArray[j] || '');
+          }
+        }
+
+        this.rowDataList.push(obj);
+      }
+
+      // 将空表头的键名映射存储到组件中
+      this.emptyHeaderKeys = emptyHeaderKeys;
+      // for (let i =0;i<this.excelRowList.length;i++){
+      //   // 去除字符串两端的竖线（如果它们存在的话）
+      //   const trimmedString = this.excelRowList[i].row_data_md.trim().replace(/^\||\|$/g, '');
+      //
+      //   // 使用竖线作为分隔符来分割字符串
+      //   const resultArray = trimmedString.split('|').map(item => item.trim());
+      //   console.log('resultArray',resultArray)
+      //   let obj = {}
+      //   for (let j=0;j<headerArray.length;j++){
+      //     this.$set(obj,headerArray[j],resultArray[j])
+      //     this.$set(obj,'id',this.excelRowList[i].row_id)
+      //   }
+      //   this.rowDataList.push(obj);
+      // }
+      console.log('rowDataList',headerArray,this.excelRowList,this.rowDataList)
+      this.$nextTick(() => {
+        this.setRowColor('first');
+      })
+    },
+    getCellValue(row, header, headerIndex) {
+      if (header && header !== '') {
+        return row[header] || '';
+      } else {
+        // 通过emptyHeaderKeys映射获取正确的键名
+        const key = this.emptyHeaderKeys[headerIndex];
+        return row[key] || '';
+      }
+    },
+    getRowKey(row){
+      return row.id
+    },
+    setRowColor(type){
+      this.tableChunkData.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        let id = item.tableChunkId;
+        let dom = document.getElementsByClassName('setBgClass' + id);
+        if (dom && dom.length > 0){
+          let newDom = Array.from(dom)
+          newDom.forEach(doms => {
+            doms.style.backgroundColor = this.colors[colorIndex];
+          })
+        }
+      })
+      this.$nextTick(() => {
+        if (this.tableChunkData.length > 0 && type === 'first'){
+          this.scrollToRow(this.tableChunkData[0].tableChunkId)
+          if (this.textWatermarkStr){
+            newInitWaterMark('excelTable',this.textWatermarkStr)
+          }
+        }
+      })
+    },
+    tableRowClassName({ row }){
+      let id = this.tableChunkData.filter(item => item.tableChunkId == row.id);
+      if (id && id.length > 0){
+        return 'setBgClass' + id[0].tableChunkId
+      }
+    },
+    scrollToRow(rowId) {
+      this.$nextTick(() => {
+        // const row = this.rowDataList.find(row => row.id === rowId);
+        const rowIndex = this.rowDataList.findIndex(row => row.id === rowId);
+        let index = Math.ceil(rowIndex / 20)
+        if (index > 0){
+          this.currentPage = index;
+        }
+        setTimeout(() => {
+          let dom = document.getElementsByClassName('setBgClass' + rowId);
+          if (dom && dom.length > 0){
+            let newDom = Array.from(dom)
+            newDom.forEach(doms => {
+              doms.style.backgroundColor = this.colors[0];
+            })
+            const bodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
+            const targetRow = this.$refs.table.$el.querySelector('.setBgClass' + rowId); // 获取目标行元素
+            const targetHeight = targetRow.offsetTop; // 目标行的高度（从上到下的距离）
+            bodyWrapper.scroll({
+              top:targetHeight,
+              behavior:"smooth"
+            }); // 滚动到目标行位置
+
+            // newDom[0].scrollIntoView({ behavior: "smooth"})
+          }
+        },800)
+      });
+    },
+    handleCurrentChange(val){
+      this.currentPage = val;
+      this.$nextTick(() => {
+        this.setRowColor();
+      })
+    }
+  },
+  mounted() {
+    this.tableRowData();
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/variables.less";
+.excelView{
+  height: 100%;
+  #excelTable{
+    position: relative;
+    height: 100%;
+  }
+  /deep/.setBgClass{
+    background-color: @background-color-excel !important;
+  }
+}
+</style>

package/src/components/preview/markDownView.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="downView">
+    <div class="mark_down" id="mark_down" ref="markDown" v-html="compiledMarkdown">
+    </div>
+  </div>
+</template>
+
+<script>
+import hljs from "highlight.js";
+import { newInitWaterMark } from "../../assets/js/common";
+
+const marked = require("marked")
+export default {
+  name: "markDownView",
+  data(){
+    return{
+      markdownContent:"",
+      compiledMarkdown:""
+    }
+  },
+  props:{
+    url:{
+      type:String,
+      default:""
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    }
+  },
+  computed:{
+
+  },
+  mounted(){
+    this.$http.get(this.url).then(res => {
+      console.log('getMdText',res)
+      let markdown = marked.marked(res.data, {
+        breaks: true
+      })
+      this.compiledMarkdown = this.parseCode(markdown, "content");
+      setTimeout(() => {
+        if (this.textWatermarkStr){
+          newInitWaterMark('mark_down',this.textWatermarkStr)
+        }
+      },500)
+    })
+  },
+  methods:{
+    parseCode(markDownText) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(markDownText, 'text/html');
+      doc.querySelectorAll('pre code').forEach((block) => {
+        hljs.highlightBlock(block);
+      });
+      return doc.documentElement.outerHTML
+    },
+  }
+};
+</script>
+
+<style scoped lang="less">
+.downView{
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+  .mark_down{
+    position: relative;
+  }
+}
+</style>