From 59d226cd45b5f05f7d0627eadbcb4657f1fd24d5 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Wed, 23 Oct 2024 13:36:55 +0800
Subject: [PATCH] Improvement

---
 frontend/components/advanced-tools/RuleTest.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/components/advanced-tools/RuleTest.vue b/frontend/components/advanced-tools/RuleTest.vue
index ee739527..32074bae 100644
--- a/frontend/components/advanced-tools/RuleTest.vue
+++ b/frontend/components/advanced-tools/RuleTest.vue
@@ -29,13 +29,14 @@
                                 <span :class="{ 'jn-ip-font': test.ip.length > 32 }">{{ test.ip }}</span>
                             </p>
                             <div class="alert" :class="{
-                                'alert-info': test.country_code === t('ruletest.StatusWait'),
-                                'alert-success': test.country_code !== t('ruletest.StatusWait'),
+                                'alert-info': test.country === t('ruletest.StatusWait'),
+                                'alert-danger': test.country === t('ruletest.StatusError'),
+                                'alert-success': test.country !== t('ruletest.StatusWait') && test.country !== t('ruletest.StatusError'),
                             }" :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 }}&nbsp;</strong>
-                                <span v-if="test.country_code !== t('ruletest.StatusWait')"
+                                <span v-show="test.country_code"
                                     :class="'jn-fl fi fi-' + test.country_code.toLowerCase()"></span>
                             </div>
                         </div>
@@ -76,7 +77,7 @@ const lang = computed(() => store.lang);
 const createDefaultCard = () => ({
     name: t('ruletest.Name'),
     ip: t('ruletest.StatusWait'),
-    country_code: t('ruletest.StatusWait'),
+    country_code: '',
     country: t('ruletest.StatusWait'),
 });
 
@@ -109,7 +110,7 @@ const fetchTrace = async (id, url) => {
         }
     } catch (error) {
         ruleTests.value[id].ip = t('ruletest.StatusError');
-        ruleTests.value[id].country_code = t('ruletest.StatusError');
+        ruleTests.value[id].country_code = '';
         ruleTests.value[id].country = t('ruletest.StatusError');
         console.error("Error fetching Data:", error);
     }
@@ -121,7 +122,8 @@ const checkAllRuleTest = async (refresh = false) => {
     if (refresh) {
         ruleTests.value.forEach((test) => {
             test.ip = t('ruletest.StatusWait');
-            test.country_code = t('ruletest.StatusWait');
+            test.country = t('ruletest.StatusWait');
+            test.country_code = '';
         });
     }