@aochuang/client-sdk 1.0.278

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="sdk-chat-wework-control-location" :class="['sdk-chat-wework-control-location--' + type]">
+    <template v-if="type === 'default'">
+      <div class="sdk-chat-wework-control-location__main">
+        <div class="sdk-chat-wework-control-location__head">
+          <h4>{{ title }}</h4>
+          <h4 class="sdk-chat-wework-control-location__title">{{address}}</h4>
+        </div>
+        <div class="sdk-chat-wework-control-location__body">
+          <div v-if="offline" class="sdk-chat-wework-control-location__offline">
+            <div class="sdk-chat-wework-control-location__offline-label">腾讯地图经纬度坐标：</div>
+            <div class="sdk-chat-wework-control-location__offline-value">{{longitude}}、{{latitude}}</div>
+            <div class="sdk-chat-wework-control-location__offline-tips">提示：离线模式无法显示地图</div>
+          </div>
+          <ac-static-map :map-key="mapKey" v-else :enable-link="false" width="280" height="160" :lng="longitude" :lat="latitude" @map-created="handleStaticMapCreated"></ac-static-map>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-wework-control-location__main">
+        <span class="sdk-chat-wework-control-location__icon">
+          <svg t="1752133896251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25831" width="200" height="200"><path d="M512 1012.394667l-271.530667-271.530667a384 384 0 1 1 543.061334 0L512 1012.394667z m211.2-331.861334a298.666667 298.666667 0 1 0-422.4 0L512 891.733333l211.2-211.2zM512 554.666667a85.333333 85.333333 0 1 1 0-170.666667 85.333333 85.333333 0 0 1 0 170.666667z" fill="currentColor" p-id="25832"></path></svg>
+        </span>
+        <span class="sdk-chat-wework-control-location__title">{{address}}</span>
+        <ac-static-map :map-key="mapKey" :enable-link="false" width="52" height="52" :lng="longitude" :lat="latitude" @map-created="handleStaticMapCreated"></ac-static-map>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import AcStaticMap from '@aochuang/common/common/static-map'
+import { parse } from '../../../utils/json'
+
+export default {
+  name: 'SdkChatControlLocation',
+  components: {
+    AcStaticMap
+  },
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default'].includes(value)
+      }
+    },
+    /**
+     * 离线模式
+     * 微聊天面板下载到本地浏览时会没有网络
+    */
+    offline: {
+      type: Boolean,
+      default: false
+    },
+    mapKey: {
+      type: String,
+      required: true
+    },
+    updateChatBoxProp: {
+      type: Function
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    address () {
+      return (this.nextContent.address || '')
+    },
+    title() {
+      return (this.nextContent.title || '')
+    },
+    latitude () {
+      return Number(this.nextContent.latitude)
+    },
+    longitude () {
+      return Number(this.nextContent.longitude)
+    },
+  },
+  methods: {
+    handleStaticMapCreated ({ mapHref }) {
+      this.updateChatBoxProp && this.updateChatBoxProp('href', mapHref)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-location--default {
+  .sdk-chat-wework-control-location__body{
+    line-height: 0;
+  }
+  .sdk-chat-wework-control-location__head{
+    padding: 4px 12px;
+  }
+  .sdk-chat-wework-control-location__title{
+    font-weight: normal;
+    margin: 4px 0;
+    line-height: 1.7em;
+    color: #484848;
+  }
+  .sdk-chat-wework-control-location__description{
+    color: #888;
+    line-height: 1.7em;
+    margin: 4px 0;
+  }
+  .sdk-chat-wework-control-location__offline{
+    height: 160px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.7em;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    &:after{
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: url(./offline-bg.png) no-repeat 0 0 #f3f9f9;
+      background-size: cover;
+      filter: blur(4px)
+    }
+  }
+  .sdk-chat-wework-control-location__offline-value{
+    font-size: 20px;
+  }
+  .sdk-chat-wework-control-location__offline-value,
+  .sdk-chat-wework-control-location__offline-label{
+    padding: 6px 12px;
+    position: relative;
+    z-index: 3;
+  }
+  .sdk-chat-wework-control-location__offline-tips{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 24px;
+    line-height: 24px;
+    padding: 6px 12px;
+    color: #999;
+    z-index: 3;
+  }
+}
+.sdk-chat-wework-control-location__body{
+  overflow: hidden;
+}
+.sdk-chat-wework-control-location--quote {
+  .sdk-chat-wework-control-location__main{
+    display: flex;
+    flex-direction: row;
+    max-width: 360px;
+  }
+  .sdk-chat-wework-control-location__icon{
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+    min-width: 18px;
+    vertical-align: top;
+    margin-top: 2px;
+    color: #999;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .sdk-chat-wework-control-location__title{
+    margin-right: 6px;
+  }
+}
+</style>

package/components/wework-chat-control/red-envelopes/quote-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752136523920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4702" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M380.48 563.925333C398.901333 508.949333 450.826667 469.333333 512 469.333333s113.098667 39.616 131.52 94.592A709.162667 709.162667 0 0 0 821.333333 505.781333V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256a53.333333 53.333333 0 0 0-53.333333 53.333334v303.114666a709.152 709.152 0 0 0 177.813333 58.144z m268.768 64.010667C639.573333 695.072 581.813333 746.666667 512 746.666667c-69.813333 0-127.573333-51.594667-137.248-118.72A773.109333 773.109333 0 0 1 202.666667 576.117333V821.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V576.128a773.12 773.12 0 0 1-172.085333 51.808zM256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m256 597.333334a74.666667 74.666667 0 1 0 0-149.333334 74.666667 74.666667 0 0 0 0 149.333334z" fill="#999" p-id="4703"></path></svg>

package/components/wework-chat-control/red-envelopes/red-envelope.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M907.938909 859.252364A116.782545 116.782545 0 0 1 791.272727 976.174545H223.441455a116.782545 116.782545 0 0 1-116.666182-116.922181V310.085818h87.738182l625.687272-10.496h87.738182z" fill="#EF4108" /><path d="M646.097455 469.527273a141.707636 141.707636 0 0 1-140.264728 103.866182c-115.293091 0-163.560727-107.496727-163.560727-107.496728a570.181818 570.181818 0 0 1-208.244364-84.084363l-27.252363-15.848728v-205.265454a116.014545 116.014545 0 0 1 116.666182-115.339637h567.854545a116.014545 116.014545 0 0 1 116.666182 115.339637v193.885091l-20.363637 12.846545c-4.491636 2.792727-8.866909 5.585455-13.265454 8.285091-68.538182 43.264-122.740364 77.451636-228.235636 93.812364z" fill="#FF6D0B" /><path d="M501.713455 621.242182a181.527273 181.527273 0 1 1 181.08509-181.527273 181.527273 181.527273 0 0 1-181.08509 181.527273z" fill="#FBE945" /><path d="M603.345455 510.906182v-42.565818H525.963636v-50.944h77.381819V374.923636h-21.224728l11.776-47.522909h-43.659636l-11.636364 47.522909h-61.253818l-13.218909-47.522909h-43.892364l13.218909 47.522909h-25.6v42.472728h75.776v50.944h-75.776v42.565818h75.776v64.093091H525.963636v-64.093091z" fill="#FF5D24" /></svg>

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="sdk-wework-control-redpacket" :class="['sdk-wework-control-redpacket--' + type]">
+    <template v-if="type === 'default'">
+      <div class="sdk-wework-control-redpacket__content">
+        <img class="sdk-wework-control-redpacket__icon" width="40px" :src="require('./red-envelope.svg')" alt="红包">
+        <div class="sdk-wework-control-redpacket__main">
+          <div class="sdk-wework-control-redpacket__title" :title="title">{{title}}</div>
+          <div class="sdk-wework-control-redpacket__description">{{description}}</div>
+        </div>
+      </div>
+      <div class="sdk-chat-wework-control-redpacket__addon">
+        <div class="sdk-wework-control-redpacket__type">微红包</div>
+        <div class="sdk-wework-control-redpacket__action">
+          <!-- <template v-if="receivable">
+            <span class="sdk-wework-control-redpacket__action-item" @click="handleReceivableClick">
+              <span class="sdk-wework-control-redpacket__action-item-icon" v-if="loading"><ui-loading size="mini"></ui-loading></span>
+              <span class="sdk-wework-control-redpacket__action-item-text">点击领取</span>
+            </span>
+          </template> -->
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="sdk-wework-control-redpacket__icon"></div>
+      <div class="sdk-wework-control-redpacket__title" :title="title">{{title}}</div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+
+export default {
+  name: 'SdkChatControlRedpacket',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [Object, String]
+    },
+    receivable: {
+      type: Boolean,
+      default: false
+    },
+    receiveMethod: {
+      type: Function
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default'].includes(value)
+      }
+    }
+  },
+  data () {
+    return {
+      loading: false
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    title () {
+      return this.nextContent.wish
+    },
+    description () {
+      return ''
+    },
+    category () {
+      return '微红包'
+    }
+  },
+  methods: {
+    handleReceivableClick () {
+      const rs = this.receiveMethod({
+        content: this.nextContent
+      })
+      if (rs && rs.finally) {
+        this.loading = true
+        rs.finally(() => {
+          this.loading = false
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-wework-control-redpacket--default{
+  background-color: #f79d46;
+  color: #fff;
+  border-radius: 4px;
+  width: 214px;
+  .sdk-wework-control-redpacket__content{
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    box-sizing: content-box;
+    border-bottom: 1px solid rgba(255, 255, 255, .2);
+  }
+  .sdk-wework-control-redpacket__main{
+    flex: 1;
+    min-width: 0;
+    line-height: 1.3em;
+  }
+  .sdk-wework-control-redpacket__title{
+    line-height: 22px;
+    overflow: hidden;
+    margin-top: -12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+  }
+  .sdk-wework-control-redpacket__description{
+    font-size: 12px;
+  }
+  .sdk-chat-wework-control-redpacket__addon{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 12px;
+    justify-content: space-between;
+    height: 24px;
+    line-height: 24px;
+  }
+  .sdk-wework-control-redpacket__type{
+    opacity: 0.7;
+    font-size: 12px;
+  }
+  .sdk-wework-control-redpacket__action-item{
+    font-size: 12px;
+    opacity: 0.7;
+    cursor: pointer;
+    transition: all .25s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .sdk-wework-control-redpacket__action-item-icon {
+    margin-right: 4px;
+  }
+}
+.sdk-wework-control-redpacket--quote {
+  display: flex;
+  flex-direction: row;
+  .sdk-wework-control-redpacket__icon {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+    min-width: 18px;
+    vertical-align: top;
+    margin-top: 2px;
+    color: #999;
+    background: url('./quote-icon.svg') no-repeat 50% 50%;
+    background-size: cover;
+  }
+  .sdk-wework-control-redpacket__title{
+    margin-right: 6px;
+  }
+}
+</style>

package/components/wework-chat-control/share-card/quote-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752135335916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M613.475512 1021.090975H410.530306c-192.501807 0-344.539079 0-344.539079-99.843549v-19.973364c0-187.120111 154.57976-339.331924 344.539079-339.331924h202.939388c189.959319 0 344.544897 152.211813 344.544897 339.331924v19.973364c-0.034908 99.843549-159.717097 99.843549-344.539079 99.843549zM410.495398 621.792414c-156.941888 0-284.648076 125.349878-284.648076 279.44674v19.967546c0 39.964183 164.505352 39.964183 284.648076 39.964182h202.945206c99.45374 0 284.653894 0 284.653894-39.964182v-19.967546c0-154.096861-127.712007-279.44674-284.653894-279.44674H410.495398z m91.343378-79.881821c-150.832936 0-273.483239-120.904889-273.483239-269.521147 0-148.610441 122.656121-269.480421 273.483239-269.480421s273.483239 120.86998 273.483239 269.480421c0 148.616259-122.685212 269.521147-273.483239 269.521147zM288.24654 272.389446c0 115.563919 95.817459 209.630145 213.592236 209.630144 117.786414 0 213.598055-94.031317 213.598055-209.630144S619.619372 62.794209 501.838776 62.794209c-117.774778 0-213.592237 94.037136-213.592236 209.595237z" fill="#999" p-id="5425"></path></svg>

package/components/wework-chat-control/share-card/share-card.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="sdk-chat-wework-control-share-card" :class="['sdk-chat-wework-control-share-card--' + type]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="sdk-chat-wework-control-share-card__main">
+        <div class="sdk-chat-wework-control-share-card__avatar">
+          <sdk-avatar :src="avatar" :radius="false" size="medium"></sdk-avatar>
+        </div>
+        <div class="sdk-chat-wework-control-share-card__fields">
+          <div class="sdk-chat-wework-control-share-card__title">{{name}}</div>
+          <div class="sdk-chat-wework-control-share-card__summary">{{description}}</div>
+        </div>
+      </div>
+      <div class="sdk-chat-wework-control-share-card__foot">
+        <span class="sdk-chat-wework-control-share-card__category">{{category}}</span>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-wework-control-share-card__icon"></div>
+      <div class="sdk-chat-wework-control-share-card__title">{{name}}</div>
+      <sdk-avatar :src="avatar" :radius="false" size="medium"></sdk-avatar>
+    </template>
+  </div>
+</template>
+<script>
+import SdkAvatar from '../../../common/avatar'
+import { parse, parseXml } from '../../../utils/json'
+
+export default {
+  name: 'SdkChatControlShareCard',
+  components: {
+    SdkAvatar
+  },
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [Object, String]
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    }
+  },
+  computed: {
+    nextContent () {
+      let content = parse(this.content)
+      if (content && typeof content !== 'object') {
+        content = parseXml(content)
+        if (content && typeof content === 'object' && content.msg) {
+          content = content.msg
+        }
+      }
+      return content || {}
+    },
+    description () {
+      return this.nextContent.corpName || this.nextContent.alias
+    },
+    name () {
+      return this.nextContent.name
+    },
+    avatar () {
+      return this.nextContent.avatarUrl
+    },
+    category () {
+      return this.nextContent.corpName === '微信' ? '个微名片' : '企业微名片'
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-share-card--default,
+.sdk-chat-wework-control-share-card--thumb{
+  width: 248px;
+  max-width: 100%;
+  line-height: 1.5em;
+  .sdk-chat-wework-control-share-card__main{
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+  }
+  .sdk-chat-wework-control-share-card__fields{
+    flex: 1;
+    min-width: 0;
+    padding-left: 10px;
+  }
+  .sdk-chat-wework-control-share-card__title{
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sdk-chat-wework-control-share-card__summary{
+    color: #888;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 6px;
+  }
+  .sdk-chat-wework-control-share-card__foot{
+    border-top: 1px solid #eee;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px;
+    box-sizing: content-box;
+  }
+  .sdk-chat-wework-control-share-card__category{
+    color: #999;
+    font-size: 12px;
+  }
+}
+.sdk-chat-wework-control-share-card--thumb{
+  border: 1px solid #eee;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.sdk-chat-wework-control-share-card--quote {
+  display: flex;
+  flex-direction: row;
+  .sdk-chat-wework-control-share-card__icon {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 2px;
+    min-width: 18px;
+    vertical-align: top;
+    margin-top: 2px;
+    color: #999;
+    background: url('./quote-icon.svg') no-repeat 50% 50%;
+    background-size: 72%;
+  }
+  .sdk-chat-wework-control-share-card__title{
+    margin-right: 6px;
+  }
+}
+</style>

package/components/wework-chat-control/text/icons/icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1731930969407" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2066" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M0 0h1024v1024H0z" fill="#91adad" p-id="2067"></path>
+<path d="M584.85416126 201.97150659H827.74964523c4.49001789 0 8.18341971 3.62098217 8.18341972 8.1834197V241.87473011c0 4.49001789-3.62098217 8.18341971-8.18341972 8.1834197H584.85416126c-4.49001789 0-8.18341971-3.62098217-8.18341971-8.1834197V210.15492629c0-4.56243754 3.62098217-8.18341971 8.18341971-8.1834197zM576.67074156 384.83110618v-31.79222345c0-4.49001789 3.62098217-8.18341971 8.1834197-8.1834197H827.74964523c4.49001789 0 8.18341971 3.62098217 8.18341972 8.1834197v31.79222345c0 4.49001789-3.62098217 8.18341971-8.18341972 8.18341971H584.85416126c-4.56243754 0-8.18341971-3.69340181-8.18341971-8.18341971zM576.67074156 527.78748226v-31.79222345c0-4.49001789 3.62098217-8.18341971 8.1834197-8.1834197H827.74964523c4.49001789 0 8.18341971 3.62098217 8.18341972 8.1834197v31.79222344c0 4.49001789-3.62098217 8.18341971-8.18341972 8.18341973H584.85416126c-4.56243754 0-8.18341971-3.69340181-8.18341971-8.18341973zM187.55999756 670.74385834v-31.79222346c0-4.49001789 3.62098217-8.18341971 8.1834197-8.1834197H827.74964523c4.49001789 0 8.18341971 3.62098217 8.18341972 8.1834197v31.79222345c0 4.49001789-3.62098217 8.18341971-8.18341972 8.18341972H195.74341725c-4.56243754 0-8.18341971-3.69340181-8.18341969-8.18341972zM187.55999756 813.70023442v-31.79222347c0-4.49001789 3.62098217-8.18341971 8.1834197-8.18341969H827.74964523c4.49001789 0 8.18341971 3.62098217 8.18341972 8.18341969v31.79222347c0 4.49001789-3.62098217 8.18341971-8.18341972 8.18341971H195.74341725c-4.56243754 0-8.18341971-3.62098217-8.18341969-8.18341971zM187.70483684 253.67913198V209.72040844c0-4.49001789 3.62098217-8.18341971 8.18341971-8.18341971h307.78348446c4.49001789 0 8.18341971 3.62098217 8.1834197 8.18341971v44.24840212c0 4.49001789-3.62098217 8.18341971-8.18341969 8.1834197l-307.78348448-0.21725892c-4.56243754-0.07241965-8.18341971-3.69340181-8.1834197-8.25583935z" fill="#ffffff" p-id="9519"></path><path d="M317.33599854 260.7038374h64.81558084v309.59397555c0 8.18341971-6.6626072 14.8460269-14.8460269 14.84602689h-35.19594669c-8.18341971 0-14.8460269-6.6626072-14.84602691-14.8460269V260.7038374z" fill="#ffffff" p-id="9520"></path>
+</svg>

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

@@ -0,0 +1,157 @@
+<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 { html2Escape } from '../../../utils/string'
+
+export default {
+  name: 'SdkChatControlText',
+  components: {
+    UiPopover
+  },
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    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 this.content
+    },
+    text () {
+      return this.nextContent
+    },
+    html () {
+      let content = this.nextContent
+      if (this.formatter) {
+        content = this.formatter({
+          content: this.nextContent
+        })
+      } else {
+        content = html2Escape(content)
+      }
+      if (!content) {
+        return ''
+      }
+      content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, item => {
+        return `<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; /* 限制显示3行 */
+    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__content{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 限制显示3行 */
+    overflow: hidden;
+  }
+}
+.sdk-chat-wework-control-text__main{
+  white-space: pre-wrap;
+  line-height: 1.5em;
+  word-break: break-all;
+  img {
+    vertical-align: top;
+  }
+  a {
+    color: #4387ff;
+    &: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;
+  img {
+    vertical-align: top;
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="sdk-chat-wework-control-unkonw">未知消息类型</div>
+</template>
+<script>
+export default {
+  name: 'SdkChatControlUnkonw',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-unkonw{
+  padding: 10px;
+}
+</style>