From f909ddd0f49c0f68ec436f16ca2bbba9387ef458 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Sun, 3 Mar 2024 18:57:46 +0800
Subject: [PATCH] Add Proxy Rules Test

---
 src/components/ipcheck.vue  |  6 +++---
 src/components/nav.vue      | 37 +++++++++++++++++++++----------------
 src/components/ruletest.vue |  2 +-
 src/locales/en.json         |  2 +-
 src/locales/fr.json         |  2 +-
 src/locales/zh.json         |  2 +-
 6 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/ipcheck.vue b/src/components/ipcheck.vue
index 11cb9db0..35dd1485 100644
--- a/src/components/ipcheck.vue
+++ b/src/components/ipcheck.vue
@@ -20,8 +20,8 @@
             @click="$trackEvent('IPCheck', 'ToggleClick', 'ShowMap');">
 
           <label class="form-check-label" for="toggleMapSwitch">
-            <i :class="['bi', isEnvBingMapKey ? 'bi bi-map-fill' : 'bi bi-map']" aria-hidden="true" role="button"
-              v-tooltip="$t('Tooltips.ToggleMaps')"></i>
+            <i :class="['bi', isEnvBingMapKey ? 'bi bi-map-fill' : 'bi bi-map']" aria-hidden="true"
+              aria-label="Toggle Map Display" v-tooltip="$t('Tooltips.ToggleMaps')"></i>
           </label>
         </div>
 
@@ -91,7 +91,7 @@
                 <i v-if="isValidIP(card.ip)"
                   :class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
                   @click="copyToClipboard(card.ip, card.id)" role="button"
-                  v-tooltip="{ title: $t('Tooltips.CopyIP'), placement: 'right' }"></i>
+                  v-tooltip="{ title: $t('Tooltips.CopyIP'), placement: 'right' }" :aria-label="'Copy' + card.ip"></i>
               </span>
               <span v-else class="placeholder col-10"></span>
             </div>
diff --git a/src/components/nav.vue b/src/components/nav.vue
index 573e88e7..d410ff28 100644
--- a/src/components/nav.vue
+++ b/src/components/nav.vue
@@ -16,14 +16,14 @@
         <span class=" fw-bold  "> IP</span>
         <span class="fw-lighter">Check.</span>
         <span class="fw-lighter" :class="{
-          'background-animation-dark': !loaded && isDarkMode,
-          'background-animation-light': !loaded && !isDarkMode
-        }">ing</span>
+      'background-animation-dark': !loaded && isDarkMode,
+      'background-animation-light': !loaded && !isDarkMode
+    }">ing</span>
       </a>
 
       <div class="btn-group mx-1" :data-bs-theme="isDarkMode ? 'dark' : 'light'">
-        <button type="button" class="btn btn-sm dropdown-toggle jn-button" data-bs-toggle="dropdown" aria-expanded="false"
-          aria-label="Language Selection">
+        <button type="button" class="btn btn-sm dropdown-toggle jn-button" data-bs-toggle="dropdown"
+          aria-expanded="false" aria-label="Language Selection">
           <i class="bi bi-translate"></i>
         </button>
         <ul class="dropdown-menu">
@@ -54,26 +54,26 @@
     <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
       <div class="navbar-nav ">
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#IPInfo"
-          @click="$trackEvent('Nav', 'NavClick', 'IPInfo')"> {{ $t('nav.IPinfo') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'IPInfo')"> {{ $t('nav.IPinfo') }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#Connectivity"
-          @click="$trackEvent('Nav', 'NavClick', 'Connectivity')"> {{
-            $t('nav.Connectivity') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'Connectivity')"> {{
+      $t('nav.Connectivity') }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#WebRTC"
-          @click="$trackEvent('Nav', 'NavClick', 'WebRTC')"> {{ $t('nav.WebRTC') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'WebRTC')"> {{ $t('nav.WebRTC') }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#DNSLeakTest"
-          @click="$trackEvent('Nav', 'NavClick', 'DNSLeakTest')"> {{
-            $t('nav.DNSLeakTest') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'DNSLeakTest')"> {{
+      $t('nav.DNSLeakTest') }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#RuleTest"
-          @click="$trackEvent('Nav', 'NavClick', 'RuleTest')"> {{ 
-          $t('nav.RuleTest') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'RuleTest')"> {{
+      $t('nav.RuleTest') }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#SpeedTest"
-          @click="$trackEvent('Nav', 'NavClick', 'SpeedTest')"> {{ $t('nav.SpeedTest')
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'SpeedTest')"> {{ $t('nav.SpeedTest')
           }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#PingTest"
-          @click="$trackEvent('Nav', 'NavClick', 'PingTest')"> {{ $t('nav.PingTest')
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'PingTest')"> {{ $t('nav.PingTest')
           }}</a>
         <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#MTRTest"
-          @click="$trackEvent('Nav', 'NavClick', 'MTRTest')"> {{ $t('nav.MTRTest') }}</a>
+          @click="collapseNav(); $trackEvent('Nav', 'NavClick', 'MTRTest')"> {{ $t('nav.MTRTest') }}</a>
       </div>
     </div>
   </nav>
@@ -111,6 +111,11 @@ export default {
       this.$trackEvent('Nav', 'ToggleClick', 'DarkMode');
     },
 
+    // 收起导航栏
+    collapseNav() {
+      document.querySelector('#navbarNavAltMarkup').classList.remove('show');
+    },
+
     // 更新 body class
     updateBodyClass() {
       if (this.isDarkMode) {
diff --git a/src/components/ruletest.vue b/src/components/ruletest.vue
index 563409d6..c0a2b9d8 100644
--- a/src/components/ruletest.vue
+++ b/src/components/ruletest.vue
@@ -40,7 +40,7 @@
                 }" :data-bs-theme="isDarkMode ? 'dark' : ''">
                                 <i class="bi"
                                     :class="[test.ip === $t('ruletest.StatusWait') || test.ip === $t('ruletest.StatusError') ? 'bi-hourglass-split' : 'bi-geo-alt-fill']"></i>
-                                {{ $t('ruletest.country') }}: <strong>{{ test.country_code }}&nbsp;</strong>
+                                {{ $t('ruletest.Country') }}: <strong>{{ test.country_code }}&nbsp;</strong>
                                 <span v-if="test.country_code !== $t('ruletest.StatusWait')"
                                     :class="'jn-fl fi fi-' + test.country_code.toLowerCase()"></span>
                             </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index da5da3c4..d4259f97 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -17,7 +17,7 @@
     "Note": "Rule test is used to determine if the proxy software's domain-based rules are set correctly. Before conducting the test, you need to refer to the card below and set different domain-based routing rules for the 8 different URLs of IPCheck.ing in your proxy software.",
     "StatusWait": "Awaiting Test or Test Error",
     "StatusError": "Test Error",
-    "country": "Proxy Country"
+    "Country": "Proxy region"
   },
   "Tooltips": {
     "RefreshIPCard": "Refresh IP Card",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 1a57b865..b6b1cb01 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -17,7 +17,7 @@
         "Note": "Le test de règles est utilisé pour déterminer si les paramètres de règles basées sur le nom de domaine de votre logiciel proxy sont corrects. Avant de procéder au test, veuillez vous référer à la carte ci-dessous et configurer des règles de redirection de domaine différentes pour les 8 URL différentes d'IPCheck.ing dans votre logiciel proxy.",
         "StatusWait": "En attente du test ou erreur de connexion",
         "StatusError": "Erreur de test",
-        "country": "Région de proxy"
+        "Country": "Région de proxy"
     },
     "Tooltips": {
         "RefreshIPCard": "Actualiser la carte IP",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 153c9fe7..8aac4c18 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -17,7 +17,7 @@
     "Note": "分流测试用于判断代理软件基于域名的规则设置是否正确。在进行测试之前，你需要先参考下方的卡片，在你的代理软件里对 IPCheck.ing 的 8 个不同的 URL 设置不同的域名分流规则。",
     "StatusWait": "待检测",
     "StatusError": "检测出错",
-    "country": "代理地区"
+    "Country": "代理地区"
   },
   "Tooltips": {
     "RefreshIPCard": "刷新 IP 信息",