github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 聊天文件发送进度

Browse Source
This commit is contained in:
kuaifan 2024-03-15 12:33:16 +09:00
parent 01bda83fcd
commit dc3e5f0a59
4 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/pages/manage/components/DialogUpload.vue
View File

@ -140,8 +140,8 @@ export default {
file.msg = this.fileMsgCaches[msgName]
delete this.fileMsgCaches[msgName]
}
this.$emit('on-progress', file)
}
this.$emit('on-progress', file)
},
handleSuccess(res, file) {

12
resources/assets/js/pages/manage/components/DialogView.vue
View File

@ -40,6 +40,9 @@
<div class="file-size">{{$A.bytesToSize(msgData.msg.size)}}</div>
</div>
</div>
<div v-if="msgData.msg.percentage" class="file-percentage">
<span :style="fileStyle(msgData.msg.percentage)"></span>
</div>
</div>
</div>
<!--录音-->
@ -508,6 +511,15 @@ export default {
return `${Math.max(1, seconds)}″`
},
fileStyle(percentage) {
if (percentage) {
return {
width: (100 - percentage) + '%'
};
}
return {};
},
imageStyle(info) {
const {width, height} = info;
if (width && height) {

8
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -1983,13 +1983,19 @@ export default {
chatFile(type, file) {
switch (type) {
case 'progress':
const percentage = file.showProgress ? Math.max(file.percentage, 0.01) : false
const temp = this.tempMsgs.find(({id}) => id == file.tempId);
if (temp) {
temp.msg.percentage = percentage
return;
}
const tempMsg = {
id: file.tempId,
dialog_id: this.dialogData.id,
reply_id: this.quoteId,
type: 'file',
userid: this.userId,
msg: file.msg || {},
msg: Object.assign(file.msg || {}, {percentage}),
}
this.tempMsgs.push(tempMsg)
this.msgType = ''

20
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -937,6 +937,26 @@
}
.content-file {
position: relative;
.file-percentage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 3px;
overflow: hidden;
> span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0;
background-color: rgba(170, 170, 170, 0.2);
}
}
&.file {
display: inline-block;