Merge pull request #210 from jason5ng32/dev

Improvements

Author: jason5ng32

frontend/App.vue

@@ -13,7 +13,7 @@
       <AdvancedTools ref="advancedToolsRef" />
     </div>
   </div>
-  <InfoMask :isInfosLoaded.value="isInfosLoaded" :infoMaskLevel.value="infoMaskLevel"
+  <InfoMask :showMaskButton.value="showMaskButton" :infoMaskLevel.value="infoMaskLevel"
     :toggleInfoMask="toggleInfoMask" />
   <QueryIP ref="queryIPRef" />
   <HelpModal ref="helpModalRef" />
@@ -61,7 +61,7 @@ const store = useMainStore();
 const configs = computed(() => store.configs);
 const userPreferences = computed(() => store.userPreferences);
 const shouldRefreshEveryThing = computed(() => store.shouldRefreshEveryThing);
-const Status = computed(() => store.loadingStatus);
+const Status = computed(() => store.mountingStatus);
 
 // Template 里的 Ref
 const navBarRef = ref(null);
@@ -88,6 +88,7 @@ const alertMessage = ref("");
 const alertTitle = ref("");
 const alertToShow = ref(false);
 const autoStart = ref(userPreferences.value.autoStart);
+const showMaskButton = ref(false);
 
 //
 // 加载相关
@@ -103,9 +104,8 @@ hideLoading();
 
 
 // 事件控制
-const loadingControl = (t1 = 0, t2 = 0, t3 = 4000, t4 = 2500) => {
+const loadingControl = (t1 = 0, t2 = 2000, t3 = 3000, t4 = 2500) => {
   const mountedStatus = Object.values(Status.value).every(Boolean);
-  setInfosLoaded();
   if (mountedStatus) {
     setTimeout(() => {
       IPCheckRef.value.checkAllIPs();
@@ -120,6 +120,11 @@ const loadingControl = (t1 = 0, t2 = 0, t3 = 4000, t4 = 2500) => {
       setTimeout(() => {
         dnsLeaksRef.value.checkAllDNSLeakTest(false);
       }, t4);
+    } else {
+      // 如果不自动运行，将剩余的加载状态设置为 true
+      store.setLoadingStatus('connectivity', true);
+      store.setLoadingStatus('webrtc', true);
+      store.setLoadingStatus('dnsleaktest', true);
     }
   } else {
     // 递归检查
@@ -129,13 +134,6 @@ const loadingControl = (t1 = 0, t2 = 0, t3 = 4000, t4 = 2500) => {
   }
 };
 
-// 延迟设置 isInfosLoaded.value
-const setInfosLoaded = () => {
-  setTimeout(() => {
-    isInfosLoaded.value = true;
-  }, 6000);
-};
-
 //
 // 刷新相关
 //
@@ -153,10 +151,17 @@ const scheduleTimedTasks = (tasks) => {
 
 // 刷新所有
 const refreshEverything = () => {
+
+  // 重置加载状态
+  store.setLoadingStatus('connectivity', false);
+  store.setLoadingStatus('webrtc', false);
+  store.setLoadingStatus('dnsleaktest', false);
+  store.setLoadingStatus('ipcheck', false);
+
   const refreshTasks = [
     { action: () => IPCheckRef.value.checkAllIPs(), delay: 0 },
-    { action: () => connectivityRef.value.checkAllConnectivity(false, true, true), delay: 2000 },
-    { action: () => webRTCRef.value.checkAllWebRTC(true), delay: 4000 },
+    { action: () => connectivityRef.value.handelCheckStart(true), delay: 2000 },
+    { action: () => webRTCRef.value.checkAllWebRTC(true), delay: 3000 },
     { action: () => dnsLeaksRef.value.checkAllDNSLeakTest(true), delay: 2500 },
     { action: () => refreshingAlert(), delay: 500 },
   ];
@@ -311,7 +316,7 @@ const ShortcutKeys = (isOriginalSite) => {
           return
         }
         const card = IPCheckRef.value.ipDataCards[num - 1];
-        scrollToElement("IPInfo-" + num, 171);
+        scrollToElement("IPInfo-" + num, 300);
         IPCheckRef.value.refreshCard(card, num - 1);
         trackEvent('ShortCut', 'ShortCut', 'IPCheck');
       },
@@ -321,7 +326,7 @@ const ShortcutKeys = (isOriginalSite) => {
       keys: "c",
       action: () => {
         scrollToElement("Connectivity", 80);
-        connectivityRef.value.checkAllConnectivity(false, true, true);
+        connectivityRef.value.handelCheckStart(true);
         trackEvent('ShortCut', 'ShortCut', 'Connectivity');
       },
       description: t('shortcutKeys.RefreshConnectivityTests'),
@@ -500,19 +505,17 @@ const loadShortcuts = () => {
   }, 2000);
 };
 
+// 监控刷新动作
 watch(shouldRefreshEveryThing, (newVal) => {
   if (newVal) {
-    navBarRef.value.loaded = false;
-    isInfosLoaded.value = false;
     refreshEverything();
-    setInfosLoaded();
   }
 });
 
-watch(isInfosLoaded, (newVal) => {
-  if (newVal) {
-    navBarRef.value.loaded = true;
-  }
+// 监控加载状态并传递
+watch(() => store.allHasLoaded, (newValue) => {
+  isInfosLoaded.value = newValue;
+  showMaskButton.value = true;
 });
 
 onMounted(() => {

frontend/components/Advanced.vue

@@ -150,7 +150,7 @@ const fullScreen = () => {
 
 
 onMounted(() => {
-    store.setLoadingStatus('advancedtools', true);
+    store.setMountingStatus('advancedtools', true);
     // 监听滚动事件
     scrollContainer.value.addEventListener('scroll', handleScroll);
 

frontend/components/ConnectivityTest.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, onMounted, reactive, watch } from 'vue';
 import { useMainStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
@@ -59,6 +59,7 @@ const isDarkMode = computed(() => store.isDarkMode);
 const isMobile = computed(() => store.isMobile);
 const userPreferences = computed(() => store.userPreferences);
 
+const alertCrontrol = ref(false);
 const alertToShow = ref(false);
 const alertStyle = ref("");
 const alertTitle = ref("");
@@ -187,53 +188,69 @@ const checkConnectivityHandler = (test, onTestComplete, isManualRun) => {
 
 // 检查所有网络连通性
 const checkAllConnectivity = (isAlertToShow, isRefresh, isManualRun) => {
+  alertToShow.value = isAlertToShow;
+  return new Promise((resolve, reject) => {
+    if (isRefresh) {
+      connectivityTests.forEach((test) => {
+        test.status = t('connectivity.StatusWait');
+        test.time = 0;
+      });
+      trackEvent('Section', 'RefreshClick', 'Connectivity');
+    }
 
-  if (isRefresh) {
-    connectivityTests.forEach((test) => {
-      test.status = t('connectivity.StatusWait');
-      test.time = 0;
-    });
-    trackEvent('Section', 'RefreshClick', 'Connectivity');
-  }
-  let totalTests = connectivityTests.length;
-  let successCount = 0;
-  let completedCount = 0;
+    let totalTests = connectivityTests.length;
+    let successCount = 0;
+    let completedCount = 0;
+    let testPromises = [];
 
-  const onTestComplete = (isSuccess) => {
-    if (isSuccess) {
-      successCount++;
-    }
-    completedCount++;
+    const onTestComplete = (isSuccess) => {
+      if (isSuccess) {
+        successCount++;
+      }
+      completedCount++;
+    };
 
-    // 只有当所有测试都完成时才做出最终判断
-    if (completedCount === totalTests) {
-      alertToShow.value = true;
+    connectivityTests.forEach((test, index) => {
+      let testPromise = new Promise((testResolve, testReject) => {
+        setTimeout(() => {
+          checkConnectivityHandler(test, (isSuccess) => {
+            if (isSuccess) {
+              onTestComplete(true);
+              testResolve();
+            } else {
+              onTestComplete(false);
+              testReject();
+            }
+          }, isManualRun);
+        }, 50 * index);
+      });
+      testPromises.push(testPromise);
+    });
+
+    // 无论如何都会 Resolve
+    Promise.allSettled(testPromises).then(() => {
       if (successCount === totalTests) {
-        updateConnectivityAlert(true, "success");
+        updateConnectivityAlert("success");
       } else {
-        updateConnectivityAlert(true, "error");
+        updateConnectivityAlert("error");
       }
-    }
-  };
+      resolve();
+    });
+
 
-  connectivityTests.forEach((test, index) => {
-    setTimeout(() => {
-      checkConnectivityHandler(test, onTestComplete, isManualRun);
-    }, 50 * index);
+    isStarted.value = true;
   });
+};
 
-  if ((isAlertToShow || !isStarted.value) && autoShowAltert.value) {
-    setTimeout(() => {
-      store.setAlert(alertToShow.value, alertStyle.value, alertMessage.value, alertTitle.value);
-    }, 4000);
+const sendAlert = () => {
+  if ((alertToShow.value || !isStarted.value) && autoShowAltert.value) {
+    store.setAlert(alertToShow.value, alertStyle.value, alertMessage.value, alertTitle.value);
   }
-
-  isStarted.value = true;
 };
 
+
 // 更新通知气泡
-const updateConnectivityAlert = (show, type) => {
-  alertToShow.value = show;
+const updateConnectivityAlert = (type) => {
   if (type === "success") {
     alertStyle.value = "text-success";
     alertMessage.value = t('alert.Congrats_Message');
@@ -245,14 +262,19 @@ const updateConnectivityAlert = (show, type) => {
   }
 };
 
-const handelCheckStart = () => {
-  setTimeout(() => {
-    checkAllConnectivity(true, false, false);
-  }, 2000);
+// 主控制函数
+const handelCheckStart = async (fromApp = false) => {
+  if (fromApp) {
+    await checkAllConnectivity(false, true, true);
+  } else {
+    await checkAllConnectivity(true, false, false);
+  }
+  // 传递完成状态到 store
+  store.setLoadingStatus('connectivity', true);
   if (autoRefresh.value) {
-    intervalId.value = setInterval(() => {
+    intervalId.value = setInterval(async () => {
       if (counter.value < maxCounts.value && !manualRun.value) {
-        checkAllConnectivity(false, false, false);
+        await checkAllConnectivity(false, false, false);
         counter.value++;
       } else {
         clearInterval(intervalId.value);
@@ -262,7 +284,13 @@ const handelCheckStart = () => {
 };
 
 onMounted(() => {
-  store.setLoadingStatus('connectivity', true);
+  store.setMountingStatus('connectivity', true);
+});
+
+watch(() => store.allHasLoaded, (newValue, oldValue) => {
+  if (newValue === true) {
+    sendAlert();
+  }
 });
 
 defineExpose({