From 84b8cc2dadd08e094bfaeb51427651176c70c0b8 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Wed, 30 Oct 2024 13:47:43 +0800
Subject: [PATCH] Improvements

---
 frontend/App.vue                         | 26 ++++++----
 frontend/components/widgets/InfoMask.vue | 28 ++++++++---
 frontend/components/widgets/Shell.vue    | 62 +++++++++++++++++++-----
 frontend/locales/en.json                 | 14 +++---
 frontend/locales/fr.json                 | 10 ++--
 frontend/locales/zh.json                 | 10 ++--
 frontend/store.js                        |  8 +++
 7 files changed, 115 insertions(+), 43 deletions(-)

diff --git a/frontend/App.vue b/frontend/App.vue
index bd540450..e5a6512a 100644
--- a/frontend/App.vue
+++ b/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;
 };
 
diff --git a/frontend/components/widgets/InfoMask.vue b/frontend/components/widgets/InfoMask.vue
index 652a8bdf..3fa7ee60 100644
--- a/frontend/components/widgets/InfoMask.vue
+++ b/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
+    }" @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>
\ No newline at end of file
diff --git a/frontend/components/widgets/Shell.vue b/frontend/components/widgets/Shell.vue
index 49241840..56523d4f 100644
--- a/frontend/components/widgets/Shell.vue
+++ b/frontend/components/widgets/Shell.vue
@@ -1,4 +1,8 @@
 <template>
+    <!-- Shell BTN -->
+    <button v-if="!isMobile && curlDomainsHadSet" class="btn btn-dark jn-shell-button" data-bs-toggle="modal"
+        aria-label="Shell" data-bs-target="#Shell" @click="openModal" v-tooltip="t('Tooltips.Shell')"><i
+            class="bi bi-terminal"></i></button>
     <!-- Shell Modal -->
     <div class="modal fade" id="Shell" tabindex="-1" aria-labelledby="Shell" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
@@ -9,20 +13,25 @@
                         data-bs-dismiss="modal" aria-label="Close"></button>
 
                 </div>
-                <div class="modal-body m-2" :class="{ 'dark-mode': isDarkMode }">
+                <div v-if="curlDomainsHadSet" class="modal-body m-2" :class="{ 'dark-mode': isDarkMode }">
                     <code class="row flex justify-content-center">
                                 <span class="jn-comment"><span class="text-secondary">{{t('shell.Note1')}}</span></span>
                                 <span class="jn-comment"><span class="text-secondary">{{t('shell.Note2_1')}} <span class="text-success">curl</span> {{t('shell.Note2_2')}}</span></span>
                                 <span class="text-secondary jn-comment"><span class="text-success">geo</span> {{t('shell.Note3')}}</span>
                                 <span>&nbsp;</span>
                                 <span class="jn-comment"><span class="text-secondary">{{t('shell.getIPv4')}}</span></span>
-                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">4.ipcheck.ing<span class="text-success">/geo</span></span></span>
+                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">{{ipv4Domain}}<span class="text-success">/geo</span></span></span>
                                 <span class="jn-comment"><span class="text-secondary">{{t('shell.getIPv6')}}</span></span>
-                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">6.ipcheck.ing<span class="text-success">/geo</span></span></span>
+                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">{{ipv6Domain}}<span class="text-success">/geo</span></span></span>
                                 <span class="jn-comment"><span class="text-secondary">{{t('shell.get6and4')}}</span></span>
-                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">64.ipcheck.ing<span class="text-success">/geo</span></span></span>
+                                <span class="jn-shell bg-black p-3 m-2 rounded-3">curl <span class="text-light">{{ipv64Domain}}<span class="text-success">/geo</span></span></span>
                             </code>
                 </div>
+                <div v-else class="modal-body m-2" :class="{ 'dark-mode': isDarkMode }">
+                    <code class="row flex justify-content-center">
+                        <span class="jn-comment"><span class="text-secondary">{{t('shell.notAvailable')}}</span></span>
+                        </code>
+                </div>
                 <div class="modal-footer" :class="{ 'dark-mode-border': isDarkMode }">
                 </div>
 
@@ -33,7 +42,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useMainStore } from '@/store';
 import { Modal } from 'bootstrap';
 import { useI18n } from 'vue-i18n';
@@ -43,6 +52,14 @@ const { t } = useI18n();
 // 引入 Store
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
+const isMobile = computed(() => store.isMobile);
+
+// 获取 CURL 请求域名
+const ipv4Domain = computed(() => store.shell.ipv4Domain);
+const ipv6Domain = computed(() => store.shell.ipv6Domain);
+const ipv64Domain = computed(() => store.shell.ipv64Domain);
+
+const curlDomainsHadSet = computed(() => store.curlDomainsHadSet);
 
 // 打开 Modal
 const openModal = () => {
@@ -53,6 +70,27 @@ const openModal = () => {
     }
 };
 
+const adjustButtonPosition = () => {
+    const screenWidth = window.innerWidth;
+    const contentWidth = 1600; // 主内容区域的宽度
+    const spaceOnRight = (screenWidth - contentWidth) / 2;
+
+    const button = document.querySelector('.jn-shell-button');
+    if (screenWidth > 1600) { // 只在屏幕宽度大于1600px时调整
+        button.style.right = `${spaceOnRight + 20}px`; // 保持20px的距离
+    } else {
+        button.style.right = '20px'; // 在小屏幕上使用默认位置
+    }
+}
+
+onMounted(() => {
+    if (!isMobile.value && curlDomainsHadSet.value) {
+        window.addEventListener('resize', adjustButtonPosition);
+        adjustButtonPosition();
+    }
+
+});
+
 defineExpose({
     openModal,
 });
@@ -61,13 +99,6 @@ defineExpose({
 
 
 <style scoped>
-.jn-curl-button {
-    position: fixed;
-    bottom: 66px;
-    right: 20px;
-    z-index: 1050;
-}
-
 .jn-shell::before {
     content: '$ ';
     color: #6c757d;
@@ -86,4 +117,11 @@ defineExpose({
     font-weight: 500;
     margin-left: -20pt;
 }
+
+.jn-shell-button {
+    position: fixed;
+    bottom: 66px;
+    right: 20px;
+    z-index: 1050;
+}
 </style>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 528c2cf8..e03129b0 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -37,13 +37,14 @@
   },
   "shell": {
     "Title": "Command Line API",
-    "Note1": "Hey, you've found this hidden interface",
-    "Note2_1": "You can, in the terminal, via",
-    "Note2_2": "command, get the IP address of this machine",
+    "Note1": "Hey, turns out you also like using the terminal?",
+    "Note2_1": "You can use",
+    "Note2_2": "command, get the IP address of your machine in terminal",
     "Note3": "is an optional path, adding it will obtain the geographical information of the IP",
     "getIPv4": "Get local machine's IPv4 address",
     "getIPv6": "Get local machine's IPv6 address",
-    "get6and4": "Get the preferred network exit IP address of the local machine"
+    "get6and4": "Get the preferred network exit IP address of the local machine",
+    "notAvailable": "This feature is not available yet"
   },
   "browserinfo": {
     "Title": "Browser Information",
@@ -269,7 +270,8 @@
     "InfoMask": "Hide IP Information",
     "QueryIP": "Query IP Address",
     "GithubLink": "View Source Code on GitHub",
-    "RefreshRuleTests": "Refresh Rule Tests"
+    "RefreshRuleTests": "Refresh Rule Tests",
+    "Shell": "Command Line API"
   },
   "ipInfos": {
     "id": "ipinfos",
@@ -456,7 +458,7 @@
     "MacChecker": "Open MAC lookup panel",
     "BrowserInfo": "Open Browser Info panel",
     "fullScreenAdvancedTools": "Full Screen Advanced Tools",
-    "Shell": "Mystery feature"
+    "Shell": "Command Line API"
   },
   "page": {
     "title": "IPCheck.ing - Check My IP Address and Geolocation - Check WebRTC Connection IP - DNS Leak Test - Speed Test - Jason Ng Open Source",
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index 3aeaa42b..aad4e814 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -37,13 +37,14 @@
     },
     "shell": {
         "Title": "API de ligne de commande",
-        "Note1": "Hé, tu as trouvé cette interface cachée",
+        "Note1": "Eh bien, il s'avère que toi aussi tu aimes utiliser le terminal ?",
         "Note2_1": "Tu peux, dans le terminal, via",
         "Note2_2": "commande, obtenir l'adresse IP de cette machine",
         "Note3": "est un chemin optionnel, son ajout permettra d'obtenir les informations géographiques de l'IP",
         "getIPv4": "Obtenir l'adresse IPv4 de la machine locale",
         "getIPv6": "Obtenir l'adresse IPv6 de la machine locale",
-        "get6and4": "Obtenir l'adresse IP de sortie de réseau préférée de la machine locale"
+        "get6and4": "Obtenir l'adresse IP de sortie de réseau préférée de la machine locale",
+        "notAvailable": "Cette fonctionnalité n'est pas encore disponible"
     },
     "browserinfo": {
         "Title": "Informations du Navigateur",
@@ -269,7 +270,8 @@
         "InfoMask": "Masquer les informations IP",
         "QueryIP": "Interroger l'adresse IP",
         "GithubLink": "Voir le code source sur GitHub",
-        "RefreshRuleTests": "Actualiser les tests de règles"
+        "RefreshRuleTests": "Actualiser les tests de règles",
+        "Shell": "Ouvrir le shell"
     },
     "ipInfos": {
         "id": "ipinfos",
@@ -456,7 +458,7 @@
         "MacChecker": "Ouvrir le Recherche de MAC",
         "BrowserInfo": "Ouvrir l'Info du navigateur",
         "fullScreenAdvancedTools": "Outils avancés en plein écran",
-        "Shell": "Le mystère en vedette"
+        "Shell": "Ouvrir le Shell"
     },
     "page": {
         "title": "IPCheck.ing - Vérifier mon adresse IP et géolocalisation - Vérifier l'adresse IP de connexion WebRTC - Test de fuite DNS - Test de vitesse - Jason Ng Open Source",
diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
index a8b06d20..28bac56d 100644
--- a/frontend/locales/zh.json
+++ b/frontend/locales/zh.json
@@ -37,13 +37,14 @@
   },
   "shell": {
     "Title": "命令行 API",
-    "Note1": "哟，你发现了这个藏起来的接口",
+    "Note1": "哟，原来你也喜欢用终端？",
     "Note2_1": "你可以在终端里，通过",
     "Note2_2": "命令获取本机的 IP 地址",
     "Note3": "是可选路径，添加后可获取到 IP 的地理信息",
     "getIPv4": "获取本机 IPv4 地址",
     "getIPv6": "获取本机 IPv6 地址",
-    "get6and4": "获取本机优先网络出口的 IP 地址"
+    "get6and4": "获取本机优先网络出口的 IP 地址",
+    "notAvailable": "此功能暂未开放，敬请期待"
   },
   "browserinfo": {
     "Title": "浏览器信息",
@@ -269,7 +270,8 @@
     "InfoMask": "隐藏信息",
     "QueryIP": "查询 IP 信息",
     "GithubLink": "查看源代码",
-    "RefreshRuleTests": "刷新规则测试"
+    "RefreshRuleTests": "刷新规则测试",
+    "Shell": "命令行 API"
   },
   "ipInfos": {
     "id": "ipinfos",
@@ -456,7 +458,7 @@
     "MacChecker": "打开物理地址查询面板",
     "BrowserInfo": "打开浏览器信息面板",
     "fullScreenAdvancedTools": "全屏展开高级工具面板",
-    "Shell": "神秘功能"
+    "Shell": "命令行 API"
   },
   "page": {
     "title": "IPCheck.ing - 查看我的 IP 地址 - 查询本机 IP 地址及归属地 - 查看 WebRTC 连接 IP - DNS 泄露检测 - 网速测试 - Jason Ng 阿禅开源作品",
diff --git a/frontend/store.js b/frontend/store.js
index 8779de1e..24160a60 100644
--- a/frontend/store.js
+++ b/frontend/store.js
@@ -14,6 +14,11 @@ export const useMainStore = defineStore('main', {
       speedtest: false,
       advancedtools: false,
     },
+    shell: {
+      ipv4Domain: import.meta.env.VITE_CURL_IPV4_DOMAIN,
+      ipv6Domain: import.meta.env.VITE_CURL_IPV6_DOMAIN,
+      ipv64Domain: import.meta.env.VITE_CURL_IPV64_DOMAIN,
+    },
     loadingStatus: {
       ipcheck: false,
       connectivity: false,
@@ -49,6 +54,9 @@ export const useMainStore = defineStore('main', {
     allHasLoaded: (state) => {
       return Object.values(state.loadingStatus).every(status => status);
     },
+    curlDomainsHadSet: (state) => {
+      return state.shell.ipv4Domain && state.shell.ipv6Domain && state.shell.ipv64Domain;
+    }
   },
 
   actions: {