登录页-拆分useNewVersion

src/features/UserLogin/UserLogin.vue

@@ -10,14 +10,15 @@ import { store } from "@/store/store";
 import { createUserDetailLog } from "@/utils/logger";
 import { CloseCircleOutline, LockClosed, Person } from "@vicons/ionicons5";
 import { FormItemInst, FormRules } from "naive-ui";
-import { onMounted, onUnmounted, watch } from "vue";
+import { onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import GeeTest from "./GeeTest.vue";
 import GlobalNotice from "./GlobalNotice.vue";
 import { getElectronConfig } from "./useElectronConfig";
+import { checkExamInProgress } from "./useExamInProgress";
 import { getGeeTestConfig } from "./useGeeTestConfig";
 import { limitLogin } from "./useLimitLogin";
-import { checkExamInProgress } from "./useExamInProgress";
+import { useNewVersion } from "./useNewVersion";
 
 logger({
   cnl: ["console", "local", "server"],
@@ -27,23 +28,6 @@ logger({
 
 const { addTimeout } = useTimers();
 
-//#region service worker通知是否有版本更新
-let newVersionAvailable = $ref(false);
-const checkNewVersionListener = () => {
-  newVersionAvailable = true;
-};
-
-onMounted(() =>
-  document.addEventListener("__newSWAvailable", checkNewVersionListener, {
-    once: true,
-  })
-);
-
-onUnmounted(() =>
-  document.removeEventListener("__newSWAvailable", checkNewVersionListener)
-);
-//#endregion
-
 let isGeeTestEnabled = $ref(false);
 onMounted(async () => {
   const conf = await getElectronConfig();
@@ -135,49 +119,8 @@ watch(
 );
 //#endregion
 
-/** 有版本更新返回true，函数内部处理；没版本更新则返回false */
-async function checkNewVersion(): Promise<boolean> {
-  let myHeaders = new Headers();
-  myHeaders.append("Content-Type", "application/javascript");
-  myHeaders.append("Cache-Control", "no-cache");
-  const response = await fetch(
-    [...document.scripts].at(-1)?.src + "?x" + Date.now(),
-    {
-      method: import.meta.env.DEV ? "GET" : "HEAD",
-      headers: myHeaders,
-    }
-  );
-  if (!response.ok || newVersionAvailable) {
-    if (
-      response.ok &&
-      newVersionAvailable &&
-      localStorage.getItem("__swReload")
-    ) {
-      logger({
-        cnl: ["local", "server"],
-        pgu: "AUTO",
-        dtl: "service worker刷新失败",
-      });
-      $message.info("请重新打开程序。", { duration: 2 * 24 * 60 * 60 });
-      return true;
-    }
-    logger({
-      cnl: ["local", "server"],
-      pgu: "AUTO",
-      dtl: "新版本发布后，客户端自动刷新",
-    });
-    $message.info("正在获取新版本...");
-    localStorage.setItem("__swReload", "anything");
-    // disableLoginBtnBecauseRefreshServiceWorker = true;
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    location.reload();
-
-    return true;
-  }
-  return false;
-}
-
 const router = useRouter();
+const { newVersionAvailable, checkNewVersion } = useNewVersion();
 
 let loginBtnLoading = $ref(false);
 let disableLoginBtnBecauseNotTimeout = $ref(false);

src/features/UserLogin/useNewVersion.ts

@@ -0,0 +1,62 @@
+import { onMounted, onUnmounted } from "vue";
+
+export function useNewVersion() {
+  /** 有版本更新返回true，函数内部处理；没版本更新则返回false */
+  async function checkNewVersion(): Promise<boolean> {
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/javascript");
+    myHeaders.append("Cache-Control", "no-cache");
+    const response = await fetch(
+      [...document.scripts].at(-1)?.src + "?x" + Date.now(),
+      {
+        method: import.meta.env.DEV ? "GET" : "HEAD",
+        headers: myHeaders,
+      }
+    );
+    if (!response.ok || newVersionAvailable) {
+      if (
+        response.ok &&
+        newVersionAvailable &&
+        localStorage.getItem("__swReload")
+      ) {
+        logger({
+          cnl: ["local", "server"],
+          pgu: "AUTO",
+          dtl: "service worker刷新失败",
+        });
+        $message.info("请重新打开程序。", { duration: 2 * 24 * 60 * 60 });
+        return true;
+      }
+      logger({
+        cnl: ["local", "server"],
+        pgu: "AUTO",
+        dtl: "新版本发布后，客户端自动刷新",
+      });
+      $message.info("正在获取新版本...");
+      localStorage.setItem("__swReload", "anything");
+      // disableLoginBtnBecauseRefreshServiceWorker = true;
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      location.reload();
+
+      return true;
+    }
+    return false;
+  }
+
+  let newVersionAvailable = $ref(false);
+  const checkNewVersionListener = () => {
+    newVersionAvailable = true;
+  };
+
+  onMounted(() =>
+    document.addEventListener("__newSWAvailable", checkNewVersionListener, {
+      once: true,
+    })
+  );
+
+  onUnmounted(() =>
+    document.removeEventListener("__newSWAvailable", checkNewVersionListener)
+  );
+
+  return { newVersionAvailable: $$(newVersionAvailable), checkNewVersion };
+}