From 5afed4b85ec42efdf245f840eaa56cb1ac4371f0 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 7 Mar 2022 18:07:02 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=9C=AA=E8=AF=BB=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/DialogView.vue |  4 ++-
 .../assets/js/pages/manage/messenger.vue      |  9 +++--
 .../assets/sass/pages/page-messenger.scss     | 35 +++++++++++++------
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index 12ea89332..616b09607 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -152,7 +152,9 @@ export default {
                 },
             }).then(({data}) => {
                 this.read_list = data;
-                this.$refs.percent.updatePopper();
+                this.$nextTick(() => {
+                    this.$refs.percent.updatePopper();
+                })
             }).catch(() => {
                 this.read_list = [];
             });
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index 878847774..b8bb21685 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -90,8 +90,13 @@
                     </div>
                 </ScrollerY>
                 <div class="messenger-menu">
-                    <Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
-                    <Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
+                    <div class="menu-icon">
+                        <Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
+                        <Badge class="menu-num" :count="msgUnread('all')"/>
+                    </div>
+                    <div class="menu-icon">
+                        <Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
+                    </div>
                 </div>
             </div>
 
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index f564a173c..cb72de863 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -281,18 +281,31 @@
                 height: 52px;
                 flex-shrink: 0;
                 border-top: 1px solid #f4f5f5;
-                > i {
-                    cursor: pointer;
-                    font-size: 24px;
-                    margin: 0 24px;
-                    color: #aaaaaa;
-                    opacity: 0.9;
-                    &.active {
-                        opacity: 1;
-                        color: $primary-color;
+                .menu-icon {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    position: relative;
+                    .menu-num {
+                        position: absolute;
+                        top: 4px;
+                        left: 50%;
+                        margin-left: 3px;
+                        transform: scale(0.8);
                     }
-                    &:hover {
-                        opacity: 1;
+                    > i {
+                        cursor: pointer;
+                        font-size: 24px;
+                        margin: 0 24px;
+                        color: #aaaaaa;
+                        opacity: 0.9;
+                        &.active {
+                            opacity: 1;
+                            color: $primary-color;
+                        }
+                        &:hover {
+                            opacity: 1;
+                        }
                     }
                 }
             }