@aochuang/client-sdk 1.0.285 → 1.0.287

package/components/chat-editor/chat-editor.vue

@@ -246,10 +246,10 @@ export default {
                 if (!nearest) {
                     this.closeSuggestions()
                 }
-                this.loadSuggestions(nearest)
+                this.loadSuggestions(nearest, nearsetInfo)
             }, 200)
         },
-        loadSuggestions (keyword) {
+        loadSuggestions (keyword, nearestInfo) {
             if (!this.fetchSuggestionsMethod) {
                 return
             }
@@ -258,7 +258,9 @@ export default {
             this.suggestionsKeyword = keyword
             clearTimeout(this._loadSuggestionsTimer)
             return this.fetchSuggestionsMethod({
-                keyword
+                keyword,
+                nearestInfo,
+                isAtContext: !!(nearestInfo && nearestInfo.isAtContext)
             }).then(rs => {
                 this.suggestionsData = rs || []
             }).finally(() => {

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

@@ -0,0 +1,111 @@
+<template>
+  <ui-dialog
+    v-model="visible"
+    title="选择缩略图/原图"
+    size="mini"
+    :closeable="!loading"
+    :close-on-click-modal="false"
+    @closed="handleClosed"
+  >
+    <div class="sdk-chat-control-image-dragable-confirm">
+      <div class="sdk-chat-control-image-dragable-confirm__check">
+        <ui-radio-group v-model="currentType">
+            <ui-radio label="thumb">使用缩略图</ui-radio>
+            <ui-radio label="origin">使用原图</ui-radio>
+        </ui-radio-group>
+      </div>
+      <div class="sdk-chat-control-image-dragable-confirm__preview">
+        <ui-image :src="innerSrc" width="100%" height="100%" :enable-thumbnail="false"></ui-image>
+      </div>
+      <div class="sdk-chat-control-image-dragable-confirm__text">
+        <template v-if="currentType === 'thumb'">
+            缩略图文件较小，拖拽更快，但显示可能失真。
+        </template>
+        <template v-if="currentType === 'origin'">
+            原图显示效果更好，但文件较大，加载可能较慢。
+        </template>
+      </div>
+      <div class="sdk-chat-control-image-dragable-confirm__actions">
+        <ui-button :disabled="loading" @click="handleCancelClick">取消</ui-button>
+      </div>
+    </div>
+  </ui-dialog>
+</template>
+<script>
+import { formatOssPath } from '@aochuang/common/utils/oss'
+import { Dialog as UiDialog, Button as UiButton, Image as UiImage, RadioGroup as UiRadioGroup, Radio as UiRadio } from '@aochuang/common/components'
+import { getOriginImageSrc, getNewImageSrc } from './util'
+
+export default {
+  name: 'ImageDragableConfirm',
+  components: {
+    UiDialog,
+    UiButton,
+    UiImage,
+    UiRadioGroup,
+    UiRadio
+  },
+  props: {
+    src: {
+      type: String
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      visible: true,
+      currentType: 'thumb'
+    }
+  },
+  computed: {
+    innerSrc () {
+        let src = this.src
+        if (this.currentType === 'origin') {
+            src = getOriginImageSrc(src)
+        } else {
+            src = getNewImageSrc(src)
+        }
+        return formatOssPath(src)
+    }
+  },
+  methods: {
+    handleCancelClick () {
+      if (this.loading) {
+        return
+      }
+      this.visible = false
+    },
+    handleClosed () {
+      this.$emit('closed')
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-image-dragable-confirm{
+  padding: 20px 22px;
+}
+.sdk-chat-control-image-dragable-confirm__check{
+    margin-bottom: 6px;
+}
+.sdk-chat-control-image-dragable-confirm__preview{
+    height: 360px;
+}
+.sdk-chat-control-image-dragable-confirm__text{
+  color: #999;
+  line-height: 1.6;
+  text-align: left;
+  font-size: 12px;
+  margin-top: 6px;
+}
+.sdk-chat-control-image-dragable-confirm__actions{
+  margin-top: 18px;
+  text-align: right;
+  .ui-button + .ui-button{
+    margin-left: 8px;
+  }
+}
+</style>

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

@@ -43,6 +43,7 @@
               fit="contain"
               @error="handleError"
               @click.native="handleImageClick"
+              @dragstart.native="handleImageDragStart"
             ></ui-image>
             <template v-if="isOriginImage && innerOptimize">
               <span class="sdk-chat-control-image__hd">
@@ -69,6 +70,7 @@
             fit="contain"
             @error="handleError"
             @click.native="handleImageClick"
+            @dragstart.native="handleImageDragStart"
           ></ui-image>
           <template v-if="isOriginImage && innerOptimize">
             <span class="sdk-chat-control-image__hd">
@@ -80,12 +82,18 @@
         </div>
       </template>
     </div>
+    <image-dragable-confirm
+      v-if="showDragOriginConfirm"
+      :src="src"
+      @closed="handleDragOriginConfirmClosed"
+    ></image-dragable-confirm>
   </div>
 </template>
 <script>
-import { Image as UiImage, Button as UiButton, Icon as UiIcon, Loading as UiLoading } from '@aochuang/common/components'
+import { Image as UiImage, Button as UiButton, Icon as UiIcon } from '@aochuang/common/components'
 import { isOriginImage, getNewImageSrc, isNewImage } from './util'
 import BiTooltip from '@aochuang/common/common/tooltip'
+import ImageDragableConfirm from './image-dragable-confirm.vue'
 
 export default {
   name: 'SdkChatControlImage',
@@ -93,8 +101,8 @@ export default {
     UiIcon,
     UiImage,
     UiButton,
-    UiLoading,
-    BiTooltip
+    BiTooltip,
+    ImageDragableConfirm
   },
   props: {
     id: {
@@ -169,13 +177,21 @@ export default {
     */
     onCorrectSrcMethod: {
       type: Function
+    },
+    /**
+     * 拖拽原图拦截。开启后，已下载过原图的图片拖拽时会打开缩略图/原图选择弹窗。
+    */
+    enableDragOriginImage: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
       defrostMsg: null,
       errorMsg: null,
-      correctSrc: null // 纠正后的图片地址，一般是开启了enableOptimize，大图找不到的时候，会回退到小图地址
+      correctSrc: null, // 纠正后的图片地址，一般是开启了enableOptimize，大图找不到的时候，会回退到小图地址
+      showDragOriginConfirm: false
     }
   },
   computed: {
@@ -246,6 +262,11 @@ export default {
       return !!this.defrostMethod
     }
   },
+  watch: {
+    src () {
+      this.showDragOriginConfirm = false
+    }
+  },
   methods: {
     handleClick () {
       this.$emit('click')
@@ -253,6 +274,17 @@ export default {
     handleImageClick () {
       this.imageClickMethod && this.imageClickMethod()
     },
+    handleImageDragStart (event) {
+      if (!this.enableDragOriginImage || !this.isOriginImage) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      this.showDragOriginConfirm = true
+    },
+    handleDragOriginConfirmClosed () {
+      this.showDragOriginConfirm = false
+    },
     handleError () {
       if (this.defrostMethod) {
         this.errorMsg = '加载失败，可能资源被归档～'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/client-sdk",
-  "version": "1.0.285",
+  "version": "1.0.287",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"