askbot-dragon 1.1.28 → 1.2.0

package/src/components/associationIntention.vue

@@ -1,301 +1,301 @@
-<template>
-  <div class="association-intention">
-    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && !(msg.recommend&& msg.recommend.status)">
-<!--      <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>-->
-      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
-        <p  style="white-space: pre-wrap;">
-          {{msg.content | msgHtmlContent}}
-        </p>
-      </template>
-      <template v-else>
-        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
-      </template>
-    </div>
-    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && (msg.recommend&& msg.recommend.status)">
-      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
-        <p  style="white-space: pre-wrap;">
-          {{msg.content | msgHtmlContent}}
-        </p>
-      </template>
-      <template v-else>
-        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
-      </template>
-     <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <div v-if="msg.type === 'answer_rich_text' && !(msg.content.recommend && msg.content.recommend.status)">
-      <p v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
-    </div>
-    <div  v-else-if="msg.type == 'answer_rich_text' && (msg.content.recommend && msg.content.recommend.status)">
-      <p v-html="$options.filters.imageStyle(msg.content.html)" class="answer-rich-text" @click="lookAttach($event)"></p>
-      <Recommend :msg="msg.content" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-      <div v-else-if="msgType === 'answer_image'" >
-      <div
-          class="association-img"
-          v-if="msg.content.url"
-      >
-        <!-- LPY 原生宽度适配有bug，弃用 -->
-        <template v-if="sourceOhm === 'ohm' && !isOhmPc">
-          <viewer :images="[msg.content.url]">
-            <img
-              v-for="(src,index) in [msg.content.url]"
-              :src="src"
-              :key="index"
-              style="height: auto; width: calc(100vw - 137px);border-radius: 25px;max-width: 230px"
-              class="img-class"
-          />
-          </viewer>
-        </template>
-        <img
-            v-else
-            :src="msg.content.url"
-            style="height: auto; width: calc(100vw - 137px);border-radius: 25px;max-width: 230px"
-            @click="onImageClick(msg.content.url)"
-            class="img-class"
-        />
-      </div>
-      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'">
-      <div class="association-img" v-if="msg.content.url">
-        <ask-video :msg="msg" :url="msg.content.url" :local-url="msg.content.localUrl"
-                   :progress="msg.content.progress"></ask-video>
-      </div>
-      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <previewDoc ref="previewDoc" :url="previewHref"></previewDoc>
-  </div>
-</template>
-
-<script>
-  import askVideo from "./askVideo";
-  import Recommend from "./recommend";
-  import previewDoc from "./previewDoc";
-  export default {
-    name: "associationIntention",
-    components: {Recommend, askVideo, previewDoc},
-    props: ["msg",'msgType','isOpen','sourceOhm','isOhmPc'],
-    filters: {
-      imageStyle: function (html) {
-        //富文本内图片自适应高度宽度
-        const regex = new RegExp("<img", "gi");
-        return html.replace(
-            regex,
-            "<img style='max-width: 230px;border-radius: 25px;' onclick='imageOnClick(this)'"
-        );
-      },
-      msgHtmlContent:function (content){
-        var reg = /<br\/>/g;
-        let msg = content.replace(reg,'\n');
-        return msg
-      },
-    },
-    data() {
-      return {
-        previewHref: ""
-      }
-    },
-    mounted() {
-    },
-    methods:{
-      // 将匹配结果替换表情图片
-      emotion(res) {
-         let word = res.replace(/#|;/gi, "");
-          const list = [
-              "微笑",
-              "撇嘴",
-              "色",
-              "发呆",
-              "得意",
-              "流泪",
-              "害羞",
-              "闭嘴",
-              "睡",
-              "大哭",
-              "尴尬",
-              "发怒",
-              "调皮",
-              "呲牙",
-              "惊讶",
-              "难过",
-              "酷",
-              "冷汗",
-              "抓狂",
-              "吐",
-              "偷笑",
-              "可爱",
-              "白眼",
-              "傲慢",
-              "饥饿",
-              "困",
-              "惊恐",
-              "流汗",
-              "憨笑",
-              "大兵",
-              "奋斗",
-              "咒骂",
-              "疑问",
-              "嘘",
-              "晕",
-              "折磨",
-              "衰",
-              "骷髅",
-              "敲打",
-              "再见",
-              "擦汗",
-              "抠鼻",
-              "鼓掌",
-              "糗大了",
-              "坏笑",
-              "左哼哼",
-              "右哼哼",
-              "哈欠",
-              "鄙视",
-              "委屈",
-              "快哭了",
-              "阴险",
-              "亲亲",
-              "吓",
-              "可怜",
-              "菜刀",
-              "西瓜",
-              "啤酒",
-              "篮球",
-              "乒乓",
-              "咖啡",
-              "饭",
-              "猪头",
-              "玫瑰",
-              "凋谢",
-              "示爱",
-              "爱心",
-              "心碎",
-              "蛋糕",
-              "闪电",
-              "炸弹",
-              "刀",
-              "足球",
-              "瓢虫",
-              "便便",
-              "月亮",
-              "太阳",
-              "礼物",
-              "拥抱",
-              "强",
-              "弱",
-              "握手",
-              "胜利",
-              "抱拳",
-              "勾引",
-              "拳头",
-              "差劲",
-              "爱你",
-              "不",
-              "可以",
-              "爱情",
-              "飞吻",
-              "跳跳",
-              "发抖",
-              "怄火",
-              "转圈",
-              "磕头",
-              "回头",
-              "跳绳",
-              "挥手",
-              "激动",
-              "街舞",
-              "献吻",
-              "左太极",
-              "右太极",
-          ];
-          let index = list.indexOf(word);
-          return `<img height="20px" src="https://guoranim.oss-cn-beijing.aliyuncs.com/emoji/${
-              index + 1
-          }.png" align="middle">`;
-      },
-      onRadioClickReco(id, name, apikey) {
-        this.$emit("onRadioClick", id, name, apikey);
-      },
-      onImageClick(url){
-        this.$emit('onImageClick',url)
-      },
-      msgContent(content){
-        console.debug('215',content)
-        var regBr = /<br\/>/g;
-        let msg = content.replace(regBr,"\n");
-        var  reg = /<[^>]+>/g;
-        return reg.test(msg);
-
-      },
-      //预览图片
-      lookAttach(){
-        return
-        // if (e.target.localName == 'a'){
-        //   console.debug('lookImage',e.target.href)
-        //   this.previewHref = e.target.href
-        //   this.$refs.previewDoc.previewShowPopup = true
-        //   // let url = ''
-        //   // try {
-        //   //   url = btoa(e.target.href)
-        //   // }
-        //   // catch {
-        //   //   url = encodeURIComponent(btoa(e.target.href))
-        //   // }
-        //   // window.open('https://test.open.askbot.cn/kkfileview/onlinePreview?url=' + url)
-        //   // e.stopPropagation()
-        //   // e.preventDefault()
-        //   e.returnValue = false
-        // }
-      },
-    },
-    watch:{
-      isOpen:{
-        handler(value){
-          if (value){
-            let reg = this.msg.content.html
-            if (reg){
-              reg = reg.replace('<a',"<span class='isReplace'")
-              reg = reg.replace('</a>','</span>')
-              console.debug('reg',reg)
-              this.msg.content.html = reg
-            }
-
-          }
-          else {
-            let reg = this.msg.content.html
-            console.debug('reg',reg)
-            if (reg){
-              reg = reg.replace("<span class='isReplace'","<a download")
-              let reg2 = reg
-              reg2 = reg2.replace('</span>','</a>')
-              this.msg.content.html = reg2
-              console.debug('reg',reg2)
-            }
-          }
-        }
-      }
-    }
-  }
-</script>
-
-
-<style scoped lang="less">
-@import "../assets/less/converSationContainer/common";
-.association-intention{
-  .association-img{
-    /*display: flex;
-    align-items: center;
-    justify-content: center;*/
-
-  }
-  .answer-rich-text{
-    /*padding-bottom: 10px;
-    border-bottom: 1px solid #EEEEEE;*/
-  }
-  ///deep/a{
-  //  disabled:true
-  //  //pointer-events: none;
-  //}
-}
-
+<template>
+  <div class="association-intention">
+    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && !(msg.recommend&& msg.recommend.status)">
+<!--      <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>-->
+      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
+        <p  style="white-space: pre-wrap;">
+          {{msg.content | msgHtmlContent}}
+        </p>
+      </template>
+      <template v-else>
+        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
+      </template>
+    </div>
+    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && (msg.recommend&& msg.recommend.status)">
+      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
+        <p  style="white-space: pre-wrap;">
+          {{msg.content | msgHtmlContent}}
+        </p>
+      </template>
+      <template v-else>
+        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
+      </template>
+     <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <div v-if="msg.type === 'answer_rich_text' && !(msg.content.recommend && msg.content.recommend.status)">
+      <p v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
+    </div>
+    <div  v-else-if="msg.type == 'answer_rich_text' && (msg.content.recommend && msg.content.recommend.status)">
+      <p v-html="$options.filters.imageStyle(msg.content.html)" class="answer-rich-text" @click="lookAttach($event)"></p>
+      <Recommend :msg="msg.content" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+      <div v-else-if="msgType === 'answer_image'" >
+      <div
+          class="association-img"
+          v-if="msg.content.url"
+      >
+        <!-- LPY 原生宽度适配有bug，弃用 -->
+        <template v-if="sourceOhm === 'ohm' && !isOhmPc">
+          <viewer :images="[msg.content.url]">
+            <img
+              v-for="(src,index) in [msg.content.url]"
+              :src="src"
+              :key="index"
+              style="height: auto; width: calc(100vw - 137px);border-radius: 25px;max-width: 230px"
+              class="img-class"
+          />
+          </viewer>
+        </template>
+        <img
+            v-else
+            :src="msg.content.url"
+            style="height: auto; width: calc(100vw - 137px);border-radius: 25px;max-width: 230px"
+            @click="onImageClick(msg.content.url)"
+            class="img-class"
+        />
+      </div>
+      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'">
+      <div class="association-img" v-if="msg.content.url">
+        <ask-video :msg="msg" :url="msg.content.url" :local-url="msg.content.localUrl"
+                   :progress="msg.content.progress"></ask-video>
+      </div>
+      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <previewDoc ref="previewDoc" :url="previewHref"></previewDoc>
+  </div>
+</template>
+
+<script>
+  import askVideo from "./askVideo";
+  import Recommend from "./recommend";
+  import previewDoc from "./previewDoc";
+  export default {
+    name: "associationIntention",
+    components: {Recommend, askVideo, previewDoc},
+    props: ["msg",'msgType','isOpen','sourceOhm','isOhmPc'],
+    filters: {
+      imageStyle: function (html) {
+        //富文本内图片自适应高度宽度
+        const regex = new RegExp("<img", "gi");
+        return html.replace(
+            regex,
+            "<img style='max-width: 230px;border-radius: 25px;' onclick='imageOnClick(this)'"
+        );
+      },
+      msgHtmlContent:function (content){
+        var reg = /<br\/>/g;
+        let msg = content.replace(reg,'\n');
+        return msg
+      },
+    },
+    data() {
+      return {
+        previewHref: ""
+      }
+    },
+    mounted() {
+    },
+    methods:{
+      // 将匹配结果替换表情图片
+      emotion(res) {
+         let word = res.replace(/#|;/gi, "");
+          const list = [
+              "微笑",
+              "撇嘴",
+              "色",
+              "发呆",
+              "得意",
+              "流泪",
+              "害羞",
+              "闭嘴",
+              "睡",
+              "大哭",
+              "尴尬",
+              "发怒",
+              "调皮",
+              "呲牙",
+              "惊讶",
+              "难过",
+              "酷",
+              "冷汗",
+              "抓狂",
+              "吐",
+              "偷笑",
+              "可爱",
+              "白眼",
+              "傲慢",
+              "饥饿",
+              "困",
+              "惊恐",
+              "流汗",
+              "憨笑",
+              "大兵",
+              "奋斗",
+              "咒骂",
+              "疑问",
+              "嘘",
+              "晕",
+              "折磨",
+              "衰",
+              "骷髅",
+              "敲打",
+              "再见",
+              "擦汗",
+              "抠鼻",
+              "鼓掌",
+              "糗大了",
+              "坏笑",
+              "左哼哼",
+              "右哼哼",
+              "哈欠",
+              "鄙视",
+              "委屈",
+              "快哭了",
+              "阴险",
+              "亲亲",
+              "吓",
+              "可怜",
+              "菜刀",
+              "西瓜",
+              "啤酒",
+              "篮球",
+              "乒乓",
+              "咖啡",
+              "饭",
+              "猪头",
+              "玫瑰",
+              "凋谢",
+              "示爱",
+              "爱心",
+              "心碎",
+              "蛋糕",
+              "闪电",
+              "炸弹",
+              "刀",
+              "足球",
+              "瓢虫",
+              "便便",
+              "月亮",
+              "太阳",
+              "礼物",
+              "拥抱",
+              "强",
+              "弱",
+              "握手",
+              "胜利",
+              "抱拳",
+              "勾引",
+              "拳头",
+              "差劲",
+              "爱你",
+              "不",
+              "可以",
+              "爱情",
+              "飞吻",
+              "跳跳",
+              "发抖",
+              "怄火",
+              "转圈",
+              "磕头",
+              "回头",
+              "跳绳",
+              "挥手",
+              "激动",
+              "街舞",
+              "献吻",
+              "左太极",
+              "右太极",
+          ];
+          let index = list.indexOf(word);
+          return `<img height="20px" src="https://guoranim.oss-cn-beijing.aliyuncs.com/emoji/${
+              index + 1
+          }.png" align="middle">`;
+      },
+      onRadioClickReco(id, name, apikey) {
+        this.$emit("onRadioClick", id, name, apikey);
+      },
+      onImageClick(url){
+        this.$emit('onImageClick',url)
+      },
+      msgContent(content){
+        console.debug('215',content)
+        var regBr = /<br\/>/g;
+        let msg = content.replace(regBr,"\n");
+        var  reg = /<[^>]+>/g;
+        return reg.test(msg);
+
+      },
+      //预览图片
+      lookAttach(){
+        return
+        // if (e.target.localName == 'a'){
+        //   console.debug('lookImage',e.target.href)
+        //   this.previewHref = e.target.href
+        //   this.$refs.previewDoc.previewShowPopup = true
+        //   // let url = ''
+        //   // try {
+        //   //   url = btoa(e.target.href)
+        //   // }
+        //   // catch {
+        //   //   url = encodeURIComponent(btoa(e.target.href))
+        //   // }
+        //   // window.open('https://test.open.askbot.cn/kkfileview/onlinePreview?url=' + url)
+        //   // e.stopPropagation()
+        //   // e.preventDefault()
+        //   e.returnValue = false
+        // }
+      },
+    },
+    watch:{
+      isOpen:{
+        handler(value){
+          if (value){
+            let reg = this.msg.content.html
+            if (reg){
+              reg = reg.replace('<a',"<span class='isReplace'")
+              reg = reg.replace('</a>','</span>')
+              console.debug('reg',reg)
+              this.msg.content.html = reg
+            }
+
+          }
+          else {
+            let reg = this.msg.content.html
+            console.debug('reg',reg)
+            if (reg){
+              reg = reg.replace("<span class='isReplace'","<a download")
+              let reg2 = reg
+              reg2 = reg2.replace('</span>','</a>')
+              this.msg.content.html = reg2
+              console.debug('reg',reg2)
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+
+
+<style scoped lang="less">
+@import "../assets/less/converSationContainer/common";
+.association-intention{
+  .association-img{
+    /*display: flex;
+    align-items: center;
+    justify-content: center;*/
+
+  }
+  .answer-rich-text{
+    /*padding-bottom: 10px;
+    border-bottom: 1px solid #EEEEEE;*/
+  }
+  ///deep/a{
+  //  disabled:true
+  //  //pointer-events: none;
+  //}
+}
+
 </style>