@aochuang/client-sdk 1.0.278

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

@@ -0,0 +1,464 @@
+<template>
+  <div
+    class="sdk-chat-wework-control-voice"
+    :class="[{'is-play': isPlaying}, 'is-dir-' + dir]"
+  >
+    <div class="sdk-chat-wework-control-voice__main">
+      <div class="sdk-chat-wework-control-voice__main-inner">
+        <template v-if="transformVoiceToTextEnable">
+          <span v-if="transformStatus === -1" class="sdk-chat-wework-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-chat-wework-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-chat-wework-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-chat-wework-control-voice__result" v-if="transformStatus !== -1">
+      <template v-if="transformStatus === 1">
+        <div class="sdk-chat-wework-control-voice__result-status">
+          <ui-icon name="loading"></ui-icon>转换中
+        </div>
+      </template>
+      <template v-if="transformStatus === 0">
+        <div class="sdk-chat-wework-control-voice__result-text" v-if="previewTransformContent" v-html="previewTransformContent"></div>
+        <div class="sdk-chat-wework-control-voice__result-status">
+          <ui-icon name="checkbox-circle-fill"></ui-icon>转换完成
+        </div>
+      </template>
+      <template v-else-if="transformStatus === 2">
+        <div class="sdk-chat-wework-control-voice__result-text" v-if="transformContent" v-html="transformContent"></div>
+        <div class="sdk-chat-wework-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 : 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-chat-wework-control-voice{
+  &.is-play{
+    .sdk-chat-wework-control-voice-icon__main{
+      -webkit-animation: 1s sdk-chat-wework-control-voice-icon-animate1 infinite;
+      animation: 1s sdk-chat-wework-control-voice-icon-animate1 infinite;
+      &:after{
+        -webkit-animation: 1s sdk-chat-wework-control-voice-icon-animate2 infinite;
+        animation: 1s sdk-chat-wework-control-voice-icon-animate2 infinite;
+      }
+    }
+    &.is-percentage-active{
+      .sdk-chat-wework-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-chat-wework-control-voice__icon{
+      transform: rotate(135deg);
+      float: left;
+      margin-right: 4px;
+    }
+    .sdk-chat-wework-control-voice__main-inner{
+      flex-direction: row-reverse;
+    }
+    .sdk-chat-wework-control-voice__tools{
+      right: 3px;
+    }
+    .sdk-chat-wework-control-voice__percentage{
+      background-color: #F0F8FC;
+    }
+  }
+  &.is-dir-right{
+    text-align: right;
+    .sdk-chat-wework-control-voice__tools{
+      left: 3px;
+    }
+    .sdk-chat-wework-control-voice__percentage{
+      background-color: rgba(0,0,0,.1);
+    }
+  }
+}
+.sdk-chat-wework-control-voice__result{
+  border-radius: 3px;
+  max-width: 282px;
+  margin-top: 6px;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.sdk-chat-wework-control-voice__result-text{
+  padding: 10px 12px 0;
+  text-align: left;
+  max-height: 360px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+.sdk-chat-wework-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-chat-wework-control-voice__main{
+  display: inline-block;
+  vertical-align: top;
+}
+.sdk-chat-wework-control-voice__main-inner{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sdk-chat-wework-control-voice__totext{
+  margin-left: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+.sdk-chat-wework-control-voice__refresh{
+  margin-left: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+.sdk-chat-wework-control-voice__box{
+  cursor: pointer;
+  padding: 8px 12px;
+  line-height: 24px;
+}
+.sdk-chat-wework-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-chat-wework-control-voice__time{
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  z-index: 3;
+}
+.sdk-chat-wework-control-voice__percentage{
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
+  transition: width .1s;
+}
+.sdk-chat-wework-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-chat-wework-control-voice__tools{
+  position: absolute;
+  top: 8px;
+  bottom: 0;
+  z-index: 6;
+  line-height: 1;
+}
+.sdk-chat-wework-control-voice__menu{
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+}
+.sdk-chat-wework-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-chat-wework-control-voice-icon-animate1 {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: transparent;
+  }
+  100% {
+    border-color: #404040;
+  }
+}
+
+@-webkit-keyframes sdk-chat-wework-control-voice-icon-animate2 {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #404040;
+  }
+  100% {
+    border-color: #404040;
+  }
+}
+</style>

package/components/wework-chat-panel/chat-panel-controls/company-card/company-card.vue

@@ -0,0 +1,35 @@
+<script>
+import SdkChatPanelBox from '../../../chat-panel/chat-panel-box'
+import { companyCard } from '../../../wework-chat-control'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsCompanyCard',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(SdkChatPanelBox, {
+      props: {
+        dir: props.dir,
+        data: props.data,
+        fetchUserMethod: props.fetchUserMethod
+      }
+    }, [h(companyCard, {
+      props: {
+        data: props.data
+      }
+    })])
+  }
+}
+</script>

package/components/wework-chat-panel/chat-panel-controls/expression/expression.vue

@@ -0,0 +1,36 @@
+<script>
+import { expression } from '../../../wework-chat-control'
+import SdkChatPanelBox from '../../../chat-panel/chat-panel-box'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsExpression',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(SdkChatPanelBox, {
+      props: {
+        dir: props.dir,
+        data: props.data,
+        fetchUserMethod: props.fetchUserMethod
+      }
+    }, [h(expression, {
+      props: {
+        data: props.data
+      },
+      key: c.data.key
+    })])
+  }
+}
+</script>

package/components/wework-chat-panel/chat-panel-controls/file-url/file-url.vue

@@ -0,0 +1,35 @@
+<script>
+import SdkChatPanelBox from '../../../chat-panel/chat-panel-box'
+import { fileUrl } from '../../../wework-chat-control'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsFileUrl',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(SdkChatPanelBox, {
+      props: {
+        dir: props.dir,
+        data: props.data,
+        fetchUserMethod: props.fetchUserMethod
+      }
+    }, [h(fileUrl, {
+      props: {
+        content: props.data.content
+      }
+    })])
+  }
+}
+</script>

package/components/wework-chat-panel/chat-panel-controls/image/image.vue

@@ -0,0 +1,36 @@
+<script>
+import { image } from '../../../wework-chat-control'
+import SdkChatPanelBox from '../../../chat-panel/chat-panel-box'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsImage',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(SdkChatPanelBox, {
+      props: {
+        dir: props.dir,
+        data: props.data,
+        fetchUserMethod: props.fetchUserMethod
+      }
+    }, [h(image, {
+      props: {
+        data: props.data
+      },
+      key: c.data.key
+    })])
+  }
+}
+</script>

package/components/wework-chat-panel/chat-panel-controls/index.js

@@ -0,0 +1,35 @@
+import text from './text/text.vue'
+import link from './link/link.vue'
+import companyCard from './company-card/company-card.vue'
+import video from './video/video.vue'
+import image from './image/image.vue'
+import unkonw from './unkonw/unkonw.vue'
+import expression from './expression/expression.vue'
+import voice from './voice/voice.vue'
+import jxSysText from './jx-sys-text/jx-sys-text.vue'
+import fileUrl from './file-url/file-url.vue'
+import location from './location/location.vue'
+
+export default {
+  0: text,
+  2: text,
+  14: image,
+  101: image,
+  // '49': link,
+  22: video,
+  23: video,
+  103: video,
+  29: expression,
+  104: expression,
+  16: voice,
+  40: voice,
+  1011: jxSysText,
+  1022: jxSysText,
+  41: companyCard,
+  13: fileUrl,
+  15: fileUrl,
+  20: fileUrl,
+  102: fileUrl,
+  6: location,
+  unkonw
+}

package/components/wework-chat-panel/chat-panel-controls/jx-sys-text/jx-sys-text.vue

@@ -0,0 +1,28 @@
+<script>
+import { jxSysText } from '../../../wework-chat-control'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsJxSysText',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(jxSysText, {
+      props: {
+        content: props.data.content
+      }
+    })
+  }
+}
+</script>

package/components/wework-chat-panel/chat-panel-controls/link/link.vue

@@ -0,0 +1,35 @@
+<script>
+import SdkChatPanelBox from '../../../chat-panel/chat-panel-box'
+import { link } from '../../../wework-chat-control'
+
+export default {
+  name: 'SdkWeworkChatPanelControlsLink',
+  functional: true,
+  props: {
+    dir: {
+      type: String
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    const { props } = c
+    return h(SdkChatPanelBox, {
+      props: {
+        dir: props.dir,
+        data: props.data,
+        fetchUserMethod: props.fetchUserMethod
+      }
+    }, [h(link, {
+      props: {
+        data: props.data
+      }
+    })])
+  }
+}
+</script>