@aochuang/client-sdk 1.0.370 → 1.0.372

package/components/wework-chat-control/merge-message/merge-message-panel.vue

@@ -0,0 +1,63 @@
+<template>
+  <ui-dialog v-model="innerVisible" :title="title" size="small" :close-on-click-modal="true">
+    <div class="sdk-wework-chat-control-merge-message__dialog">
+      <div v-for="(message, index) in detailMessages" :key="index" class="sdk-wework-chat-control-merge-message__detail-item">
+        <img v-if="message.avatar" class="sdk-wework-chat-control-merge-message__avatar" :src="message.avatar" alt="">
+        <div v-else class="sdk-wework-chat-control-merge-message__avatar sdk-wework-chat-control-merge-message__avatar--empty">{{ message.sender.slice(0, 1) }}</div>
+        <div class="sdk-wework-chat-control-merge-message__detail-main">
+          <div class="sdk-wework-chat-control-merge-message__detail-head">
+            <span class="sdk-wework-chat-control-merge-message__detail-sender">{{ message.sender }}</span>
+            <span v-if="message.corpName" class="sdk-wework-chat-control-merge-message__detail-corp">@{{ message.corpName }}</span>
+            <span class="sdk-wework-chat-control-merge-message__detail-time">{{ message.time }}</span>
+          </div>
+          <ui-image v-if="message.image" :src="message.image" width="160px" height="160px" fit="cover" :previewable="true"></ui-image>
+          <div v-else class="sdk-wework-chat-control-merge-message__detail-content">{{ message.detail }}</div>
+        </div>
+      </div>
+      <div v-if="!detailMessages.length" class="sdk-wework-chat-control-merge-message__dialog-empty">暂无聊天记录</div>
+    </div>
+  </ui-dialog>
+</template>
+
+<script>
+import { Dialog as UiDialog, Image as UiImage } from '@aochuang/common/components'
+import { parse } from '../../../utils/json'
+import { normalizeMergeMessage } from './util'
+
+export default {
+  name: 'SdkWeworkChatControlMergeMessagePanel',
+  components: { UiDialog, UiImage },
+  props: {
+    value: { type: Boolean, default: false },
+    title: { type: String, default: '聊天记录' },
+    messages: { type: [Array, String, Object], default: () => [] }
+  },
+  computed: {
+    innerVisible: {
+      get () { return this.value },
+      set (value) { this.$emit('input', value) }
+    },
+    detailMessages () {
+      let messages = this.messages
+      if (typeof messages === 'string') messages = parse(messages)
+      if (!Array.isArray(messages)) return []
+      return messages.map(message => normalizeMergeMessage(message || {}))
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.sdk-wework-chat-control-merge-message__dialog { max-height: 560px; overflow-y: auto; padding: 0 24px 24px; }
+.sdk-wework-chat-control-merge-message__detail-item { display: flex; padding: 12px 0; border-bottom: 1px solid #eee; }
+.sdk-wework-chat-control-merge-message__detail-item:last-child { border-bottom: 0; }
+.sdk-wework-chat-control-merge-message__avatar { flex: none; width: 36px; height: 36px; margin-right: 10px; border-radius: 5px; object-fit: cover; }
+.sdk-wework-chat-control-merge-message__avatar--empty { background: #eee; color: #888; font-size: 16px; line-height: 36px; text-align: center; }
+.sdk-wework-chat-control-merge-message__detail-main { flex: 1; min-width: 0; }
+.sdk-wework-chat-control-merge-message__detail-head { display: flex; align-items: baseline; min-height: 20px; line-height: 20px; }
+.sdk-wework-chat-control-merge-message__detail-sender { color: #8b8e98; font-size: 13px; }
+.sdk-wework-chat-control-merge-message__detail-corp { color: #f18b32; font-size: 12px; }
+.sdk-wework-chat-control-merge-message__detail-time { margin-left: auto; padding-left: 12px; color: #9699a3; font-size: 12px; white-space: nowrap; }
+.sdk-wework-chat-control-merge-message__detail-content { padding-top: 4px; color: #222; font-size: 14px; line-height: 22px; white-space: pre-wrap; word-break: break-word; }
+.sdk-wework-chat-control-merge-message__dialog-empty { padding: 24px; color: #999; text-align: center; }
+</style>

package/components/wework-chat-control/merge-message/merge-message.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="sdk-wework-chat-control-merge-message" :class="'sdk-wework-chat-control-merge-message--' + type">
+    <template v-if="type === 'quote'">
+      [聊天记录]{{ title }}
+    </template>
+    <template v-else>
+      <div class="sdk-wework-chat-control-merge-message__card" @click="openDetail">
+        <div class="sdk-wework-chat-control-merge-message__title">{{ title }}</div>
+        <div v-if="messages.length" class="sdk-wework-chat-control-merge-message__list">
+          <div v-for="(message, index) in messages" :key="index" class="sdk-wework-chat-control-merge-message__item">
+            <span class="sdk-wework-chat-control-merge-message__sender">{{ message.sender }}</span>
+            <span class="sdk-wework-chat-control-merge-message__separator">：</span>
+            <span class="sdk-wework-chat-control-merge-message__summary">{{ message.summary }}</span>
+          </div>
+        </div>
+        <div v-else class="sdk-wework-chat-control-merge-message__empty">暂无聊天记录</div>
+        <div class="sdk-wework-chat-control-merge-message__foot">聊天记录</div>
+      </div>
+    </template>
+    <merge-message-panel v-model="dialogVisible" :title="title" :messages="data.messages"></merge-message-panel>
+  </div>
+</template>
+
+<script>
+import { parse } from '../../../utils/json'
+import MergeMessagePanel from './merge-message-panel.vue'
+import { getMessageSummary } from './util'
+
+export default {
+  name: 'SdkWeworkChatControlMergeMessage',
+  components: { MergeMessagePanel },
+  props: {
+    id: { type: String },
+    content: { type: [String, Object] },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    }
+  },
+  data () {
+    return { dialogVisible: false }
+  },
+  computed: {
+    data () {
+      const value = parse(this.content)
+      return value && typeof value === 'object' ? value : {}
+    },
+    title () {
+      return this.data.title || '聊天记录'
+    },
+    messages () {
+      if (!Array.isArray(this.data.messages)) return []
+      return this.data.messages.map(message => ({
+        sender: message && (message.senderName || message.name || message.sender || '未知联系人'),
+        summary: getMessageSummary(message || {})
+      }))
+    }
+  },
+  methods: {
+    openDetail () {
+      if (this.type !== 'quote') this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.sdk-wework-chat-control-merge-message { display: inline-block; max-width: 100%; color: #222; }
+.sdk-wework-chat-control-merge-message__card { width: 248px; max-width: 100%; overflow: hidden; border-radius: 6px; background: #f1f1f3; }
+.sdk-wework-chat-control-merge-message__title { padding: 11px 12px 6px; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
+.sdk-wework-chat-control-merge-message__list { padding: 0 12px 7px; }
+.sdk-wework-chat-control-merge-message__item { display: flex; min-width: 0; color: #96969b; font-size: 12px; line-height: 18px; }
+.sdk-wework-chat-control-merge-message__sender, .sdk-wework-chat-control-merge-message__separator { flex: none; }
+.sdk-wework-chat-control-merge-message__sender { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sdk-wework-chat-control-merge-message__summary { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
+.sdk-wework-chat-control-merge-message__empty { padding: 0 12px 9px; color: #96969b; font-size: 12px; line-height: 18px; }
+.sdk-wework-chat-control-merge-message__foot { height: 27px; padding: 0 12px; border-top: 1px solid rgba(0, 0, 0, .08); color: #999; font-size: 12px; line-height: 27px; }
+.sdk-wework-chat-control-merge-message__card { cursor: pointer; }
+.sdk-wework-chat-control-merge-message--thumb { width: 100%; .sdk-wework-chat-control-merge-message__card { width: 100%; } }
+.sdk-wework-chat-control-merge-message--quote { color: #888; font-size: 12px; }
+</style>

package/components/wework-chat-control/merge-message/util.js

@@ -0,0 +1,59 @@
+import { formatOssPath } from '@aochuang/common/utils/oss'
+import { parse } from '../../../utils/json'
+import { MESSAGE_TYPE } from '../util'
+
+export const TYPE_LABELS = {
+  [MESSAGE_TYPE.IMAGE]: '[图片]', [MESSAGE_TYPE.VOICE]: '[语音]', [MESSAGE_TYPE.VIDEO]: '[视频]',
+  [MESSAGE_TYPE.URLFile]: '[文件]', [MESSAGE_TYPE.URL]: '[链接]', [MESSAGE_TYPE.URLNew]: '[文件]',
+  [MESSAGE_TYPE.CUSTOM_EXPRESSION]: '[表情]', [MESSAGE_TYPE.LOCATION]: '[位置]',
+  [MESSAGE_TYPE.CALLING]: '[语音通话]', [MESSAGE_TYPE.RED_ENVELOPES]: '[红包]',
+  [MESSAGE_TYPE.SHARE_CARD]: '[名片]', [MESSAGE_TYPE.CHANNEL_VIDEO]: '[视频号]',
+  [MESSAGE_TYPE.CHANNEL_VIDEO_LIVE]: '[视频号直播]', [MESSAGE_TYPE.MEETING]: '[会议]'
+}
+
+export const MERGED_TYPE_LABELS = {
+  3: '[图片]', 4: '[语音]', 5: '[视频]', 6: '[文件]', 7: '[位置]', 8: '[链接]',
+  9: '[名片]', 10: '[表情]', 11: '[语音通话]', 12: '[视频通话]'
+}
+
+export function parseMessageContent (content) {
+  const parsed = parse(content)
+  if (parsed && typeof parsed === 'object') {
+    const value = parsed.text || parsed.content || parsed.desc || ''
+    return typeof value === 'string' || typeof value === 'number' ? String(value) : ''
+  }
+  return parsed == null ? '' : String(parsed)
+}
+
+export function getMessageSummary (message) {
+  const type = Number(message && message.contentType)
+  const contentText = parseMessageContent(message && message.content)
+  if (type === 0 || type === 1 || type === 2) return contentText || '[文本]'
+  return MERGED_TYPE_LABELS[type] || TYPE_LABELS[type] || contentText || '[未知消息]'
+}
+
+export function formatMessageTime (timestamp) {
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) return ''
+  const pad = value => String(value).padStart(2, '0')
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+export function normalizeMergeMessage (message) {
+  const item = message || {}
+  const content = parse(item.content)
+  const contentObject = content && typeof content === 'object' ? content : {}
+  const type = Number(item.contentType)
+  const rawTime = item.time || item.sendTime || item.timestamp
+  let timestamp = Number(rawTime)
+  if (timestamp && timestamp < 100000000000) timestamp *= 1000
+  const image = contentObject.imageUrl || contentObject.thumbUrl || contentObject.picUrl || contentObject.resPath
+  return {
+    sender: item.senderName || item.name || item.sender || '未知联系人',
+    corpName: item.corpName || item.corp || '',
+    avatar: item.avatarUrl || item.senderAvatarUrl || item.avatar || '',
+    time: timestamp ? formatMessageTime(timestamp) : '',
+    image: (type === 3 || type === MESSAGE_TYPE.IMAGE) && image ? formatOssPath(image) : '',
+    detail: getMessageSummary(item)
+  }
+}

package/components/wework-chat-control/metting/meeting-video.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M725.333333 392.533333 947.754667 236.8a21.333333 21.333333 0 0 1 33.578666 17.493333v515.413334a21.333333 21.333333 0 0 1-33.578666 17.493333L725.333333 631.466667V810.666667a42.666667 42.666667 0 0 1-42.666666 42.666666H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v179.2z" fill="#fff"/>
+</svg>

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="sdk-chat-wework-control-metting" :class="'sdk-chat-wework-control-metting--' + type">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="sdk-chat-wework-control-metting__card">
+        <div class="sdk-chat-wework-control-metting__main">
+          <div class="sdk-chat-wework-control-metting__info">
+            <div class="sdk-chat-wework-control-metting__title">{{ title }}</div>
+            <div class="sdk-chat-wework-control-metting__description">{{ description }}</div>
+            <div class="sdk-chat-wework-control-metting__initiator" v-if="initiatorText">{{ initiatorText }}</div>
+          </div>
+          <div class="sdk-chat-wework-control-metting__video-icon">
+            <img src="./meeting-video.svg" alt="会议" />
+          </div>
+        </div>
+        <div class="sdk-chat-wework-control-metting__brand">
+          <img src="./enterprise-wechat.png" alt="" />
+          <span>企业微信</span>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-wework-control-metting__quote-icon">
+        <img src="./meeting-video.svg" alt="会议" />
+      </div>
+      <div class="sdk-chat-wework-control-metting__quote-title">{{ title }}</div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+
+export default {
+  name: 'SdkChatControlMetting',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    initiator: {
+      type: String
+    },
+    updateChatBoxProp: {
+      type: Function
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    title () {
+      return this.nextContent.title || '企业微信会议'
+    },
+    description () {
+      return this.nextContent.desc || '会议已开始，请尽快入会'
+    },
+    initiatorText () {
+      return this.initiator ? `发起人：${this.initiator}` : ''
+    },
+    url () {
+      return this.nextContent.url
+    }
+  },
+  created () {
+    if (this.url && this.updateChatBoxProp) {
+      this.updateChatBoxProp('href', this.url)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-metting {
+  display: inline-block;
+  max-width: 100%;
+  color: #222;
+}
+.sdk-chat-wework-control-metting__card {
+  width: 248px;
+  max-width: 100%;
+  padding: 10px 10px 8px;
+  box-sizing: border-box;
+  border-radius: 6px;
+  background-color: #f1f1f3;
+}
+.sdk-chat-wework-control-metting__main {
+  display: flex;
+  align-items: center;
+}
+.sdk-chat-wework-control-metting__info {
+  flex: 1;
+  min-width: 0;
+  min-height: 64px;
+}
+.sdk-chat-wework-control-metting__title {
+  overflow: hidden;
+  color: #222;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 6px;
+}
+.sdk-chat-wework-control-metting__description,
+.sdk-chat-wework-control-metting__initiator {
+  overflow: hidden;
+  color: #8a8a8a;
+  font-size: 12px;
+  line-height: 17px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sdk-chat-wework-control-metting__video-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  margin-left: 10px;
+  border-radius: 3px;
+  background-color: #4b91f1;
+  img {
+    width: 26px;
+    height: 26px;
+  }
+}
+.sdk-chat-wework-control-metting__brand {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  margin-top: 6px;
+  color: #999;
+  font-size: 12px;
+  line-height: 18px;
+  img {
+    width: 15px;
+    height: 15px;
+    margin-right: 4px;
+  }
+}
+.sdk-chat-wework-control-metting--thumb {
+  width: 100%;
+  .sdk-chat-wework-control-metting__card {
+    width: 100%;
+  }
+}
+.sdk-chat-wework-control-metting--quote {
+  display: flex;
+  align-items: center;
+  max-width: 320px;
+  .sdk-chat-wework-control-metting__quote-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    margin-right: 6px;
+    border-radius: 2px;
+    background-color: #4b91f1;
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+  .sdk-chat-wework-control-metting__quote-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

package/components/wework-chat-control/red-envelopes/red-envelopes.vue

@@ -63,10 +63,10 @@ export default {
       return parse(this.content) || {}
     },
     title () {
-      return this.nextContent.wish
+      return this.nextContent.content
     },
     description () {
-      return ''
+      return this.nextContent.receiveText
     },
     category () {
       return '微红包'
@@ -105,6 +105,7 @@ export default {
     flex: 1;
     min-width: 0;
     line-height: 1.3em;
+    padding-top: 6px;
   }
   .sdk-wework-control-redpacket__title{
     line-height: 22px;

package/components/wework-chat-control/text/text-default.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="sdk-chat-wework-control-text" :class="['sdk-chat-wework-control-text--' + type]">
+    <div class="sdk-chat-wework-control-text__main">
+      <template v-if="hasScroll">
+        <ui-popover :value="showPopover" @input="handleShowPopoverChange">
+          <template slot="reference">
+            <div class="sdk-chat-wework-control-text__content" v-html="html" ref="popoverContent"></div>
+          </template>
+          <div class="sdk-chat-wework-control-text__popover" v-html="html" :style="{'width': popoverWidth}"></div>
+        </ui-popover>
+      </template>
+      <template v-else>
+        <div class="sdk-chat-wework-control-text__content" v-html="html" ref="content"></div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import {Popover as UiPopover} from '@aochuang/common/components'
+import {parseWechatEmoji} from '@aochuang/common/common/wechat-emoji'
+import {html2Escape} from '../../../utils/string'
+
+function parseTextContent (content) {
+  if (typeof content !== 'string') return content
+  try {
+    const data = JSON.parse(content)
+    return data && typeof data === 'object' ? data : content
+  } catch (e) {
+    return content
+  }
+}
+
+export default {
+  name: 'SdkChatControlTextDefault',
+  components: {UiPopover},
+  props: {
+    id: {type: String},
+    content: {type: [String, Object]},
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) { return ['quote', 'default', 'thumb'].includes(value) }
+    },
+    formatter: {type: Function}
+  },
+  data () {
+    return {hasScroll: false, showPopover: false, popoverWidth: null}
+  },
+  computed: {
+    nextContent () { return parseTextContent(this.content) },
+    text () {
+      return this.nextContent && typeof this.nextContent === 'object' ? this.nextContent.text || '' : this.nextContent
+    },
+    html () {
+      let content = this.formatter ? this.formatter({content: this.nextContent}) : parseWechatEmoji(html2Escape(String(this.text || '')), false)
+      if (!content) return ''
+      content = String(content).replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, item => `<a href="${item}" target='_blank'>${item}</a>`)
+      return content.trim()
+    }
+  },
+  mounted () {
+    if (this.$refs.content) this.hasScroll = this.$refs.content.scrollHeight > this.$refs.content.clientHeight
+  },
+  methods: {
+    handleShowPopoverChange (visible) {
+      if (this.$refs.popoverContent && visible) this.popoverWidth = this.$refs.popoverContent.offsetWidth + 'px'
+      this.$nextTick(() => { this.showPopover = visible })
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-text--default .sdk-chat-wework-control-text__main { padding: 10px; }
+.sdk-chat-wework-control-text--quote .sdk-chat-wework-control-text__content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  max-width: 420px;
+}
+.sdk-chat-wework-control-text--thumb {
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  padding: 6px 10px;
+}
+.sdk-chat-wework-control-text--thumb .sdk-chat-wework-control-text__content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+.sdk-chat-wework-control-text__main { white-space: pre-wrap; line-height: 1.5em; word-break: break-all; }
+.sdk-chat-wework-control-text__main img { vertical-align: top; }
+.sdk-chat-wework-control-text__main a { color: #4387ff; }
+.sdk-chat-wework-control-text__main a:hover { color: #4387ff; text-decoration: underline; }
+.sdk-chat-wework-control-text__popover { white-space: pre-wrap; line-height: 1.5em; word-break: break-all; padding: 10px; }
+.sdk-chat-wework-control-text__popover img { vertical-align: top; }
+</style>

package/components/wework-chat-control/text/text-quote.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="sdk-chat-wework-control-text-quote" :class="['sdk-chat-wework-control-text-quote--' + type]">
+    <text-default :id="id" :content="mainContent" :type="type" :formatter="formatter"></text-default>
+  </div>
+</template>
+<script>
+import {parse} from '../../../utils/json'
+import {chatControls} from '../index'
+import WeworkChatControlConfigMsg from '../wework-chat-control-config-msg.vue'
+import TextDefault from './text-default.vue'
+
+function parseQuoteContent (content) {
+  if (content && typeof content === 'object') return content
+  const parsed = parse(content, {})
+  if (!parsed || typeof parsed !== 'object' || !parsed.quote || typeof content !== 'string') return parsed
+  // JSON.parse converts large企微 message IDs to imprecise Numbers. Restore the
+  // original digit sequence before it is sent to the detail endpoint.
+  const match = content.match(/"messageId"\s*:\s*(?:"([^"]+)"|([0-9]+))/)
+  if (match) parsed.quote.messageId = match[1] || match[2]
+  return parsed
+}
+
+export default {
+  name: 'SdkChatControlTextQuote',
+  components: {TextDefault, WeworkChatControlConfigMsg},
+  props: {
+    id: {type: String},
+    content: {type: [String, Object]},
+    type: {type: String, default: 'default'},
+    formatter: {type: Function},
+    getQuoteMessage: {type: Function},
+    setChatBoxFootVnode: {type: Function}
+  },
+  data () { return {loading: false, quoteMessageData: null, errorMsg: null} },
+  computed: {
+    contentObject () {
+      return parseQuoteContent(this.content)
+    },
+    quoteInfo () { return this.contentObject.quote || {} },
+    mainContent () {
+      const value = Object.assign({}, this.contentObject)
+      delete value.quote
+      return JSON.stringify(value)
+    },
+    quoteText () { return this.quoteInfo.text || '引用消息' },
+    quoteAuthor () {
+      const message = this.quoteMessageData || {}
+      return this.quoteInfo.sendName || message.userName || message.contactName || message.roomName || this.quoteInfo.sendId || '引用消息'
+    },
+    quoteControl () {
+      return chatControls[this.quoteMessageData && this.quoteMessageData.msgType] || TextDefault
+    },
+    quoteFootComponent () {
+      return {
+        render: h => {
+          const content = [h('div', {class: 'sdk-chat-wework-control-text-quote__author'}, [this.quoteAuthor])]
+          if (this.loading) {
+            content.push(h('div', {class: 'sdk-chat-wework-control-text-quote__status'}, ['引用内容正在加载中...']))
+          } else if (this.quoteMessageData) {
+            content.push(h(WeworkChatControlConfigMsg, {
+              props: {msgData: this.quoteMessageData},
+              scopedSlots: {
+                default: ({configData}) => h(this.quoteControl, {
+                  props: Object.assign({}, configData, {id: this.id + '_quote', content: this.quoteMessageData.content, type: 'quote'})
+                })
+              }
+            }))
+          } else {
+            content.push(h('div', {class: 'sdk-chat-wework-control-text-quote__content'}, [this.quoteText]))
+            if (this.errorMsg) content.push(h('div', {class: 'sdk-chat-wework-control-text-quote__status'}, [this.errorMsg]))
+          }
+          return h('div', {class: 'sdk-chat-wework-control-text-quote__box'}, content)
+        }
+      }
+    }
+  },
+  created () {
+    if (this.setChatBoxFootVnode) this.setChatBoxFootVnode(this.quoteFootComponent)
+    if (!this.getQuoteMessage || !this.quoteInfo.messageId || !this.quoteInfo.sendTime) {
+      this.errorMsg = '未找到引用消息内容，请在手机中确认'
+      return
+    }
+    this.loading = true
+    this.getQuoteMessage({
+      msgId: String(this.quoteInfo.messageId),
+      sendTime: this.quoteInfo.sendTime,
+      content: this.quoteInfo
+    }).then(data => {
+      this.quoteMessageData = data && data.data ? data.data : data
+      if (!this.quoteMessageData) this.errorMsg = '未找到引用消息内容，请在手机中确认'
+      if (this.setChatBoxFootVnode) this.setChatBoxFootVnode(this.quoteFootComponent)
+    }).catch(() => {
+      this.errorMsg = '未找到引用消息内容，请在手机中确认'
+      if (this.setChatBoxFootVnode) this.setChatBoxFootVnode(this.quoteFootComponent)
+    }).finally(() => { this.loading = false })
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-text-quote { min-width: 0; }
+.sdk-chat-wework-control-text-quote__box { margin: 10px 0 0; padding: 7px 8px; background: rgba(0, 0, 0, .06); border-radius: 3px; max-width: 420px; line-height: 1.5em; }
+.sdk-chat-wework-control-text-quote__author { color: #999; word-break: break-all; }
+.sdk-chat-wework-control-text-quote__content, .sdk-chat-wework-control-text-quote__status { white-space: pre-wrap; word-break: break-all; }
+.sdk-chat-wework-control-text-quote__status { color: #999; font-size: 12px; }
+</style>