From 6f747cb24a7e5a77e0414b3ca36cf972a9a4d588 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 16 May 2024 18:34:37 +0800
Subject: [PATCH 1/4] Improvements

---
 frontend/App.vue                         |  44 +++---
 frontend/components/Advanced.vue         |   2 +-
 frontend/components/ConnectivityTest.vue | 112 +++++++++------
 frontend/components/DnsLeaksTest.vue     | 174 +++++++++++++----------
 frontend/components/IpInfos.vue          |  26 +++-
 frontend/components/SpeedTest.vue        |   2 +-
 frontend/components/WebRtcTest.vue       |  80 ++++++-----
 frontend/components/widgets/InfoMask.vue |   6 +-
 frontend/store.js                        |  15 +-
 frontend/utils/getips/cloudflare-cn.js   |   8 +-
 frontend/utils/getips/cloudflare-v4.js   |  15 +-
 frontend/utils/getips/cloudflare-v6.js   |  15 +-
 frontend/utils/getips/ipchecking.js      |  22 +--
 frontend/utils/getips/ipify-v4.js        |  15 +-
 frontend/utils/getips/ipify-v6.js        |  18 ++-
 frontend/utils/getips/ipipnet.js         |  32 +++--
 frontend/utils/getips/qqvideo.js         |  13 +-
 frontend/utils/getips/upai.js            |  19 ++-
 18 files changed, 396 insertions(+), 222 deletions(-)

diff --git a/frontend/App.vue b/frontend/App.vue
index 5a01d093..5c409493 100644
--- a/frontend/App.vue
+++ b/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 },
   ];
@@ -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,20 @@ 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) => {
+  navBarRef.value.loaded = newValue;
+  isInfosLoaded.value = newValue;
+  showMaskButton.value = true;
 });
 
 onMounted(() => {
diff --git a/frontend/components/Advanced.vue b/frontend/components/Advanced.vue
index 281940fa..e3dc7802 100644
--- a/frontend/components/Advanced.vue
+++ b/frontend/components/Advanced.vue
@@ -150,7 +150,7 @@ const fullScreen = () => {
 
 
 onMounted(() => {
-    store.setLoadingStatus('advancedtools', true);
+    store.setMountingStatus('advancedtools', true);
     // 监听滚动事件
     scrollContainer.value.addEventListener('scroll', handleScroll);
 
diff --git a/frontend/components/ConnectivityTest.vue b/frontend/components/ConnectivityTest.vue
index 207cf6c7..2c16fb70 100644
--- a/frontend/components/ConnectivityTest.vue
+++ b/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({
diff --git a/frontend/components/DnsLeaksTest.vue b/frontend/components/DnsLeaksTest.vue
index 67ad429f..e19ab507 100644
--- a/frontend/components/DnsLeaksTest.vue
+++ b/frontend/components/DnsLeaksTest.vue
@@ -98,97 +98,117 @@ const generate14DigitString = () => {
 
 // DNS 泄露测试 1
 const fetchLeakTestIpApiCom = (index) => {
-  const urlString = generate32DigitString();
-  const url = `https://${urlString}.edns.ip-api.com/json`;
-
-  fetch(url)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      return response.json();
-    })
-    .then((data) => {
-      if (data.dns && "geo" in data.dns && "ip" in data.dns) {
-        const geoSplit = data.dns.geo.split(" - ");
-        leakTest[index].country = geoSplit[0];
-        leakTest[index].country_code = countryLookup.byCountry(geoSplit[0]).iso2;
-        leakTest[index].ip = data.dns.ip;
-      } else {
-        console.error("Unexpected data structure:", data);
-      }
-    })
-    .catch((error) => {
-      console.error("Error fetching leak test data:", error);
-      leakTest[index].country = t('dnsleaktest.StatusError');
-      leakTest[index].country_code = t('dnsleaktest.StatusError');
-      leakTest[index].ip = t('dnsleaktest.StatusError');
-    });
+  return new Promise((resolve, reject) => {
+    const urlString = generate32DigitString();
+    const url = `https://${urlString}.edns.ip-api.com/json`;
+
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (data.dns && "geo" in data.dns && "ip" in data.dns) {
+          const geoSplit = data.dns.geo.split(" - ");
+          leakTest[index].country = geoSplit[0];
+          leakTest[index].country_code = countryLookup.byCountry(geoSplit[0]).iso2;
+          leakTest[index].ip = data.dns.ip;
+          resolve();
+        } else {
+          console.error("Unexpected data structure:", data);
+          reject(new Error("Unexpected data structure"));
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching leak test data:", error);
+        leakTest[index].country = t('dnsleaktest.StatusError');
+        leakTest[index].country_code = t('dnsleaktest.StatusError');
+        leakTest[index].ip = t('dnsleaktest.StatusError');
+        reject(error);
+      });
+  });
 };
 
 // DNS 泄露测试 2
 const fetchLeakTestSfSharkCom = (index, key) => {
-  const urlString = generate14DigitString();
-  const url = `https://${urlString}.ipv4.surfsharkdns.com`;
-
-  fetch(url)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      return response.json();
-    })
-    .then((data) => {
-      const getKey = Object.keys(data)[key];
-      const keyEntry = data[getKey];
-
-      if (keyEntry && keyEntry.CountryCode && keyEntry.IP) {
-        leakTest[index].country_code = keyEntry.CountryCode;
-        leakTest[index].country = keyEntry.Country;
-        leakTest[index].ip = keyEntry.IP;
-      } else {
-        console.error("Unexpected data structure:", data);
-      }
-    })
-    .catch((error) => {
-      console.error("Error fetching leak test data:", error);
-      leakTest[index].geo = t('dnsleaktest.StatusError');
-      leakTest[index].ip = t('dnsleaktest.StatusError');
-    });
+  return new Promise((resolve, reject) => {
+    const urlString = generate14DigitString();
+    const url = `https://${urlString}.ipv4.surfsharkdns.com`;
+
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        const getKey = Object.keys(data)[key];
+        const keyEntry = data[getKey];
+
+        if (keyEntry && keyEntry.CountryCode && keyEntry.IP) {
+          leakTest[index].country_code = keyEntry.CountryCode;
+          leakTest[index].country = keyEntry.Country;
+          leakTest[index].ip = keyEntry.IP;
+          resolve();
+        } else {
+          console.error("Unexpected data structure:", data);
+          reject(new Error("Unexpected data structure"));
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching leak test data:", error);
+        leakTest[index].geo = t('dnsleaktest.StatusError');
+        leakTest[index].ip = t('dnsleaktest.StatusError');
+        reject(error);
+      });
+  });
 };
 
 // 检查所有 DNS 泄露测试
-const checkAllDNSLeakTest = (isRefresh) => {
-  leakTest.forEach((server) => {
-    server.geo = t('dnsleaktest.StatusWait');
-    server.ip = t('dnsleaktest.StatusWait');
-    server.country = t('dnsleaktest.StatusWait');
-    server.country_code = t('dnsleaktest.StatusWait');
-  });
+const checkAllDNSLeakTest = async (isRefresh) => {
   if (isRefresh) {
     trackEvent('Section', 'RefreshClick', 'DNSLeakTest');
+    leakTest.forEach((server) => {
+      server.geo = t('dnsleaktest.StatusWait');
+      server.ip = t('dnsleaktest.StatusWait');
+      server.country = t('dnsleaktest.StatusWait');
+      server.country_code = t('dnsleaktest.StatusWait');
+    });
   }
-  setTimeout(() => {
-    fetchLeakTestIpApiCom(0);
-  }, 100);
 
-  setTimeout(() => {
-    fetchLeakTestIpApiCom(1);
-  }, 1000);
-
-  setTimeout(() => {
-    fetchLeakTestSfSharkCom(2, 0);
-  }, 100);
-
-  setTimeout(() => {
-    fetchLeakTestSfSharkCom(3, 0);
-  }, 1000);
-
-  isStarted.value = true;
+  // 设置延迟请求函数
+  const delayedFetch = (fetchFunction, index, key, delay) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        fetchFunction(index, key).then(resolve).catch(resolve);  // 无论成功或失败都会解决
+      }, delay);
+    });
+  };
+
+  // 批量请求
+  const promises = [
+    delayedFetch(fetchLeakTestIpApiCom, 0, null, 100),
+    delayedFetch(fetchLeakTestIpApiCom, 1, null, 1000),
+    delayedFetch(fetchLeakTestSfSharkCom, 2, 0, 100),
+    delayedFetch(fetchLeakTestSfSharkCom, 3, 0, 1000)
+  ];
+
+  // 最长等待 6 秒
+  const allSettledPromise = Promise.allSettled(promises);
+  const timeoutPromise = new Promise((resolve) => setTimeout(resolve, 6000));
+
+  // 等待所有请求完成或超时
+  return Promise.race([allSettledPromise, timeoutPromise]).then(() => {
+    store.setLoadingStatus('dnsleaktest', true);
+  });
 };
 
+
 onMounted(() => {
-  store.setLoadingStatus('dnsleaktest', true);
+  store.setMountingStatus('dnsleaktest', true);
 });
 
 defineExpose({
diff --git a/frontend/components/IpInfos.vue b/frontend/components/IpInfos.vue
index b2afcec7..b8f43adf 100644
--- a/frontend/components/IpInfos.vue
+++ b/frontend/components/IpInfos.vue
@@ -289,6 +289,7 @@ const copiedStatus = ref({});
 const IPArray = ref([]);
 const ipGeoSource = ref(userPreferences.value.ipGeoSource);
 const usingSource = ref(userPreferences.value.ipGeoSource);
+const fetchStatus = reactive([]);
 
 // 中间件
 let pendingIPDetailsRequests = new Map();
@@ -297,16 +298,36 @@ let ipDataCache = new Map();
 // 公共获取 IP 地址方法
 const fetchIP = async (cardID, getFromSource) => {
   const { ip, source } = await getFromSource();
+  let fetchingStatus = false;
   if (ip !== null) {
     ipDataCards[cardID].ip = ip;
     ipDataCards[cardID].source = source;
     IPArray.value = [...IPArray.value, ip];
-    fetchIPDetails(cardID, ip);
+    await fetchIPDetails(cardID, ip);
   } else if (cardID === 3 || cardID === 5) {
     ipDataCards[cardID].ip = t('ipInfos.IPv6Error');
   } else {
     ipDataCards[cardID].ip = t('ipInfos.IPv4Error');
   }
+  // 总是返回 true，即使获取 IP 失败，以便在 trackFetchStatus 中记录
+  fetchingStatus = true;
+  fetchStatus[cardID] = { [cardID]: fetchingStatus };
+  trackFetchStatus(fetchStatus);
+};
+
+// 上报数据获取状态，并发送到 store
+const trackFetchStatus = (status) => {
+  let allHasFetched = true;
+  for (let i = 0; i < ipCardsToShow.value; i++) {
+    if (status[i] === undefined) {
+      allHasFetched = false;
+    } else {
+      allHasFetched = allHasFetched && status[i][i];
+    }
+  }
+  if (allHasFetched) {
+    store.setLoadingStatus('ipcheck', true);
+  }
 };
 
 // 检查所有 IP 地址
@@ -401,6 +422,7 @@ const fetchIPDetails = async (cardIndex, ip, sourceID = null) => {
     await fetchPromise;
   } catch (error) {
     console.error(error);
+    throw error;
   } finally {
     // 完成后，从 pendingIPDetailsRequests 中移除
     pendingIPDetailsRequests.delete(ip);
@@ -512,7 +534,7 @@ watch(IPArray, () => {
 });
 
 onMounted(() => {
-  store.setLoadingStatus('ipcheck', true);
+  store.setMountingStatus('ipcheck', true);
 });
 
 defineExpose({
diff --git a/frontend/components/SpeedTest.vue b/frontend/components/SpeedTest.vue
index a152074d..05313814 100644
--- a/frontend/components/SpeedTest.vue
+++ b/frontend/components/SpeedTest.vue
@@ -333,7 +333,7 @@ const showResult = () => {
 
 // 初始化
 onMounted(() => {
-  store.setLoadingStatus('speedtest', true);
+  store.setMountingStatus('speedtest', true);
 });
 
 // 暴露给父组件的方法
diff --git a/frontend/components/WebRtcTest.vue b/frontend/components/WebRtcTest.vue
index edf37a44..575b2c16 100644
--- a/frontend/components/WebRtcTest.vue
+++ b/frontend/components/WebRtcTest.vue
@@ -92,42 +92,43 @@ const stunServers = reactive([
 
 // 测试 STUN 服务器
 const checkSTUNServer = async (stun) => {
-  try {
-    const servers = { iceServers: [{ urls: 'stun:' + stun.url }] };
-    const pc = new RTCPeerConnection(servers);
-    let candidateReceived = false;
-
-    pc.onicecandidate = (event) => {
-      if (event.candidate) {
-        candidateReceived = true;
-        const candidate = event.candidate.candidate;
-        const ipMatch = /([0-9a-f]{1,4}(:[0-9a-f]{1,4}){7}|[0-9a-f]{0,4}(:[0-9a-f]{1,4}){0,6}::[0-9a-f]{0,4}|::[0-9a-f]{1,4}(:[0-9a-f]{1,4}){0,6}|[0-9]{1,3}(\.[0-9]{1,3}){3})/i.exec(candidate);
-        if (ipMatch) {
-          stun.ip = ipMatch[0];
-          IPArray.value = [...IPArray.value, stun.ip];
-          stun.natType = determineNATType(candidate);
-          pc.close();
+  return new Promise((resolve, reject) => {
+    try {
+      const servers = { iceServers: [{ urls: 'stun:' + stun.url }] };
+      const pc = new RTCPeerConnection(servers);
+      let candidateReceived = false;
+
+      pc.onicecandidate = (event) => {
+        if (event.candidate) {
+          candidateReceived = true;
+          const candidate = event.candidate.candidate;
+          const ipMatch = /([0-9a-f]{1,4}(:[0-9a-f]{1,4}){7}|[0-9a-f]{0,4}(:[0-9a-f]{1,4}){0,6}::[0-9a-f]{0,4}|::[0-9a-f]{1,4}(:[0-9a-f]{1,4}){0,6}|[0-9]{1,3}(\.[0-9]{1,3}){3})/i.exec(candidate);
+          if (ipMatch) {
+            stun.ip = ipMatch[0];
+            IPArray.value = [...IPArray.value, stun.ip];
+            stun.natType = determineNATType(candidate);
+            pc.close();
+            resolve();  // 成功时解析 Promise
+          }
         }
-      }
-    };
+      };
 
-    pc.createDataChannel("");
-    await pc.createOffer().then((offer) => pc.setLocalDescription(offer));
+      pc.createDataChannel("");
+      pc.createOffer().then((offer) => pc.setLocalDescription(offer));
 
-    // 设置一个超时计时器
-    await new Promise((resolve, reject) => {
+      // 设置一个超时计时器来拒绝 Promise
       setTimeout(() => {
         if (!candidateReceived) {
+          pc.close();
           reject(new Error("Stun Server Test Timeout"));
-        } else {
-          resolve();
         }
       }, 5000);
-    });
-  } catch (error) {
-    console.error("STUN Server Test Error:", error);
-    stun.ip = t('webrtc.StatusError');
-  }
+    } catch (error) {
+      console.error("STUN Server Test Error:", error);
+      stun.ip = t('webrtc.StatusError');
+      reject(error);  // 捕获异常时拒绝 Promise
+    }
+  });
 };
 
 // 分析ICE候选信息，推断NAT类型
@@ -149,19 +150,28 @@ const determineNATType = (candidate) => {
 };
 
 // 测试所有 STUN 服务器
-const checkAllWebRTC = (isRefresh) => {
-  stunServers.forEach((server) => {
-    server.ip = t('webrtc.StatusWait');
-    server.natType = t('webrtc.StatusWait');
-    checkSTUNServer(server);
-  });
+const checkAllWebRTC = async (isRefresh) => {
   if (isRefresh) {
     trackEvent('Section', 'RefreshClick', 'WebRTC');
   }
   isStarted.value = true;
+  const promises = stunServers.map((server) => {
+    server.ip = t('webrtc.StatusWait');
+    server.natType = t('webrtc.StatusWait');
+    return checkSTUNServer(server);
+  });
+
+  const allSettledPromise = Promise.allSettled(promises);
+  const timeoutPromise = new Promise((resolve) => setTimeout(resolve, 6000));
+
+  return Promise.race([allSettledPromise, timeoutPromise]).then(() => {
+    store.setLoadingStatus('webrtc', true);
+  });
+
 };
+
 onMounted(() => {
-  store.setLoadingStatus('webrtc', true);
+  store.setMountingStatus('webrtc', true);
 });
 
 watch(IPArray, () => {
diff --git a/frontend/components/widgets/InfoMask.vue b/frontend/components/widgets/InfoMask.vue
index d07804c3..00a9b51b 100644
--- a/frontend/components/widgets/InfoMask.vue
+++ b/frontend/components/widgets/InfoMask.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-if="isInfosLoaded" class="btn position-fixed"
+    <button v-if="showMaskButton" class="btn position-fixed"
         :class="infoMaskLevel === 0 ? 'btn-success' : infoMaskLevel === 1 ? 'btn-warning' : 'btn-secondary'"
         style="bottom: 66px; right: 20px; z-index: 1050;" @click="toggleInfoMask" aria-label="Toggle Info Mask"
         v-tooltip="t('Tooltips.InfoMask')">
@@ -12,8 +12,8 @@ import { useI18n } from 'vue-i18n';
 
 const {t} = useI18n();
 
-const { isInfosLoaded, infoMaskLevel, toggleInfoMask } = defineProps({
-    isInfosLoaded: Boolean,
+const { showMaskButton, infoMaskLevel, toggleInfoMask } = defineProps({
+    showMaskButton: Boolean,
     infoMaskLevel: Number,
     toggleInfoMask: Function,
 });
diff --git a/frontend/store.js b/frontend/store.js
index 46944773..a821af74 100644
--- a/frontend/store.js
+++ b/frontend/store.js
@@ -5,7 +5,7 @@ export const useMainStore = defineStore('main', {
 
   state: () => ({
     lang: 'en',
-    loadingStatus: {
+    mountingStatus: {
       ipcheck: false,
       connectivity: false,
       webrtc: false,
@@ -13,6 +13,12 @@ export const useMainStore = defineStore('main', {
       speedtest: false,
       advancedtools: false,
     },
+    loadingStatus: {
+      ipcheck: false,
+      connectivity: false,
+      webrtc: false,
+      dnsleaktest: false,
+    },
     isDarkMode: false,
     isMobile: false,
     shouldRefreshEveryThing: false,
@@ -38,6 +44,9 @@ export const useMainStore = defineStore('main', {
 
   getters: {
     activeSources: (state) => state.ipDBs.filter(db => db.enabled),
+    allHasLoaded: (state) => {
+      return Object.values(state.loadingStatus).every(status => status);
+    },
   },
 
   actions: {
@@ -47,6 +56,10 @@ export const useMainStore = defineStore('main', {
       if (!db) return null;
       return db.url.replace('{{ip}}', ip).replace('{{lang}}', lang || 'en');
     },
+    // 从每个组件返回启动状态
+    setMountingStatus(key, value) {
+      this.mountingStatus[key] = value;
+    },
     // 从每个组件返回加载状态
     setLoadingStatus(key, value) {
       this.loadingStatus[key] = value;
diff --git a/frontend/utils/getips/cloudflare-cn.js b/frontend/utils/getips/cloudflare-cn.js
index aecc8c4e..1b19e378 100644
--- a/frontend/utils/getips/cloudflare-cn.js
+++ b/frontend/utils/getips/cloudflare-cn.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 Cloudflare 中国获取 IP 地址
 const getIPFromCloudflare_CN = async () => {
     try {
@@ -10,7 +12,11 @@ const getIPFromCloudflare_CN = async () => {
             ip = ipLine.split("=")[1];
         }
         const source = "CF-CN";
-        return { ip: ip, source: source };
+        if (isValidIP(ip)) {
+            return { ip: ip, source: source };
+        } else {
+            return { ip: null, source: source };
+        }
     } catch (error) {
         console.error("Error fetching IP from Cloudflare:", error);
         return {
diff --git a/frontend/utils/getips/cloudflare-v4.js b/frontend/utils/getips/cloudflare-v4.js
index e1a18f51..a5c84cd3 100644
--- a/frontend/utils/getips/cloudflare-v4.js
+++ b/frontend/utils/getips/cloudflare-v4.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 Cloudflare 获取 IPv4 地址
 const getIPFromCloudflare_V4 = async () => {
     try {
@@ -10,7 +12,18 @@ const getIPFromCloudflare_V4 = async () => {
             ip = ipLine.split("=")[1];
         }
         const source = "Cloudflare IPv4";
-        return { ip: ip, source: source };
+        if (isValidIP(ip)) {
+            return {
+                ip: ip,
+                source: source
+            };
+        } else { 
+            console.error("Invalid IP from Cloudflare:", ip);
+            return {
+                ip: null,
+                source: source
+            };
+        }
     } catch (error) {
         console.error("Error fetching IP from Cloudflare:", error);
         return {
diff --git a/frontend/utils/getips/cloudflare-v6.js b/frontend/utils/getips/cloudflare-v6.js
index 0f24e986..0da118d8 100644
--- a/frontend/utils/getips/cloudflare-v6.js
+++ b/frontend/utils/getips/cloudflare-v6.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 Cloudflare 获取 IPv6 地址
 const getIPFromCloudflare_V6 = async () => {
     try {
@@ -10,7 +12,18 @@ const getIPFromCloudflare_V6 = async () => {
             ip = ipLine.split("=")[1];
         }
         const source = "Cloudflare IPv6";
-        return { ip: ip, source: source };
+        if (isValidIP(ip)) {
+            return {
+                ip: ip,
+                source: source
+            };
+        } else { 
+            console.error("Invalid IP from Cloudflare:", ip);
+            return {
+                ip: null,
+                source: source
+            };
+        }
     } catch (error) {
         return { 
             ip: null, 
diff --git a/frontend/utils/getips/ipchecking.js b/frontend/utils/getips/ipchecking.js
index 520914f9..7da18d85 100644
--- a/frontend/utils/getips/ipchecking.js
+++ b/frontend/utils/getips/ipchecking.js
@@ -1,4 +1,5 @@
 import { getIPFromCloudflare_CN } from "./cloudflare-cn";
+import { isValidIP } from '@/utils/valid-ip.js';
 
 // 从 GCR 获取 IP 地址
 const getIPFromGCR = async () => {
@@ -13,18 +14,21 @@ const getIPFromGCR = async () => {
     const fullIp = data.ip;
     const ip = fullIp.includes(',') ? fullIp.split(',')[0] : fullIp;
     const source = "IPCheck.ing";
-    return {
-      ip: ip,
-      source: source
-    };
+    if (isValidIP(ip)) {
+      return { ip: ip, source: source };
+    } else {
+      console.error("Invalid IP from IPCheck.ing:", ip);
+    }
   } catch (error) {
     console.error("Error fetching IP from IPCheck.ing:", error);
-    let { ip , source } = await getIPFromCloudflare_CN();
-        return {
-            ip: ip,
-            source: source
-        };
   }
+
+  // 故障时尝试从 Cloudflare 中国获取 IP 地址
+  const { ip, source } = await getIPFromCloudflare_CN();
+  return {
+    ip: ip,
+    source: source
+  };
 };
 
 export { getIPFromGCR };
\ No newline at end of file
diff --git a/frontend/utils/getips/ipify-v4.js b/frontend/utils/getips/ipify-v4.js
index 857dd7b9..995a5ba6 100644
--- a/frontend/utils/getips/ipify-v4.js
+++ b/frontend/utils/getips/ipify-v4.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 IPify 获取 IPv4 地址
 const getIPFromIpify_V4 = async () => {
     try {
@@ -9,7 +11,18 @@ const getIPFromIpify_V4 = async () => {
         const data = await response.json();
         const ip = data.ip;
         const source = "IPify IPv4";
-        return { ip: ip, source: source };
+        if (isValidIP(ip)) {
+            return {
+                ip: ip,
+                source: source
+            };
+        } else { 
+            console.error("Invalid IP from IPify:", ip);
+            return {
+                ip: null,
+                source: source
+            };
+        }
     } catch (error) {
         console.error("Error fetching IPv4 address from ipify:", error);
         return {
diff --git a/frontend/utils/getips/ipify-v6.js b/frontend/utils/getips/ipify-v6.js
index 485bcad8..d64a48b8 100644
--- a/frontend/utils/getips/ipify-v6.js
+++ b/frontend/utils/getips/ipify-v6.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 IPify 获取 IPv6 地址
 const getIPFromIpify_V6 = async () => {
     try {
@@ -9,10 +11,18 @@ const getIPFromIpify_V6 = async () => {
         const data = await response.json();
         const ip = data.ip;
         const source = "IPify IPv6";
-        return {
-            ip: ip,
-            source: source
-        };
+        if (isValidIP(ip)) {
+            return {
+                ip: ip,
+                source: source
+            };
+        } else { 
+            console.error("Invalid IP from IPify:", ip);
+            return {
+                ip: null,
+                source: source
+            };
+        }
     } catch (error) {
         console.error("Error fetching IPv6 address from ipify:", error);
         return {
diff --git a/frontend/utils/getips/ipipnet.js b/frontend/utils/getips/ipipnet.js
index 7319f7cc..f37c122c 100644
--- a/frontend/utils/getips/ipipnet.js
+++ b/frontend/utils/getips/ipipnet.js
@@ -1,28 +1,30 @@
 import { getIPFromQQ } from "./qqvideo";
+import { isValidIP } from '@/utils/valid-ip.js';
 
 // 从 IPIP.net 获取 IP 地址
 const getIPFromIPIP = async () => {
-    let ip = "";
-    let source = "";
     try {
         const response = await fetch("https://myip.ipip.net/json");
         const data = await response.json();
-        ip = data.data.ip;
-        source = "IPIP.net";
-        return {
-            ip: ip,
-            source: source
-        };
+        const ip = data.data.ip;
+        const source = "IPIP.net";
+        if (isValidIP(ip)) {
+            return {
+                ip: ip,
+                source: source
+            };
+        } else {
+            console.error("Invalid IP from IPIP.net:", ip);
+        }
     } catch (error) {
         console.error("Error fetching IP from IPIP.net:", error);
-        // 故障时尝试从 QQ Video 获取 IP 地址
-        let { ip , source } = await getIPFromQQ();
-        return {
-            ip: ip,
-            source: source
-        };
     }
+    // 故障时尝试从 QQ Video 获取 IP 地址
+    const { ip, source } = await getIPFromQQ();
+    return {
+        ip: ip,
+        source: source
+    };
 };
 
-
 export { getIPFromIPIP };
\ No newline at end of file
diff --git a/frontend/utils/getips/qqvideo.js b/frontend/utils/getips/qqvideo.js
index 1f592439..a4333c27 100644
--- a/frontend/utils/getips/qqvideo.js
+++ b/frontend/utils/getips/qqvideo.js
@@ -1,3 +1,5 @@
+import { isValidIP } from '@/utils/valid-ip.js';
+
 // 从 QQ Video 获取 IP 地址
 const getIPFromQQ = () => {
     return new Promise((resolve, reject) => {
@@ -22,12 +24,17 @@ const getIPFromQQ = () => {
                 let source = "QQ.com";
                 document.head.removeChild(script);
                 delete window.ipCallback;
-                resolve({ ip, source });
+                if (isValidIP(ip)) {
+                    resolve({ ip, source });
+                } else {
+                    console.error("Invalid IP from QQ:", ip);
+                    resolve({ ip: null, source: "QQ.com" });
+                }
             } catch (error) {
                 console.error("Error processing IP data from QQ:", error);
                 document.head.removeChild(script);
                 delete window.ipCallback;
-                resolve({ ip: null, source: "QQ.com"});
+                resolve({ ip: null, source: "QQ.com" });
             }
         };
 
@@ -37,7 +44,7 @@ const getIPFromQQ = () => {
             console.error("Error loading script for IP data from QQ");
             document.head.removeChild(script);
             delete window.ipCallback;
-            resolve({ ip: null, source: "QQ.com"});
+            resolve({ ip: null, source: "QQ.com" });
         };
     });
 };
diff --git a/frontend/utils/getips/upai.js b/frontend/utils/getips/upai.js
index 3bd13f8d..2c061a8f 100644
--- a/frontend/utils/getips/upai.js
+++ b/frontend/utils/getips/upai.js
@@ -1,4 +1,5 @@
 import { getIPFromCloudflare_CN } from "./cloudflare-cn";
+import { isValidIP } from '@/utils/valid-ip.js';
 
 // 从 Upai 获取 IP 地址
 const getIPFromUpai = async () => {
@@ -13,15 +14,21 @@ const getIPFromUpai = async () => {
         const data = await response.json();
         const ip = data.remote_addr;
         const source = "Upai";
-        return { ip: ip, source: source };
+        if (isValidIP(ip)) {
+            return { ip: ip, source: source };
+        } else {
+            console.error("Invalid IP from Upai:", ip);
+        }
     } catch (error) {
         console.error("Error fetching IP from Upai:", error);
-        let { ip , source } = await getIPFromCloudflare_CN();
-        return {
-            ip: ip,
-            source: source
-        };
     }
+
+    // 故障时尝试从 Cloudflare 中国获取 IP 地址
+    const { ip, source } = await getIPFromCloudflare_CN();
+    return {
+        ip: ip,
+        source: source
+    };
 };
 
 export { getIPFromUpai };
\ No newline at end of file

From bd8c38d2e9dd75499ea8de50a78ea256b551e436 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 16 May 2024 18:59:15 +0800
Subject: [PATCH 2/4] Improvements

---
 frontend/App.vue            | 5 +----
 frontend/components/Nav.vue | 8 ++++++--
 frontend/utils/shortcut.js  | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/App.vue b/frontend/App.vue
index 5c409493..b427cf8c 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -316,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');
       },
@@ -508,15 +508,12 @@ const loadShortcuts = () => {
 // 监控刷新动作
 watch(shouldRefreshEveryThing, (newVal) => {
   if (newVal) {
-    navBarRef.value.loaded = false;
-    isInfosLoaded.value = false;
     refreshEverything();
   }
 });
 
 // 监控加载状态并传递
 watch(() => store.allHasLoaded, (newValue) => {
-  navBarRef.value.loaded = newValue;
   isInfosLoaded.value = newValue;
   showMaskButton.value = true;
 });
diff --git a/frontend/components/Nav.vue b/frontend/components/Nav.vue
index f429ef39..e1c5f8cb 100644
--- a/frontend/components/Nav.vue
+++ b/frontend/components/Nav.vue
@@ -76,7 +76,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useMainStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
@@ -146,6 +146,7 @@ const collapseNav = () => {
 const handleLogoClick = () => {
   if (window.scrollY === 0) {
     store.setRefreshEveryThing(true);
+    // loaded.value = false;
   }
   trackEvent('Nav', 'NavClick', 'Logo');
 };
@@ -157,9 +158,12 @@ onMounted(() => {
   }, 1000)
 });
 
+watch(() => store.allHasLoaded, (newValue) => {
+  loaded.value = newValue;
+});
+
 // 暴露给 App.vue 的数据
 defineExpose({
-  loaded,
   OpenPreferences,
 });
 </script>
diff --git a/frontend/utils/shortcut.js b/frontend/utils/shortcut.js
index 4a29f408..1988666f 100644
--- a/frontend/utils/shortcut.js
+++ b/frontend/utils/shortcut.js
@@ -53,7 +53,7 @@ const navigateCards = (direction) => {
   currentCard.setAttribute('data-keyboard-hover', 'true');
 
   const cardTop = currentCard.getBoundingClientRect().top + window.pageYOffset;
-  window.scrollTo({ top: cardTop - 60, behavior: 'smooth' });
+  window.scrollTo({ top: cardTop - 200, behavior: 'smooth' });
 };
 
 

From b6ad56f5c5d00c197b7f730e36321488663d9711 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 16 May 2024 19:35:19 +0800
Subject: [PATCH 3/4] Improvements

---
 frontend/locales/en.json            | 12 +-----
 frontend/locales/fr.json            | 12 +-----
 frontend/locales/zh.json            | 12 +-----
 frontend/utils/transform-ip-data.js | 67 ++++++++++++++++++++++-------
 4 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 207222f7..33224661 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -222,7 +222,8 @@
       "Human_Pct": "Human Traffic Percentage:"
     },
     "proxyDetect": {
-      "yes": "Possibly a proxy or VPN",
+      "yes": "Must be a proxy or VPN",
+      "maybe": "Possibly a proxy or VPN",
       "no": "Not a proxy or VPN",
       "unknownProxyType": "Unknown type",
       "unknownProtocol": "Unknown protocol",
@@ -356,7 +357,6 @@
     "DNSResolver": "Open DNS Resolution panel",
     "ToggleMaps": "Toggle Maps",
     "IPCheck": "Query IP Address",
-    "AddBingMapKey": "Add Bing Map API Key",
     "ToggleInfoMask": "Toggle Info Masking",
     "Help": "Show Shortcut Keys",
     "HelpNote": "People who use shortcuts are really awesome!",
@@ -379,14 +379,6 @@
     "copyRightLink": "https://ipcheck.ing",
     "copyRightLinkName": "IPCheck.ing"
   },
-  "addBingMapKey": {
-    "Title": "Add Bing Map API Key",
-    "Note": "After adding, the map can be displayed in the IP information. The API Key will only be saved in the current browser for the next use, and will not be uploaded to the server.",
-    "Placeholder": "Please enter Bing Map API Key",
-    "Button": "Save",
-    "removeButton": "Remove",
-    "Error": "Please enter a valid Bing Map API Key."
-  },
   "helpModal": {
     "Title": "Keyboard Shortcuts"
   },
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index 402ae34b..71997b0c 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -222,7 +222,8 @@
             "Human_Pct": "Pourcentage de trafic humain :"
         },
         "proxyDetect": {
-            "yes": "Possiblement un proxy ou un VPN",
+            "yes": "Doit être un proxy ou un VPN",
+            "maybe": "Possiblement un proxy ou un VPN",
             "no": "Pas un proxy ou un VPN",
             "unknownProxyType": "Type inconnu",
             "unknownProtocol": "Protocole inconnu",
@@ -356,7 +357,6 @@
         "DNSResolver": "Ouvrir le Résolution DNS",
         "ToggleMaps": "Activer/désactiver les cartes",
         "IPCheck": "Vérification IP",
-        "AddBingMapKey": "Ajouter une clé API Bing Map",
         "ToggleInfoMask": "Activer/désactiver le masquage des informations",
         "Help": "Afficher les raccourcis clavier",
         "HelpNote": "Les personnes qui utilisent des raccourcis clavier sont vraiment géniales !",
@@ -379,14 +379,6 @@
         "copyRightLink": "https://ipcheck.ing",
         "copyRightLinkName": "IPCheck.ing"
     },
-    "addBingMapKey": {
-        "Title": "Ajouter une clé API Bing Map",
-        "Note": "Après l'ajout, la carte peut être affichée dans les informations IP. La clé API sera uniquement enregistrée dans le navigateur actuel pour une utilisation ultérieure et ne sera pas téléchargée sur le serveur.",
-        "Placeholder": "Veuillez entrer une clé API Bing Map valide",
-        "Button": "Enregistrer",
-        "removeButton": "Supprimer",
-        "Error": "Veuillez entrer une clé API Bing Map valide."
-    },
     "helpModal": {
         "Title": "Raccourcis"
     },
diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
index 1c20ad98..26338ee5 100644
--- a/frontend/locales/zh.json
+++ b/frontend/locales/zh.json
@@ -222,7 +222,8 @@
       "Human_Pct": "人类流量占比："
     },
     "proxyDetect": {
-      "yes": "可能是代理或 VPN",
+      "yes": "是代理或 VPN",
+      "maybe": "可能是代理或 VPN",
       "no": "不是代理或 VPN",
       "unknownProxyType": "未知类型",
       "unknownProtocol": "未知协议",
@@ -356,7 +357,6 @@
     "DNSResolver": "打开 DNS 解析器面板",
     "ToggleMaps": "切换地图显示",
     "IPCheck": "IP 查询",
-    "AddBingMapKey": "添加 Bing Map API Key",
     "ToggleInfoMask": "切换信息隐藏",
     "Help": "显示快捷键",
     "HelpNote": "使用快捷键的人，是喜欢效率的人，你真棒！",
@@ -379,14 +379,6 @@
     "copyRightLink": "https://ipcheck.ing",
     "copyRightLinkName": "IPCheck.ing"
   },
-  "addBingMapKey": {
-    "Title": "添加 Bing Map API Key",
-    "Note": "添加后，可以在 IP 信息中显示地图。API Key 只会在当前浏览器中保存，方便下次使用，不会上传到服务器。",
-    "Placeholder": "请输入 Bing Map API Key",
-    "Button": "保存",
-    "removeButton": "删除",
-    "Error": "请输入有效的 Bing Map API Key。"
-  },
   "helpModal": {
     "Title": "快捷键"
   },
diff --git a/frontend/utils/transform-ip-data.js b/frontend/utils/transform-ip-data.js
index 198bf9cc..fbf7e4db 100644
--- a/frontend/utils/transform-ip-data.js
+++ b/frontend/utils/transform-ip-data.js
@@ -1,5 +1,5 @@
 // 解析IP数据
-function transformDataFromIPapi(data,ipGeoSource,t,bingMapLanguage) {
+function transformDataFromIPapi(data, ipGeoSource, t, bingMapLanguage) {
     if (data.error) {
         throw new Error(data.reason);
     }
@@ -19,7 +19,7 @@ function transformDataFromIPapi(data,ipGeoSource,t,bingMapLanguage) {
     };
 
     if (ipGeoSource === 0) {
-        const proxyDetails = extractProxyDetails(data.proxyDetect,t);
+        const proxyDetails = extractProxyDetails(data.proxyDetect, t);
         return {
             ...baseData,
             ...proxyDetails,
@@ -29,21 +29,56 @@ function transformDataFromIPapi(data,ipGeoSource,t,bingMapLanguage) {
     return baseData;
 };
 
-// 提取代理信息
-function extractProxyDetails(proxyDetect = {},t) {
-    const isProxy = proxyDetect.proxy === 'yes' ? t('ipInfos.proxyDetect.yes') :
-        proxyDetect.proxy === 'no' ? t('ipInfos.proxyDetect.no') :
-            t('ipInfos.proxyDetect.unknownProxyType');
-    const type = proxyDetect.type === 'Business' ? t('ipInfos.proxyDetect.type.Business') :
-        proxyDetect.type === 'Residential' ? t('ipInfos.proxyDetect.type.Residential') :
-            proxyDetect.type === 'Wireless' ? t('ipInfos.proxyDetect.type.Wireless') :
-                proxyDetect.type === 'Hosting' || proxyDetect.type === 'VPN' ? t('ipInfos.proxyDetect.type.Hosting') :
-                    proxyDetect.type ? proxyDetect.type : t('ipInfos.proxyDetect.type.unknownType');
-    const proxyProtocol = proxyDetect.protocol === 'unknown' ? t('ipInfos.proxyDetect.unknownProtocol') :
-        proxyDetect.protocol ? proxyDetect.protocol : t('ipInfos.proxyDetect.unknownProtocol');
-    const proxyOperator = proxyDetect.operator ? proxyDetect.operator : "";
+// 解析代理数据
+function extractProxyDetails(proxyDetect = {}, t) {
+    const isProxy = determineIsProxy(proxyDetect, t);
+    const type = determineType(proxyDetect, t);
+    const proxyProtocol = determineProtocol(proxyDetect, t);
+    const proxyOperator = proxyDetect.operator || "";
 
     return { isProxy, type, proxyProtocol, proxyOperator };
-};
+}
+
+// 判断是否代理
+function determineIsProxy(proxyDetect, t) {
+    if (proxyDetect.proxy === 'yes' && proxyDetect.protocol !== 'unknown') {
+        return t('ipInfos.proxyDetect.yes');
+    } else if (proxyDetect.proxy === 'yes') {
+        return t('ipInfos.proxyDetect.maybe');
+    } else if (proxyDetect.proxy === 'no') {
+        return t('ipInfos.proxyDetect.no');
+    } else {
+        return t('ipInfos.proxyDetect.unknownProxyType');
+    }
+}
+
+// 判断代理类型
+function determineType(proxyDetect, t) {
+    switch (proxyDetect.type) {
+        case 'Business':
+            return t('ipInfos.proxyDetect.type.Business');
+        case 'Residential':
+            return t('ipInfos.proxyDetect.type.Residential');
+        case 'Wireless':
+            return t('ipInfos.proxyDetect.type.Wireless');
+        case 'Hosting':
+            return t('ipInfos.proxyDetect.type.Hosting');
+        case 'VPN':
+            if (proxyDetect.protocol === 'unknown') {
+                return t('ipInfos.proxyDetect.type.Hosting');
+            }
+        default:
+            return proxyDetect.type || t('ipInfos.proxyDetect.type.unknownType');
+    }
+}
+
+// 判断代理协议
+function determineProtocol(proxyDetect, t) {
+    if (proxyDetect.protocol === 'unknown' || !proxyDetect.protocol) {
+        return t('ipInfos.proxyDetect.unknownProtocol');
+    } else {
+        return proxyDetect.protocol;
+    }
+}
 
 export { transformDataFromIPapi, extractProxyDetails };
\ No newline at end of file

From befd3bf034c0a925f08fc56968ac08cada2569db Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 16 May 2024 21:13:04 +0800
Subject: [PATCH 4/4] Improvements

---
 frontend/components/widgets/Help.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/components/widgets/Help.vue b/frontend/components/widgets/Help.vue
index ad8e00f7..4ade3252 100644
--- a/frontend/components/widgets/Help.vue
+++ b/frontend/components/widgets/Help.vue
@@ -4,7 +4,8 @@
         <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
                 <div class="modal-header" :class="{ 'dark-mode-border': isDarkMode }">
-                    <h5 class="modal-title" id="helpModalTitle">{{ t('helpModal.Title') }}</h5>
+                    <h5 class="modal-title" id="helpModalTitle"><i class="bi bi-keyboard"></i> {{ t('helpModal.Title')
+                        }}</h5>
                     <button type="button" class="btn-close" :class="{ 'dark-mode-close-button': isDarkMode }"
                         data-bs-dismiss="modal" aria-label="Close"></button>
 
@@ -15,27 +16,33 @@
                     </p>
                     <div class="row flex-nowrap text-nowrap">
                         <!-- 左边的列 -->
-                        <div class="col text-nowrap">
-                            <div v-for="(key, index) in splitKeyMap.left" :key="`left-${key.keys}`" class="row p-2"
+                        <div class="col text-nowrap ">
+                            <div v-for="(key, index) in splitKeyMap.left" :key="`left-${key.keys}`"
+                                class="row p-2 justify-content-between mx-1"
                                 :class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
+                                <div class="col-8">
+                                    {{ key.description }}
+                                </div>
                                 <div class="col-auto">
                                     <kbd :class="{ 'text-bg-light': isDarkMode }">
                                         {{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
                                     </kbd>
                                 </div>
-                                <div class="col-8">{{ key.description }}</div>
                             </div>
                         </div>
                         <!-- 右边的列 -->
                         <div class="col text-nowrap">
-                            <div v-for="(key, index) in splitKeyMap.right" :key="`right-${key.keys}`" class="row p-2"
+                            <div v-for="(key, index) in splitKeyMap.right" :key="`right-${key.keys}`"
+                                class="row p-2 justify-content-between mx-1"
                                 :class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
+                                <div class="col-8">
+                                    {{ key.description }}
+                                </div>
                                 <div class="col-auto">
                                     <kbd :class="{ 'text-bg-light': isDarkMode }">
                                         {{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
                                     </kbd>
                                 </div>
-                                <div class="col-8">{{ key.description }}</div>
                             </div>
                         </div>
                     </div>
@@ -52,7 +59,7 @@ import { useMainStore } from '@/store';
 import { Modal } from 'bootstrap';
 import { useI18n } from 'vue-i18n';
 
-const {t} = useI18n();
+const { t } = useI18n();
 
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);