From a6425c28596a2640beea4c505e895a718174aae7 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 24 May 2022 00:40:02 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/App.vue                   |  2 +-
 .../pages/manage/components/ProjectList.vue   | 11 ++--
 .../assets/js/pages/manage/dashboard.vue      |  9 ++--
 .../assets/js/pages/manage/messenger.vue      |  9 +++-
 resources/assets/js/store/actions.js          | 53 +++++++++++++------
 resources/assets/js/store/state.js            |  7 ++-
 .../sass/pages/components/project-list.scss   | 13 +++++
 .../assets/sass/pages/page-dashboard.scss     | 10 ++++
 .../assets/sass/pages/page-messenger.scss     | 12 +++++
 9 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index 4d453f5cf..7d2f259de 100755
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -261,7 +261,7 @@ export default {
                     console.log('ws', this.ws, this.ws ? this.ws.readyState : null);
                 }
                 if (num > 0) {
-                    this.$store.dispatch("getBasicData", 1000)
+                    this.$store.dispatch("getBasicData", 600)
                     if (this.ws === null) {
                         this.$store.dispatch("websocketConnection");
                     } else {
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index c05503ef2..802c53bd1 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -3,7 +3,12 @@
         <PageTitle :title="$L('项目')"/>
         <div class="list-search">
             <div class="search-wrapper">
-                <Input prefix="ios-search" v-model="projectKeyValue" :placeholder="$L('搜索...')" clearable />
+                <Input v-model="projectKeyValue" :placeholder="$L(loadProjects || projectKeyLoading ? '读取中...' : '搜索...')" clearable>
+                    <div class="search-pre" slot="prefix">
+                        <Loading v-if="loadProjects || projectKeyLoading"/>
+                        <Icon v-else type="ios-search" />
+                    </div>
+                </Input>
             </div>
         </div>
         <ul>
@@ -47,9 +52,7 @@ export default {
     },
 
     computed: {
-        ...mapState([
-            'cacheProjects',
-        ]),
+        ...mapState(['cacheProjects', 'loadProjects']),
 
         projectLists() {
             const {projectKeyValue, cacheProjects} = this;
diff --git a/resources/assets/js/pages/manage/dashboard.vue b/resources/assets/js/pages/manage/dashboard.vue
index 11cf92ee6..df444614c 100644
--- a/resources/assets/js/pages/manage/dashboard.vue
+++ b/resources/assets/js/pages/manage/dashboard.vue
@@ -3,7 +3,10 @@
         <PageTitle :title="$L('仪表盘')"/>
         <div class="dashboard-wrapper">
             <div class="dashboard-hello">{{$L('欢迎您，' + userInfo.nickname)}}</div>
-            <div class="dashboard-desc">{{$L('以下是你当前的任务统计数据')}}</div>
+            <div class="dashboard-desc">
+                {{$L('以下是你当前的任务统计数据')}}
+                <div v-if="loadDashboardTasks" class="dashboard-load"><Loading/></div>
+            </div>
             <ul class="dashboard-block">
                 <li @click="scrollTo('today')">
                     <div class="block-title">{{getTitle('today')}}</div>
@@ -107,7 +110,7 @@ export default {
     },
 
     activated() {
-        this.$store.dispatch("getTaskForDashboard");
+        this.$store.dispatch("getTaskForDashboard", 600);
     },
 
     deactivated() {
@@ -115,7 +118,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userInfo']),
+        ...mapState(['userInfo', 'loadDashboardTasks']),
 
         ...mapGetters(['dashboardTask', 'transforTasks']),
 
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index 43a846a60..064a36b85 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -5,7 +5,12 @@
             <div class="messenger-select">
                 <div class="messenger-search">
                     <div class="search-wrapper">
-                        <Input v-if="tabActive==='dialog'" prefix="ios-search" v-model="dialogKey" :placeholder="$L('搜索...')" clearable />
+                        <Input v-if="tabActive==='dialog'" v-model="dialogKey" :placeholder="$L(loadDialogs ? '读取中...' : '搜索...')" clearable >
+                            <div class="search-pre" slot="prefix">
+                                <Loading v-if="loadDialogs"/>
+                                <Icon v-else type="ios-search" />
+                            </div>
+                        </Input>
                         <Input v-else prefix="ios-search" v-model="contactsKey" :placeholder="$L('搜索...')" clearable />
                     </div>
                 </div>
@@ -168,7 +173,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userId', 'cacheDialogs']),
+        ...mapState(['userId', 'cacheDialogs', 'loadDialogs']),
 
         dialogId() {
             const {dialogId} = this.$route.params;
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index ca3c0852c..f2430a914 100644
--- a/resources/assets/js/store/actions.js
+++ b/resources/assets/js/store/actions.js
@@ -338,7 +338,7 @@ export default {
      * @param data {userid}
      */
     getUserBasic({state, dispatch}, data) {
-        if (state.cacheLoading["loadUserBasic"] === true) {
+        if (state.loadUserBasic === true) {
             data && state.cacheUserWait.push(data);
             return;
         }
@@ -370,7 +370,7 @@ export default {
             array = array.slice(0, 30)
         }
         //
-        state.cacheLoading["loadUserBasic"] = true;
+        state.loadUserBasic = true;
         dispatch("call", {
             url: 'users/basic',
             data: {
@@ -383,11 +383,11 @@ export default {
                 data._time = time;
                 dispatch("saveUserBasic", data);
             });
-            state.cacheLoading["loadUserBasic"] = false;
+            state.loadUserBasic = false;
             dispatch("getUserBasic");
         }).catch(e => {
             console.warn(e);
-            state.cacheLoading["loadUserBasic"] = false;
+            state.loadUserBasic = false;
             dispatch("getUserBasic");
         });
     },
@@ -711,6 +711,7 @@ export default {
                 reject({msg: 'Parameter error'});
                 return;
             }
+            state.loadProjects++;
             dispatch("call", {
                 url: 'project/lists',
                 data: data || {}
@@ -721,6 +722,8 @@ export default {
             }).catch(e => {
                 console.warn(e);
                 reject(e)
+            }).finally(_ => {
+                state.loadProjects--;
             });
         });
     },
@@ -1204,12 +1207,22 @@ export default {
      * @param state
      * @param dispatch
      * @param getters
+     * @param timeout
      */
-    getTaskForDashboard({state, dispatch, getters}) {
-        if (state.cacheLoading["loadDashboardTasks"] === true) {
+    getTaskForDashboard({state, dispatch, getters}, timeout) {
+        if (typeof timeout === "number") {
+            window.__getTaskForDashboard && clearTimeout(window.__getTaskForDashboard)
+            if (timeout > -1) {
+                window.__getTaskForDashboard = setTimeout(() => {
+                    dispatch("getTaskForDashboard", null)
+                }, timeout)
+            }
             return;
         }
-        state.cacheLoading["loadDashboardTasks"] = true;
+        if (state.loadDashboardTasks === true) {
+            return;
+        }
+        state.loadDashboardTasks = true;
         //
         const time = $A.Time()
         const {today, overdue,all} = getters.dashboardTask;
@@ -1220,7 +1233,7 @@ export default {
         let loadIng = 3;
         let call = () => {
             if (loadIng <= 0) {
-                state.cacheLoading["loadDashboardTasks"] = false;
+                state.loadDashboardTasks = false;
                 //
                 const {today, overdue,all} = getters.dashboardTask;
                 const newIds = today.filter(task => task._time >= time).map(({id}) => id)
@@ -1935,14 +1948,18 @@ export default {
                 return;
             }
             let data = {};
-            if (atAfter === true && state.cacheDialogs.length > 0) {
-                const tmpList = state.cacheDialogs.sort((a, b) => {
-                    if (a.top_at || b.top_at) {
-                        return $A.Date(b.top_at) - $A.Date(a.top_at);
-                    }
-                    return $A.Date(b.last_at) - $A.Date(a.last_at);
-                })
-                data.at_after = tmpList[0].last_at;
+            if (atAfter === true) {
+                if (state.cacheDialogs.length > 0) {
+                    const tmpList = state.cacheDialogs.sort((a, b) => {
+                        if (a.top_at || b.top_at) {
+                            return $A.Date(b.top_at) - $A.Date(a.top_at);
+                        }
+                        return $A.Date(b.last_at) - $A.Date(a.last_at);
+                    })
+                    data.at_after = tmpList[0].last_at;
+                }
+            } else {
+                state.loadDialogs++;
             }
             dispatch("call", {
                 url: 'dialog/lists',
@@ -1953,6 +1970,10 @@ export default {
             }).catch(e => {
                 console.warn(e);
                 reject(e)
+            }).finally(_ => {
+                if (atAfter !== true) {
+                    state.loadDialogs--;
+                }
             });
         });
     },
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index cc8550c06..2974c6849 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -6,8 +6,11 @@ const stateData = {
     // 浏览器宽度≤768返回true
     windowMax768: window.innerWidth <= 768,
 
-    // 数据缓存
-    cacheLoading: {},
+    // 加载状态
+    loadDashboardTasks: false,
+    loadUserBasic: false,
+    loadProjects: 0,
+    loadDialogs: 0,
 
     // User
     cacheUserActive: {},
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index a8afe9985..f110ace09 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/resources/assets/sass/pages/components/project-list.scss
@@ -23,6 +23,19 @@
             border-radius: 12px;
             overflow: hidden;
 
+            .search-pre {
+                width: 32px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .common-loading {
+                    width: 16px;
+                    height: 16px;
+                    margin: 0;
+                }
+            }
+
             .ivu-input {
                 border-color: transparent;
                 background-color: transparent;
diff --git a/resources/assets/sass/pages/page-dashboard.scss b/resources/assets/sass/pages/page-dashboard.scss
index 8c5f97cfc..13144d49b 100644
--- a/resources/assets/sass/pages/page-dashboard.scss
+++ b/resources/assets/sass/pages/page-dashboard.scss
@@ -30,10 +30,20 @@
             word-wrap: break-word;
         }
         .dashboard-desc {
+            display: flex;
+            align-items: center;
             margin-top: 18px;
             padding: 0 12px;
             color: #888888;
             font-size: 13px;
+            .dashboard-load {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 14px;
+                height: 14px;
+                margin: 0 0 0 4px;
+            }
         }
         .dashboard-block {
             margin-top: 18px;
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index e3477c91a..b2ef91ece 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -36,6 +36,18 @@
                     margin: 0 4px;
                     border-radius: 12px;
                     overflow: hidden;
+                    .search-pre {
+                        width: 32px;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .common-loading {
+                            width: 16px;
+                            height: 16px;
+                            margin: 0;
+                        }
+                    }
                     .ivu-input {
                         border-color: transparent;
                         background-color: transparent;