From 9a69d20949903dc2143151f3e8632fff39bf58d7 Mon Sep 17 00:00:00 2001
From: Pang <aipaw@live.cn>
Date: Sun, 14 Jan 2024 15:07:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/DialogWrapper.vue |  2 +-
 .../pages/manage/components/ProjectList.vue   |  2 +-
 .../assets/js/pages/manage/messenger.vue      | 53 +++++++++++--------
 .../assets/sass/pages/page-messenger.scss     | 38 ++++---------
 4 files changed, 42 insertions(+), 53 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 0d5f9fb74..b4aa304b9 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -48,7 +48,7 @@
                                 <Tag v-if="dialogData.type === 'user' && approvaUserStatus" class="after" color="red" :fade="false">{{$L(approvaUserStatus)}}</Tag>
                                 <Tag v-if="dialogData.group_type=='all'" class="after pointer" :fade="false" @on-click="onDialogMenu('groupInfo')">{{$L('全员')}}</Tag>
                                 <Tag v-else-if="dialogData.group_type=='department'" class="after pointer" :fade="false" @on-click="onDialogMenu('groupInfo')">{{$L('部门')}}</Tag>
-                                <div v-if="msgLoadIng > 0" class="load"><Loading/></div>
+                                <div v-if="msgLoadIng > 0 && allMsgs.length > 0" class="load"><Loading/></div>
                             </div>
                             <ul class="title-desc">
                                 <li v-if="dialogData.type === 'user'" :class="[dialogData.online_state === true ? 'online' : 'offline']">
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index 1cb2e24b1..6af013110 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -15,7 +15,7 @@
             <template v-if="projectLists.length === 0">
                 <li v-if="projectKeyLoading > 0" class="loading"><Loading/></li>
                 <li v-else class="nothing">
-                    {{$L(projectKeyValue ? `没有任何与"${projectKeyValue}"相关的项目` : `没有任何项目`)}}
+                    {{$L(projectKeyValue ? `没有任何与"${projectKeyValue}"相关的结果` : `没有任何项目`)}}
                 </li>
             </template>
             <li
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index e65b721da..95604c78b 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -9,15 +9,26 @@
                             v-if="tabActive==='dialog'"
                             v-model="dialogSearchKey"
                             ref="searchInput"
-                            :placeholder="$L(loadDialogs > 0 ? '更新中...' : '搜索消息')"
+                            :placeholder="$L(loadDialogs > 0 ? '更新中...' : '搜索')"
                             @on-keydown="onKeydown"
                             clearable>
                             <div class="search-pre" slot="prefix">
-                                <Loading v-if="loadDialogs > 0 || dialogSearchLoad > 0"/>
+                                <Loading v-if="dialogLoading"/>
+                                <Icon v-else type="ios-search" />
+                            </div>
+                        </Input>
+                        <Input
+                            v-else
+                            v-model="contactsKey"
+                            ref="contactInput"
+                            :placeholder="$L('搜索')"
+                            @on-keydown="onKeydown"
+                            clearable>
+                            <div class="search-pre" slot="prefix">
+                                <Loading v-if="contactsLoad"/>
                                 <Icon v-else type="ios-search" />
                             </div>
                         </Input>
-                        <Input v-else prefix="ios-search" v-model="contactsKey" :placeholder="$L('搜索联系人')" clearable />
                     </div>
                 </div>
                 <div v-if="tabActive==='dialog' && !dialogSearchKey" class="messenger-nav">
@@ -116,21 +127,12 @@
                                 <div class="dialog-line"></div>
                             </li>
                         </template>
-                        <li v-else-if="dialogSearchLoad === 0 && dialogMarkLoad === 0" class="nothing">
-                            {{$L(dialogSearchKey ? `没有任何与"${dialogSearchKey}"相关的会话` : `没有任何会话`)}}
-                        </li>
-                        <li v-else class="nothing">
-                            <Loading/>
+                        <li v-else-if="dialogSearchLoad === 0" class="nothing">
+                            {{$L(dialogSearchKey ? `没有任何与"${dialogSearchKey}"相关的结果` : `没有任何会话`)}}
                         </li>
                     </ul>
                     <ul v-else class="contacts">
-                        <template v-if="contactsFilter.length === 0">
-                            <li v-if="contactsLoad > 0" class="loading"><Loading/></li>
-                            <li v-else class="nothing">
-                                {{$L(contactsKey ? `没有任何与"${contactsKey}"相关的联系人` : `没有任何联系人`)}}
-                            </li>
-                        </template>
-                        <template v-else>
+                        <template v-if="contactsFilter.length > 0">
                             <li v-for="items in contactsList">
                                 <div class="label">{{items.az}}</div>
                                 <ul>
@@ -151,6 +153,9 @@
                                 <template v-else>{{$L('共' + contactsTotal + '位联系人')}}</template>
                             </li>
                         </template>
+                        <li v-else-if="contactsLoad == 0" class="nothing">
+                            {{$L(contactsKey ? `没有任何与"${contactsKey}"相关的结果` : `没有任何联系人`)}}
+                        </li>
                     </ul>
                     <div class="operate-position" :style="operateStyles" v-show="operateVisible">
                         <Dropdown
@@ -259,8 +264,6 @@ export default {
             operateVisible: false,
 
             clickAgainSubscribe: null,
-
-            dialogMarkLoad: 0,
         }
     },
 
@@ -485,6 +488,10 @@ export default {
                 });
                 return num;
             }
+        },
+
+        dialogLoading({loadDialogs, dialogSearchLoad}) {
+            return loadDialogs > 0 || dialogSearchLoad > 0
         }
     },
 
@@ -535,8 +542,8 @@ export default {
             if (val == '') {
                 return
             }
-            this.__searchTimer && clearTimeout(this.__searchTimer)
-            this.__searchTimer = setTimeout(this.searchDialog, 600)
+            this.__search_timer && clearTimeout(this.__search_timer)
+            this.__search_timer = setTimeout(this.searchDialog, 600)
             this.dialogSearchLoad++
             setTimeout(_ => this.dialogSearchLoad--, 600)
         },
@@ -614,7 +621,8 @@ export default {
 
         onKeydown(e) {
             if (e.key === "Escape") {
-                this.$refs.searchInput.handleClear()
+                this.$refs.searchInput?.handleClear()
+                this.$refs.contactInput?.handleClear()
             }
         },
 
@@ -811,8 +819,7 @@ export default {
         },
 
         searchTagDialog() {
-            //
-            this.dialogMarkLoad++;
+            this.dialogSearchLoad++;
             this.$store.dispatch("call", {
                 url: 'dialog/search/tag',
             }).then(({data}) => {
@@ -829,7 +836,7 @@ export default {
                 })
                 this.dialogSearchList = lists;
             }).finally(_ => {
-                this.dialogMarkLoad--;
+                this.dialogSearchLoad--;
             });
         },
 
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index ebebb2526..2e50fa841 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -127,6 +127,16 @@
                 width: 100%;
                 overflow-x: hidden;
                 ul {
+                    > li {
+                        &.nothing {
+                            margin: 0 !important;
+                            padding: 24px !important;
+                            text-align: center;
+                            height: 100%;
+                            border-radius: 0;
+                            line-height: 22px;
+                        }
+                    }
                     &.dialog {
                         > li {
                             display: flex;
@@ -364,15 +374,6 @@
                                     }
                                 }
                             }
-                            &.nothing {
-                                justify-content: center;
-                                padding: 24px;
-                                margin: 0;
-                                border: 0;
-                                line-height: 22px;
-                                cursor: default;
-                                word-break: break-all;
-                            }
                         }
                     }
                     &.contacts {
@@ -398,25 +399,6 @@
                                     transform: scaleY(0.5);
                                 }
                             }
-                            &.nothing,
-                            &.loading {
-                                text-align: center;
-                                height: 100%;
-                                margin: 0;
-                                padding: 24px;
-                                border-radius: 0;
-                                line-height: 22px;
-                            }
-                            &.loading {
-                                display: flex;
-                                align-items: flex-start;
-                                justify-content: center;
-                                .common-loading {
-                                    width: 20px;
-                                    height: 20px;
-                                    margin: 1px;
-                                }
-                            }
                             &.loaded {
                                 margin: 0;
                                 height: 52px;