perf: 优化加载状态

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 {

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;

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']),
 

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;

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--;
+                }
             });
         });
     },

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: {},

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;

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;

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;