From 2b7ed69c213585e586f013b03c4396f0d8cfc704 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 22 Feb 2023 12:17:35 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/pages/manage/messenger.vue      | 10 ++++----
 .../assets/js/pages/manage/setting/index.vue  |  8 +++---
 resources/assets/sass/pages/page-setting.scss | 25 ++++++++++++++++---
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index a393d0d0e..b117dc0c0 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -508,11 +508,11 @@ export default {
                 index = this.dialogList.findIndex(dialog => $A.getDialogUnread(dialog, true) > 0)
             }
             if (index > -1) {
-                const el = this.$refs[`dialog_${this.dialogList[index]?.id}`][0]
-                if (el) {
-                    $A.scrollIntoViewIfNeeded(el)
-                    el.classList.remove("common-shake")
-                    requestAnimationFrame(_ => el.classList.add("common-shake"))
+                const el = this.$refs[`dialog_${this.dialogList[index]?.id}`]
+                if (el && el[0]) {
+                    $A.scrollIntoViewIfNeeded(el[0])
+                    el[0].classList.remove("common-shake")
+                    requestAnimationFrame(_ => el[0].classList.add("common-shake"))
                 }
             }
         },
diff --git a/resources/assets/js/pages/manage/setting/index.vue b/resources/assets/js/pages/manage/setting/index.vue
index 2c5bfe02d..f3330e051 100644
--- a/resources/assets/js/pages/manage/setting/index.vue
+++ b/resources/assets/js/pages/manage/setting/index.vue
@@ -5,14 +5,14 @@
             <div class="setting-titbox">
                 <div class="setting-title">
                     <h1>{{$L(settingTitleName)}}</h1>
-                    <div v-if="!show768Menu" class="setting-more" @click="toggleRoute('index')">
+                    <div v-if="!show768Box" class="setting-more" @click="toggleRoute('index')">
                         <Icon type="md-close" />
                     </div>
                 </div>
             </div>
         </div>
-        <div class="setting-box">
-            <div class="setting-menu" :class="{'show768-menu':show768Menu}">
+        <div class="setting-box" :class="{'show768-box':show768Box}">
+            <div class="setting-menu">
                 <ul>
                     <li
                         v-for="(item, key) in menu"
@@ -65,7 +65,7 @@ export default {
             return this.$route.name
         },
 
-        show768Menu() {
+        show768Box() {
             return this.routeName === 'manage-setting'
         },
 
diff --git a/resources/assets/sass/pages/page-setting.scss b/resources/assets/sass/pages/page-setting.scss
index fe6664b59..6f6d3ea32 100755
--- a/resources/assets/sass/pages/page-setting.scss
+++ b/resources/assets/sass/pages/page-setting.scss
@@ -381,7 +381,20 @@
         }
         .setting-box {
             position: relative;
-            .setting-menu {
+            overflow: hidden;
+            padding-bottom: 0;
+            &.show768-box {
+                .setting-menu {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+                .setting-content {
+                    transform: translateX(120%);
+                    opacity: 0;
+                }
+            }
+            .setting-menu,
+            .setting-content {
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -389,10 +402,11 @@
                 height: 100%;
                 z-index: 9;
                 background-color: #ffffff;
+                transition: all 0.3s;
+            }
+            .setting-menu {
                 transform: translateX(-120%);
-                &.show768-menu {
-                    transform: translateX(0);
-                }
+                opacity: 0;
                 > ul {
                     padding: 12px 32px;
                     > li {
@@ -404,6 +418,9 @@
                 }
             }
             .setting-content {
+                transform: translateX(0);
+                opacity: 1;
+                padding-bottom: 16px;
                 .setting-content-title {
                     display: none;
                 }