refactor: 切换组织/工作空间/项目时添加loading

frontend/src/business/App.vue

@@ -154,7 +154,7 @@ export default {
         this.isShow = true;
       });
     },
-    reloadTopMenus() {
+    reloadTopMenus(callback) {
       this.$get("/isLogin").then(response => {
         if (response.data.success) {
           this.$setLang(response.data.data.language);
@@ -165,11 +165,17 @@ export default {
           this.$nextTick(() => {
             this.isShow = true;
             this.isMenuShow = true;
+            if (callback) {
+              callback();
+            }
           });
         } else {
           window.location.href = "/login";
         }
       }).catch(() => {
+        if (callback) {
+          callback();
+        }
         window.location.href = "/login";
       });
     }

frontend/src/business/components/common/head/HeaderOrgWs.vue

@@ -28,10 +28,10 @@
                     :popper-append-to-body="true"
                     :key="index">
           <template v-slot:title>
-            <div @click="changeOrg(item)">
+            <el-menu-item @click="changeOrg(item)">
               {{ item.name }}
               <i class="el-icon-check" v-if="item.id === getCurrentOrganizationId()"></i>
-            </div>
+            </el-menu-item>
           </template>
           <el-input :placeholder="$t('project.search_by_name')"
                     prefix-icon="el-icon-search"
@@ -55,7 +55,13 @@
 </template>
 
 <script>
-import {getCurrentOrganizationId, getCurrentUser, getCurrentWorkspaceId, saveLocalStorage} from "@/common/js/utils";
+import {
+  fullScreenLoading,
+  getCurrentOrganizationId,
+  getCurrentUser,
+  getCurrentWorkspaceId,
+  saveLocalStorage, stopFullScreenLoading
+} from "@/common/js/utils";
 import {ORGANIZATION_ID, PROJECT_ID, WORKSPACE_ID} from "@/common/js/constants";
 
 export default {
@@ -166,6 +172,7 @@ export default {
       if (!orgId) {
         return false;
       }
+      const loading = fullScreenLoading(this);
       this.$post("/user/switch/source/org/" + orgId, {}, response => {
         saveLocalStorage(response);
 
@@ -174,7 +181,7 @@ export default {
         sessionStorage.setItem(PROJECT_ID, response.data.lastProjectId);
 
         this.$router.push(this.getRedirectUrl(response.data)).then(() => {
-          this.reloadTopMenus();
+          this.reloadTopMenus(stopFullScreenLoading(loading));
         }).catch(err => err);
       });
     },
@@ -184,6 +191,7 @@ export default {
       if (!workspaceId) {
         return false;
       }
+      const loading = fullScreenLoading(this);
       this.$post("/user/switch/source/ws/" + workspaceId, {}, response => {
         saveLocalStorage(response);
 
@@ -192,7 +200,7 @@ export default {
         sessionStorage.setItem(PROJECT_ID, response.data.lastProjectId);
 
         this.$router.push(this.getRedirectUrl(response.data)).then(() => {
-          this.reloadTopMenus();
+          this.reloadTopMenus(stopFullScreenLoading(loading));
         }).catch(err => err);
       });
     },

frontend/src/business/components/common/head/SearchList.vue

@@ -27,11 +27,12 @@
 
 <script>
 import {
+  fullScreenLoading,
   getCurrentProjectID,
   getCurrentUser,
   getCurrentUserId,
   getCurrentWorkspaceId,
-  saveLocalStorage
+  saveLocalStorage, stopFullScreenLoading
 } from "@/common/js/utils";
 import {mapGetters} from "vuex";
 import {PROJECT_ID} from "@/common/js/constants";
@@ -105,6 +106,7 @@ export default {
       if (projectId === currentProjectId) {
         return;
       }
+      const loading = fullScreenLoading(this);
       this.$post("/user/update/current", {id: this.userId, lastProjectId: projectId}, (response) => {
         saveLocalStorage(response);
         this.currentProjectId = projectId;
@@ -114,8 +116,10 @@ export default {
         sessionStorage.setItem(PROJECT_ID, projectId);
         // 刷新路由
         this.reload();
-
+        stopFullScreenLoading(loading, 1500);
         this.changeProjectName(projectId);
+      }, () => {
+        stopFullScreenLoading(loading, 1500);
       });
     },
     changeProjectName(projectId) {

frontend/src/common/css/main.css

@@ -289,3 +289,11 @@ textarea {
   border-color: #409EFF;
   color: white;
 }
+
+.ms-full-loading .el-loading-text {
+  font-size: 16px;
+}
+
+.ms-full-loading .el-loading-spinner {
+  font-size: 18px;
+}

frontend/src/common/js/utils.js

@@ -508,3 +508,20 @@ export function getNodePath(id, moduleOptions) {
 export function getDefaultTableHeight() {
   return document.documentElement.clientHeight - 200;
 }
+
+export function fullScreenLoading(component) {
+  return component.$loading({
+    lock: true,
+    text: '资源切换中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(246,241,241,0.6)',
+    customClass: 'ms-full-loading'
+  });
+}
+
+export function stopFullScreenLoading(loading, timeout) {
+  timeout = timeout ? timeout : 2000;
+  setTimeout(() => {
+    loading.close();
+  }, timeout);
+}