Add copy to clipboard

jason5ng32 · Dec 14, 2023 · f50e2c1 · f50e2c1
1 parent ee58a6e
commit f50e2c1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -136,18 +136,16 @@ <h2 id="IPInfo" class="col-4" :class="{'mobile-h2' : isMobile }">🕵️
                       <i class="bi bi-arrow-clockwise"></i></button>
                   </div>
 
-                  <!--  Google Maps iFrame -->
-                  <!-- <iframe class="card-img-top" :src="card.mapUrl" width="100%" height="200" frameborder="0"
-                  style="border:0;" allowfullscreen>
-                </iframe> -->
-
                   <img v-if="isMapShown" v-if="!isMobile" :src="card.mapUrl" class="card-img-top jn-map-image"
                     alt="Map">
                   <div class="card-body">
                     <ul class="list-group list-group-flush">
                       <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
                           class="jn-text">🖥️ {{currentTexts.ipInfos.IP}}</span>: {{ card.ip
                         }}
+                        <i v-if="isValidIP(card.ip)"
+                          :class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
+                          @click="copyToClipboard(card.ip, card.id)"></i>
                       </li>
                       <li class="list-group-item jn-list-group-item"
                         :class="{ 'dark-mode': isDarkMode,'mobile-list': isMobile && isCardsCollapsed }">

diff --git a/public/res/app.js b/public/res/app.js
@@ -52,6 +52,7 @@ new Vue({
     infoMaskLevel: 0,
     ipDataCache: new Map(),
     speedTestStatus: "idle",
+    copiedStatus: {},
 
     // from contents
     connectivityTests,
@@ -193,10 +194,10 @@ new Vue({
         const asnlink = data.asn
           ? `https://radar.cloudflare.com/traffic/${data.asn}`
           : false;
-          const mapUrl =
+        const mapUrl =
           data.latitude && data.longitude
             ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}`
-            : "";        
+            : "";
 
         // 更新卡片数据
         const cardData = {
@@ -807,7 +808,7 @@ new Vue({
           this.isMapShown = false;
         });
     },
-    
+
     // PWA 颜色
     PWAColor() {
       if (this.isDarkMode) {
@@ -1021,6 +1022,21 @@ new Vue({
         this.startSpeedTest();
       }
     },
+    // 复制 IP 地址
+    copyToClipboard(ip, id) {
+      navigator.clipboard.writeText(ip).then(() => {
+        this.$set(this.copiedStatus, id, true);
+        // 设置定时器在 5 秒后重置状态
+        setTimeout(() => {
+          this.$set(this.copiedStatus, id, false);
+        }, 5000);
+      }).catch(err => {
+        console.error('Copy error', err);
+      });
+    },
+    isValidIP(ip) {
+      return /^[a-zA-Z0-9:.\/]+$/.test(ip);
+    },
   },
 
   created() {