github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-14 21:02:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化消息窗口显示

Browse Source
This commit is contained in:
kuaifan 2025-04-03 10:01:02 +08:00
parent 38b50a8a84
commit 0c9c9cb90a
4 changed files with 120 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
resources/assets/js/pages/manage/components/DialogModal.vue
View File

@ -1,53 +1,24 @@
<template>
<Modal
:value="visible"
:mask="false"
:value="show"
:styles="modalStyles"
:mask-closable="false"
:footer-hide="true"
:transition-names="['mobile-dialog', '']"
:beforeClose="onBeforeClose"
:class-name="`dialog-modal${closIng > 0 ? ' dialog-closing' : ''}`"
fullscreen>
<DialogWrapper v-if="windowPortrait && dialogId > 0" ref="dialogWrapper" :dialogId="dialogId" :beforeBack="onBeforeClose" location="modal"/>
:mask="!windowPortrait"
:fullscreen="windowPortrait"
:transition-names="transitionNames"
:class-name="className"
: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() {
return this.dialogId > 0 && this.windowPortrait
modalStyles() {
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)
}
},

1
resources/assets/js/store/actions.js vendored
View File

@ -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)
})
})

2
resources/assets/sass/pages/components/_.scss vendored
View File

@ -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";

66
resources/assets/sass/pages/components/dialog-modal.scss vendored Normal file
View File

@ -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;
}
}
}
}