no message

This commit is contained in:
kuaifan 2024-01-08 12:30:56 +08:00
parent b3bd5aded5
commit f42036c104
2 changed files with 76 additions and 86 deletions

View File

@ -144,8 +144,8 @@
</div> </div>
<div class="dialog-top-message-content"> <div class="dialog-top-message-content">
<p class="content"> <p class="content">
<UserAvatar :userid="topMessageInfo.userid" showName :showIcon="false"/>: <UserAvatar :userid="topMsg.userid" showName :showIcon="false"/>:
<span>{{$A.getMsgSimpleDesc(topMessageInfo)}}</span> <span>{{$A.getMsgSimpleDesc(topMsg)}}</span>
</p> </p>
<p class="personnel"> <p class="personnel">
{{ $L('置顶人员') }} {{ $L('置顶人员') }}
@ -155,7 +155,7 @@
<div class="dialog-top-message-btn"> <div class="dialog-top-message-btn">
<Loading v-if="topViewPosLoad" type="pure"/> <Loading v-if="topViewPosLoad" type="pure"/>
<i v-else class="taskfont">&#xee15;</i> <i v-else class="taskfont">&#xee15;</i>
<i class="taskfont" @click.stop="onCancelTop(topMessageInfo)">&#xe6e5;</i> <i class="taskfont" @click.stop="onCancelTop(topMsg)">&#xe6e5;</i>
</div> </div>
</div> </div>
</div> </div>
@ -208,9 +208,15 @@
</VirtualList> </VirtualList>
<!--底部输入--> <!--底部输入-->
<div ref="footer" class="dialog-footer" :class="footerClass" @click="onActive"> <div ref="footer" class="dialog-footer" @click="onActive">
<div class="dialog-newmsg" @click="onToBottom">{{$L(`${msgNew}条新消息`)}}</div> <div
<div class="dialog-goto" @click="onToBottom"><i class="taskfont">&#xe72b;</i></div> v-if="scrollTail > 500 || (msgNew > 0 && allMsgs.length > 0)"
class="dialog-goto"
@click="onToBottom">
<Badge :overflow-count="999" :count="msgNew">
<i class="taskfont">&#xe72b;</i>
</Badge>
</div>
<DialogUpload <DialogUpload
ref="chatUpload" ref="chatUpload"
class="chat-upload" class="chat-upload"
@ -354,7 +360,7 @@
:closable="false" :closable="false"
:mask-closable="false" :mask-closable="false"
@on-ok="pasteSend"> @on-ok="pasteSend">
<ul class="dialog-wrapper-paste" :class="pasteWrapperClass"> <ul class="dialog-wrapper-paste" :class="pasteClass">
<li v-for="item in pasteItem"> <li v-for="item in pasteItem">
<img v-if="item.type == 'image'" :src="item.result"/> <img v-if="item.type == 'image'" :src="item.result"/>
<div v-else>{{$L('文件')}}: {{item.name}} ({{$A.bytesToSize(item.size)}})</div> <div v-else>{{$L('文件')}}: {{item.name}} ({{$A.bytesToSize(item.size)}})</div>
@ -759,7 +765,8 @@ export default {
unreadMsgId: 0, // id unreadMsgId: 0, // id
positionLoad: 0, // positionLoad: 0, //
positionShow: false, // positionShow: false, //
renderMsgLength: 0, // renderMsgNum: 0, //
renderMsgSizes: new Map(), //
msgPreparedStatus: false, // msgPreparedStatus: false, //
listPreparedStatus: false, // listPreparedStatus: false, //
selectedTextStatus: false, // selectedTextStatus: false, //
@ -930,12 +937,12 @@ export default {
return array return array
}, },
quickMsgs() { topMsg() {
return this.dialogData.quick_msgs || [] return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id)
}, },
quickShow() { quickMsgs() {
return this.quickMsgs.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 return this.dialogData.quick_msgs || []
}, },
todoList() { todoList() {
@ -947,6 +954,10 @@ export default {
}); });
}, },
quickShow() {
return this.quickMsgs.length > 0 && this.windowScrollY === 0 && this.quoteId === 0
},
todoShow() { todoShow() {
return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0
}, },
@ -956,12 +967,12 @@ export default {
}, },
topShow() { topShow() {
return this.topMessageInfo && this.windowScrollY === 0 && !this.searchShow return this.topMsg && this.windowScrollY === 0 && !this.searchShow && this.msgType === ''
}, },
wrapperClass() { wrapperClass() {
if (['ready', 'ing'].includes(this.recordState)) { if (['ready', 'ing'].includes(this.recordState)) {
return ['record-ready'] return 'record-ready'
} }
return null return null
}, },
@ -973,23 +984,13 @@ export default {
} }
}, },
pasteWrapperClass() { pasteClass() {
if (this.pasteItem.find(({type}) => type !== 'image')) { if (this.pasteItem.find(({type}) => type !== 'image')) {
return ['multiple']; return ['multiple'];
} }
return []; return [];
}, },
footerClass() {
if (this.msgNew > 0 && this.allMsgs.length > 0) {
return 'newmsg'
}
if (this.scrollTail > 500) {
return 'goto'
}
return null
},
footerPaddingBottom({keyboardType, keyboardHeight, safeAreaBottom, windowScrollY, isMessenger, isFocus}) { footerPaddingBottom({keyboardType, keyboardHeight, safeAreaBottom, windowScrollY, isMessenger, isFocus}) {
if (windowScrollY === 0 if (windowScrollY === 0
&& isFocus && isFocus
@ -1110,10 +1111,6 @@ export default {
readEnabled({msgPreparedStatus, listPreparedStatus}) { readEnabled({msgPreparedStatus, listPreparedStatus}) {
return msgPreparedStatus && listPreparedStatus return msgPreparedStatus && listPreparedStatus
}, },
topMessageInfo() {
return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id)
}
}, },
watch: { watch: {
@ -1144,7 +1141,8 @@ export default {
this.positionShow = false this.positionShow = false
this.listPreparedStatus = false this.listPreparedStatus = false
this.scrollToBottomAndRefresh = false this.scrollToBottomAndRefresh = false
this.renderMsgLength = Math.min(this.keeps, Math.max(this.allMsgList.length, 1)) this.renderMsgNum = Math.min(this.keeps, Math.max(this.allMsgList.length, 1))
this.renderMsgSizes.clear()
this.allMsgs = this.allMsgList this.allMsgs = this.allMsgList
// //
const tmpMsgA = this.allMsgList.map(({id, msg, emoji}) => { const tmpMsgA = this.allMsgList.map(({id, msg, emoji}) => {
@ -1168,7 +1166,7 @@ export default {
return {id, msg, emoji} return {id, msg, emoji}
}) })
if (JSON.stringify(tmpMsgA) != JSON.stringify(tmpMsgB)) { if (JSON.stringify(tmpMsgA) != JSON.stringify(tmpMsgB)) {
this.renderMsgLength = Math.min(this.keeps, Math.max(this.allMsgList.length, 1)) this.renderMsgNum = Math.min(this.keeps, Math.max(this.allMsgList.length, 1))
} }
// //
setTimeout(_ => { setTimeout(_ => {
@ -2245,17 +2243,22 @@ export default {
}).catch(() => {}) }).catch(() => {})
}, },
onItemRendered() { onItemRendered(id, size) {
if (!this.$refs.scroller || !this.$refs.footer) { if (!this.$refs.scroller || !this.$refs.footer) {
return return
} }
if (this.renderMsgLength > 0 && this.$refs.scroller.getSizes() >= this.renderMsgLength) { if (this.renderMsgNum > 0 && this.$refs.scroller.getSizes() >= this.renderMsgNum) {
this.renderMsgLength = 0 this.renderMsgNum = 0
this.onFooterResize() this.onFooterResize()
if (!this.onMarkOffset(true)) { !this.onMarkOffset(true) && this.onToBottom()
this.onToBottom()
}
} }
//
if (this.renderMsgSizes.has(id)
&& size > this.renderMsgSizes.get(id)
&& size - this.renderMsgSizes.get(id) === this.scrollInfo().tail) {
this.onToBottom()
}
this.renderMsgSizes.set(id, size)
}, },
onDialogMenu(cmd) { onDialogMenu(cmd) {
@ -3418,11 +3421,11 @@ export default {
}, },
onPosTop() { onPosTop() {
if (!this.topMessageInfo) { if (!this.topMsg) {
return return
} }
this.topViewPosLoad = true this.topViewPosLoad = true
this.onPositionId(this.topMessageInfo.id).finally(_ => { this.onPositionId(this.topMsg.id).finally(_ => {
this.topViewPosLoad = false this.topViewPosLoad = false
}) })
}, },

View File

@ -512,6 +512,7 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 4px; margin: 4px;
border-width: 2px;
} }
} }
} }
@ -1586,44 +1587,36 @@
padding: 0 24px; padding: 0 24px;
margin-bottom: 16px; margin-bottom: 16px;
.dialog-newmsg,
.dialog-goto { .dialog-goto {
position: absolute; position: absolute;
top: -48px;
right: 30px; right: 30px;
color: #ffffff;
background-color: #555555;
cursor: pointer;
z-index: 2; z-index: 2;
transition: all 0.2s; width: 40px;
height: 40px;
border-radius: 50%;
color: $primary-text-color;
box-shadow: 0 0 4px 0 rgba($primary-text-color, 0.2);
background-color: #ffffff;
border: 1px solid #eeeeee;
cursor: pointer;
user-select: none; user-select: none;
pointer-events: none;
opacity: 0;
transform: scale(0);
}
.dialog-newmsg {
display: block;
top: -44px;
height: 30px;
line-height: 30px;
font-size: 12px;
padding: 0 12px;
border-radius: 16px;
}
.dialog-goto {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
color: $primary-text-color; animation: dialog-goto-animation 200ms ease-out forwards;
background-color: #ffffff;
border: 1px solid #eeeeee; .ivu-badge {
box-shadow: 0 0 4px 0 rgba($primary-text-color, 0.2); display: flex;
top: -48px; align-items: center;
width: 40px; justify-content: center;
height: 40px;
line-height: 38px; .ivu-badge-count {
border-radius: 50%; right: unset;
transform: unset;
border: none;
}
}
.taskfont { .taskfont {
font-size: 24px; font-size: 24px;
@ -1702,22 +1695,6 @@
} }
} }
} }
&.newmsg {
.dialog-newmsg {
pointer-events: auto;
opacity: 1;
transform: scale(1);
}
}
&.goto {
.dialog-goto {
pointer-events: auto;
opacity: 1;
transform: scale(1);
}
}
} }
.drag-over { .drag-over {
@ -2402,7 +2379,6 @@ body.window-portrait {
width: calc(100% + 20px); width: calc(100% + 20px);
} }
} }
.dialog-newmsg,
.dialog-goto { .dialog-goto {
right: 16px; right: 16px;
} }
@ -2433,6 +2409,17 @@ body.window-portrait {
} }
} }
@keyframes dialog-goto-animation {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes position-in-animation { @keyframes position-in-animation {
from { from {
opacity: 0; opacity: 0;