@aochuang/client-sdk 1.0.278

package/components/wechat-chat-control/file-url/icons/file-unknow-line.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 fill="#b9c8cc" d="M469.333333 640h85.333334v85.333333h-85.333334v-85.333333z m85.333334-70.186667V597.333333h-85.333334v-64a42.666667 42.666667 0 0 1 42.666667-42.666666 64 64 0 1 0-62.762667-76.544l-83.712-16.768A149.376 149.376 0 1 1 554.666667 569.813333zM640 170.666667H213.333333v682.666666h597.333334V341.333333h-170.666667V170.666667zM128 127.658667C128 104.277333 147.072 85.333333 170.624 85.333333H682.666667l213.333333 213.333334v597.034666A42.666667 42.666667 0 0 1 853.632 938.666667H170.368A42.666667 42.666667 0 0 1 128 896.341333V127.658667z" /></svg>

package/components/wechat-chat-control/file-url/icons/file-word-line.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 fill="#359afc" d="M682.666667 341.333333v341.333334h-85.333334l-85.333333-85.333334-85.333333 85.333334H341.333333V341.333333h85.333334v213.333334l85.333333-85.333334 85.333333 85.333334V341.333333h42.666667V170.666667H213.333333v682.666666h597.333334V341.333333h-128zM128 127.658667C128 104.277333 147.072 85.333333 170.624 85.333333H682.666667l213.333333 213.333334v597.034666A42.666667 42.666667 0 0 1 853.632 938.666667H170.368A42.666667 42.666667 0 0 1 128 896.341333V127.658667z" /></svg>

package/components/wechat-chat-control/file-url/icons/file-zip-line.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 fill="#5fcb9c" d="M853.333333 938.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V128a42.666667 42.666667 0 0 1 42.666667-42.666667h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v768a42.666667 42.666667 0 0 1-42.666667 42.666667z m-42.666666-85.333334V170.666667H213.333333v682.666666h597.333334z m-213.333334-341.333333v213.333333h-170.666666v-128h85.333333v-85.333333h85.333333z m-85.333333-341.333333h85.333333v85.333333h-85.333333V170.666667z m-85.333333 85.333333h85.333333v85.333333h-85.333333V256z m85.333333 85.333333h85.333333v85.333334h-85.333333V341.333333z m-85.333333 85.333334h85.333333v85.333333h-85.333333v-85.333333z" /></svg>

package/components/wechat-chat-control/file-url/icons/index.js

@@ -0,0 +1,24 @@
+import execl from './file-excel-line.svg'
+import pdf from './file-pdf-line.svg'
+import ppt from './file-ppt-line.svg'
+import unknow from './file-unknow-line.svg'
+import word from './file-word-line.svg'
+import zip from './file-zip-line.svg'
+import info from './file-info-line.svg'
+import text from './file-text-line.svg'
+
+export default {
+  xlsx: execl,
+  xls: execl,
+  pdf,
+  ppt,
+  unknow,
+  word,
+  zip,
+  doc: word,
+  docx: word,
+  rar: zip,
+  ini: info,
+  txt: text,
+  '7z': zip
+}

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

@@ -0,0 +1,344 @@
+<template>
+  <div class="sdk-chat-control-image" @click="handleClick">
+    <div class="sdk-chat-control-image__main" :style="{'height': innerHeight, 'max-height': innerMaxHeight + 'px'}">
+      <template v-if="allowDefrost">
+        <template v-if="defrostMsg">
+          <div class="sdk-chat-control-image__defrost">
+            <div class="sdk-chat-control-image__defrost-icon">
+              <ui-icon name="information-line" :size="20"></ui-icon>
+            </div>
+            <div class="sdk-chat-control-image__defrost-text">
+              {{ defrostMsg }}
+            </div>
+            <div class="sdk-chat-control-image__error-action">
+              <ui-button type="primary" size="mini" :click="handleRefreshClick">重新请求</ui-button>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="errorMsg">
+          <div class="sdk-chat-control-image__error">
+            <div class="sdk-chat-control-image__error-icon">
+              <ui-icon name="information-line" :size="20"></ui-icon>
+            </div>
+            <div class="sdk-chat-control-image__error-text">
+              {{ errorMsg }}
+            </div>
+            <div class="sdk-chat-control-image__error-action">
+              <ui-button type="primary" size="mini" :click="handleUnlockClick">尝试解档</ui-button>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="sdk-chat-control-image__control">
+            <ui-image 
+              :src="innerSrc" 
+              :radius="0" 
+              :previewable="previewable" 
+              :width="innerWidth" 
+              :height="innerHeight" 
+              :max-width="innerMaxWidth" 
+              :max-height="innerMaxHeight" 
+              :preview-method="previewMethod"
+              :enable-thumb="innerOptimize"
+              fit="contain"
+              @error="handleError"
+              @click.native="handleImageClick"
+            ></ui-image>
+            <template v-if="isOriginImage && innerOptimize">
+              <span class="sdk-chat-control-image__hd">
+                <bi-tooltip text="该图片已经从手机下载过原图">
+                  <span>原图</span>
+                </bi-tooltip>
+              </span>
+            </template>
+          </div>
+        </template>
+      </template>
+      <template v-else>
+        <div class="sdk-chat-control-image__control">
+          <ui-image 
+            :src="innerSrc" 
+            :radius="0" 
+            :previewable="previewable" 
+            :width="innerWidth" 
+            :height="innerHeight" 
+            :max-width="innerMaxWidth" 
+            :max-height="innerMaxHeight" 
+            :preview-method="previewMethod"
+            :enable-thumb="enableOptimize"
+            fit="contain"
+            @error="handleError"
+            @click.native="handleImageClick"
+          ></ui-image>
+          <template v-if="isOriginImage && innerOptimize">
+            <span class="sdk-chat-control-image__hd">
+              <bi-tooltip text="该图片已经从手机下载过原图">
+                <span>原图</span>
+              </bi-tooltip>
+            </span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { Image as UiImage, Button as UiButton, Icon as UiIcon, Loading as UiLoading } from '@aochuang/common/components'
+import { isOriginImage, getNewImageSrc, isNewImage } from './util'
+import BiTooltip from '@aochuang/common/common/tooltip'
+
+export default {
+  name: 'SdkChatControlImage',
+  components: {
+    UiIcon,
+    UiImage,
+    UiButton,
+    UiLoading,
+    BiTooltip
+  },
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    },
+    content: {
+      type: String
+    },
+    maxWidth: {
+      type: Number,
+      default: 300
+    },
+    maxHeight: {
+      type: Number,
+      default: 300
+    },
+    previewable: {
+      type: Boolean,
+      default: true
+    },
+    imageClickMethod: {
+      type: Function
+    },
+    previewMethod: {
+      type: Function
+    },
+    /**
+     * 解冻图片
+    */
+    defrostMethod: {
+      type: Function
+    },
+    /**
+     * 查询解冻结果方法
+    */
+    defrostResultMethod: {
+      type: Function
+    },
+    /**
+     * 开启图片优化
+     * 缩略图：xxx_thumb.jpg
+     * 大图：xxx_new.jpg
+     * 原图：xxx_origin.jpg
+     * 新的手机版本消息里面默认返回的图片地址会带_new.jpg（大图）或_thumb.jpg，如果下载过原图，那么消息里面就会带_origin.jpg后缀，前端需要改成_thumb后缀
+     * 如果有原图了，那肯定是有thumb.jpg的，和老肖确定了
+     * 需要分两个版本
+     * 老版本交互式用户一点击查看大图，就调用socket命令去下载原图，下载完后，后面消息里面返回的就是原图了
+     * 新版本交互式用户一点击查看大图，那么就将地址改成_new.jpg，并且点击下载的时候才去下载原图，下载完原图将消息的后缀改成_origin.jpg
+     * 检查新老版本可以根据是否有_new.jpg和_thumb.jpg判断
+     * 如果是老的版本，那么需要走图片裁剪优化逻辑
+    */
+    enableOptimize: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 优化拦截方法，有些消息不能处理为缩略图和大图，比如从客服端发送的消息，因为后端只有手机过来的图片才有缩略图和大图
+    */
+    optimizeInterceptMethod: {
+      type: Function
+    },
+    /**
+     * 当纠错失败的时候触发事件
+     * 主要给外面在进一步处理的使用，例如有原图，没有缩略图和大图的时候，这个时候外面可以将图片地址在特别处理一下
+    */
+    onCorrectSrcMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      defrostMsg: null,
+      errorMsg: null,
+      correctSrc: null // 纠正后的图片地址，一般是开启了enableOptimize，大图找不到的时候，会回退到小图地址
+    }
+  },
+  computed: {
+    src () {
+      return this.content
+    },
+    innerOptimize () {
+      if (!this.enableOptimize) {
+        return false
+      }
+      if (this.optimizeInterceptMethod && this.optimizeInterceptMethod() === false) {
+        return false
+      }
+      return true
+    },
+    innerWidth () {
+      let width = null
+      if (this.type === 'default') {
+      }
+      return width
+    },
+    innerHeight () {
+      let height = null
+      if (this.type === 'default') {
+        height = this.innerMaxHeight ? (this.innerMaxHeight + 'px') : '300px'
+      } else if (this.type === 'thumb') {
+        height = this.innerMaxHeight ? (this.innerMaxHeight + 'px') : ''
+      }
+      return height
+    },
+    innerMaxWidth () {
+      if (this.type === 'quote') {
+        return 60
+      } else if (this.type === 'thumb') {
+        return 180
+      } else {
+        return this.maxWidth
+      }
+    },
+    innerMaxHeight () {
+      if (this.type === 'quote') {
+        return 60
+      } else if (this.type === 'thumb') {
+        return 72
+      } else {
+        return this.maxHeight
+      }
+    },
+    innerSrc () {
+      if (!this.innerOptimize) {
+        return this.src
+      }
+      if (this.correctSrc) {
+        return this.correctSrc
+      }
+      // 如果是原图地址，那么需要改成缩略图地址，防止消息里面都是展示的原图，以为默认后端逻辑是有原图返回原图，
+      if (isOriginImage(this.src)) {
+        // 替换成大图地址
+        return getNewImageSrc(this.src) || this.src
+      } else {
+        return this.src
+      }
+    },
+    isOriginImage () {
+      return isOriginImage(this.src)
+    },
+    allowDefrost () {
+      return !!this.defrostMethod
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    },
+    handleImageClick () {
+      this.imageClickMethod && this.imageClickMethod()
+    },
+    handleError () {
+      if (this.defrostMethod) {
+        this.errorMsg = '加载失败，可能资源被归档～'
+        return
+      }
+      // 如果大图加载失败了，那么要用缩略图地址
+      if (this.innerOptimize) {
+        // 大图加载失败，尝试调用onCorrectSrcMethod有外面决定用什么图片
+        if (isNewImage(this.innerSrc)) {
+          if (this.onCorrectSrcMethod) {
+            const ns = this.onCorrectSrcMethod()
+            if (ns) {
+              this.correctSrc = ns
+            }
+          }
+        }
+      }
+    },
+    handleUnlockClick () {
+      if (!this.defrostMethod) {
+        return
+      }
+      return this.defrostMethod({
+        content: this.content
+      }).then((res) => {
+        this.defrostMsg = res || '解冻已执行，请耐心等待～'
+      })
+    },
+    handleRefreshClick () {
+      this.errorMsg = null
+      this.defrostMsg = null
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-image__main{
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+  min-width: 180px;    
+  background-color: #eee;
+  text-align: center;
+  .ui-image{
+    vertical-align: top;
+  }
+}
+.sdk-chat-control-image__defrost,
+.sdk-chat-control-image__error{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 12px;
+  color: #999;
+  line-height: 1.7em;
+}
+.sdk-chat-control-image__error-action{
+  margin-top: 6px;
+}
+.sdk-chat-control-image__control{
+  display: inline-block;
+  line-height: 1em;
+  vertical-align: top;
+}
+.sdk-chat-control-image__hd{
+  position: absolute;
+  background-color: #3773f9;
+  color: #fff;
+  right: 8px;
+  bottom: 8px;
+  padding: 4px 6px;
+  border-radius: 3px;
+  font-weight: bold;
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(.75);  
+  transform-origin: 100% 100%;
+  white-space: nowrap;
+}
+</style>

package/components/wechat-chat-control/image/index.js

@@ -0,0 +1 @@
+export { isNewImage, isOriginImage, getNewImageSrc } from './util'

package/components/wechat-chat-control/image/util.js

@@ -0,0 +1,29 @@
+export function isNewImage (url) {
+    if (!url) {
+        return false
+    }
+    return url.toLocaleLowerCase().indexOf('_new.') >= 0
+}
+
+export function isOriginImage (url) {
+    if (!url) {
+        return false
+    }
+    return url.toLocaleLowerCase().indexOf('_origin.') >= 0
+}
+
+export function getNewImageSrc (url) {
+    if (isOriginImage(url)) {
+        return url.replace('_origin.', '_new.')
+    } else {
+        return url
+    }
+}
+
+export function getOriginImageSrc (url) {
+    if (isNewImage(url)) {
+        return url.replace('_new.', '_origin.')
+    } else {
+        return url
+    }
+}

package/components/wechat-chat-control/index.js

@@ -0,0 +1,104 @@
+import text from './text/text.vue'
+import image from './image/image.vue'
+import voice from './voice/voice.vue'
+import shareCard from './share-card/share-card.vue'
+import companyCard from './company-card/company-card.vue'
+import video from './video/video.vue'
+import customExpression from './custom-expression/custom-expression.vue'
+import location from './location/location.vue'
+import fileUrl from './file-url/file-url.vue'
+import calling from './calling/calling.vue' 
+import roomCalling from './room-calling/room-calling.vue'
+import realTimePosition from './real-time-position/real-time-position.vue'
+import redEnvelopes from './red-envelopes/red-envelopes.vue'
+import system from './system/system.vue'
+import systemBatchMessage from './system-batch-message/system-batch-message.vue'
+import jxSysText from './jx-sys-text/jx-sys-text.vue'
+import memberChange from './member-change/member-change.vue'
+import systemMoney from './system-money/system-money.vue'
+import textWithAt from './text-with-at/text-with-at.vue'
+import channelVideo from './channel-video/channel-video.vue'
+import channelLive from './channel-live/channel-live.vue'
+import channelVideoCard from './channel-video-card/channel-video-card.vue'
+import music from './music/music.vue'
+import transfer from './transfer/transfer.vue'
+import url from './url/url.vue'
+import quoteMessage from './quote-message/quote-message.vue'
+import empty from './empty/empty.vue'
+import unknow from './unknow/unknow.vue'
+import WechatChatControlConfig from './wechat-chat-control-config.vue'
+import WechatChatControlConfigMsg from './wechat-chat-control-config-msg.vue'
+import WechatChatControlConfigItem from './wechat-chat-control-config-item.vue'
+import revokeMeMessage from './revoke-me-message/revoke-me-message.vue'
+import revokeOtherMessage from './revoke-other-message/revoke-other-message.vue'
+import revokeYouMessage from './revoke-you-message/revoke-you-message.vue'
+import { MESSAGE_TYPE } from './util'
+
+export const chatControls = {
+	[MESSAGE_TYPE.TEXT]: text,
+	[MESSAGE_TYPE.IMAGE]: image,
+	[MESSAGE_TYPE.VOICE]: voice,
+	[MESSAGE_TYPE.MUSIC]: music,
+	[MESSAGE_TYPE.ROOM_CALLING]: roomCalling,
+	[MESSAGE_TYPE.SHARE_CARD]: shareCard,
+	[MESSAGE_TYPE.COMPANY_CARD]: companyCard,
+	[MESSAGE_TYPE.VIDEO]: video,
+	[MESSAGE_TYPE.CUSTOM_EXPRESSION]: customExpression,
+	[MESSAGE_TYPE.LOCATION]: location,
+	[MESSAGE_TYPE.URL]: url,
+	[MESSAGE_TYPE.URLNew]: fileUrl,
+	[MESSAGE_TYPE.CALLING]: calling,
+	[MESSAGE_TYPE.REAL_TIME_POSITION]: realTimePosition,
+	[MESSAGE_TYPE.RED_ENVELOPES]: redEnvelopes,
+	[MESSAGE_TYPE.ACCOUNT_TRANSFER]: transfer,
+	[MESSAGE_TYPE.SYSTEM]: system,
+	[MESSAGE_TYPE.JX_SYS_TEXT]: jxSysText,
+	[MESSAGE_TYPE.MEMBER_CHANGE]: memberChange,
+	[MESSAGE_TYPE.SYSTEM_MONEY]: systemMoney,
+	[MESSAGE_TYPE.TEXT_WITH_AT]: textWithAt,
+	[MESSAGE_TYPE.QUOTE_MESSAGE]: quoteMessage,
+	[MESSAGE_TYPE.CHANNEL_VIDEO]: channelVideo,
+	[MESSAGE_TYPE.CHANNEL_VIDEO_CARD]: channelVideoCard, // 视频号名片
+	[MESSAGE_TYPE.CHANNEL_VIDEO_LIVE]: channelLive, // 视频号直播
+  [MESSAGE_TYPE.SYSTEM_BATCH_MESSAGE]: systemBatchMessage,
+  [MESSAGE_TYPE.REVOKE_ME_MESSAGE]: revokeMeMessage,
+  [MESSAGE_TYPE.REVOKE_OTHER_MESSAGE]: revokeOtherMessage,
+  [MESSAGE_TYPE.REVOKE_YOU_MESSAGE]: revokeYouMessage
+}
+
+export {
+  text,
+  image,
+  voice,
+  shareCard,
+  video,
+  customExpression,
+  location,
+  fileUrl,
+  url,
+  calling,
+  roomCalling,
+  companyCard,
+  realTimePosition,
+  redEnvelopes,
+  system,
+  systemBatchMessage,
+  jxSysText,
+  memberChange,
+  systemMoney,
+  textWithAt,
+  quoteMessage,
+  channelVideo, // 视频号
+  channelVideoCard,
+  channelLive, // 视频号直播
+  music,
+  transfer,
+  empty,
+  unknow,
+  revokeMeMessage,
+  revokeOtherMessage,
+  revokeYouMessage,
+  WechatChatControlConfig,
+  WechatChatControlConfigMsg,
+  WechatChatControlConfigItem
+}

package/components/wechat-chat-control/jx-sys-text/jx-sys-text.vue

@@ -0,0 +1,28 @@
+
+<template>
+  <div class="sdk-chat-control-jx-system-text">
+    {{ content }}
+  </div>
+</template>
+<script>
+export default {
+  name: 'SdkChatControlJxSystemText',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: String
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-jx-system-text{
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  width: 100%;
+  padding: 12px;
+}
+</style>