perf: 聊天文件发送进度

kuaifan · Mar 15, 2024 · dc3e5f0 · dc3e5f0
1 parent 01bda83
commit dc3e5f0
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/resources/assets/js/pages/manage/components/DialogUpload.vue b/resources/assets/js/pages/manage/components/DialogUpload.vue
@@ -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) {

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -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) {

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -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 = ''

diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -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;