askbot-dragon 1.7.65-beta → 1.7.67-beta

package/src/components/markDownText.vue

@@ -1,358 +1,358 @@
-<template>
-    <div @click="lookImage">
-      <vue-markdown class="mark_down" :source="typedContent" :ref="'markdown' + msgId">
-      </vue-markdown>
-      <div v-if="showPreview">
-        <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
-      </div>
-    </div>
-  
-  </template>
-  <script>
-  import VueMarkdown from 'vue-markdown';
-  import ImgView from "./imgView";
-//   import Typed from "typed.js";
-  
-  export default {
-    name: "markDownText",
-    data() {
-      return {
-        typedContent: "",
-        typingSpeed: 15,
-        showPreview: false,
-        imgList: [],
-        isManualScroll: false,
-      }
-    },
-    props: {
-      chainValues: {
-        type: String,
-        default: ""
-      },
-      msgId: {
-        type: String,
-        default: ""
-      },
-      isHistory: {
-        type: Boolean,
-        default: false
-      },
-      streamRequestUrl: {
-        type: String,
-        default: ""
-      },
-      whetherRequestStream: {
-        type: Boolean,
-        default: false
-      }
-    },
-    components: {
-      ImgView,
-      VueMarkdown
-    },
-    mounted() {
-      this.$nextTick(() => {
-        console.log("this.askMassageStream: ", this.askMassageStream);
-        console.log("this.whetherRequestStream: ", this.whetherRequestStream);
-        console.log("this.streamRequestUrl: ", this.streamRequestUrl);
-        console.log("this.isHistory: ", this.isHistory);
-        if (this.isHistory) {
-          if (this.whetherRequestStream) {
-            console.log("71 新版 真 流 打字 效果");
-            window.addEventListener('wheel', this.handleScroll, true);
-            this.streamInfo(this.streamRequestUrl);
-          } else {
-            this.typedContent = this.chainValues
-            console.log(JSON.parse(JSON.stringify(this.typedContent)));
-            
-          }
-          
-        } else {
-          console.log("78 pre 新版 真 流 打字 效果");
-          // 新版 真 流 打字 效果
-          if (this.askMassageStream && this.whetherRequestStream && this.streamRequestUrl) {
-            console.log("81 新版 真 流 打字 效果");
-            window.addEventListener('wheel', this.handleScroll, true);
-            this.streamInfo(this.streamRequestUrl);
-          } else {
-            this.$emit("sseOtherInfo", this.msgId, "start", "");
-            // 旧版 模拟 流 打字 效果
-            this.typedContent = this.chainValues
-            // this.startTypingEffect();
-          }
-        }
-      })
-    },
-    methods: {
-      // 打字效果已在MarkdownText文件中处理
-    //   typeNewWriter(text, keyId, msg) {
-    //       setTimeout(() => {
-    //           let ref = 'msgTyped' + keyId;
-    //           const el = this.$refs[ref][0];
-    //           new Typed(el, {
-    //               strings: [text],
-    //               typeSpeed: 15,
-    //               showCursor: false,
-    //               onComplete: () => {
-    //                   msg.isHistory = true
-    //                   this.$emit('openFirstPreview', msg)
-    //                   this.typingSuccess()
-    //               },
-    //           })
-    //       }, 500)
-    //   },
-      handleScroll() {
-        console.log("this.isManualScroll = true;");
-        this.isManualScroll = true;
-        window.removeEventListener('wheel', this.handleScroll, true);
-      },
-      scrollMarkdown(){
-        !this.isManualScroll && this.$nextTick(() => {
-          const element = document.getElementById('el_id_markdown_' + this.msgId);
-          if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          }
-        });
-      },
-      streamInfo(url){
-        // 通知消息列表，当前还未建立sse，先不出空消息
-        this.$emit("sseOtherInfo", this.msgId, "init", "");
-  
-        const eventSource = new EventSource(url);
-        let tempString = "";
-        let generatingString = "";
-        let timer = null;
-        let images = [];
-        let matched = [];
-        let recommendItems = [];
-        let isfirstStr = false;
-        const backslashOrNRegex = /\n/;
-        eventSource.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          if (event.lastEventId === 'finish') { // 不能删除 finish
-            console.log("finish+++++");
-          } else if (event.lastEventId === '[DONE]') {
-            let DONETmier = setInterval(() => {
-              // 在所有文本内容打字效果完毕后 展示底部图片 文件 推荐等
-              if (generatingString == "") {
-                if (images.length != 0) {
-                  setTimeout(() => {
-                    this.$emit("sseOtherInfo", this.msgId,"images", images);
-                    this.scrollMarkdown();
-                  }, 50);
-                }
-                if (matched.length != 0) {
-                  setTimeout(() => {
-                    this.$emit("sseOtherInfo", this.msgId, "matched", matched);
-                    this.scrollMarkdown();
-                  }, 100);
-                }
-                if (recommendItems.length != 0) {
-                  setTimeout(() => {
-                    this.$emit("sseOtherInfo", this.msgId, "recommendItems", recommendItems);
-                    this.scrollMarkdown();
-                  }, 150);
-                }
-                clearInterval(timer);
-                clearInterval(DONETmier);
-              }
-            }, 100);
-            eventSource.close();
-          } else if (event.lastEventId === 'matched') {
-            matched = data;
-          } else if (event.lastEventId === 'images') {
-            images = data;
-          } else if (event.lastEventId === 'recommendItems') {
-            recommendItems = data;
-          } else {
-            // 设置当前知识答案id，用于loading取消和展示
-            this.$emit("sseOtherInfo", this.msgId, "start", "");
-            // 字符串中存在特定字符，本次接收消息暂不展示
-            if (backslashOrNRegex.test(data.content)) {
-              tempString += data.content;
-            } else {
-              if (!isfirstStr) {
-                isfirstStr = true;
-                timer = setInterval(() => {
-                  if (generatingString != "") {
-                    this.$set(this, "typedContent", this.typedContent + generatingString.charAt(0))
-                    generatingString = generatingString.slice(1)
-                    this.scrollMarkdown();
-                  }
-                }, 20);
-                this.$emit("answerDocKnowledgeFn");
-              }
-              let repStr = tempString.replace(/\\n/g, '\n');
-              generatingString = generatingString + repStr + data.content;
-              tempString = "";
-            }
-          }
-        };
-  
-        eventSource.onerror = function(err) {
-          console.error('EventSource failed:', err);
-          this.typedContent += '\nError receiving data from server.\n';
-          eventSource.close();
-        };
-      },
-      startTypingEffect() {
-        // 使用正则表达式将 HTML 内容按 <table> 标签分割
-        const segments = this.chainValues.split(/(<\/?table[\s\S]*?>[\s\S]*?<\/table>)/i);
-        console.log("segments: ", segments);
-        
-        let segmentIndex = 0;
-        let i = 0;
-        const processNextSegment = () => {
-          if (segmentIndex >= segments.length) {
-            this.$emit('openFirstPreview')
-            this.$emit('typingSuccess');
-            return;
-          }
-          const segment = segments[segmentIndex];
-          if (/^<\/?table[\s\S]*?>[\s\S]*?<\/table>$/i.test(segment)) {
-            // 如果当前段是 <table> 标签，直接添加到 typedContent 中
-            this.typedContent += segment;
-            segmentIndex++;
-            processNextSegment();
-          } else {
-            i = 0;
-            const updateContent = () => {
-              if (i < segment.length) {
-                this.typedContent += segment.charAt(i);
-                i++;
-                // 使用 requestAnimationFrame 替代 setInterval，防止卡顿
-                requestAnimationFrame(updateContent);
-              } else {
-                segmentIndex++;
-                processNextSegment();
-              }
-            };
-            updateContent();
-          }
-        };
-        processNextSegment();
-      },
-  
-      lookImage(e) {
-        let previewImageUrl = ""
-        console.log('e.target', e.target)
-        if (e.target.localName == 'img') {
-          previewImageUrl = e.target.currentSrc;
-          this.showPreview = true;
-        }
-        let richtext = JSON.parse(JSON.stringify(this.typedContent))
-        this.imgList = [];
-        richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
-          this.imgList.push(capture);
-        });
-        /*当前点击的图片作为第一个图片*/
-        let index = this.imgList.indexOf(previewImageUrl);
-        this.imgList.splice(index, 1);
-        this.imgList.unshift(previewImageUrl);
-      },
-      closeViewer() {
-        this.showPreview = false;
-      }
-    }
-  };
-  </script>
-  
-  <style scoped lang="less">
-  .mark_down {
-    line-height: 24px;
-    overflow-x: auto;
-    /deep/p {
-      margin-bottom: 14px;
-      font-size: 16px;
-    }
-  
-    /deep/p:only-child {
-      margin: 0 !important;
-    }
-  
-    /deep/p:last-child {
-      margin-bottom: 0 !important;
-    }
-  
-    /deep/ul {
-      margin-bottom: 16px;
-      list-style: disc;
-      padding-left: 40px;
-  
-      li {
-        margin: 7px 0 !important;
-        font-size: 16px;
-        // padding-left: 40px;
-  
-      }
-    }
-  
-    /deep/ ol {
-      list-style: auto;
-      padding-left: 40px;
-  
-      li {
-        margin: 7px 0 !important;
-        font-size: 16px;
-        // padding-left: 40px;
-      }
-    }
-  
-    /deep/img {
-      max-width: 400px;
-    }
-  
-    /deep/h3,
-    /deep/h2,
-    /deep/h1,
-    /deep/h4,
-    /deep/h5,
-    /deep/h6 {
-      color: #000000;
-      font-weight: 500;
-      line-height: 26px;
-    }
-  
-    /deep/h3 {
-      font-size: 20px;
-    }
-  
-    /deep/h2 {
-      font-size: 22px;
-    }
-  
-    /deep/h1 {
-      font-size: 24px;
-    }
-  
-    /deep/h3 {
-      font-size: 20px;
-    }
-  
-
-    /deep/ table {
-        border-spacing: 0;
-        // border-radius: 8px;
-        // overflow: hidden;
-        border: solid 1px #e0e6f7;
-        min-width: 800px;
-        overflow-x: auto;
-    }
-
-    /deep/ th {
-        background: #EEF1FF;
-        border: solid 1px #e0e6f7;
-        padding: 8px;
-        height: 38px;
-        min-width: 100px;
-    }
-
-    /deep/ td {
-        border: solid 1px #e0e6f7;
-        padding: 8px;
-        height: 28px;
-        min-width: 100px;
-    }
-}
-</style>
+<template>
+    <div @click="lookImage">
+      <vue-markdown class="mark_down" :source="typedContent" :ref="'markdown' + msgId">
+      </vue-markdown>
+      <div v-if="showPreview">
+        <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
+      </div>
+    </div>
+  
+  </template>
+  <script>
+  import VueMarkdown from 'vue-markdown';
+  import ImgView from "./imgView";
+//   import Typed from "typed.js";
+  
+  export default {
+    name: "markDownText",
+    data() {
+      return {
+        typedContent: "",
+        typingSpeed: 15,
+        showPreview: false,
+        imgList: [],
+        isManualScroll: false,
+      }
+    },
+    props: {
+      chainValues: {
+        type: String,
+        default: ""
+      },
+      msgId: {
+        type: String,
+        default: ""
+      },
+      isHistory: {
+        type: Boolean,
+        default: false
+      },
+      streamRequestUrl: {
+        type: String,
+        default: ""
+      },
+      whetherRequestStream: {
+        type: Boolean,
+        default: false
+      }
+    },
+    components: {
+      ImgView,
+      VueMarkdown
+    },
+    mounted() {
+      this.$nextTick(() => {
+        console.log("this.askMassageStream: ", this.askMassageStream);
+        console.log("this.whetherRequestStream: ", this.whetherRequestStream);
+        console.log("this.streamRequestUrl: ", this.streamRequestUrl);
+        console.log("this.isHistory: ", this.isHistory);
+        if (this.isHistory) {
+          if (this.whetherRequestStream) {
+            console.log("71 新版 真 流 打字 效果");
+            window.addEventListener('wheel', this.handleScroll, true);
+            this.streamInfo(this.streamRequestUrl);
+          } else {
+            this.typedContent = this.chainValues
+            console.log(JSON.parse(JSON.stringify(this.typedContent)));
+            
+          }
+          
+        } else {
+          console.log("78 pre 新版 真 流 打字 效果");
+          // 新版 真 流 打字 效果
+          if (this.askMassageStream && this.whetherRequestStream && this.streamRequestUrl) {
+            console.log("81 新版 真 流 打字 效果");
+            window.addEventListener('wheel', this.handleScroll, true);
+            this.streamInfo(this.streamRequestUrl);
+          } else {
+            this.$emit("sseOtherInfo", this.msgId, "start", "");
+            // 旧版 模拟 流 打字 效果
+            this.typedContent = this.chainValues
+            // this.startTypingEffect();
+          }
+        }
+      })
+    },
+    methods: {
+      // 打字效果已在MarkdownText文件中处理
+    //   typeNewWriter(text, keyId, msg) {
+    //       setTimeout(() => {
+    //           let ref = 'msgTyped' + keyId;
+    //           const el = this.$refs[ref][0];
+    //           new Typed(el, {
+    //               strings: [text],
+    //               typeSpeed: 15,
+    //               showCursor: false,
+    //               onComplete: () => {
+    //                   msg.isHistory = true
+    //                   this.$emit('openFirstPreview', msg)
+    //                   this.typingSuccess()
+    //               },
+    //           })
+    //       }, 500)
+    //   },
+      handleScroll() {
+        console.log("this.isManualScroll = true;");
+        this.isManualScroll = true;
+        window.removeEventListener('wheel', this.handleScroll, true);
+      },
+      scrollMarkdown(){
+        !this.isManualScroll && this.$nextTick(() => {
+          const element = document.getElementById('el_id_markdown_' + this.msgId);
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        });
+      },
+      streamInfo(url){
+        // 通知消息列表，当前还未建立sse，先不出空消息
+        this.$emit("sseOtherInfo", this.msgId, "init", "");
+  
+        const eventSource = new EventSource(url);
+        let tempString = "";
+        let generatingString = "";
+        let timer = null;
+        let images = [];
+        let matched = [];
+        let recommendItems = [];
+        let isfirstStr = false;
+        const backslashOrNRegex = /\n/;
+        eventSource.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          if (event.lastEventId === 'finish') { // 不能删除 finish
+            console.log("finish+++++");
+          } else if (event.lastEventId === '[DONE]') {
+            let DONETmier = setInterval(() => {
+              // 在所有文本内容打字效果完毕后 展示底部图片 文件 推荐等
+              if (generatingString == "") {
+                if (images.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId,"images", images);
+                    this.scrollMarkdown();
+                  }, 50);
+                }
+                if (matched.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId, "matched", matched);
+                    this.scrollMarkdown();
+                  }, 100);
+                }
+                if (recommendItems.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId, "recommendItems", recommendItems);
+                    this.scrollMarkdown();
+                  }, 150);
+                }
+                clearInterval(timer);
+                clearInterval(DONETmier);
+              }
+            }, 100);
+            eventSource.close();
+          } else if (event.lastEventId === 'matched') {
+            matched = data;
+          } else if (event.lastEventId === 'images') {
+            images = data;
+          } else if (event.lastEventId === 'recommendItems') {
+            recommendItems = data;
+          } else {
+            // 设置当前知识答案id，用于loading取消和展示
+            this.$emit("sseOtherInfo", this.msgId, "start", "");
+            // 字符串中存在特定字符，本次接收消息暂不展示
+            if (backslashOrNRegex.test(data.content)) {
+              tempString += data.content;
+            } else {
+              if (!isfirstStr) {
+                isfirstStr = true;
+                timer = setInterval(() => {
+                  if (generatingString != "") {
+                    this.$set(this, "typedContent", this.typedContent + generatingString.charAt(0))
+                    generatingString = generatingString.slice(1)
+                    this.scrollMarkdown();
+                  }
+                }, 20);
+                this.$emit("answerDocKnowledgeFn");
+              }
+              let repStr = tempString.replace(/\\n/g, '\n');
+              generatingString = generatingString + repStr + data.content;
+              tempString = "";
+            }
+          }
+        };
+  
+        eventSource.onerror = function(err) {
+          console.error('EventSource failed:', err);
+          this.typedContent += '\nError receiving data from server.\n';
+          eventSource.close();
+        };
+      },
+      startTypingEffect() {
+        // 使用正则表达式将 HTML 内容按 <table> 标签分割
+        const segments = this.chainValues.split(/(<\/?table[\s\S]*?>[\s\S]*?<\/table>)/i);
+        console.log("segments: ", segments);
+        
+        let segmentIndex = 0;
+        let i = 0;
+        const processNextSegment = () => {
+          if (segmentIndex >= segments.length) {
+            this.$emit('openFirstPreview')
+            this.$emit('typingSuccess');
+            return;
+          }
+          const segment = segments[segmentIndex];
+          if (/^<\/?table[\s\S]*?>[\s\S]*?<\/table>$/i.test(segment)) {
+            // 如果当前段是 <table> 标签，直接添加到 typedContent 中
+            this.typedContent += segment;
+            segmentIndex++;
+            processNextSegment();
+          } else {
+            i = 0;
+            const updateContent = () => {
+              if (i < segment.length) {
+                this.typedContent += segment.charAt(i);
+                i++;
+                // 使用 requestAnimationFrame 替代 setInterval，防止卡顿
+                requestAnimationFrame(updateContent);
+              } else {
+                segmentIndex++;
+                processNextSegment();
+              }
+            };
+            updateContent();
+          }
+        };
+        processNextSegment();
+      },
+  
+      lookImage(e) {
+        let previewImageUrl = ""
+        console.log('e.target', e.target)
+        if (e.target.localName == 'img') {
+          previewImageUrl = e.target.currentSrc;
+          this.showPreview = true;
+        }
+        let richtext = JSON.parse(JSON.stringify(this.typedContent))
+        this.imgList = [];
+        richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
+          this.imgList.push(capture);
+        });
+        /*当前点击的图片作为第一个图片*/
+        let index = this.imgList.indexOf(previewImageUrl);
+        this.imgList.splice(index, 1);
+        this.imgList.unshift(previewImageUrl);
+      },
+      closeViewer() {
+        this.showPreview = false;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="less">
+  .mark_down {
+    line-height: 24px;
+    overflow-x: auto;
+    /deep/p {
+      margin-bottom: 14px;
+      font-size: 16px;
+    }
+  
+    /deep/p:only-child {
+      margin: 0 !important;
+    }
+  
+    /deep/p:last-child {
+      margin-bottom: 0 !important;
+    }
+  
+    /deep/ul {
+      margin-bottom: 16px;
+      list-style: disc;
+      padding-left: 40px;
+  
+      li {
+        margin: 7px 0 !important;
+        font-size: 16px;
+        // padding-left: 40px;
+  
+      }
+    }
+  
+    /deep/ ol {
+      list-style: auto;
+      padding-left: 40px;
+  
+      li {
+        margin: 7px 0 !important;
+        font-size: 16px;
+        // padding-left: 40px;
+      }
+    }
+  
+    /deep/img {
+      max-width: 400px;
+    }
+  
+    /deep/h3,
+    /deep/h2,
+    /deep/h1,
+    /deep/h4,
+    /deep/h5,
+    /deep/h6 {
+      color: #000000;
+      font-weight: 500;
+      line-height: 26px;
+    }
+  
+    /deep/h3 {
+      font-size: 20px;
+    }
+  
+    /deep/h2 {
+      font-size: 22px;
+    }
+  
+    /deep/h1 {
+      font-size: 24px;
+    }
+  
+    /deep/h3 {
+      font-size: 20px;
+    }
+  
+
+    /deep/ table {
+        border-spacing: 0;
+        // border-radius: 8px;
+        // overflow: hidden;
+        border: solid 1px #e0e6f7;
+        min-width: 800px;
+        overflow-x: auto;
+    }
+
+    /deep/ th {
+        background: #EEF1FF;
+        border: solid 1px #e0e6f7;
+        padding: 8px;
+        height: 38px;
+        min-width: 100px;
+    }
+
+    /deep/ td {
+        border: solid 1px #e0e6f7;
+        padding: 8px;
+        height: 28px;
+        min-width: 100px;
+    }
+}
+</style>