perf: 优化抖动提示

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -934,7 +934,7 @@ export default {
         },
 
         itemClassAdd(index) {
-            return index === this.replyActiveIndex ? 'dialog-shake' : '';
+            return index === this.replyActiveIndex ? 'common-shake' : '';
         },
 
         inputFocus() {

resources/assets/js/pages/manage/file.vue

@@ -816,6 +816,9 @@ export default {
                             const shareClass = row.share ? ' share' : '';
                             return h('div', {
                                 class: `file-nbox${shearClass}`,
+                                attrs: {
+                                    'data-id': row.id
+                                }
                             }, [
                                 h('div', {
                                     class: `no-dark-before file-name file-icon ${row.type}${shareClass}`,
@@ -1370,6 +1373,7 @@ export default {
                 this.$store.dispatch("saveFile", data);
                 if (isCreate) {
                     this.$store.dispatch("forgetFile", item.id);
+                    this.shakeFile(data.id);
                 }
             }).catch(({msg}) => {
                 $A.modalError(msg)
@@ -1537,6 +1541,17 @@ export default {
             this.shearIds = [];
         },
 
+        shakeFile(fileId) {
+            this.$nextTick(_ => {
+                const dom = $A(this.$el).find(`[data-id="${fileId}"]`)
+                if (dom.length > 0) {
+                    $A.scrollIntoViewIfNeeded(dom[0])
+                    $A(dom[0]).addClass("common-shake")
+                    setTimeout(_ => $A(dom[0]).removeClass("common-shake"), 800)
+                }
+            })
+        },
+
         /********************拖动上传部分************************/
 
         pasteDragNext(e, type) {
@@ -1594,8 +1609,12 @@ export default {
         },
 
         pasteSend() {
+            const names = []
             this.pasteFile.some(file => {
+                if (!names.find(name => name === file.name)) {
+                    names.push(file.name)
                     this.$refs.fileUpload.upload(file)
+                }
             });
         },
 

resources/assets/sass/pages/common.scss

@@ -652,17 +652,24 @@ body {
 }
 
 .icon-loading {
-    animation: icon-loading-load 0.6s infinite linear;
+    animation: animation-icon-loading 0.6s infinite linear;
 }
 
-@keyframes icon-loading-load {
+@keyframes animation-icon-loading {
-    from {
+    from { transform: rotate(0deg); }
-        transform: rotate(0deg);
+    to { transform: rotate(360deg); }
-    }
-    to {
-        transform: rotate(360deg);
-    }
 }
 
+.common-shake {
+    animation: animation-common-shake 600ms ease-in-out;
+    animation-delay: 200ms;
+}
 
+@keyframes animation-common-shake {
+    10%, 90% { transform: translate3d(-1px, 0, 0); }
+    20%, 80% { transform: translate3d(+2px, 0, 0); }
+    30%, 70% { transform: translate3d(-4px, 0, 0); }
+    40%, 60% { transform: translate3d(+4px, 0, 0); }
+    50% { transform: translate3d(-4px, 0, 0); }
+}
 

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -288,11 +288,6 @@
         position: relative;
         padding: 16px 32px 0;
 
-        .dialog-shake {
-            animation: ani-dialog-shake 600ms ease-in-out;
-            animation-delay: 200ms;
-        }
-
         .dialog-item {
             display: flex;
             flex-direction: row;
@@ -1235,14 +1230,6 @@
     overflow: hidden !important;
 }
 
-@keyframes ani-dialog-shake {
-    10%, 90% { transform: translate3d(-1px, 0, 0); }
-    20%, 80% { transform: translate3d(+2px, 0, 0); }
-    30%, 70% { transform: translate3d(-4px, 0, 0); }
-    40%, 60% { transform: translate3d(+4px, 0, 0); }
-    50% { transform: translate3d(-4px, 0, 0); }
-}
-
 @media (max-width: 768px) {
     .dialog-wrapper {
         background-color: #f8f8f8;

resources/assets/sass/pages/components/task-detail.scss

@@ -427,7 +427,7 @@
                                 cursor: pointer;
                             }
                             .ivu-icon-ios-loading {
-                                animation: icon-loading-load 0.6s infinite linear;
+                                animation: animation-icon-loading 0.6s infinite linear;
                             }
                         }
                     }
@@ -450,7 +450,7 @@
                 margin-top: 6px;
                 &.loading {
                     .ivu-icon-ios-loading {
-                        animation: icon-loading-load 0.6s infinite linear;
+                        animation: animation-icon-loading 0.6s infinite linear;
                     }
                 }
             }