@aochuang/client-sdk 1.0.278

package/components/wechat-chat-control/voice/voice.vue

@@ -0,0 +1,464 @@
+<template>
+  <div
+    class="sdk-wechat-chat-control-voice"
+    :class="[{'is-play': isPlaying}, 'is-dir-' + dir]"
+  >
+    <div class="sdk-wechat-chat-control-voice__main">
+      <div class="sdk-wechat-chat-control-voice__main-inner">
+        <template v-if="transformVoiceToTextEnable">
+          <span v-if="transformStatus === -1" class="sdk-wechat-chat-control-voice__totext" @click="handleTransformClick" title="语音转文字">
+            <ui-button :disabled="transforming" :plain="true"><ui-icon :name="transformIcon" :size="18"></ui-icon></ui-button>
+          </span>
+          <span v-else-if="transformStatus === 1" class="sdk-wechat-chat-control-voice__refresh" @click="handleRefreshClick" title="刷新">
+            <ui-button :disabled="refreshing" :plain="true"><ui-icon name="refresh-line" :size="18"></ui-icon></ui-button>
+          </span>
+          <slot name="toolbar"></slot>
+        </template>
+        <div class="sdk-wechat-chat-control-voice__player">
+          <ac-voice-player
+            v-if="voiceSrc"
+            ref="player"
+            :id="nextId"
+            :url="voiceSrc"
+            :enable-convert-to-wav="enableConvertToWav"
+            :update-wav-method="updateWavMethod"
+            :seconds="voiceDuration"
+            :allow-download="allowDownload"
+          ></ac-voice-player>
+        </div>
+      </div>
+    </div>
+    <div class="sdk-wechat-chat-control-voice__result" v-if="transformStatus !== -1">
+      <template v-if="transformStatus === 1">
+        <div class="sdk-wechat-chat-control-voice__result-status">
+          <ui-icon name="loading"></ui-icon>转换中
+        </div>
+      </template>
+      <template v-if="transformStatus === 0">
+        <div class="sdk-wechat-chat-control-voice__result-text" v-if="previewTransformContent" v-html="previewTransformContent"></div>
+        <div class="sdk-wechat-chat-control-voice__result-status">
+          <ui-icon name="checkbox-circle-fill"></ui-icon>转换完成
+        </div>
+      </template>
+      <template v-else-if="transformStatus === 2">
+        <div class="sdk-wechat-chat-control-voice__result-text" v-if="transformContent" v-html="transformContent"></div>
+        <div class="sdk-wechat-chat-control-voice__result-status">
+          <ui-icon name="close-circle-fill"></ui-icon>转换失败
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+import { unique } from '../../../utils/string'
+import AcVoicePlayer from '@aochuang/common/common/voice-player'
+
+const ConvertStatusEnum = {
+  NORMAL: -1, // 没有转换
+  ERROR: 2, // 转换失败
+  CONVERTING: 1, // 转换中
+  COMPLETE: 0 // 转换成功
+}
+
+export default {
+  name: 'SdkWechatChatControlVoice',
+  inject: ['AcVoice'],
+  components: {
+    AcVoicePlayer
+  },
+  props: {
+    id: {
+      type: String
+    },
+    dir: {
+      type: String,
+      default: 'left'
+    },
+    content: {
+      type: [String, Object]
+    },
+    /**
+     * 支持两种方式，第一种纯文本，第二种数组，如
+     * [{
+     *    end: 0,
+     *    spk: 0,
+     *    start: 0,
+     *    text: '一段话'
+     * }]
+    */
+    convertContent: {
+      type: [String, Array]
+    },
+    convertStatus: {
+      type: Number
+    },
+    formatter: {
+      type: Function
+    },
+    allowDownload: {
+      type: Boolean,
+      default: true
+    },
+    transformVoiceToTextEnable: {
+      type: Boolean,
+      default: false
+    },
+    transformVoiceToTextMethod: {
+      type: Function
+    },
+    getVoiceToTextResultMethod: {
+      type: Function
+    },
+    enableConvertToWav: {
+      type: Boolean,
+      default: true
+    },
+    updateWavMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      transformStatus: typeof this.convertStatus === 'number' ? this.convertStatus : ConvertStatusEnum.NORMAL,
+      playRate: 1,
+      transforming: false,
+      transformContent: this.convertContent,
+      refreshing: false
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    voiceSrc () {
+      let url = this.nextContent.url || this.nextContent.resUrl
+      return url
+    },
+    nextId () {
+      return this.id || unique()
+    },
+    voiceDuration () {
+      return this.nextContent.durationMs ? this.nextContent.durationMs / 1000 : null
+    },
+    isPlaying () {
+      return this.AcVoice.isPlaying(this.id)
+    },
+    transformIcon () {
+      return this.transforming ? 'loading' : 'voice-text-line'
+    },
+    innerTransformContent () {
+      if (this.transformStatus === 0 && this.formatter) {
+        const content = this.formatter({
+          content: this.transformContent
+        })
+        if (!content) {
+          return ''
+        }
+        return content
+      } else {
+        return this.transformContent
+      }
+    },
+    previewTransformContent () {
+      if (Array.isArray(this.transformContent)) {
+        return this.transformContent.map(v => v.text || v.text_seg).join('\n')
+      } else {
+        return this.innerTransformContent
+      }
+    }
+  },
+  methods: {
+    handleTransformClick () {
+      if (this.transformVoiceToTextMethod) {
+        this.transforming = true
+        this.transformStatus = ConvertStatusEnum.CONVERTING
+        return this.transformVoiceToTextMethod().then((rs) => {
+          this.transforming = false
+          this.loopGetVoiceToTextResult()
+        }, () => {
+          this.transforming = false
+          this.transformStatus = ConvertStatusEnum.ERROR
+        })
+      }
+    },
+    handleRefreshClick () {
+      this.refreshing = true
+      return this.getVoiceToTextResult().then((rs) => {
+        this.refreshing = false
+      }, () => {
+        this.refreshing = false
+      })
+    },
+    updateTransformContent (result) {
+      if (!result) {
+        return
+      }
+      if (result.code === 0) {
+        this.transformStatus = ConvertStatusEnum.COMPLETE
+        if (result.sentences) {
+          this.transformContent = (result.sentences || []).map(v => v.text || v.text_seg).join('\n')
+        } else {
+          this.transformContent = result.text
+        }
+      } else if (result.code === 1) {
+        this.transformStatus = ConvertStatusEnum.CONVERTING
+        this.transformContent = '转换中'
+      } else if (result.code === 2) {
+        this.transformStatus = ConvertStatusEnum.ERROR
+        this.transformContent = result.errMsg
+      }
+    },
+    getVoiceToTextResult () {
+      return new Promise((resolve, reject) => {
+        if (!this.getVoiceToTextResultMethod) {
+          return reject()
+        }
+        return this.getVoiceToTextResultMethod().then((rs) => {
+          if (typeof rs === 'string') {
+            rs = parse(rs)
+          }
+          if (rs) {
+            this.updateTransformContent(rs)
+          }
+          resolve(rs)
+        }, reject)
+      })
+    },
+    loopGetVoiceToTextResult () {
+      clearTimeout(this._timer)
+      if (this.transformStatus !== ConvertStatusEnum.CONVERTING) {
+        return
+      }
+      this._timer = setTimeout(() => {
+        this.getVoiceToTextResult().then(() => {
+          this.loopGetVoiceToTextResult()
+        })
+      }, 1000 * 10)
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
+  }
+}
+</script>
+<style lang="less">
+.sdk-wechat-chat-control-voice{
+  &.is-play{
+    .sdk-wechat-chat-control-voice-icon__main{
+      -webkit-animation: 1s sdk-wechat-chat-control-voice-icon-animate1 infinite;
+      animation: 1s sdk-wechat-chat-control-voice-icon-animate1 infinite;
+      &:after{
+        -webkit-animation: 1s sdk-wechat-chat-control-voice-icon-animate2 infinite;
+        animation: 1s sdk-wechat-chat-control-voice-icon-animate2 infinite;
+      }
+    }
+    &.is-percentage-active{
+      .sdk-wechat-chat-control-voice__percentage{
+        display: block;
+      }
+      &.is-dir-left{
+        .ac-wechat-record-panel-chat-box__arrow-main{
+          background-color: #F0F8FC!important;
+        }
+      }
+    }
+  }
+  &.is-dir-left{
+    text-align: left;
+    .sdk-wechat-chat-control-voice__icon{
+      transform: rotate(135deg);
+      float: left;
+      margin-right: 4px;
+    }
+    .sdk-wechat-chat-control-voice__main-inner{
+      flex-direction: row-reverse;
+    }
+    .sdk-wechat-chat-control-voice__tools{
+      right: 3px;
+    }
+    .sdk-wechat-chat-control-voice__percentage{
+      background-color: #F0F8FC;
+    }
+  }
+  &.is-dir-right{
+    text-align: right;
+    .sdk-wechat-chat-control-voice__tools{
+      left: 3px;
+    }
+    .sdk-wechat-chat-control-voice__percentage{
+      background-color: rgba(0,0,0,.1);
+    }
+  }
+}
+.sdk-wechat-chat-control-voice__result{
+  border-radius: 3px;
+  max-width: 282px;
+  margin-top: 6px;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.sdk-wechat-chat-control-voice__result-text{
+  padding: 10px 12px 0;
+  text-align: left;
+  max-height: 360px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+.sdk-wechat-chat-control-voice__result-status{
+  padding: 6px 12px;
+  color: #888;
+  font-size: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .ui-icon{
+    margin-right: 4px;
+  }
+}
+.sdk-wechat-chat-control-voice__main{
+  display: inline-block;
+  vertical-align: top;
+}
+.sdk-wechat-chat-control-voice__main-inner{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sdk-wechat-chat-control-voice__totext{
+  margin-left: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+.sdk-wechat-chat-control-voice__refresh{
+  margin-left: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+.sdk-wechat-chat-control-voice__box{
+  cursor: pointer;
+  padding: 8px 12px;
+  line-height: 24px;
+}
+.sdk-wechat-chat-control-voice__icon{
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  vertical-align: top;
+  overflow: hidden;
+  transform: rotate(-45deg);
+  margin-top: 6px;
+  position: relative;
+  z-index: 3;
+}
+.sdk-wechat-chat-control-voice__time{
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  z-index: 3;
+}
+.sdk-wechat-chat-control-voice__percentage{
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  transition: width .1s;
+}
+.sdk-wechat-chat-control-voice-icon__main{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #404040;
+  border-radius: 50%;
+  position: relative;
+  &:after{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #404040;
+    border-radius: 50%;
+  }
+  &:before{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: #404040;
+    border-radius: 50%;
+  }
+}
+.sdk-wechat-chat-control-voice__tools{
+  position: absolute;
+  top: 8px;
+  bottom: 0;
+  z-index: 6;
+  line-height: 1;
+}
+.sdk-wechat-chat-control-voice__menu{
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+}
+.sdk-wechat-chat-control-voice__menu-item{
+  height: 30px;
+  line-height: 30px;
+  padding: 0 24px 0 12px;
+  cursor: pointer;
+  transition: all .3s;
+  position: relative;
+  &.is-active{
+    background-color: #F0F8FC;
+    color: #00A0EB;
+    &:after{
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) rotate(-45deg);
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 4px;
+      border: 1px solid #00A0EB;
+      border-top: 0;
+      border-right: 0;
+      margin-top: -1px;
+    }
+  }
+  &:hover{
+    background-color: rgba(0,0,0,.06);
+  }
+}
+@-webkit-keyframes sdk-wechat-chat-control-voice-icon-animate1 {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: transparent;
+  }
+  100% {
+    border-color: #404040;
+  }
+}
+
+@-webkit-keyframes sdk-wechat-chat-control-voice-icon-animate2 {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #404040;
+  }
+  100% {
+    border-color: #404040;
+  }
+}
+</style>

package/components/wechat-chat-control/wechat-chat-control-config-item.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+    name: 'SdkWecahtChatControlConfigItem',
+    functional: true,
+    inject: {
+        SdkWechatChatControlConfig: {
+            default: null
+        }
+    },
+    props: {
+        /**
+         * 消息类型
+        */
+        msgType: {
+            type: [Number, String]
+        }
+    },
+    render (h, c) {
+        return c.scopedSlots.default({
+            configData: c.injections.SdkWechatChatControlConfig ? c.injections.SdkWechatChatControlConfig.getControlConfig(c.props.msgType) : null
+        })
+    }
+}
+</script>

package/components/wechat-chat-control/wechat-chat-control-config-msg.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+    name: 'SdkWecahtChatControlConfigMsg',
+    functional: true,
+    inject: ['SdkWechatChatControlConfig'],
+    props: {
+        /**
+         * 标准的客服端消息数据
+        */
+        msgData: {
+            type: Object,
+            required: true
+        }
+    },
+    render (h, c) {
+        return c.scopedSlots.default({
+            configData: c.injections.SdkWechatChatControlConfig.getMessageConfig(c.props.msgData)
+        })
+    }
+}
+</script>

package/components/wechat-chat-control/wechat-chat-control-config.vue

@@ -0,0 +1,57 @@
+<script>
+export default {
+    name: 'SdkWechatChatControlConfig',
+    provide () {
+        return {
+            SdkWechatChatControlConfig: this
+        }
+    },
+    inject: {
+        // 可以继承上级的
+        SdkWechatChatControlConfig: {
+            default: null
+        }
+    },
+    props: {
+        /**
+         * 这个是组件级别的配置，wechatChatPanel是消息级别的配置，后面是消息级别配置覆盖组件级别的配置
+         * {
+         *      1: {
+         *          formatter () {
+         *              xxx
+         *          }
+         *      }
+         * }
+        */
+        controlConfig: {
+            type: Object
+        },
+        /**
+         * 消息级别配置，消息级别配置会覆盖控件级别配置
+         * 主要是项目里面有几种实用场景，第一种聊天记录，第二种风控，第三种消息预览
+        */
+        messageConfig: {
+            type: Function
+        }
+    },
+    render () {
+        return this.$slots.default
+    },
+    methods: {
+        getControlConfig (msgType) {
+            if (!this.controlConfig) {
+                return
+            }
+            return this.controlConfig[msgType]
+        },
+        getMessageConfig (msgData) {
+            if (!this.messageConfig) {
+                return
+            }
+            return this.messageConfig({
+                item: msgData
+            })
+        }
+    }
+}
+</script>

package/components/wechat-chat-panel/chat-panel-chat-status/chat-panel-chat-status.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="sdk-wechat-panel-chat-status">
+        <!-- sendStatus：0成功，1发送中，2失败，3超时 -->
+        <template v-if="data.sendStatus === 1">
+            <ui-loading size="mini"></ui-loading>
+        </template>
+        <template v-else-if="data.sendStatus === 2">
+            <bi-tooltip :text="data.resultMsg || '发送失败'">
+                <span class="sdk-wechat-panel-chat-status__error">
+                    <svg t="1752112836990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25812" width="200" height="200"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m0-486.997334L391.338667 330.965333 330.965333 391.338667 451.669333 512l-120.704 120.661333 60.373334 60.373334L512 572.330667l120.661333 120.704 60.373334-60.373334L572.330667 512l120.704-120.661333-60.373334-60.373334L512 451.669333z" fill="currentColor" p-id="25813"></path></svg>
+                </span>
+            </bi-tooltip>
+        </template>
+        <template v-else-if="data.sendStatus === 3">
+            <bi-tooltip :text="data.resultMsg || '发送超时'">
+                <span class="sdk-wechat-panel-chat-status__error">
+                    <svg t="1752112888507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25980" width="200" height="200"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m42.666667-426.666667V298.666667h-85.333334v298.666666h256v-85.333333h-170.666666z" fill="currentColor" p-id="25981"></path></svg>
+                </span>
+            </bi-tooltip>
+        </template>
+        <template v-if="data.recalled">
+            <bi-tooltip :text="'消息已撤回'">
+                <span class="sdk-wechat-panel-chat-status__error" style="opacity: .6;">
+                    <svg t="1752113091390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30696" width="200" height="200"><path d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m-50.261333 255.317333c-7.765333-39.338667-39.893333-15.36-39.893334-15.36l-213.76 192c-47.616 34.944-2.730667 60.458667-2.730666 60.458667l211.541333 190.933333c42.410667 33.066667 45.866667-17.749333 45.866667-17.749333v-86.442667c215.125333-70.144 303.36 208.341333 303.36 208.341334 7.936 15.957333 13.824 0 13.824 0C862.933333 368.682667 461.952 348.586667 461.952 348.586667z" fill="currentColor" p-id="30697"></path></svg>
+                </span>
+            </bi-tooltip>
+        </template>
+    </div>
+</template>
+<script>
+import { Tooltip as BiTooltip } from '@aochuang/common/common'
+import { Loading as UiLoading, Icon as UiIcon } from '@aochuang/common/components'
+
+export default {
+    name: 'SdkChatPanelChatStatus',
+    components: {
+        BiTooltip,
+        UiIcon,
+        UiLoading
+    },
+    props: {
+        data: {
+            type: Object,
+            required: true
+        },
+        updateChatBoxProp: {
+            type: Function
+        }
+    }
+}
+</script>
+<style lang="less">
+.sdk-wechat-panel-chat-status__error{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 12px;
+  color: #c00;
+  width: 16px;
+  height: 16px;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+.sdk-wechat-panel-chat-status{
+  margin: 0 6px;
+}
+</style>