perf: 展示消息回应详情

resources/assets/js/pages/manage/components/DialogItem.vue

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

resources/assets/js/pages/manage/components/DialogRespond.vue

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

resources/assets/js/pages/manage/components/DialogView.vue

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

resources/assets/js/pages/manage/components/DialogWrapper.vue

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

resources/assets/sass/dark.scss

@@ -208,7 +208,12 @@ body.dark-mode-reverse {
                                     &.hasme {
                                         background-color: #b2ff93;
                                     }
-                                    .emoji-num {
+                                    .emoji-users {
+                                        &:before {
+                                            background-color: rgba(#000000, 0.7);
+                                        }
+                                        > ul {
+                                            > li {
                                                 color: #000000;
                                             }
                                         }
@@ -219,6 +224,8 @@ body.dark-mode-reverse {
                     }
                 }
             }
+        }
+    }
 
     .dialog-group-info {
         .group-info-user {

resources/assets/sass/pages/components/_.scss

@@ -1,5 +1,6 @@
 @import "chat-input";
 @import "dialog-group-info";
+@import "dialog-respond";
 @import "dialog-wrapper";
 @import "file-content";
 @import "meeting-manager";

resources/assets/sass/pages/components/dialog-respond.scss

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

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -776,10 +776,39 @@
                             .emoji-symbol {
                                 font-size: 16px;
                             }
-                            .emoji-num {
+                            .emoji-users {
-                                font-size: 12px;
+                                position: relative;
-                                padding-left: 4px;
+                                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,12 +997,19 @@
                                 &.hasme {
                                     background-color: #5ba93c;
                                 }
-                                .emoji-num {
+                                .emoji-users {
+                                    &:before {
+                                        background-color: rgba(#ffffff, 0.7);
+                                    }
+                                    > ul {
+                                        > li {
                                             color: #ffffff;
                                         }
                                     }
                                 }
                             }
+                        }
+                    }
 
                     .dialog-foot {
                         .done {