mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-03 10:21:55 +00:00
perf: 消息置顶滚动恢复
This commit is contained in:
Pang
parent
3a74cdc98b
commit
7714c53085
@ -2296,13 +2296,14 @@ class DialogController extends AbstractController
|
||||
$dialog->save();
|
||||
//
|
||||
$data = [
|
||||
'add' => null,
|
||||
'update' => [
|
||||
'dialog_id' => $dialog->id,
|
||||
'top_msg_id' => $dialog->top_msg_id,
|
||||
'top_userid' => $dialog->top_userid,
|
||||
]
|
||||
];
|
||||
$res = $msg->sendMsg(null, $dialog->id, 'top', [
|
||||
$res = WebSocketDialogMsg::sendMsg(null, $dialog->id, 'top', [
|
||||
'action' => $dialog->top_msg_id ? 'add' : 'remove',
|
||||
'data' => [
|
||||
'id' => $msg->id,
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<!--顶部导航-->
|
||||
<div ref="nav" class="dialog-nav">
|
||||
<slot name="head">
|
||||
<div class="nav-wrapper" :class="{completed: $A.dialogCompleted(dialogData)}">
|
||||
<div class="nav-wrapper" :class="navClass">
|
||||
<div class="dialog-back" @click="onBack">
|
||||
<i class="taskfont"></i>
|
||||
<div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
|
||||
@ -137,7 +137,7 @@
|
||||
</div>
|
||||
|
||||
<!--置顶消息-->
|
||||
<div v-if="topMessageInfo" class="dialog-top-message" :class="topMessageClass" @click="onPosTop">
|
||||
<div v-if="topShow" class="dialog-top-message" @click="onPosTop">
|
||||
<div class="dialog-top-message-warp">
|
||||
<div class="dialog-top-message-font">
|
||||
<i class="taskfont"></i>
|
||||
@ -147,7 +147,10 @@
|
||||
<UserAvatar :userid="topMessageInfo.userid" showName :showIcon="false"/>:
|
||||
<span>{{$A.getMsgSimpleDesc(topMessageInfo)}}</span>
|
||||
</p>
|
||||
<p class="personnel">{{$L('置顶人员')}} <UserAvatar :userid="dialogData.top_userid" showName :showIcon="false"/> </p>
|
||||
<p class="personnel">
|
||||
{{ $L('置顶人员') }}
|
||||
<UserAvatar :userid="dialogData.top_userid" showName :showIcon="false"/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dialog-top-message-btn">
|
||||
<Loading v-if="topViewPosLoad" type="pure"/>
|
||||
@ -158,7 +161,7 @@
|
||||
</div>
|
||||
|
||||
<!--跳转提示-->
|
||||
<div v-if="positionShow && positionMsg" class="dialog-position" :class="{'down': tagShow}">
|
||||
<div v-if="positionShow && positionMsg" class="dialog-position">
|
||||
<div class="position-label" @click="onPositionMark(positionMsg.msg_id)">
|
||||
<Icon v-if="positionLoad > 0" type="ios-loading" class="icon-loading"></Icon>
|
||||
<i v-else class="taskfont"></i>
|
||||
@ -171,7 +174,6 @@
|
||||
ref="scroller"
|
||||
class="dialog-scroller scrollbar-virtual"
|
||||
active-prefix="item"
|
||||
:class="scrollerClass"
|
||||
:data-key="'id'"
|
||||
:data-sources="allMsgs"
|
||||
:data-component="msgItem"
|
||||
@ -949,6 +951,14 @@ export default {
|
||||
return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0
|
||||
},
|
||||
|
||||
tagShow() {
|
||||
return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow
|
||||
},
|
||||
|
||||
topShow() {
|
||||
return this.topMessageInfo && this.windowScrollY === 0 && !this.searchShow
|
||||
},
|
||||
|
||||
wrapperClass() {
|
||||
if (['ready', 'ing'].includes(this.recordState)) {
|
||||
return ['record-ready']
|
||||
@ -956,12 +966,11 @@ export default {
|
||||
return null
|
||||
},
|
||||
|
||||
tagShow() {
|
||||
return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow
|
||||
},
|
||||
|
||||
scrollerClass() {
|
||||
return !this.$slots.head && !this.topMessageInfo && this.tagShow ? 'default-header' : null
|
||||
navClass() {
|
||||
return {
|
||||
'completed': $A.dialogCompleted(this.dialogData),
|
||||
'tagged': this.tagShow
|
||||
}
|
||||
},
|
||||
|
||||
pasteWrapperClass() {
|
||||
@ -1104,10 +1113,6 @@ export default {
|
||||
|
||||
topMessageInfo() {
|
||||
return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id)
|
||||
},
|
||||
|
||||
topMessageClass() {
|
||||
return !this.$slots.head && this.tagShow ? 'default-header' : null
|
||||
}
|
||||
},
|
||||
|
||||
@ -3383,11 +3388,10 @@ export default {
|
||||
data: {
|
||||
msg_id: data.id
|
||||
},
|
||||
}).then(async ({ data, msg }) => {
|
||||
}).then(({ data, msg }) => {
|
||||
resolve(msg)
|
||||
this.onMarkOffset(false)
|
||||
// 取消置顶
|
||||
await this.$store.dispatch("saveDialog", {
|
||||
this.$store.dispatch("saveDialog", {
|
||||
'id' : this.dialogId,
|
||||
'top_msg_id' : data.update?.top_msg_id || 0,
|
||||
'top_userid' : data.update?.top_userid || 0
|
||||
@ -3396,10 +3400,15 @@ export default {
|
||||
if (data.update?.top_msg_id) {
|
||||
const index = this.dialogMsgs.findIndex(({ id }) => id == data.update.top_msg_id);
|
||||
if (index > -1) {
|
||||
await this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index]))
|
||||
this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index]))
|
||||
}
|
||||
}
|
||||
this.onMarkOffset(true)
|
||||
// 添加消息
|
||||
if (data.add) {
|
||||
this.$store.dispatch("saveDialogMsg", data.add);
|
||||
this.$store.dispatch("updateDialogLastMsg", data.add);
|
||||
this.onActive();
|
||||
}
|
||||
}).catch(({ msg }) => {
|
||||
reject(msg);
|
||||
}).finally(_ => {
|
||||
|
||||
@ -437,8 +437,8 @@
|
||||
.dialog-top-message {
|
||||
background: white;
|
||||
|
||||
.dialog-top-message-warp{
|
||||
padding:10px 5px;
|
||||
.dialog-top-message-warp {
|
||||
padding: 10px 5px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 10px 16px 0;
|
||||
@ -450,24 +450,29 @@
|
||||
.dialog-top-message-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
&.content {
|
||||
margin-bottom: 2px;
|
||||
>span{
|
||||
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.personnel {
|
||||
font-size: 12px;
|
||||
color: #afafaf;
|
||||
|
||||
.avatar-name {
|
||||
color: #84C56A;
|
||||
margin-left: 10px;
|
||||
@ -476,11 +481,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-top-message-font{
|
||||
.dialog-top-message-font {
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
padding:0 10px;
|
||||
.taskfont{
|
||||
padding: 0 10px;
|
||||
|
||||
.taskfont {
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
@ -494,12 +500,14 @@
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding:0 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.taskfont {
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.common-pureing {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@ -509,6 +517,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-position {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
animation: position-in-animation 200ms ease-out forwards;
|
||||
animation-delay: 300ms;
|
||||
|
||||
.position-label {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 18px 0 0 18px;
|
||||
color: #ffffff;
|
||||
background-color: $primary-color;
|
||||
cursor: pointer;
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-scroller {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
@ -1534,38 +1577,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-position {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
animation: position-in-animation 200ms ease-out forwards;
|
||||
animation-delay: 300ms;
|
||||
|
||||
.position-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 18px 0 0 18px;
|
||||
color: #ffffff;
|
||||
background-color: $primary-color;
|
||||
cursor: pointer;
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -2216,6 +2227,10 @@ body.window-portrait {
|
||||
}
|
||||
}
|
||||
|
||||
&.tagged {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.dialog-back,
|
||||
.dialog-menu {
|
||||
position: absolute;
|
||||
@ -2307,21 +2322,12 @@ body.window-portrait {
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-top-message {
|
||||
&.default-header {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
.dialog-scroller {
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
overscroll-behavior: none;
|
||||
background-color: #ffffff;
|
||||
|
||||
&.default-header {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.dialog-item {
|
||||
.dialog-view {
|
||||
&.text {
|
||||
@ -2363,11 +2369,6 @@ body.window-portrait {
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-position {
|
||||
&.down {
|
||||
top: 130px;
|
||||
}
|
||||
}
|
||||
.dialog-footer {
|
||||
background-color: #f8f8f8;
|
||||
padding: 8px 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user