cloud-web-corejs 1.0.54-dev.761 → 1.0.54-dev.762

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.761",
+  "version": "1.0.54-dev.762",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/utils/vab.js

@@ -158,6 +158,7 @@ let typeList = [
   "mp4",
   "flv",
   "avi",
+  "mov",
   "rm",
   "mkv",
   "mpeg",

package/src/views/user/login/indexMixin.js

@@ -92,9 +92,8 @@ export default {
   beforeDestroy() {
     this.clearQrLoginTimer();
     this.clearSmsTimer();
-    // 兜底：登录组件随路由切换销毁时关闭跳转期 loading（$baseLoading 挂在 body 上，
-    // 不随组件销毁自动关闭）
-    this.closeRedirectLoading();
+    // 注意：这里不能关跳转期 loading。组件销毁发生在导航确认时，而首页真正渲染上屏
+    // 还在其后，遮罩要撑过这段时间，由 closeRedirectLoading 收口
   },
   created() {
     this.init();
@@ -250,10 +249,11 @@ export default {
             localStorage.removeItem("currentMenuId");
             this.rememberPassword();
             window.removeEventListener("keydown", this.keyDown, false);
-            // 登录成功后的跳转链路（getWebPrefix → 路由守卫拉用户信息/生成动态路由 → 首页渲染）
-            // 耗时较长，loading 保持打开防止期间登录页被再次操作；
-            // 由 closeRedirectLoading 在跳转完成/中止/请求失败/组件销毁时统一收口
-            this.redirectLoadingObj = loadingObj;
+            // 登录成功后的跳转链路（getWebPrefix → 路由守卫拉用户信息/生成动态路由 →
+            // 首页渲染上屏）耗时较长，换成挂在 body 上的全屏遮罩顶住这段时间，
+            // 防止登录页被再次操作；由 closeRedirectLoading 统一收口
+            loadingObj.close();
+            this.openRedirectLoading();
             this.handleRedirectUrl();
           } else {
             setTimeout(function () {
@@ -470,19 +470,11 @@ export default {
           prefix = prefix || window.WEB_PREFIX;
           location.href = prefix + "/index.html" + path;
         } else {
-          this.$router.push(
-            {
-              path: path,
-            },
-            () => {
-              // 跳转完成（守卫链+首页组件解析结束）
-              this.closeRedirectLoading();
-            },
-            () => {
-              // 跳转被中止（如守卫拉取用户信息失败后重定向回登录页），恢复登录页可操作
-              this.closeRedirectLoading(true);
-            }
-          );
+          // 遮罩不在 push 的回调里收口：守卫内的重定向会让原始导航走 onAbort，
+          // 而真正的导航仍在继续，统一交给 openRedirectLoading 里注册的 afterEach
+          this.$router.push({
+            path: path,
+          });
         }
       }, () => {
         // getWebPrefix 请求失败：恢复登录页可操作，避免 loading 永久卡死
@@ -528,10 +520,71 @@ export default {
       });
     },
     /**
-     * 登录跳转期 loading 统一收口：跳转完成/中止、getWebPrefix 失败、组件销毁时调用。
+     * 打开登录跳转期的全屏遮罩。
+     * 不能用 fullscreen:true —— element 的全屏 loading 是全局单例（fullscreenLoading），
+     * request.js 里 isLoading 的请求（getWebPrefix 就是）用的正是这个单例，请求结束会把
+     * 它一起 close 掉。这里传 target:body + fullscreen:false 拿独立实例，遮罩挂在 body 上
+     * 不随登录组件销毁而消失，全屏样式手动补。
+     */
+    openRedirectLoading() {
+      this.closeRedirectLoading();
+      let loading = this.$baseLoading({
+        target: document.body,
+        fullscreen: false,
+        lock: true,
+      });
+      let el = loading && loading.$el;
+      if (el) {
+        el.style.position = "fixed";
+        el.style.top = "0";
+        el.style.left = "0";
+        el.style.width = "100%";
+        el.style.height = "100%";
+        el.style.zIndex = 9999;
+      }
+      this.redirectLoadingObj = loading;
+      // 收口挂在 afterEach 上：路由守卫里的重定向会让原始 push 走 onAbort，但新导航
+      // 其实还在继续（实测 onAbort 在 +211ms 触发，首页 +577ms 才绘制完成），所以不能
+      // 用 push 的回调收口。afterEach 只在导航真正确认后触发一次，且带最终目标路由
+      this.redirectAfterEachOff = this.$router.afterEach((to) => {
+        if (String((to && to.path) || "").indexOf("/login") >= 0) {
+          // 兜了一圈又回到登录页（如守卫拉用户信息失败），恢复登录页可操作
+          this.closeRedirectLoading(true);
+        } else {
+          this.closeRedirectLoadingAfterPaint();
+        }
+      });
+      // 兜底：跳转链路既不 complete 也不 abort 时不至于永久锁死
+      this.redirectLoadingTimer = setTimeout(() => {
+        this.closeRedirectLoading(true);
+      }, 20000);
+    },
+    /**
+     * 等目标页真正绘制上屏后再撤遮罩：$nextTick 等 Vue 完成 patch，
+     * 双 rAF 等浏览器完成这一帧的绘制
+     */
+    closeRedirectLoadingAfterPaint() {
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.closeRedirectLoading();
+          });
+        });
+      });
+    },
+    /**
+     * 登录跳转期 loading 统一收口：上屏完成、跳转中止、getWebPrefix 失败、超时兜底时调用。
      * reenable=true 时恢复登录页可操作（跳转失败仍停留在登录页的场景）
      */
     closeRedirectLoading(reenable) {
+      if (this.redirectAfterEachOff) {
+        this.redirectAfterEachOff();
+        this.redirectAfterEachOff = null;
+      }
+      if (this.redirectLoadingTimer) {
+        clearTimeout(this.redirectLoadingTimer);
+        this.redirectLoadingTimer = null;
+      }
       if (this.redirectLoadingObj) {
         this.redirectLoadingObj.close();
         this.redirectLoadingObj = null;