@aochuang/client-sdk 1.0.286 → 1.0.288
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/chat-panel/chat-panel-box.vue +9 -3
- package/components/wechat-chat-control/image/image-dragable-confirm.vue +111 -0
- package/components/wechat-chat-control/image/image.vue +36 -4
- package/components/wechat-chat-panel/chat-panel-item.vue +25 -0
- package/components/wechat-chat-panel/chat-panel.vue +5 -0
- package/package.json +1 -1
|
@@ -7,9 +7,11 @@
|
|
|
7
7
|
</div>
|
|
8
8
|
<div class="sdk-chat-panel-box__main">
|
|
9
9
|
<div class="sdk-chat-panel-box__head">
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
<template v-if="showUserName">
|
|
11
|
+
<span class="sdk-chat-panel-box__name">
|
|
12
|
+
{{ userData ? userData.name : '' }}
|
|
13
|
+
</span>
|
|
14
|
+
</template>
|
|
13
15
|
</div>
|
|
14
16
|
<div class="sdk-chat-panel-box__body" @contextmenu="handleBodyContextMenu">
|
|
15
17
|
<component
|
|
@@ -92,6 +94,10 @@ export default {
|
|
|
92
94
|
type: Boolean,
|
|
93
95
|
default: false
|
|
94
96
|
},
|
|
97
|
+
showUserName: {
|
|
98
|
+
type: Boolean,
|
|
99
|
+
default: true
|
|
100
|
+
},
|
|
95
101
|
fetchUserMethod: {
|
|
96
102
|
type: Function
|
|
97
103
|
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ui-dialog
|
|
3
|
+
v-model="visible"
|
|
4
|
+
title="选择缩略图/原图"
|
|
5
|
+
size="mini"
|
|
6
|
+
:closeable="!loading"
|
|
7
|
+
:close-on-click-modal="false"
|
|
8
|
+
@closed="handleClosed"
|
|
9
|
+
>
|
|
10
|
+
<div class="sdk-chat-control-image-dragable-confirm">
|
|
11
|
+
<div class="sdk-chat-control-image-dragable-confirm__check">
|
|
12
|
+
<ui-radio-group v-model="currentType">
|
|
13
|
+
<ui-radio label="thumb">使用缩略图</ui-radio>
|
|
14
|
+
<ui-radio label="origin">使用原图</ui-radio>
|
|
15
|
+
</ui-radio-group>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="sdk-chat-control-image-dragable-confirm__preview">
|
|
18
|
+
<ui-image :src="innerSrc" width="100%" height="100%" :enable-thumbnail="false"></ui-image>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="sdk-chat-control-image-dragable-confirm__text">
|
|
21
|
+
<template v-if="currentType === 'thumb'">
|
|
22
|
+
缩略图文件较小，拖拽更快，但显示可能失真。
|
|
23
|
+
</template>
|
|
24
|
+
<template v-if="currentType === 'origin'">
|
|
25
|
+
原图显示效果更好，但文件较大，加载可能较慢。
|
|
26
|
+
</template>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="sdk-chat-control-image-dragable-confirm__actions">
|
|
29
|
+
<ui-button :disabled="loading" @click="handleCancelClick">取消</ui-button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</ui-dialog>
|
|
33
|
+
</template>
|
|
34
|
+
<script>
|
|
35
|
+
import { formatOssPath } from '@aochuang/common/utils/oss'
|
|
36
|
+
import { Dialog as UiDialog, Button as UiButton, Image as UiImage, RadioGroup as UiRadioGroup, Radio as UiRadio } from '@aochuang/common/components'
|
|
37
|
+
import { getOriginImageSrc, getNewImageSrc } from './util'
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
name: 'ImageDragableConfirm',
|
|
41
|
+
components: {
|
|
42
|
+
UiDialog,
|
|
43
|
+
UiButton,
|
|
44
|
+
UiImage,
|
|
45
|
+
UiRadioGroup,
|
|
46
|
+
UiRadio
|
|
47
|
+
},
|
|
48
|
+
props: {
|
|
49
|
+
src: {
|
|
50
|
+
type: String
|
|
51
|
+
},
|
|
52
|
+
loading: {
|
|
53
|
+
type: Boolean,
|
|
54
|
+
default: false
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
data () {
|
|
58
|
+
return {
|
|
59
|
+
visible: true,
|
|
60
|
+
currentType: 'thumb'
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
computed: {
|
|
64
|
+
innerSrc () {
|
|
65
|
+
let src = this.src
|
|
66
|
+
if (this.currentType === 'origin') {
|
|
67
|
+
src = getOriginImageSrc(src)
|
|
68
|
+
} else {
|
|
69
|
+
src = getNewImageSrc(src)
|
|
70
|
+
}
|
|
71
|
+
return formatOssPath(src)
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
methods: {
|
|
75
|
+
handleCancelClick () {
|
|
76
|
+
if (this.loading) {
|
|
77
|
+
return
|
|
78
|
+
}
|
|
79
|
+
this.visible = false
|
|
80
|
+
},
|
|
81
|
+
handleClosed () {
|
|
82
|
+
this.$emit('closed')
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
87
|
+
<style lang="less">
|
|
88
|
+
.sdk-chat-control-image-dragable-confirm{
|
|
89
|
+
padding: 20px 22px;
|
|
90
|
+
}
|
|
91
|
+
.sdk-chat-control-image-dragable-confirm__check{
|
|
92
|
+
margin-bottom: 6px;
|
|
93
|
+
}
|
|
94
|
+
.sdk-chat-control-image-dragable-confirm__preview{
|
|
95
|
+
height: 360px;
|
|
96
|
+
}
|
|
97
|
+
.sdk-chat-control-image-dragable-confirm__text{
|
|
98
|
+
color: #999;
|
|
99
|
+
line-height: 1.6;
|
|
100
|
+
text-align: left;
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
margin-top: 6px;
|
|
103
|
+
}
|
|
104
|
+
.sdk-chat-control-image-dragable-confirm__actions{
|
|
105
|
+
margin-top: 18px;
|
|
106
|
+
text-align: right;
|
|
107
|
+
.ui-button + .ui-button{
|
|
108
|
+
margin-left: 8px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
</style>
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
fit="contain"
|
|
44
44
|
@error="handleError"
|
|
45
45
|
@click.native="handleImageClick"
|
|
46
|
+
@dragstart.native="handleImageDragStart"
|
|
46
47
|
></ui-image>
|
|
47
48
|
<template v-if="isOriginImage && innerOptimize">
|
|
48
49
|
<span class="sdk-chat-control-image__hd">
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
fit="contain"
|
|
70
71
|
@error="handleError"
|
|
71
72
|
@click.native="handleImageClick"
|
|
73
|
+
@dragstart.native="handleImageDragStart"
|
|
72
74
|
></ui-image>
|
|
73
75
|
<template v-if="isOriginImage && innerOptimize">
|
|
74
76
|
<span class="sdk-chat-control-image__hd">
|
|
@@ -80,12 +82,18 @@
|
|
|
80
82
|
</div>
|
|
81
83
|
</template>
|
|
82
84
|
</div>
|
|
85
|
+
<image-dragable-confirm
|
|
86
|
+
v-if="showDragOriginConfirm"
|
|
87
|
+
:src="src"
|
|
88
|
+
@closed="handleDragOriginConfirmClosed"
|
|
89
|
+
></image-dragable-confirm>
|
|
83
90
|
</div>
|
|
84
91
|
</template>
|
|
85
92
|
<script>
|
|
86
|
-
import { Image as UiImage, Button as UiButton, Icon as UiIcon
|
|
93
|
+
import { Image as UiImage, Button as UiButton, Icon as UiIcon } from '@aochuang/common/components'
|
|
87
94
|
import { isOriginImage, getNewImageSrc, isNewImage } from './util'
|
|
88
95
|
import BiTooltip from '@aochuang/common/common/tooltip'
|
|
96
|
+
import ImageDragableConfirm from './image-dragable-confirm.vue'
|
|
89
97
|
|
|
90
98
|
export default {
|
|
91
99
|
name: 'SdkChatControlImage',
|
|
@@ -93,8 +101,8 @@ export default {
|
|
|
93
101
|
UiIcon,
|
|
94
102
|
UiImage,
|
|
95
103
|
UiButton,
|
|
96
|
-
|
|
97
|
-
|
|
104
|
+
BiTooltip,
|
|
105
|
+
ImageDragableConfirm
|
|
98
106
|
},
|
|
99
107
|
props: {
|
|
100
108
|
id: {
|
|
@@ -169,13 +177,21 @@ export default {
|
|
|
169
177
|
*/
|
|
170
178
|
onCorrectSrcMethod: {
|
|
171
179
|
type: Function
|
|
180
|
+
},
|
|
181
|
+
/**
|
|
182
|
+
* 拖拽原图拦截。开启后，已下载过原图的图片拖拽时会打开缩略图/原图选择弹窗。
|
|
183
|
+
*/
|
|
184
|
+
enableDragOriginImage: {
|
|
185
|
+
type: Boolean,
|
|
186
|
+
default: false
|
|
172
187
|
}
|
|
173
188
|
},
|
|
174
189
|
data () {
|
|
175
190
|
return {
|
|
176
191
|
defrostMsg: null,
|
|
177
192
|
errorMsg: null,
|
|
178
|
-
correctSrc: null // 纠正后的图片地址，一般是开启了enableOptimize，大图找不到的时候，会回退到小图地址
|
|
193
|
+
correctSrc: null, // 纠正后的图片地址，一般是开启了enableOptimize，大图找不到的时候，会回退到小图地址
|
|
194
|
+
showDragOriginConfirm: false
|
|
179
195
|
}
|
|
180
196
|
},
|
|
181
197
|
computed: {
|
|
@@ -246,6 +262,11 @@ export default {
|
|
|
246
262
|
return !!this.defrostMethod
|
|
247
263
|
}
|
|
248
264
|
},
|
|
265
|
+
watch: {
|
|
266
|
+
src () {
|
|
267
|
+
this.showDragOriginConfirm = false
|
|
268
|
+
}
|
|
269
|
+
},
|
|
249
270
|
methods: {
|
|
250
271
|
handleClick () {
|
|
251
272
|
this.$emit('click')
|
|
@@ -253,6 +274,17 @@ export default {
|
|
|
253
274
|
handleImageClick () {
|
|
254
275
|
this.imageClickMethod && this.imageClickMethod()
|
|
255
276
|
},
|
|
277
|
+
handleImageDragStart (event) {
|
|
278
|
+
if (!this.enableDragOriginImage || !this.isOriginImage) {
|
|
279
|
+
return
|
|
280
|
+
}
|
|
281
|
+
event.preventDefault()
|
|
282
|
+
event.stopPropagation()
|
|
283
|
+
this.showDragOriginConfirm = true
|
|
284
|
+
},
|
|
285
|
+
handleDragOriginConfirmClosed () {
|
|
286
|
+
this.showDragOriginConfirm = false
|
|
287
|
+
},
|
|
256
288
|
handleError () {
|
|
257
289
|
if (this.defrostMethod) {
|
|
258
290
|
this.errorMsg = '加载失败，可能资源被归档～'
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
</template>
|
|
10
10
|
<template v-if="item.msgType == MESSAGE_TYPE.TEXT">
|
|
11
11
|
<sdk-chat-panel-box
|
|
12
|
+
:show-user-name="showUserName"
|
|
12
13
|
:dir="dir"
|
|
13
14
|
:data="item"
|
|
14
15
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
</template>
|
|
32
33
|
<template v-else-if="item.msgType == MESSAGE_TYPE.IMAGE">
|
|
33
34
|
<sdk-chat-panel-box
|
|
35
|
+
:show-user-name="showUserName"
|
|
34
36
|
:dir="dir"
|
|
35
37
|
:data="item"
|
|
36
38
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -53,6 +55,7 @@
|
|
|
53
55
|
</template>
|
|
54
56
|
<template v-else-if="item.msgType == MESSAGE_TYPE.VIDEO">
|
|
55
57
|
<sdk-chat-panel-box
|
|
58
|
+
:show-user-name="showUserName"
|
|
56
59
|
:dir="dir"
|
|
57
60
|
:data="item"
|
|
58
61
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -75,6 +78,7 @@
|
|
|
75
78
|
</template>
|
|
76
79
|
<template v-else-if="item.msgType == MESSAGE_TYPE.VOICE">
|
|
77
80
|
<sdk-chat-panel-box
|
|
81
|
+
:show-user-name="showUserName"
|
|
78
82
|
:dir="dir"
|
|
79
83
|
:data="item"
|
|
80
84
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -98,6 +102,7 @@
|
|
|
98
102
|
</template>
|
|
99
103
|
<template v-else-if="item.msgType == MESSAGE_TYPE.MUSIC">
|
|
100
104
|
<sdk-chat-panel-box
|
|
105
|
+
:show-user-name="showUserName"
|
|
101
106
|
:dir="dir"
|
|
102
107
|
:data="item"
|
|
103
108
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -121,6 +126,7 @@
|
|
|
121
126
|
</template>
|
|
122
127
|
<template v-else-if="item.msgType == MESSAGE_TYPE.SHARE_CARD">
|
|
123
128
|
<sdk-chat-panel-box
|
|
129
|
+
:show-user-name="showUserName"
|
|
124
130
|
:dir="dir"
|
|
125
131
|
:data="item"
|
|
126
132
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -144,6 +150,7 @@
|
|
|
144
150
|
</template>
|
|
145
151
|
<template v-else-if="item.msgType == MESSAGE_TYPE.LOCATION">
|
|
146
152
|
<sdk-chat-panel-box
|
|
153
|
+
:show-user-name="showUserName"
|
|
147
154
|
:dir="dir"
|
|
148
155
|
:data="item"
|
|
149
156
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -171,6 +178,7 @@
|
|
|
171
178
|
</template>
|
|
172
179
|
<template v-else-if="item.msgType == MESSAGE_TYPE.REAL_TIME_POSITION">
|
|
173
180
|
<sdk-chat-panel-box
|
|
181
|
+
:show-user-name="showUserName"
|
|
174
182
|
:dir="dir"
|
|
175
183
|
:data="item"
|
|
176
184
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -192,6 +200,7 @@
|
|
|
192
200
|
</template>
|
|
193
201
|
<template v-else-if="item.msgType == MESSAGE_TYPE.ACCOUNT_TRANSFER">
|
|
194
202
|
<sdk-chat-panel-box
|
|
203
|
+
:show-user-name="showUserName"
|
|
195
204
|
:dir="dir"
|
|
196
205
|
:data="item"
|
|
197
206
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -218,6 +227,7 @@
|
|
|
218
227
|
</template>
|
|
219
228
|
<template v-else-if="item.msgType == MESSAGE_TYPE.RED_ENVELOPES">
|
|
220
229
|
<sdk-chat-panel-box
|
|
230
|
+
:show-user-name="showUserName"
|
|
221
231
|
:dir="dir"
|
|
222
232
|
:data="item"
|
|
223
233
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -241,6 +251,7 @@
|
|
|
241
251
|
</template>
|
|
242
252
|
<template v-else-if="item.msgType == MESSAGE_TYPE.COMPANY_CARD">
|
|
243
253
|
<sdk-chat-panel-box
|
|
254
|
+
:show-user-name="showUserName"
|
|
244
255
|
:dir="dir"
|
|
245
256
|
:data="item"
|
|
246
257
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -264,6 +275,7 @@
|
|
|
264
275
|
</template>
|
|
265
276
|
<template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO">
|
|
266
277
|
<sdk-chat-panel-box
|
|
278
|
+
:show-user-name="showUserName"
|
|
267
279
|
:dir="dir"
|
|
268
280
|
:data="item"
|
|
269
281
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -287,6 +299,7 @@
|
|
|
287
299
|
</template>
|
|
288
300
|
<template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO_CARD">
|
|
289
301
|
<sdk-chat-panel-box
|
|
302
|
+
:show-user-name="showUserName"
|
|
290
303
|
:dir="dir"
|
|
291
304
|
:data="item"
|
|
292
305
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -310,6 +323,7 @@
|
|
|
310
323
|
</template>
|
|
311
324
|
<template v-else-if="item.msgType == MESSAGE_TYPE.CHANNEL_VIDEO_LIVE">
|
|
312
325
|
<sdk-chat-panel-box
|
|
326
|
+
:show-user-name="showUserName"
|
|
313
327
|
:dir="dir"
|
|
314
328
|
:data="item"
|
|
315
329
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -333,6 +347,7 @@
|
|
|
333
347
|
</template>
|
|
334
348
|
<template v-else-if="item.msgType == MESSAGE_TYPE.URL">
|
|
335
349
|
<sdk-chat-panel-box
|
|
350
|
+
:show-user-name="showUserName"
|
|
336
351
|
:dir="dir"
|
|
337
352
|
:data="item"
|
|
338
353
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -359,6 +374,7 @@
|
|
|
359
374
|
</template>
|
|
360
375
|
<template v-else-if="item.msgType == MESSAGE_TYPE.URLNew">
|
|
361
376
|
<sdk-chat-panel-box
|
|
377
|
+
:show-user-name="showUserName"
|
|
362
378
|
:dir="dir"
|
|
363
379
|
:data="item"
|
|
364
380
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -385,6 +401,7 @@
|
|
|
385
401
|
</template>
|
|
386
402
|
<template v-else-if="item.msgType == MESSAGE_TYPE.CUSTOM_EXPRESSION">
|
|
387
403
|
<sdk-chat-panel-box
|
|
404
|
+
:show-user-name="showUserName"
|
|
388
405
|
:dir="dir"
|
|
389
406
|
:data="item"
|
|
390
407
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -406,6 +423,7 @@
|
|
|
406
423
|
</template>
|
|
407
424
|
<template v-else-if="item.msgType == MESSAGE_TYPE.CALLING">
|
|
408
425
|
<sdk-chat-panel-box
|
|
426
|
+
:show-user-name="showUserName"
|
|
409
427
|
:dir="dir"
|
|
410
428
|
:data="item"
|
|
411
429
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -439,6 +457,7 @@
|
|
|
439
457
|
</template>
|
|
440
458
|
<template v-else-if="item.msgType === MESSAGE_TYPE.TEXT_WITH_AT">
|
|
441
459
|
<sdk-chat-panel-box
|
|
460
|
+
:show-user-name="showUserName"
|
|
442
461
|
:dir="dir"
|
|
443
462
|
:data="item"
|
|
444
463
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -517,6 +536,7 @@
|
|
|
517
536
|
</template>
|
|
518
537
|
<template v-else-if="item.msgType === MESSAGE_TYPE.QUOTE_MESSAGE">
|
|
519
538
|
<sdk-chat-panel-box
|
|
539
|
+
:show-user-name="showUserName"
|
|
520
540
|
:dir="dir"
|
|
521
541
|
:data="item"
|
|
522
542
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -554,6 +574,7 @@
|
|
|
554
574
|
</template>
|
|
555
575
|
<template v-else>
|
|
556
576
|
<sdk-chat-panel-box
|
|
577
|
+
:show-user-name="showUserName"
|
|
557
578
|
:dir="dir"
|
|
558
579
|
:data="item"
|
|
559
580
|
:fetchUserMethod="fetchUserMethod"
|
|
@@ -659,6 +680,10 @@ export default {
|
|
|
659
680
|
config: {
|
|
660
681
|
type: Function
|
|
661
682
|
},
|
|
683
|
+
showUserName: {
|
|
684
|
+
type: Boolean,
|
|
685
|
+
default: true
|
|
686
|
+
},
|
|
662
687
|
fetchUserMethod: {
|
|
663
688
|
type: Function
|
|
664
689
|
}
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
:dir="dir"
|
|
21
21
|
:fetch-user-method="fetchUserMethod"
|
|
22
22
|
:config="config"
|
|
23
|
+
:show-user-name="showUserName"
|
|
23
24
|
@user-avatar-click="handleUserAvatarClick"
|
|
24
25
|
@user-avatar-contextmenu="handleUserAvatarContextmenu"
|
|
25
26
|
>
|
|
@@ -115,6 +116,10 @@ export default {
|
|
|
115
116
|
},
|
|
116
117
|
onBeforeSelectionChange: {
|
|
117
118
|
type: Function
|
|
119
|
+
},
|
|
120
|
+
showUserName: {
|
|
121
|
+
type: Boolean,
|
|
122
|
+
default: true
|
|
118
123
|
}
|
|
119
124
|
},
|
|
120
125
|
data () {
|