From f42036c104391460555104e615c7f362a1142bf2 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Mon, 8 Jan 2024 12:30:56 +0800 Subject: [PATCH] no message --- .../pages/manage/components/DialogWrapper.vue | 81 ++++++++++--------- .../sass/pages/components/dialog-wrapper.scss | 81 ++++++++----------- 2 files changed, 76 insertions(+), 86 deletions(-) diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index f4e62eb66..6178bb49b 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -144,8 +144,8 @@

- : - {{$A.getMsgSimpleDesc(topMessageInfo)}} + : + {{$A.getMsgSimpleDesc(topMsg)}}

{{ $L('置顶人员') }} @@ -155,7 +155,7 @@

- +
@@ -208,9 +208,15 @@ -
-
{{$L(`有${msgNew}条新消息`)}}
-
+
+
+ + + +
-
    +
    • {{$L('文件')}}: {{item.name}} ({{$A.bytesToSize(item.size)}})
      @@ -759,7 +765,8 @@ export default { unreadMsgId: 0, // 最早未读消息id positionLoad: 0, // 定位跳转加载中 positionShow: false, // 定位跳转显示 - renderMsgLength: 0, // 渲染消息长度 + renderMsgNum: 0, // 渲染消息数量 + renderMsgSizes: new Map(), // 渲染消息尺寸 msgPreparedStatus: false, // 消息准备完成 listPreparedStatus: false, // 列表准备完成 selectedTextStatus: false, // 是否选择文本 @@ -930,12 +937,12 @@ export default { return array }, - quickMsgs() { - return this.dialogData.quick_msgs || [] + topMsg() { + return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id) }, - quickShow() { - return this.quickMsgs.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 + quickMsgs() { + return this.dialogData.quick_msgs || [] }, todoList() { @@ -947,6 +954,10 @@ export default { }); }, + quickShow() { + return this.quickMsgs.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 + }, + todoShow() { return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 }, @@ -956,12 +967,12 @@ export default { }, topShow() { - return this.topMessageInfo && this.windowScrollY === 0 && !this.searchShow + return this.topMsg && this.windowScrollY === 0 && !this.searchShow && this.msgType === '' }, wrapperClass() { if (['ready', 'ing'].includes(this.recordState)) { - return ['record-ready'] + return 'record-ready' } return null }, @@ -973,23 +984,13 @@ export default { } }, - pasteWrapperClass() { + pasteClass() { if (this.pasteItem.find(({type}) => type !== 'image')) { return ['multiple']; } 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}) { if (windowScrollY === 0 && isFocus @@ -1110,10 +1111,6 @@ export default { readEnabled({msgPreparedStatus, listPreparedStatus}) { return msgPreparedStatus && listPreparedStatus }, - - topMessageInfo() { - return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id) - } }, watch: { @@ -1144,7 +1141,8 @@ export default { this.positionShow = false this.listPreparedStatus = 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 // const tmpMsgA = this.allMsgList.map(({id, msg, emoji}) => { @@ -1168,7 +1166,7 @@ export default { return {id, msg, emoji} }) 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(_ => { @@ -2245,17 +2243,22 @@ export default { }).catch(() => {}) }, - onItemRendered() { + onItemRendered(id, size) { if (!this.$refs.scroller || !this.$refs.footer) { return } - if (this.renderMsgLength > 0 && this.$refs.scroller.getSizes() >= this.renderMsgLength) { - this.renderMsgLength = 0 + if (this.renderMsgNum > 0 && this.$refs.scroller.getSizes() >= this.renderMsgNum) { + this.renderMsgNum = 0 this.onFooterResize() - if (!this.onMarkOffset(true)) { - this.onToBottom() - } + !this.onMarkOffset(true) && 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) { @@ -3418,11 +3421,11 @@ export default { }, onPosTop() { - if (!this.topMessageInfo) { + if (!this.topMsg) { return } this.topViewPosLoad = true - this.onPositionId(this.topMessageInfo.id).finally(_ => { + this.onPositionId(this.topMsg.id).finally(_ => { this.topViewPosLoad = false }) }, diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss index 7720525c6..cabb0b04c 100644 --- a/resources/assets/sass/pages/components/dialog-wrapper.scss +++ b/resources/assets/sass/pages/components/dialog-wrapper.scss @@ -512,6 +512,7 @@ width: 18px; height: 18px; margin: 4px; + border-width: 2px; } } } @@ -1586,44 +1587,36 @@ padding: 0 24px; margin-bottom: 16px; - .dialog-newmsg, .dialog-goto { position: absolute; + top: -48px; right: 30px; - color: #ffffff; - background-color: #555555; - cursor: pointer; 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; - 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; align-content: center; justify-content: center; - color: $primary-text-color; - background-color: #ffffff; - border: 1px solid #eeeeee; - box-shadow: 0 0 4px 0 rgba($primary-text-color, 0.2); - top: -48px; - width: 40px; - height: 40px; - line-height: 38px; - border-radius: 50%; + animation: dialog-goto-animation 200ms ease-out forwards; + + .ivu-badge { + display: flex; + align-items: center; + justify-content: center; + + .ivu-badge-count { + right: unset; + transform: unset; + border: none; + } + } .taskfont { 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 { @@ -2402,7 +2379,6 @@ body.window-portrait { width: calc(100% + 20px); } } - .dialog-newmsg, .dialog-goto { 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 { from { opacity: 0;