Add IP Score

jason5ng32 · Dec 9, 2024 · dcf94be · dcf94be
1 parent 4d2a59b
commit dcf94be
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 7 deletions.
diff --git a/frontend/components/IpInfos.vue b/frontend/components/IpInfos.vue
@@ -127,6 +127,30 @@
                 </span>
               </li>
 
+              <li v-show="(!isMobile || !isCardsCollapsed) && ipGeoSource === 0" class="jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-speedometer"></i>
+                  {{ t('ipInfos.qualityScore') }} :&nbsp;
+                </span>
+
+                <span v-if="card.qualityScore !== 'unknown'" class="col-3 jn-risk-score ">
+                  <span class="progress border" :class="[isDarkMode ? 'border-light bg-dark' : 'border-dark']"
+                    role="progressbar" aria-label="Quality Score" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                    <span class="progress-bar" :class="[isDarkMode ? 'bg-light' : 'bg-dark']"
+                      :style='"width:" + card.qualityScore +"%"'></span>
+                  </span>
+                </span>
+
+                <span class="ps-2">
+                  <span v-if="card.qualityScore === 'unknown'">
+                    {{ t('ipInfos.qualityScoreUnknown') }}
+                  </span>
+                  <span v-else>{{ card.qualityScore }}%</span>
+                </span>
+
+              </li>
+
               <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item border-0"
                 :class="{ 'dark-mode': isDarkMode }">
                 <span class="jn-text col-auto">

diff --git a/frontend/components/widgets/QueryIP.vue b/frontend/components/widgets/QueryIP.vue
@@ -1,8 +1,7 @@
 <template>
     <!-- Search BTN -->
-    <button class="btn btn-primary queryip"
-        data-bs-toggle="modal" aria-label="IP Check" data-bs-target="#IPCheck" @click="openQueryIP"
-        v-tooltip="t('Tooltips.QueryIP')"><i class="bi bi-search"></i></button>
+    <button class="btn btn-primary queryip" data-bs-toggle="modal" aria-label="IP Check" data-bs-target="#IPCheck"
+        @click="openQueryIP" v-tooltip="t('Tooltips.QueryIP')"><i class="bi bi-search"></i></button>
 
     <!-- Search Modal -->
     <div class="modal fade" id="IPCheck" tabindex="-1" aria-labelledby="IPCheck" aria-hidden="true">
@@ -82,6 +81,32 @@
                                     </span>
                                 </li>
 
+                                <li v-if="ipGeoSource === 0" class="jn-list-group-item"
+                                    :class="{ 'dark-mode': isDarkMode }">
+                                    <span class="jn-text col-auto">
+                                        <i class="bi bi-speedometer"></i>
+                                        {{ t('ipInfos.qualityScore') }} :&nbsp;
+                                    </span>
+
+                                    <span v-if="modalQueryResult.qualityScore !== 'unknown'"
+                                        class="col-3 jn-risk-score ">
+                                        <span class="progress border"
+                                            :class="[isDarkMode ? 'border-light bg-dark' : 'border-dark']"
+                                            role="progressbar" aria-label="Quality Score" aria-valuenow="0"
+                                            aria-valuemin="0" aria-valuemax="100">
+                                            <span class="progress-bar" :class="[isDarkMode ? 'bg-light' : 'bg-dark']"
+                                                :style='"width:" + modalQueryResult.qualityScore +"%"'></span>
+                                        </span>
+                                    </span>
+
+                                    <span class="ps-2">
+                                        <span v-if="modalQueryResult.qualityScore === 'unknown'">
+                                            {{ t('ipInfos.qualityScoreUnknown') }}
+                                        </span>
+                                        <span v-else>{{ modalQueryResult.qualityScore }}%</span>
+                                    </span>
+
+                                </li>
 
                                 <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
                                     <span class="jn-text col-auto">
@@ -122,7 +147,7 @@ import { transformDataFromIPapi } from '@/utils/transform-ip-data.js';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
 
-const {t} = useI18n();
+const { t } = useI18n();
 
 // 引入 Store
 const store = useMainStore();
@@ -204,7 +229,7 @@ const fetchIPForModal = async (ip, sourceID = null) => {
             if (data.error) {
                 throw new Error(data.reason || "IP lookup failed");
             }
-            modalQueryResult.value = transformDataFromIPapi(data, source.id, t,lang.value);
+            modalQueryResult.value = transformDataFromIPapi(data, source.id, t, lang.value);
             isChecking.value = "idle";
             break;
         } catch (error) {

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -295,6 +295,8 @@
     "SelectSource": "Select IP Geolocation Source",
     "type": "Type",
     "isProxy": "Proxy",
+    "qualityScore": "IP Quality",
+    "qualityScoreUnknown": "Score Unknown",
     "ASNInfo": {
       "note": "Related data for this AS:",
       "asnName": "AS Name:",

diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
@@ -295,6 +295,8 @@
         "SelectSource": "Source de géolocalisation IP",
         "type": "Type",
         "isProxy": "Proxy",
+        "qualityScore": "Qualité IP",
+        "qualityScoreUnknown": "Score inconnu",
         "ASNInfo": {
             "note": "Données associées à cet AS :",
             "asnName": "Nom de l'AS :",

diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
@@ -295,6 +295,8 @@
     "SelectSource": "选择 IP 归属地数据来源",
     "type": "类型",
     "isProxy": "代理",
+    "qualityScore": "IP 质量分",
+    "qualityScoreUnknown": "未知分数",
     "ASNInfo": {
       "note": "此 AS 的相关数据：",
       "asnName": "AS 名称：",

diff --git a/frontend/style/style.css b/frontend/style/style.css
@@ -43,7 +43,7 @@
 }
 
 .jn-ip-card1 {
-  min-height: 488px;
+  min-height: 538px;
 }
 
 .jn-ip-card2 {
@@ -268,6 +268,12 @@ footer {
   zoom: 0.8;
 }
 
+.jn-risk-score {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
 .jn-speedtest-note {
   background-color: #b2d6c33b;
   border: 1px solid #1a8754;

diff --git a/frontend/utils/masked-info.js b/frontend/utils/masked-info.js
@@ -19,6 +19,7 @@ function maskedInfo(t) {
     fakecard.showASNInfo = false;
     fakecard.isProxy = t('ipInfos.proxyDetect.no');
     fakecard.type = t('ipInfos.proxyDetect.type.Business');
+    fakecard.qualityScore = 100;
     fakecard.proxyProtocol = t('ipInfos.proxyDetect.unknownProtocol');
     fakecard.proxyOperator = "unknown";
 

diff --git a/frontend/utils/transform-ip-data.js b/frontend/utils/transform-ip-data.js
@@ -33,10 +33,11 @@ function transformDataFromIPapi(data, ipGeoSource, t, mapLanguage) {
 function extractProxyDetails(proxyDetect = {}, t) {
     const isProxy = determineIsProxy(proxyDetect, t);
     const type = determineType(proxyDetect, t);
+    const qualityScore = proxyDetect.risk === 'unknown' ? 'unknown' : (100 - proxyDetect.risk);
     const proxyProtocol = determineProtocol(proxyDetect, t);
     const proxyOperator = proxyDetect.operator || "";
 
-    return { isProxy, type, proxyProtocol, proxyOperator };
+    return { isProxy, type, qualityScore, proxyProtocol, proxyOperator };
 }
 
 // 判断是否代理