mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-04 16:37:06 +00:00
perf: 展示消息回应详情
This commit is contained in:
kuaifan
parent
8e9cd253e4
commit
0f076b4a16
@ -38,7 +38,8 @@
|
||||
@on-view-file="onViewFile"
|
||||
@on-down-file="onDownFile"
|
||||
@on-reply-list="onReplyList"
|
||||
@on-emoji="onEmoji"/>
|
||||
@on-emoji="onEmoji"
|
||||
@on-show-emoji-user="onShowEmojiUser"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@ -195,6 +196,10 @@ export default {
|
||||
this.dispatch("on-emoji", data)
|
||||
},
|
||||
|
||||
onShowEmojiUser(data) {
|
||||
this.dispatch("on-show-emoji-user", data)
|
||||
},
|
||||
|
||||
dispatch(event, arg) {
|
||||
if (this.isReply) {
|
||||
this.$emit(event, arg)
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="dialog-respond">
|
||||
<div class="respond-title"><em>{{respondData.symbol}}</em>{{$L('回应详情')}} ({{respondData.userids.length}})</div>
|
||||
|
||||
<div class="respond-user">
|
||||
<ul>
|
||||
<li v-for="(userid, index) in respondData.userids" :key="index">
|
||||
<UserAvatar :userid="userid" :size="32" showName tooltipDisabled/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DialogRespond",
|
||||
props: {
|
||||
respondData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -76,7 +76,14 @@
|
||||
:class="{hasme: item.userids.includes(userId)}"
|
||||
@click="onEmoji(item.symbol)">
|
||||
<div class="emoji-symbol no-dark-content">{{item.symbol}}</div>
|
||||
<div class="emoji-num">{{item.userids.length}}</div>
|
||||
<div class="emoji-users">
|
||||
<ul>
|
||||
<template v-for="(uitem, uindex) in item.userids">
|
||||
<li v-if="uindex < 5" :class="{bold:uitem==userId}"><UserAvatar :userid="uitem" tooltip-disabled show-name :show-icon="false"/></li>
|
||||
<li v-else-if="uindex == 5" @click.stop="onShowEmojiUser(item)">+{{item.userids.length - 5}}位</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -461,6 +468,10 @@ export default {
|
||||
symbol
|
||||
})
|
||||
},
|
||||
|
||||
onShowEmojiUser(item) {
|
||||
this.$emit("on-show-emoji-user", item)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -102,7 +102,8 @@
|
||||
@on-view-file="onViewFile"
|
||||
@on-down-file="onDownFile"
|
||||
@on-reply-list="onReplyList"
|
||||
@on-emoji="onEmoji">
|
||||
@on-emoji="onEmoji"
|
||||
@on-show-emoji-user="onShowEmojiUser">
|
||||
<template slot="header">
|
||||
<div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading"><Loading/></div>
|
||||
<div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
|
||||
@ -325,6 +326,14 @@
|
||||
</DialogWrapper>
|
||||
</DrawerOverlay>
|
||||
|
||||
<!--回应详情-->
|
||||
<DrawerOverlay
|
||||
v-model="respondShow"
|
||||
placement="right"
|
||||
:size="400">
|
||||
<DialogRespond v-if="respondShow" :respond-data="respondData"/>
|
||||
</DrawerOverlay>
|
||||
|
||||
<!--待办完成-->
|
||||
<DrawerOverlay
|
||||
v-model="todoViewShow"
|
||||
@ -361,6 +370,7 @@ import DialogUpload from "./DialogUpload";
|
||||
import UserInput from "../../../components/UserInput";
|
||||
import DrawerOverlay from "../../../components/DrawerOverlay";
|
||||
import DialogGroupInfo from "./DialogGroupInfo";
|
||||
import DialogRespond from "./DialogRespond";
|
||||
import ChatInput from "./ChatInput";
|
||||
|
||||
import VirtualList from 'vue-virtual-scroll-list-hi'
|
||||
@ -369,6 +379,7 @@ import {Store} from "le5le-store";
|
||||
export default {
|
||||
name: "DialogWrapper",
|
||||
components: {
|
||||
DialogRespond,
|
||||
DialogItem,
|
||||
VirtualList,
|
||||
ChatInput,
|
||||
@ -444,6 +455,9 @@ export default {
|
||||
replyListShow: false,
|
||||
replyListId: 0,
|
||||
|
||||
respondShow: false,
|
||||
respondData: {},
|
||||
|
||||
todoSettingShow: false,
|
||||
todoSettingLoad: 0,
|
||||
todoSettingData: {
|
||||
@ -1797,6 +1811,14 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
onShowEmojiUser(data) {
|
||||
if (this.operateVisible) {
|
||||
return
|
||||
}
|
||||
this.respondData = data
|
||||
this.respondShow = true
|
||||
},
|
||||
|
||||
onTag() {
|
||||
if (this.operateVisible) {
|
||||
return
|
||||
|
||||
11
resources/assets/sass/dark.scss
vendored
11
resources/assets/sass/dark.scss
vendored
@ -208,8 +208,15 @@ body.dark-mode-reverse {
|
||||
&.hasme {
|
||||
background-color: #b2ff93;
|
||||
}
|
||||
.emoji-num {
|
||||
color: #000000;
|
||||
.emoji-users {
|
||||
&:before {
|
||||
background-color: rgba(#000000, 0.7);
|
||||
}
|
||||
> ul {
|
||||
> li {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import "chat-input";
|
||||
@import "dialog-group-info";
|
||||
@import "dialog-respond";
|
||||
@import "dialog-wrapper";
|
||||
@import "file-content";
|
||||
@import "meeting-manager";
|
||||
|
||||
50
resources/assets/sass/pages/components/dialog-respond.scss
vendored
Normal file
50
resources/assets/sass/pages/components/dialog-respond.scss
vendored
Normal file
@ -0,0 +1,50 @@
|
||||
.dialog-respond {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.respond-title {
|
||||
text-align: center;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> em {
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.respond-user {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.common-avatar {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
.avatar-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -776,10 +776,39 @@
|
||||
.emoji-symbol {
|
||||
font-size: 16px;
|
||||
}
|
||||
.emoji-num {
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
color: #818181;
|
||||
.emoji-users {
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 7px;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 1px;
|
||||
transform: scaleX(0.5);
|
||||
background-color: rgba(#818181, 0.7);
|
||||
}
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
color: #818181;
|
||||
font-size: 12px;
|
||||
&.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
+ li {
|
||||
&:before {
|
||||
content: "、";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -968,8 +997,15 @@
|
||||
&.hasme {
|
||||
background-color: #5ba93c;
|
||||
}
|
||||
.emoji-num {
|
||||
color: #ffffff;
|
||||
.emoji-users {
|
||||
&:before {
|
||||
background-color: rgba(#ffffff, 0.7);
|
||||
}
|
||||
> ul {
|
||||
> li {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user