From d4a082382d4220de94c8f8a76a232bd23236f32f Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 8 Mar 2022 16:24:52 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B6=88=E6=81=AF=E5=B7=B2=E8=AF=BB/?=
 =?UTF-8?q?=E6=9C=AA=E8=AF=BB=E4=BA=BA=E5=91=98=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/DialogView.vue | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index 616b09607..2e75bd621 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -44,27 +44,30 @@
         <!--时间/阅读-->
         <div v-if="msgData.created_at" class="dialog-foot">
             <div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div>
-            <Poptip
+            <EPopover
                 v-if="msgData.send > 1 || dialogType == 'group'"
+                v-model="popperShow"
                 ref="percent"
                 class="percent"
                 placement="left-end"
-                transfer
                 :width="360"
-                :offset="8"
-                @on-popper-show="popperShow">
-                <div slot="content" class="dialog-wrapper-read-poptip-content">
-                    <ul class="read">
-                        <li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li>
-                        <li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" showName/></li>
+                :offset="-8">
+                <div class="dialog-wrapper-read-poptip-content">
+                    <ul class="read overlay-y">
+                        <li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
+                        <li v-for="item in readList">
+                            <UserAvatar :userid="item.userid" :size="26" showName/>
+                        </li>
                     </ul>
-                    <ul class="unread">
-                        <li class="read-title"><em>{{unreadList.length}}</em>{{$L('未读')}}</li>
-                        <li v-for="item in unreadList"><UserAvatar :userid="item.userid" :size="26" showName/></li>
+                    <ul class="unread overlay-y">
+                        <li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
+                        <li v-for="item in unreadList">
+                            <UserAvatar :userid="item.userid" :size="26" showName/>
+                        </li>
                     </ul>
                 </div>
-                <WCircle :percent="msgData.percentage" :size="14"/>
-            </Poptip>
+                <WCircle slot="reference" :percent="msgData.percentage" :size="14"/>
+            </EPopover>
             <Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/>
             <Icon v-else class="done" type="md-checkmark"/>
         </div>
@@ -95,7 +98,8 @@ export default {
 
     data() {
         return {
-            read_list: []
+            popperShow: false,
+            allList: [],
         }
     },
 
@@ -107,11 +111,11 @@ export default {
         ...mapState(['userToken', 'userId']),
 
         readList() {
-            return this.read_list.filter(({read_at}) => read_at)
+            return this.allList.filter(({read_at}) => read_at)
         },
 
         unreadList() {
-            return this.read_list.filter(({read_at}) => !read_at)
+            return this.allList.filter(({read_at}) => !read_at)
         },
 
         showMenu() {
@@ -125,6 +129,22 @@ export default {
                 this.msgRead();
             },
             immediate: true,
+        },
+        popperShow(val) {
+            if (val) {
+                this.$store.dispatch("call", {
+                    url: 'dialog/msg/readlist',
+                    data: {
+                        msg_id: this.msgData.id,
+                    },
+                }).then(({data}) => {
+                    this.allList = data;
+                    setTimeout(this.$refs.percent.updatePopper, 10)
+                }).catch(() => {
+                    this.allList = [];
+                    setTimeout(this.$refs.percent.updatePopper, 10)
+                });
+            }
         }
     },
 
@@ -144,22 +164,6 @@ export default {
             }, 50)
         },
 
-        popperShow() {
-            this.$store.dispatch("call", {
-                url: 'dialog/msg/readlist',
-                data: {
-                    msg_id: this.msgData.id,
-                },
-            }).then(({data}) => {
-                this.read_list = data;
-                this.$nextTick(() => {
-                    this.$refs.percent.updatePopper();
-                })
-            }).catch(() => {
-                this.read_list = [];
-            });
-        },
-
         textMsg(text) {
             if (!text) {
                 return ""