Merge pull request #249 from jason5ng32/dev

Improvements

.env.example

@@ -15,4 +15,8 @@ SECURITY_BLACKLIST_LOG_FILE_PATH=""
 SECURITY_RATE_LIMIT=""
 SECURITY_DELAY_AFTER=""
 # Google Analytics
-VITE_GOOGLE_ANALYTICS_ID=""
+VITE_GOOGLE_ANALYTICS_ID=""
+# CURL API
+VITE_CURL_IPV4_DOMAIN=""
+VITE_CURL_IPV6_DOMAIN=""
+VITE_CURL_IPV64_DOMAIN=""

README.md

@@ -105,6 +105,11 @@ You can use the program without adding any environment variables, but if you wan
 | `CLOUDFLARE_API` | No | `""` | API Key for Cloudflare, used to obtain AS system information through Cloudflare |
 | `MAC_LOOKUP_API_KEY` | No | `""` | API Key for MAC Lookup, used to obtain MAC address information |
 | `VITE_GOOGLE_ANALYTICS_ID` | **Yes** | `""` | Google Analytics ID, used to track user behavior |
+| `VITE_CURL_IPV4_DOMAIN` | No | `""` | Provides the IPv4 domain for the CURL API to users |
+| `VITE_CURL_IPV6_DOMAIN` | No | `""` | Provides the IPv6 domain for the CURL API to users |
+| `VITE_CURL_IPV64_DOMAIN` | No | `""` | Provides the dual-stack domain for the CURL API to users |
+
+Note that if any of the CURL series environment variables are missing, the CURL API will not be enabled.
 
 ### Using Environment Variables in a Node Environment
 

README_FR.md

@@ -105,6 +105,11 @@ Vous pouvez utiliser le programme sans ajouter de variables d'environnement, mai
 | `CLOUDFLARE_API` | Non | `""` | Clé API pour Cloudflare, utilisée pour obtenir des informations sur le système AS via Cloudflare |
 | `MAC_LOOKUP_API_KEY` | Non | `""` | Clé API pour MAC Lookup, utilisée pour obtenir des informations sur l'adresse MAC via MAC Lookup |
 | `VITE_GOOGLE_ANALYTICS_ID` | **Oui** | `""` | Identifiant Google Analytics, utilisé pour l'analyse des utilisateurs |
+| `VITE_CURL_IPV4_DOMAIN` | Non | `""` | Fournit aux utilisateurs le domaine IPv4 pour l'API CURL |
+| `VITE_CURL_IPV6_DOMAIN` | Non | `""` | Fournit aux utilisateurs le domaine IPv6 pour l'API CURL |
+| `VITE_CURL_IPV64_DOMAIN` | Non | `""` | Fournit aux utilisateurs le domaine à pile double pour l'API CURL |
+
+Il est à noter que si l'une quelconque des variables d'environnement de la série CURL est manquante, l'API CURL ne sera pas activée.
 
 ### Utilisation des variables d'environnement dans un environnement Node
 

README_ZH.md

@@ -105,6 +105,11 @@ docker run -d -p 18966:18966 --name myip --restart always jason5ng32/myip:latest
 | `CLOUDFLARE_API` | 否 | `""` | Cloudflare 的 API Key，用于通过 Cloudflare 获取 AS 系统的信息 |
 | `MAC_LOOKUP_API_KEY` | 否 | `""` | MAC 查询的 API Key，用于通过 MAC Lookup 获取 MAC 地址的归属信息 |
 | `VITE_GOOGLE_ANALYTICS_ID` | **是** | `""` | Google Analytics 的 ID，用于统计访问量 |
+| `VITE_CURL_IPV4_DOMAIN` | 否 | `""` | 为用户提供 CURL API 的 IPv4 域名 |
+| `VITE_CURL_IPV6_DOMAIN` | 否 | `""` | 为用户提供 CURL API 的 IPv6 域名 |
+| `VITE_CURL_IPV64_DOMAIN` | 否 | `""` | 为用户提供 CURL API 的双网络栈域名 |
+
+需要注意的是，如果 CURL 系列的环境变量任意一个缺失，都不会启用 CURL API。
 
 ### 在 Node 环境里使用环境变量
 

frontend/App.vue

@@ -15,8 +15,8 @@
   </div>
   <InfoMask :showMaskButton.value="showMaskButton" :infoMaskLevel.value="infoMaskLevel"
     :toggleInfoMask="toggleInfoMask" />
+  <Shell v-if="curlDomainsHadSet" ref="shellRef" />
   <QueryIP ref="queryIPRef" />
-  <Shell ref="shellRef" />
   <HelpModal ref="helpModalRef" />
   <Footer ref="footerRef" />
   <PWA />
@@ -65,6 +65,7 @@ const userPreferences = computed(() => store.userPreferences);
 const shouldRefreshEveryThing = computed(() => store.shouldRefreshEveryThing);
 const Status = computed(() => store.mountingStatus);
 const openedCard = computed(() => store.currentPath.id);
+const curlDomainsHadSet = computed(() => store.curlDomainsHadSet);
 
 // Template 里的 Ref
 const navBarRef = ref(null);
@@ -490,14 +491,6 @@ const ShortcutKeys = (isOriginalSite) => {
       },
       description: t('shortcutKeys.About'),
     },
-    {
-      keys: "x",
-      action: () => {
-        shellRef.value.openModal();
-        trackEvent('ShortCut', 'ShortCut', 'Shell');
-      },
-      description: t('shortcutKeys.Shell'),
-    },
     // help
     {
       keys: "?",
@@ -521,10 +514,25 @@ const ShortcutKeys = (isOriginalSite) => {
     },
   ];
 
+  const curlAPI = [
+    {
+      keys: "x",
+      action: () => {
+        shellRef.value.openModal();
+        trackEvent('ShortCut', 'ShortCut', 'Shell');
+      },
+      description: t('shortcutKeys.Shell'),
+    },
+  ]
+
   if (isOriginalSite) {
     shortcutConfig.push(...invisibilitytest);
   }
 
+  if (curlDomainsHadSet.value) {
+    shortcutConfig.push(...curlAPI);
+  }
+
   return shortcutConfig;
 };
 

frontend/components/Footer.vue

@@ -1,9 +1,9 @@
 <template>
   <footer>
     <div id="copyleft">
-      <p class="text-center">{{ t('page.footerName') }} <a :href="t('page.footerLink')" class="link-dark"
-          target="_blank" @click="trackEvent('Footer', 'FooterClick', 'Github');" aria-label="Github"><i
-            class="bi bi-github" :class="{ 'dark-mode': isDarkMode }"
+      <p class="text-center"><span>Created by Jason Ng with love</span> <a :href="t('page.footerLink')"
+          class="link-dark" target="_blank" @click="trackEvent('Footer', 'FooterClick', 'Github');"
+          aria-label="Github"><i class="bi bi-github" :class="{ 'dark-mode': isDarkMode }"
             v-tooltip="{ title: t('Tooltips.GithubLink'), placement: 'top' }"></i></a>
       </p>
     </div>
@@ -20,7 +20,7 @@
       id="About" aria-labelledby="AboutLabel" :data-bs-theme="isDarkMode ? 'dark' : 'light'">
       <div class="offcanvas-header mt-3">
         <div class="btn-group" role="group">
-          <template v-for="show in ['about', 'changelog']">
+          <template v-for="show in ['about', 'changelog', 'specialthanks']">
             <input v-model="content" type="radio" class="btn-check" :name="'About_' + show" :id="'About_' + show"
               autocomplete="off" :value=show @change="toggleContent(show)">
             <label class="btn jn-number" :class="{
@@ -101,6 +101,21 @@
             </div>
           </div>
         </div>
+        <div v-if="showSpecialThanks">
+          <div class="mb-3">
+            <p>
+              {{ t('specialthanks.Note1') }}
+            </p>
+          </div>
+
+          <div v-for="(item, index) in thanksList" :key="index" class="mb-3 fst-italic">
+            <i class="bi bi-emoji-smile-fill "></i> {{ item.name }}
+            <a v-if="item.link" :class="[isDarkMode ? 'link-light' : 'link-dark']" :href="item.link" target="_blank">
+              <i class="bi bi-arrow-up-right-square"></i>
+            </a>
+          </div>
+
+        </div>
 
         <div id="offcanvasPlaceholder mb-5" class="jn-placeholder mb-5">
         </div>
@@ -124,7 +139,7 @@ import { Offcanvas } from 'bootstrap';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
 
-const {t,tm} = useI18n();
+const { t, tm } = useI18n();
 
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
@@ -134,8 +149,40 @@ const configs = computed(() => store.configs);
 const content = ref('about');
 const showAbout = ref(true);
 const showChangelog = ref(false);
+const showSpecialThanks = ref(false);
 const changelog = reactive(tm('changelog.versions'));
 
+const thanksList = [
+  {
+    name: 'Setilis Hu',
+    link: ''
+  },
+  {
+    name: 'Seven Yu',
+    link: 'https://github.com/dofy'
+  },
+  {
+    name: 'Nikolai Tschacher',
+    link: 'https://incolumitas.com/pages/about/'
+  },
+  {
+    name: 'Project Alexandria (Cloudflare)',
+    link: 'https://www.cloudflare.com/lp/project-alexandria/'
+  },
+  {
+    name: 'Cloudflare Speedtest',
+    link: 'https://github.com/cloudflare/speedtest'
+  },
+  {
+    name: 'Globalping by jsDelivr',
+    link: 'https://globalping.io/'
+  },
+  {
+    name: 'ChatGPT',
+    link: 'https://chatgpt.com/'
+  }
+]
+
 const openAbout = () => {
   var offcanvasElement = document.getElementById('About');
   var offcanvas = Offcanvas.getInstance(offcanvasElement) || new Offcanvas(offcanvasElement);
@@ -154,6 +201,7 @@ const offcanvasBody = ref(null);
 const toggleContent = (contentType) => {
   showAbout.value = contentType === 'about';
   showChangelog.value = contentType === 'changelog';
+  showSpecialThanks.value = contentType === 'specialthanks';
   content.value = contentType;
   offcanvasBody.scrollTop = 0;
 };
@@ -171,4 +219,8 @@ defineExpose({
 .jn-placeholder {
   height: 20pt;
 }
+
+.jn-heart-color {
+  color: red;
+}
 </style>

frontend/components/advanced-tools/BrowserInfo.vue

@@ -13,11 +13,7 @@
                         <Transition name="slide-fade" mode="out-in">
                             <div id="browserInfoResult" class="row" v-if="checkingStatus === 'finished'">
                                 <div class="col-lg-8 col-md-8 col-12 mb-4">
-                                    <div class="h-100" :class="{ 
-                                    'dark-mode dark-mode-border': isDarkMode,
-                                    'card': !isMobile
-                                    }">
-
+                                    <div class="h-100">
                                         <div class="card-body row"
                                             :class="[isMobile ? 'p-1 border-1 border-bottom' : '']">
                                             <h3 class="mb-4">{{ t('browserinfo.browser.Infos') }} <i

frontend/components/widgets/InfoMask.vue

@@ -1,17 +1,25 @@
 <template>
-    <button v-show="showMaskButton" class="btn infomask"
-        :class="infoMaskLevel === 0 ? 'btn-success' : infoMaskLevel === 1 ? 'btn-warning' : 'btn-secondary'"
-        @click="toggleInfoMask" aria-label="Toggle Info Mask"
-        v-tooltip="t('Tooltips.InfoMask')">
+    <button v-show="showMaskButton" class="btn infomask" :class="{
+        'btn-success': infoMaskLevel === 0,
+        'btn-warning': infoMaskLevel === 1,
+        'btn-secondary': infoMaskLevel === 2,
+        'infomask-no-curl': !curlDomainsHadSet || isMobile
+    }" @click="toggleInfoMask" aria-label="Toggle Info Mask" v-tooltip="t('Tooltips.InfoMask')">
         <i :class="infoMaskLevel === 0 ? 'bi bi-eye' : 'bi bi-eye-slash'"></i>
     </button>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useMainStore } from '@/store';
 
-const {t} = useI18n();
+const { t } = useI18n();
+
+const store = useMainStore();
+const isDarkMode = computed(() => store.isDarkMode);
+const isMobile = computed(() => store.isMobile);
+const curlDomainsHadSet = computed(() => store.curlDomainsHadSet);
 
 const { showMaskButton, infoMaskLevel, toggleInfoMask } = defineProps({
     showMaskButton: Boolean,
@@ -43,8 +51,12 @@ onMounted(() => {
 <style scoped>
 .infomask {
     position: fixed;
-    bottom: 66px; 
-    right: 20px; 
+    bottom: 112px;
+    right: 20px;
     z-index: 1050;
 }
+
+.infomask-no-curl {
+    bottom: 66px;
+}
 </style>

frontend/components/widgets/PWA.vue

@@ -34,6 +34,12 @@ const getBrowser = () => {
     isOtherBrowser.value = !(androidChrome || desktopChrome || macSafari || iosSafari);
 }
 
+const popupCount = () => {
+    let currentCount = localStorage.getItem('pwaPopupCount') || 0;
+    currentCount = parseInt(currentCount, 10);
+    return currentCount;
+}
+
 const showPWA = () => {
     const pwaInstall = document.getElementsByTagName('pwa-install')[0];
     if (!pwaInstall) return;
@@ -43,6 +49,8 @@ const showPWA = () => {
 
     if (!pwaInstall.isUnderStandaloneMode && pwaInstall.isInstallAvailable) {
         pwaInstall.showDialog(true);
+        const totalPopupCount = popupCount() + 1;
+        localStorage.setItem('pwaPopupCount', totalPopupCount);
         trackEvent('PWA', 'PWAPopup', 'Show');
         pwaInstall.addEventListener('pwa-install-success-event', event => {
             if (event.detail.message.includes('success')) {
@@ -54,9 +62,11 @@ const showPWA = () => {
 
 onMounted(() => {
     getBrowser();
-    setTimeout(() => {
-        showPWA();
-    }, 30000);
+    if (popupCount() < 2) {
+        setTimeout(() => {
+            showPWA();
+        }, 30000);
+    }
 });
 </script>