@aochuang/client-sdk 1.0.278

package/components/wework-chat-control/url/icons/link.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="1752134896820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3164" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M721.75097682 628.5429685L675.14697266 581.87304662l46.60400416-46.6040034a164.79492162 164.79492162 0 1 0-233.05297852-233.05297851L442.09399414 348.85302734 395.4570315 302.24902318 442.12695338 255.64501978a230.71289088 230.71289088 0 0 1 326.29394531 326.29394532l-46.6369634 46.6040034z m-93.20800832 93.20800832l-46.63696264 46.6040034a230.71289088 230.71289088 0 0 1-326.29394531-326.29394532l46.63696263-46.6040034L348.85302734 442.12695338l-46.60400416 46.6040034a164.79492162 164.79492162 0 1 0 233.05297852 233.05297851l46.60400416-46.6040034 46.63696264 46.6040034z m-23.33496094-349.59594778l46.6369634 46.6369634-233.05297852 233.02001928-46.6369634-46.60400416 233.05297852-233.02001928z" fill="#999" p-id="3165"></path></svg>

package/components/wework-chat-control/url/icons/video.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="1731930511288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1740" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M0 0h1024v1024H0z" fill="#3664f8" p-id="1741"></path>
+<path d="M363.05881933 813.70136597c-38.19004631 0-76.38009265-15.27601854-106.93212971-45.82805559-61.10407412-61.10407412-61.10407412-156.57918994-1e-8-217.68326407l80.1990973-80.19909727 53.46606485 53.46606485-80.19909728 80.19909729c-30.55203706 30.55203706-30.55203706 76.38009265 0 106.93212972 30.55203706 30.55203706 76.38009265 30.55203706 106.9321297 0l106.93212971-106.93212972c15.27601854-15.27601854 22.9140278-34.3710417 22.91402781-53.46606487S538.73303243 512 527.27601854 496.72398146L485.26696757 458.53393514l53.46606486-53.46606484 42.00905096 42.00905095C607.47511582 473.80995369 622.75113434 512 622.75113434 554.00905096c0 42.00905096-15.27601854 80.19909727-45.82805558 106.93212971l-106.93212972 106.93212972C443.25791661 798.42534744 401.24886566 813.70136597 363.05881933 813.70136597z" fill="#ffffff" p-id="9488"></path><path d="M485.26696757 618.93212971L443.25791661 580.74208339c-61.10407412-61.10407412-61.10407412-156.57918994 0-217.68326406l106.9321297-106.93212971c61.10407412-61.10407412 156.57918994-61.10407412 217.68326407 0 61.10407412 61.10407412 61.10407412 156.57918994 1e-8 217.68326406l-80.1990973 80.19909728-53.46606485-53.46606485 80.19909728-80.19909729c30.55203706-30.55203706 30.55203706-76.38009265 0-106.93212972-30.55203706-30.55203706-80.19909727-30.55203706-106.9321297 0L496.72398146 416.52488418c-30.55203706 30.55203706-30.55203706 76.38009265 1e-8 106.93212971l42.00905096 42.00905097L485.26696757 618.93212971z" fill="#ffffff" p-id="9489"></path>
+</svg>

package/components/wework-chat-control/url/miniprogram.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="1602418855817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6268" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M712.388923 10.24A268.918154 268.918154 0 0 0 442.683077 279.788308v408.49723c0 74.830769-61.44 136.270769-136.192 136.27077-74.830769 0-138.870154-61.44-138.870154-138.948923 0-77.430154 61.44-136.113231 136.270769-136.113231a66.166154 66.166154 0 0 0 66.717539-66.796308 66.166154 66.166154 0 0 0-66.796308-66.717538A268.366769 268.366769 0 0 0 44.898462 675.052308C39.384615 824.556308 154.308923 949.956923 303.812923 955.470769a268.918154 268.918154 0 0 0 269.705846-269.784615V277.267692c0-74.830769 61.44-136.192 136.192-136.192 74.752 0 136.113231 61.44 136.113231 136.192 0 74.830769-61.44 136.192-133.435077 136.192H709.710769a66.166154 66.166154 0 0 0-66.796307 66.717539 66.166154 66.166154 0 0 0 66.796307 66.796307 268.918154 268.918154 0 0 0 269.627077-269.705846 264.428308 264.428308 0 0 0-267.027692-267.027692z" p-id="6269" fill="#999"></path></svg>

package/components/wework-chat-control/url/url-file.vue

@@ -0,0 +1,37 @@
+<script>
+import fileUrl from '../file-url/file-url.vue'
+
+export default {
+  name: 'SdkChatPanelControlsUrlFile',
+  functional: true,
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [Object, String]
+    },
+    type: {
+      type: String
+    },
+    updateChatBoxProp: {
+      type: Function
+    },
+    allowDownload: {
+      type: [Boolean, Function],
+      default: false
+    },
+    downloadMethod: {
+      type: Function
+    },
+    cancelDownloadMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    return h(fileUrl, {
+      props: c.props
+    })
+  }
+}
+</script>

package/components/wework-chat-control/url/url-link.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="sdk-wechat-control-url-link" :class="['sdk-wechat-control-url-link--' + type, {'is-border': border}]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="sdk-wechat-control-url-link__inner">
+        <div class="sdk-wechat-control-url-link__main">
+          <div class="sdk-wechat-control-url-link__info">
+            <strong class="sdk-wechat-control-url-link__title">{{title}}</strong>
+            <div class="sdk-wechat-control-url-link__description">{{description || url}}</div>
+          </div>
+          <div class="sdk-wechat-control-url-link__cover" v-if="cover" :style="{'background-image': `url(${cover})`}"></div>
+        </div>
+        <div class="sdk-wechat-control-url-link__foot">
+          超链接
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <span class="sdk-wechat-control-url-link__title">{{title}}</span>
+      <div class="sdk-wechat-control-url-link__cover" v-if="cover" :style="{'background-image': `url(${cover})`}"></div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'SdkWecahtControlUrlLink',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    updateChatBoxProp: {
+      type: Function
+    }
+  },
+  inject: {
+    SdkChatPanelBox: {
+      default: null
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content)
+    },
+    title () {
+      return this.nextContent.title
+    },
+    description () {
+      return this.nextContent.desc
+    },
+    cover () {
+      return formatOssPath(this.nextContent.thumbPath) || require('./icons/link.svg')
+    },
+    url () {
+      return this.nextContent.url
+    },
+    border () {
+      if (this.type === 'quote') {
+        return false
+      }
+      return !this.SdkChatPanelBox
+    }
+  },
+  created () {
+    if (this.url && this.updateChatBoxProp) {
+      this.updateChatBoxProp('href', this.url)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-wechat-control-url-link{
+  display: inline-block;
+  max-width: 100%;
+  &.is-border {
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+}
+.sdk-wechat-control-url-link--default,
+.sdk-wechat-control-url-link--thumb{
+  word-break: break-all;
+  line-height: 1.5em;
+  border-radius: 4px;
+  .sdk-wechat-control-url-link__inner{
+    max-width: 100%;
+    width: 248px;
+    color: #484848;
+  }
+  .sdk-wechat-control-url-link__main{
+    display: flex;
+    flex-direction: row;
+    padding-top: 3px;
+    padding: 6px 12px;
+    line-height: 1.5em;
+  }
+  .sdk-wechat-control-url-link__description{
+    color: #999;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+  .sdk-wechat-control-url-link__info{
+    flex: 1;
+    min-width: 0;
+  }
+  .sdk-wechat-control-url-link__title{
+    display: block;
+    margin-bottom: 4px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; /* 限制显示3行 */
+    overflow: hidden;
+  }
+  .sdk-wechat-control-url-link__cover{
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-left: 12px;
+    margin-top: 12px;
+    background-color: rgba(0,0,0,.1);
+  }
+  .sdk-wechat-control-url-link__foot{
+    padding: 0 12px;
+    border-top: 1px solid #eee;
+    color: #999;
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    box-sizing: content-box;
+  }
+}
+.sdk-wechat-control-url-link--thumb{
+  background-color: #fff;
+  .sdk-wechat-control-url-link__description{
+    -webkit-line-clamp: 2;
+  }
+}
+.sdk-wechat-control-url-link--quote {
+  display: flex;
+  flex-direction: row;
+  max-width: 320px;
+  .sdk-wechat-control-url-link__cover {
+    width: 52px;
+    height: 52px;
+    min-width: 52px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: rgba(0,0,0,.1);
+  }
+  .sdk-wechat-control-url-link__title{
+    margin-right: 6px;
+  }
+}
+</style>
+  

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="wechat-record-panel-chat-link-merged" :class="['wechat-record-panel-chat-link-merged--' + type]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="wechat-record-panel-chat-link-merged__main" :class="{'is-loading': mergeding}" @click="handleLoadMergedMsg">
+        <span class="wechat-record-panel-chat-link-merged__trigger" v-if="!mergedData">
+          <ui-icon :name="mergeding ? 'loading' : 'arrow-down-circle-line'" :size="18"></ui-icon> 查看合并转发消息
+        </span>
+        <div class="wechat-record-panel-chat-link-merged__msgs" v-else-if="mergedData && mergedData.length">
+          <div
+            class="wechat-record-panel-chat-link-merged__msgs-item"
+            v-for="(item, index) in mergedData"
+            :key="index"
+          >
+            <div class="wechat-record-panel-chat-link-merged__msgs-item-head">
+              <span class="wechat-record-panel-chat-link-merged__msgs-item-user">{{ item.sourcename }}</span>
+              <span class="wechat-record-panel-chat-link-merged__msgs-item-date">{{ handleFormatSourceTime(item.sourcetime) }}</span>
+            </div>
+            <div class="wechat-record-panel-chat-link-merged__msgs-item-body">
+              <template v-if="item.datatype == '2'">
+                【图片】
+              </template>
+              <template v-else>
+                <div class="wechat-record-panel-chat-link-merged__msgs-item-text" v-html="handleFormatMergedDesc(item.datadesc)"></div>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div v-else>暂无消息数据</div>
+        <div class="wechat-record-panel-chat-link-merged__msgs-foot">聊天记录</div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      [聊天记录]合并的聊天记录
+    </template>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import { unUnicode, html2Escape } from '../../../utils/string'
+import { parseXml } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'AcWechatChatPanelControlUrlMerge',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    beforeLoad: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      mergeding: false,
+      mergedData: null
+    }
+  },
+  methods: {
+    handleFormatMergedDesc (desc) {
+      return html2Escape(unUnicode(desc))
+    },
+    handleFormatSourceTime (date) {
+      if (!date) {
+        return date
+      }
+      return date.replace('&#x20;', ' ')
+    },
+    handleLoadMergedMsg () {
+      if (!this.content) {
+        return
+      }
+      if (this.mergeding) {
+        return
+      }
+      let ps = Promise.resolve()
+      if (this.beforeLoad) {
+        const rs = this.beforeLoad()
+        if (rs && rs.then) {
+          ps = rs
+        } else if (rs === false) {
+          return
+        }
+      }
+      ps.then(() => {
+        this.mergeding = true
+        axios.get(formatOssPath(this.content)).then(({ data }) => {
+          if (typeof data === 'string') {
+            const xmlData = parseXml(data)
+            if (xmlData && xmlData.recorditem && xmlData.recorditem.recordinfo && xmlData.recorditem.recordinfo.datalist) {
+              data = xmlData.recorditem.recordinfo.datalist.dataitem
+            }
+          }
+          this.mergeding = false
+          this.mergedData = (data || []).filter(v => {
+            return v.datadesc || v.sourcename || v.sourcetime
+          })
+        }, () => {
+          this.mergeding = false
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.wechat-record-panel-chat-link-merged__main{
+  width: 340px;
+  &.is-loading{
+    cursor: not-allowed;
+    .wechat-record-panel-chat-link-merged__trigger {
+      color: #888;
+    }
+  }
+}
+.wechat-record-panel-chat-link-merged__trigger{
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  .ui-icon{
+    vertical-align: top;
+    display: inline-block;
+    margin-right: 4px;
+  }
+}
+.wechat-record-panel-chat-link-merged__msgs{
+  padding: 6px 12px;
+}
+.wechat-record-panel-chat-link-merged__msgs-item{
+  padding: 6px 0;
+  border-bottom: 1px solid #eee;
+  &:last-child{
+    border-bottom: 0;
+  }
+}
+.wechat-record-panel-chat-link-merged__msgs-item-head{
+  margin-bottom: 4px;
+  display: flex;
+  justify-content: space-between;
+  color: #888;
+}
+.wechat-record-panel-chat-link-merged__msgs-foot{
+  padding: 0 12px;
+  border-top: 1px solid rgba(0,0,0,.1);
+  background-size: 12px;
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+  color: #888;
+}
+.wechat-record-panel-chat-link-merged--thumb {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  display: inline-block;
+}
+</style>

package/components/wework-chat-control/url/url-miniprogram.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="sdk-chat-wework-panel-control-url-miniprogram" :class="['sdk-chat-wework-panel-control-url-miniprogram--' + type, {'is-border': border}]">
+    <template v-if="type === 'default'">
+      <div class="sdk-chat-wework-panel-control-url-miniprogram__main">
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__head" v-if="icon">
+          <img class="sdk-chat-wework-panel-control-url-miniprogram__icon" width="22px" height="22px;" v-if="icon" :src="icon" />
+          <div class="sdk-chat-wework-panel-control-url-miniprogram__desc" v-if="desc">
+            {{desc}}
+          </div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__body">
+          <div class="sdk-chat-wework-panel-control-url-miniprogram__title" v-if="title">
+            {{title}}
+          </div>
+          <div class="sdk-chat-wework-panel-control-url-miniprogram__content">
+            <div v-if="cover" :style="{width: '100%', height: '100%', background: 'url('+ cover +')', 'background-size': 'cover'}"></div>
+          </div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__foot">小程序</div>
+      </div>
+    </template>
+    <template v-else-if="type === 'thumb'">
+      <div class="sdk-chat-wework-panel-control-url-miniprogram__main">
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__head" v-if="icon">
+          <img class="sdk-chat-wework-panel-control-url-miniprogram__icon" width="22px" height="22px;" v-if="icon" :src="icon" />
+          <div class="sdk-chat-wework-panel-control-url-miniprogram__desc" v-if="desc">
+            {{desc}}
+          </div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__body">
+          <div class="sdk-chat-wework-panel-control-url-miniprogram__title" v-if="title">
+            {{title}}
+          </div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__bgimage">
+          <div v-if="cover" :style="{width: '100%', height: '100%', background: 'url('+ cover +')', 'background-size': 'cover'}"></div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-url-miniprogram__foot">小程序</div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-wework-panel-control-url-miniprogram__icon"></div>
+      <div class="sdk-chat-wework-panel-control-url-miniprogram__title" v-if="title">
+        {{title}}
+      </div>
+      <div class="sdk-chat-wework-panel-control-url-miniprogram__content">
+        <div v-if="cover" :style="{width: '100%', height: '100%', background: 'url('+ cover +')', 'background-size': 'cover'}"></div>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse, parseXml } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'SdkChatPanelControlUrlMiniprogram',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    content: {
+      type: [Object, String]
+    }
+  },
+  inject: {
+    SdkChatPanelBox: {
+      default: null
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content)
+    },
+    miniprogramData () {
+      let data = null
+      if (!this.nextContent) {
+        return data
+      }
+      return this.nextContent
+    },
+    icon () {
+      return this.miniprogramData.weappIconUrl
+    },
+    title () {
+      return this.miniprogramData.title
+    },
+    url () {
+      return this.miniprogramData.msg && this.miniprogramData.msg.appmsg ? this.miniprogramData.msg.appmsg.url  : ''
+    },
+    desc () {
+      return this.miniprogramData.appName
+    },
+    cover () {
+      return this.miniprogramData.thumbOssUrl
+    },
+    border () {
+      return !this.SdkChatPanelBox
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-panel-control-url-miniprogram {
+  max-width: 280px;
+  &.is-border {
+    border-radius: 4px;
+    border: 1px solid #eee;
+  }
+}
+.sdk-chat-wework-panel-control-url-miniprogram--default{
+  .sdk-chat-wework-panel-control-url-miniprogram__main{
+    width: 280px;
+    color: #404040;
+    &:hover{
+      color: #404040;
+    }
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__head{
+    padding: 6px 12px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      margin-right: 6px;
+    }
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__body{
+    padding: 6px 12px 12px;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__title{
+    margin-bottom: 12px;
+    font-size: 16px;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__content{
+    height: 150px;
+    background-color: #f1f0f5;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__desc{
+    color: #888;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__foot{
+    padding: 3px 12px 3px 26px;
+    border-top: 1px solid rgba(0,0,0,.1);
+    background: url('./miniprogram.svg') no-repeat 12px 50%;
+    background-size: 12px;
+    font-size: 12px;
+    color: #888;
+  }
+}
+.sdk-chat-wework-panel-control-url-miniprogram--thumb{
+  background-color: #fff;
+  position: relative;
+  .sdk-chat-wework-panel-control-url-miniprogram__main{
+    width: auto;
+    color: #404040;
+    &:hover{
+      color: #404040;
+    }
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__head{
+    padding: 6px 12px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    z-index: 5;
+    img {
+      margin-right: 6px;
+    }
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__body{
+    padding: 6px 12px 12px;
+    position: relative;
+    z-index: 5;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__title{
+    font-size: 16px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示3行 */
+    overflow: hidden;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__desc{
+    color: #888;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__foot{
+    padding: 3px 12px 3px 26px;
+    border-top: 1px solid rgba(0,0,0,.1);
+    background: url('./miniprogram.svg') no-repeat 12px 50%;
+    background-size: 12px;
+    font-size: 12px;
+    color: #888;
+    position: relative;
+    z-index: 5;
+    background-color: #fff;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__bgimage{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 3;
+      background: linear-gradient(180deg,#fff 0,hsla(0,0%,100%,.8) 48%,hsla(0,0%,100%,.4) 79%,hsla(0,0%,100%,0));
+    }
+  }
+}
+.sdk-chat-wework-panel-control-url-miniprogram--quote {
+  display: flex;
+  flex-direction: row;
+  max-width: 320px;
+  .sdk-chat-wework-panel-control-url-miniprogram__icon {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-right: 4px;
+    min-width: 14px;
+    vertical-align: top;
+    margin-top: 4px;
+    color: #999;
+    background: url('./miniprogram.svg') no-repeat 50% 50%;
+    background-size: cover;
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__content {
+    width: 52px;
+    height: 52px;
+    min-width: 52px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: rgba(0,0,0,.1);
+  }
+  .sdk-chat-wework-panel-control-url-miniprogram__title{
+    margin-right: 6px;
+  }
+}
+</style>