Merge pull request #273 from jason5ng32/dev

Improvements
jason5ng32 · Jan 12, 2025 · c62436d · c62436d
2 parents 4f8b828 + c292df4
commit c62436d
Show file tree

Hide file tree

Showing 6 changed files with 1,448 additions and 25 deletions.
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -40,6 +40,11 @@ jobs:
         printf "RELEASE_VERSION=%s\n" "${{ github.event.release.tag_name }}" >> $GITHUB_ENV
         printf "RELEASE_NOTES<<EOF\n%s\nEOF\n" "${{ github.event.release.body }}" >> $GITHUB_ENV
 
+    - name: Clean RELEASE_NOTES
+      run: |
+        export CLEAN_RELEASE_NOTES=$(echo "${{ env.RELEASE_NOTES }}" | sed '/^\s*$/d')
+        echo "RELEASE_NOTES=${CLEAN_RELEASE_NOTES}" >> $GITHUB_ENV
+
     - name: Set version for manual dispatch
       if: github.event_name == 'workflow_dispatch'
       run: |

diff --git a/frontend/components/SpeedTest.vue b/frontend/components/SpeedTest.vue
@@ -44,6 +44,25 @@
               </div>
             </div>
 
+            <Transition name="slide-fade">
+              <div class="d-flex align-items-center align-content-center justify-content-end pb-2"
+                :data-bs-theme="isDarkMode ? 'dark' : ''" v-if="speedTestStatus !== 'idle' && connectionData.colo">
+                <div>
+                  <i class="bi bi-person-arms-up"></i>
+                  {{connectionData.country}}
+                  <span v-if="connectionData.country" :class="'jn-fl fi fi-' + connectionData.loc.toLowerCase()"></span>
+                </div>
+                <div class=" mx-2">
+                  <i class="bi bi-arrow-left-right"></i>
+                </div>
+                <div>
+                  <i class="bi bi-globe"></i>
+                  {{connectionData.colo}},&nbsp;
+                  {{connectionData.coloCountry}} <span v-if="connectionData.coloCountry"
+                    :class="'jn-fl fi fi-' + connectionData.coloCountryCode.toLowerCase()"></span>
+                </div>
+              </div>
+            </Transition>
             <div class="progress" style="height: 20px; margin: 4pt 0 20pt 0;"
               :class="{ 'jn-opacity-0': speedTestStatus == 'idle', 'jn-progress-dark': isDarkMode }">
               <div class="progress-bar progress-bar-striped jn-progress"
@@ -84,7 +103,17 @@
             </div>
             <div class="row alert alert-success m-1 p-2 " :data-bs-theme="isDarkMode ? 'dark' : ''"
               v-if="speedTestStatus === 'finished' && hasScores">
-              <p id="score" class="speedtest-p"><i class="bi bi-calendar2-check"></i> {{ t('speedtest.score') }}
+              <p id="score" class="speedtest-p"><i class="bi bi-calendar2-check"></i>&nbsp;
+                <span v-if="connectionData.colo">
+                  {{ t('speedtest.connectionFrom') }}
+                  {{ connectionData.ip }} ( {{ connectionData.country }} )
+                  {{ t('speedtest.connectionTo') }}
+                  {{ connectionData.colo }}
+                  ( {{ connectionData.coloCity }}
+                  , {{ connectionData.coloCountry }} )
+                  {{ t('speedtest.connectionEnd') }}
+                </span>
+                {{ t('speedtest.score') }}
                 {{ t('speedtest.videoStreaming') }}
                 <span :class="speedTest.streamingScore >= 50 ? 'text-success' : 'jn-text-warning'">
                   {{ speedTest.streamingScore }}
@@ -113,6 +142,9 @@ import { ref, computed, onMounted, reactive, markRaw } from 'vue';
 import { useMainStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
+import { isValidIP } from '@/utils/valid-ip.js';
+import getCountryName from '@/utils/country-name.js';
+import getColoCountry from '@/utils/speedtest-colos.js';
 // 引入 SpeedTest
 import SpeedTestEngine from '@cloudflare/speedtest';
 
@@ -121,6 +153,7 @@ const { t } = useI18n();
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
 const isMobile = computed(() => store.isMobile);
+const lang = computed(() => store.lang);
 
 const speedTest = reactive({
   id: "speedTest",
@@ -147,6 +180,40 @@ const packageSize = reactive({
   }
 });
 
+const connectionData = ref({
+  ip: "",
+  colo: "",
+  loc: "",
+  country: "",
+  coloCountry: "",
+  coloCountryCode: "",
+  coloCity: ""
+});
+
+const getIPFromSpeedTest = async () => {
+  try {
+    const response = await fetch("https://speed.cloudflare.com/cdn-cgi/trace");
+    const data = await response.text();
+    const lines = data.split("\n");
+
+    const ip = lines.find((line) => line.startsWith("ip="))?.split("=")[1];
+    const colo = lines.find((line) => line.startsWith("colo="))?.split("=")[1];
+    const loc = lines.find((line) => line.startsWith("loc="))?.split("=")[1];
+
+    if (isValidIP(ip)) {
+      const country = getCountryName(loc, lang.value) || '';
+      const coloCountryCode = getColoCountry(colo).country || '';
+      const coloCity = getColoCountry(colo).city || '';
+      const coloCountry = getCountryName(coloCountryCode, lang.value) || '';
+      return { ip, colo, loc, country, coloCountry, coloCountryCode, coloCity };
+    } else {
+      console.error("Invalid IP from SpeedTest Server:", ip);
+    }
+  } catch (error) {
+    console.error("Error fetching IP from SpeedTest Server:", error);
+  }
+};
+
 // 定义 Speed Test 引擎
 let testEngine;
 
@@ -166,12 +233,15 @@ const resetSpeedTest = () => {
 };
 
 // Speed Test 引擎
-const speedTestController = () => {
+const speedTestController = async () => {
   if (speedTestStatus.value === 'running') {
     testEngine.pause();
     speedTestStatus.value = "paused";
   } else {
     startSpeedTest();
+    if (!connectionData.value.ip) {
+      connectionData.value = await getIPFromSpeedTest();
+    }
   }
 };
 
@@ -365,8 +435,23 @@ defineExpose({
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
 }
+
 .jn-text-warning {
   --bs-text-opacity: 1;
   color: #c67c14;
 }
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
 </style>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -57,12 +57,12 @@
     "Optional": "Optional",
     "Essential": "Essential",
     "Advanced": "Advanced",
-    "Reset":"Reset Checklist",
-    "ShowAll":"Show All",
-    "ShowUnchecked":"Show Unchecked",
-    "ShowIgnored":"Show Ignored",
-    "ShowChecked":"Show Checked",
-    "Loading":"Loading..."
+    "Reset": "Reset Checklist",
+    "ShowAll": "Show All",
+    "ShowUnchecked": "Show Unchecked",
+    "ShowIgnored": "Show Ignored",
+    "ShowChecked": "Show Checked",
+    "Loading": "Loading..."
   },
   "shell": {
     "Title": "Command Line API",
@@ -407,7 +407,10 @@
     "gaming": ", Gaming: ",
     "rtc": ", Video Chatting: ",
     "score": "Based on the speed test, got the following quality scores:",
-    "resultNote": ". The score is for reference only."
+    "resultNote": ". The score is for reference only.",
+    "connectionFrom": "Finished speed test from your IP: ",
+    "connectionTo": " to test server:",
+    "connectionEnd": " ."
   },
   "pingtest": {
     "id": "pingtest",

diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
@@ -407,7 +407,10 @@
         "gaming": ", Jeu : ",
         "rtc": ", Chat vidéo : ",
         "score": "Sur la base du test de vitesse, voici les scores de qualité suivants :",
-        "resultNote": ". Le score est donné à titre indicatif seulement."
+        "resultNote": ". Le score est donné à titre indicatif seulement.",
+        "connectionFrom": "Test de vitesse terminé depuis votre IP: ",
+        "connectionTo": " vers le serveur de test:",
+        "connectionEnd": " ."
     },
     "pingtest": {
         "id": "pingtest",

diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
@@ -46,23 +46,23 @@
     "Items": "个项目",
     "Priority": "级别",
     "Ignore": "忽略",
-    "alert-total":"安全检查一共有",
-    "alert-checked":"你已经完成了",
-    "alert-ignored":"被忽略",
-    "alert-unchecked":"个未进行检查。",
+    "alert-total": "安全检查一共有",
+    "alert-checked": "你已经完成了",
+    "alert-ignored": "被忽略",
+    "alert-unchecked": "个未进行检查。",
     "Checked": "已检查",
     "Ignored": "已忽略",
     "Unchecked": "未检查",
-    "Basic":"基础",
-    "Optional":"可选",
-    "Essential":"必要",
-    "Advanced":"高级",
-    "Reset":"重置",
-    "ShowAll":"显示所有",
-    "ShowUnchecked":"显示未检查",
-    "ShowIgnored":"显示已忽略",
-    "ShowChecked":"显示已检查",
-    "Loading":"加载中..."
+    "Basic": "基础",
+    "Optional": "可选",
+    "Essential": "必要",
+    "Advanced": "高级",
+    "Reset": "重置",
+    "ShowAll": "显示所有",
+    "ShowUnchecked": "显示未检查",
+    "ShowIgnored": "显示已忽略",
+    "ShowChecked": "显示已检查",
+    "Loading": "加载中..."
   },
   "shell": {
     "Title": "命令行 API",
@@ -407,7 +407,10 @@
     "gaming": " 分，在线游戏：",
     "rtc": " 分，视频会议：",
     "score": "根据网速测试，得出以下质量分数：",
-    "resultNote": " 分。分数仅供参考。"
+    "resultNote": " 分。分数仅供参考。",
+    "connectionFrom": "已完成从你的 IP：",
+    "connectionTo": "与测速服务器：",
+    "connectionEnd": " 的测试。"
   },
   "pingtest": {
     "id": "pingtest",