perf: 优化消息窗口显示

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

@@ -1,53 +1,24 @@
 <template>
     <Modal
-        :value="visible"
+        :value="show"
-        :mask="false"
+        :styles="modalStyles"
         :mask-closable="false"
         :footer-hide="true"
-        :transition-names="['mobile-dialog', '']"
+        :mask="!windowPortrait"
-        :beforeClose="onBeforeClose"
+        :fullscreen="windowPortrait"
-        :class-name="`dialog-modal${closIng > 0 ? ' dialog-closing' : ''}`"
+        :transition-names="transitionNames"
-        fullscreen>
+        :class-name="className"
-        <DialogWrapper v-if="windowPortrait && dialogId > 0" ref="dialogWrapper" :dialogId="dialogId" :beforeBack="onBeforeClose" location="modal"/>
+        :beforeClose="onBeforeClose">
+        <DialogWrapper
+            v-if="show"
+            ref="dialogWrapper"
+            :dialogId="dialogId"
+            :style="dialogStyles"
+            :beforeBack="onBeforeClose"
+            location="modal"/>
     </Modal>
 </template>
 
-<style lang="scss">
-body {
-    .ivu-modal-wrap {
-        &.dialog-modal {
-            position: absolute;
-            overflow: hidden;
-
-            .ivu-modal {
-                margin: 0;
-                padding: 0;
-
-                .ivu-modal-content {
-                    background: transparent;
-
-                    .ivu-modal-close {
-                        display: none;
-                    }
-
-                    .ivu-modal-body {
-                        padding: 0;
-                        display: flex;
-                        flex-direction: column;
-                        overflow: hidden;
-                    }
-                }
-            }
-        }
-        &.dialog-closing {
-            .ql-editor {
-                caret-color: transparent;
-            }
-        }
-    }
-}
-</style>
-
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./DialogWrapper";
@@ -58,21 +29,56 @@ export default {
 
     data() {
         return {
+            show: false,
             timer: null,
             closIng: false,
         }
     },
 
     computed: {
-        ...mapState(['dialogId']),
+        ...mapState(['dialogId', 'routeName', 'windowOrientation']),
 
-        visible() {
+        modalStyles() {
-            return this.dialogId > 0 && this.windowPortrait
+            if (this.windowPortrait) {
+                return {}
+            }
+            return {
+                width: '90%',
+                maxWidth: '720px'
+            }
+        },
+
+        dialogStyles() {
+            if (this.windowPortrait) {
+                return {}
+            }
+            const height = Math.min(1100, this.windowHeight)
+            const factor = height > 900 ? 200 : 70;
+            return {
+                height: '600px',
+                maxHeight: (height - factor - 30) + 'px'
+            }
+        },
+
+        transitionNames() {
+            return this.windowPortrait ? ['mobile-dialog', ''] : ['ease', 'fade']
+        },
+
+        className() {
+            const cls = ['dialog-modal', `dialog-${this.windowOrientation}`]
+            if (this.closIng > 0) {
+                cls.push('dialog-closing')
+            }
+            return cls.join(' ')
         }
     },
 
     watch: {
-        visible(v) {
+        dialogId(id) {
+            this.show = id > 0 && this.routeName !== 'manage-messenger'
+        },
+
+        show(v) {
             $A.eeuiAppSetScrollEnabled(!v)
         }
     },

resources/assets/js/store/actions.js

@@ -3066,7 +3066,6 @@ export default {
                 state.dialogMsgId = dialog_msg_id;
                 state.dialogId = dialog_id;
                 const route = dialog_id > 0 && state.windowLandscape
-                route && $A.goForward({name: 'manage-messenger', params: {dialogAction: 'dialog'}});
                 resolve(route)
             })
         })

resources/assets/sass/pages/components/_.scss

@@ -1,6 +1,6 @@
 @import "chat-input";
 @import "dialog-group-info";
-@import "dialog-respond";
+@import "dialog-modal";
 @import "dialog-select";
 @import "dialog-session-history";
 @import "dialog-wrapper";

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

@@ -0,0 +1,66 @@
+body {
+    .ivu-modal-wrap {
+        &.dialog-modal {
+            position: absolute;
+            overflow: hidden;
+
+            .ivu-modal {
+                .ivu-modal-content {
+                    background: transparent;
+
+                    .ivu-modal-close {
+                        display: none;
+                    }
+
+                    .ivu-modal-body {
+                        padding: 0;
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;
+                    }
+                }
+            }
+        }
+
+        &.dialog-portrait {
+            position: absolute;
+            overflow: hidden;
+
+            .ivu-modal {
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        &.dialog-landscape {
+            .ivu-modal {
+                .ivu-modal-content {
+                    .ivu-modal-body {
+                        .dialog-wrapper {
+                            position: relative;
+                            border-radius: 18px;
+                            padding: 0 0 8px 0;
+                            overflow: hidden;
+
+                            .dialog-nav {
+                                .nav-wrapper {
+                                    padding: 0 20px;
+                                }
+                            }
+
+                            .dialog-footer {
+                                padding: 0 22px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &.dialog-closing {
+            .ql-editor {
+                caret-color: transparent;
+            }
+        }
+    }
+}