askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/answerDissatisfaction.vue

@@ -1,63 +1,65 @@
-<template>
-  <div class="answer-dissatisfaction">
-    <p class="satisfaction-reply-text" v-if="msg.content.replyText" v-html="msg.content.replyText"></p>
-    <p
-        v-for="(option, index) in msg.content.replyOptions"
-        class="statisfaction-item"
-        :key="index"
-        @click="sendDissatisfaction(option,msg.apiKey)">
-      {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "answerDissatisfaction",
-  data(){
-    return{
-
-    }
-  },
-  props:['msg'],
-  methods:{
-    sendDissatisfaction(option,apiKey){
-      this.$emit('sendDissatisfaction',option,apiKey)
-      /*let value = JSON.stringify({
-        input: option.name,
-        reply_text: option.answer
-      });
-      this.$emit('sendMessage','USER_ACTION_TO_DISSATISFACTION_V2',value,null,apiKey);*/
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.answer-dissatisfaction{
-  min-width: 100px;
-  .satisfaction-reply-text{
-    word-wrap: break-word;
-    word-break: break-all;
-    overflow: hidden;
-    padding: 8px 0 10px 0;
-    height: auto;
-    border-bottom: 1px solid #EEEEEE;
-  }
-  .statisfaction-item{
-    padding: 8px 0;
-    height: 25px;
-    line-height: 25px;
-    background-color: #ffffff;
-    color: #366aff;
-    cursor:pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .end{
-    border-bottom-left-radius: 25px !important;
-    border-bottom-right-radius: 25px !important;
-  }
-}
+<template>
+  <div class="answer-dissatisfaction">
+    <p class="satisfaction-reply-text" v-if="msg.content.replyText" v-html="msg.content.replyText"></p>
+    <p
+        v-for="(option, index) in msg.content.replyOptions"
+        class="statisfaction-item"
+        :key="index"
+        @click="sendDissatisfaction(option,msg.apiKey)">
+      {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "answerDissatisfaction",
+  data(){
+    return{
+
+    }
+  },
+  props:['msg'],
+  methods:{
+    sendDissatisfaction(option,apiKey){
+      this.$emit('sendDissatisfaction',option,apiKey)
+      /*let value = JSON.stringify({
+        input: option.name,
+        reply_text: option.answer
+      });
+      this.$emit('sendMessage','USER_ACTION_TO_DISSATISFACTION_V2',value,null,apiKey);*/
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/variables.less";
+
+.answer-dissatisfaction{
+  min-width: 100px;
+  .satisfaction-reply-text{
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 0 10px 0;
+    height: auto;
+    border-bottom: 1px solid @border-color-r3;
+  }
+  .statisfaction-item{
+    padding: 8px 0;
+    height: 25px;
+    line-height: 25px;
+    background-color: @background-color-light;
+    color: @font-primary-accent-color;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .end{
+    border-bottom-left-radius: 25px !important;
+    border-bottom-right-radius: 25px !important;
+  }
+}
 </style>

package/src/components/answerRadio.vue

@@ -1,187 +1,262 @@
-<template>
-  <div id="answer-radio">
-    <p class="radio-description" v-html="msg.content.description"
-      v-if="msg.content.description && !msg.content.isKnowledgeSummary"></p>
-    <div class="bottom-link" v-if="msg.content.description && !msg.content.isKnowledgeSummary"></div>
-    <div :class="['options-list', msg.content.isKnowledgeSummary ? 'isKnowledgeSummary' : '']">
-      <div v-if="msg.content.isKnowledgeSummary" class="tips">AI为您推荐了以下内容</div>
-      <div v-for="(option, index) in formatOptions[activeIndex]" class="options-item"
-        :class="index !== msg.content.options.length - 1 ? 'recommend-item' : 'last-item'" :key="msg.nodeId + '_' + index"
-        @click="radioClick(msg, option, index)">
-
-        <!-- <el-tooltip class="item" effect="dark" :content="option.name" placement="bottom-start" v-if="!isMobile">
-            <span > {{ option.name }}</span>
-          </el-tooltip> -->
-        <span> {{ option.name }}</span>
-        <i class="arsenal_icon arsenalangle-right-solid"></i>
-      </div>
-    </div>
-    <div v-if="showPage" class="switch-page">
-      <span @click="changeActivePage" class="switch-page-btn">换一批</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "answerRadio",
-  data() {
-    return {
-      isMobile: false,
-      formatOptions: [],
-      activeIndex: 0,
-      pageSize: 5,
-      showPage: false,
-    }
-  },
-  props: ['msg'],
-  mounted() {
-    console.log(this.msg, 'msg');
-    // 关键词推荐 前端分页
-    if (this.msg.id == "recdNodeId" && this.msg.content.options.length > this.pageSize) {
-      this.formatOptions = this.chunkArray(this.msg.content.options, this.pageSize);
-      this.activeIndex = 0;
-      this.showPage = true;
-    } else {
-      this.formatOptions = [this.msg.content.options];
-      this.activeIndex = 0;
-    }
-    this.judgeIsMobile();
-  },
-  methods: {
-    changeActivePage(){
-      if (this.activeIndex >= this.formatOptions.length - 1) {
-        this.activeIndex = 0;
-      } else {
-        this.activeIndex++;
-      }
-    },
-    chunkArray(array, size) {
-      let chunks = [];
-      for (let i = 0; i < array.length; i += size) {
-        let chunk = array.slice(i, i + size);
-        chunks.push(chunk);
-      }
-      return chunks;
-    },
-    judgeIsMobile() {
-      let flag = navigator.userAgent.match(
-        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-      );
-      if (flag) {
-        this.isMobile = true;
-      } else {
-        this.isMobile = false;
-      }
-      console.log(this.isMobile, 'this.isMobile');
-    },
-    radioClick(msg, option, index) {
-      let value = option.answerId ? msg.id + '_' + index + '_' + option.value + '_' + option.name + '_' + option.answerId : msg.id + '_' + index + '_' + option.value + '_' + option.name
-      this.$emit('onRadioClick', value, option.name, msg.apiKey, msg.actionCategory, msg.msgId ? msg.msgId : '', option.apiKey)
-    }
-  }
-
-}
-</script>
-
-<style scoped lang="less">
-#answer-radio {
-  .switch-page {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .switch-page-btn {
-      width: 80px;
-      height: 30px;
-      border-radius: 15px;
-      border: solid 1px #366AFF;
-      color: #366AFF;
-      line-height: 30px;
-      text-align: center;
-      cursor: pointer;
-    }
-  }
-  .radio-description {
-    word-wrap: break-word;
-    word-break: break-all;
-    overflow: hidden;
-    /*padding: 8px 10px 10px 0;*/
-    padding-bottom: 10px;
-    height: auto;
-    /* border-bottom: 1px solid #EEEEEE;*/
-  }
-
-  .bottom-link {
-    height: 1px;
-    background-color: #EEEEEE;
-  }
-
-  .options-list {
-    padding-top: 4px;
-    /* padding-top: 10px;*/
-    /*padding-right: 10px;*/
-
-    .options-item {
-      // height: 25px;
-      line-height: 25px;
-      background-color: #ffffff;
-      color: #366aff;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-
-      i {
-        padding-left: 10px;
-      }
-
-      .options-item-text {
-        text-overflow: ellipsis;
-        display: -webkit-box; //使用了flex，需要加
-        overflow: hidden; //超出隐藏
-        word-break: break-all; //纯英文、数字、中文
-        text-overflow: ellipsis; //省略号
-        -webkit-box-orient: vertical; //垂直
-        -webkit-line-clamp: 1; //显示一行
-        white-space: pre-line; //
-      }
-    }
-
-    &.isKnowledgeSummary {
-      background: #EEF1FF;
-      border-radius: 10px;
-      padding: 10px;
-
-      .options-item {
-        background: #EEF1FF;
-      }
-    }
-
-    .tips {
-      width: 131px;
-      height: 22px;
-      background: #366AFF;
-      border-radius: 5px;
-      text-align: center;
-      line-height: 22px;
-      color: #fff;
-      font-size: 12px;
-    }
-
-    .recommend-item {
-      padding: 8px 0;
-    }
-
-    .last-item {
-      padding-top: 8px;
-    }
-
-    .end {
-      border-bottom-left-radius: 25px !important;
-      border-bottom-right-radius: 25px !important;
-    }
-  }
-}
+<template>
+  <div id="answer-radio">
+    <p class="radio-description" v-html="msg.content.description"
+      v-if="msg.content.description && !msg.content.isKnowledgeSummary"></p>
+    <div class="bottom-link" v-if="msg.content.description && !msg.content.isKnowledgeSummary"></div>
+    <div :class="['options-list', msg.content.isKnowledgeSummary ? 'isKnowledgeSummary' : '']">
+      <div v-if="msg.content.isKnowledgeSummary" class="tips">{{$t('dragonCommon.AIrecommends')}}</div>
+      <div v-for="(option, index) in showOptions" class="options-item"
+        :class="index !== msg.content.options.length - 1 ? 'recommend-item' : 'last-item'" :key="msg.nodeId + '_' + index"
+        @click="radioClick(msg, option, index)">
+        <!-- <el-tooltip :disabled="!isMobile" class="item" effect="dark" :content="$t('dragonCommon.clickme')" placement="top">
+          <span class="options-item-name"> {{ getFilteredName(option.name) }}</span>
+        </el-tooltip> -->
+        <div class="tooltip-wrapper">
+          <span class="tooltip-text options-item-name"> {{ getFilteredName(option.name) }}</span>
+          <span v-if="!isMobile" class="tooltip-content">{{$t('dragonCommon.clickme')}}</span>
+        </div>
+        <i class="arsenal_icon arsenalangle-right-solid"></i>
+      </div>
+    </div>
+    <div v-if="showPage" class="switch-page">
+      <span @click="changeActivePage" class="switch-page-btn">{{$t('dragonCommon.refresh')}}</span>
+      <!-- <span @click="showMore" class="switch-page-btn">查看更多</span> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "answerRadio",
+  data() {
+    return {
+      isMobile: false,
+      formatOptions: [],
+      activeIndex: 0,
+      pageSize: 5,
+      showPage: false,
+      showOptions: [],
+    }
+  },
+  props: ['msg'],
+  mounted() {
+    console.log("askbot-dragon: systemLanguage", sessionStorage.getItem("systemLanguage"));
+    this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+    console.log(this.msg, 'msg');
+    // 关键词推荐 前端分页
+    if ((this.msg.id == "recdNodeId" || this.msg.content.groupVisible) && this.msg.content.options.length > this.pageSize) {
+      this.pageSize = this.msg.content.groupNumber || 5;
+      this.formatOptions = this.chunkArray(this.msg.content.options, this.pageSize);
+      this.activeIndex = 0;
+      this.showPage = true;
+    } else {
+      this.formatOptions = [this.msg.content.options];
+      this.activeIndex = 0;
+    }
+    this.showOptions = this.formatOptions[0];
+    this.judgeIsMobile();
+  },
+  methods: {
+    getFilteredName(name) {
+      if (typeof name === 'string') {
+        return name.replace(/<\/?p>/g, '');
+      } else {
+        return name;
+      }
+    },
+    showMore(){
+      if (this.activeIndex == this.formatOptions.length - 2) {
+        this.activeIndex++;
+        this.showPage = false;
+      } else {
+        this.activeIndex++;
+      }
+      this.showOptions = [...this.showOptions.concat(this.formatOptions[this.activeIndex])]
+    },
+    changeActivePage(){
+      if (this.activeIndex >= this.formatOptions.length - 1) {
+        this.activeIndex = 0;
+      } else {
+        this.activeIndex++;
+      }
+      this.showOptions = this.formatOptions[this.activeIndex]
+    },
+    chunkArray(array, size) {
+      let chunks = [];
+      for (let i = 0; i < array.length; i += size) {
+        let chunk = array.slice(i, i + size);
+        chunks.push(chunk);
+      }
+      return chunks;
+    },
+    judgeIsMobile() {
+      let flag = navigator.userAgent.match(
+        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+      );
+      if (flag) {
+        this.isMobile = true;
+      } else {
+        this.isMobile = false;
+      }
+      console.log(this.isMobile, 'this.isMobile');
+    },
+    radioClick(msg, option, index) {
+      let value = option.answerId ? msg.id + '_' + index + '_' + option.value + '_' + option.name + '_' + option.answerId : msg.id + '_' + index + '_' + option.value + '_' + option.name
+      this.$emit('onRadioClick', value, option.name, msg.apiKey, msg.actionCategory, msg.msgId ? msg.msgId : '', option.apiKey)
+    }
+  }
+
+}
+</script>
+<style  lang="less">
+  /* 包裹元素，相对定位，用于定位提示框 */
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  /* 实际要显示的文本内容 */
+  /* 提示框样式 */
+  .tooltip-content {
+    visibility: hidden;
+    background-color: #333;
+    color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 10px;
+    position: absolute;
+    z-index: 1;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  /* 提示框下方的小三角样式（使用伪元素实现） */
+  .tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #333 transparent transparent transparent;
+  }
+  /* 鼠标悬浮在包裹元素上时，显示提示框 */
+  .tooltip-wrapper:hover{
+    .tooltip-content {
+      visibility: visible !important;
+      opacity: 0.8;
+    }
+ }
+</style>
+<style scoped lang="less">
+@import "../assets/less/variables.less";
+
+#answer-radio {
+  .switch-page {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .switch-page-btn {
+      width: 80px;
+      height: 24px;
+      border-radius: 15px;
+      border: solid 1px @border-color-primary;
+      color: @font-primary-accent-color;
+      line-height: 24px;
+      text-align: center;
+      cursor: pointer;
+      font-size: 12px;
+    }
+  }
+  .radio-description {
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    /*padding: 8px 10px 10px 0;*/
+    padding-bottom: 10px;
+    height: auto;
+    /* border-bottom: 1px solid #EEEEEE;*/
+  }
+
+  .bottom-link {
+    height: 1px;
+    background-color: @background-color-link;
+  }
+
+  .options-list {
+    padding-top: 4px;
+    /* padding-top: 10px;*/
+    /*padding-right: 10px;*/
+
+    .options-item {
+      // height: 25px;
+      line-height: 25px;
+      background-color: @background-color-light;
+      color: @font-primary-accent-color;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .options-item-name {
+        flex: auto;
+      }
+
+      i {
+        width: 16px;
+        flex: none;
+        padding-left: 10px;
+      }
+
+      .options-item-text {
+        text-overflow: ellipsis;
+        display: -webkit-box; //使用了flex，需要加
+        overflow: hidden; //超出隐藏
+        word-break: break-all; //纯英文、数字、中文
+        text-overflow: ellipsis; //省略号
+        -webkit-box-orient: vertical; //垂直
+        -webkit-line-clamp: 1; //显示一行
+        white-space: pre-line; //
+      }
+    }
+
+    &.isKnowledgeSummary {
+      background: @background-color-summary;
+      border-radius: 10px;
+      padding: 10px;
+
+      .options-item {
+        background: @background-color-summary;
+      }
+    }
+
+    .tips {
+      width: 131px;
+      height: 22px;
+      background: @primary-color;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 22px;
+      color: @font-primary-light-color;
+      font-size: 12px;
+    }
+
+    .recommend-item {
+      padding: 8px 0;
+    }
+
+    .last-item {
+      padding-top: 8px;
+    }
+
+    .end {
+      border-bottom-left-radius: 25px !important;
+      border-bottom-right-radius: 25px !important;
+    }
+  }
+}
 </style>