Add IP_API

web/src/components/ProxyList.vue

@@ -1,45 +1,68 @@
 <template>
-<v-list>
-  <v-list-item v-for="proxy in proxies" :key="proxy.name">
-    <v-list-item-content>
-      <v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title>
-      <v-chip-group>
-        <v-chip x-small color="primary" outlined>
-          <v-icon left x-small>mdi-server</v-icon>
-          {{ proxy.type.toUpperCase() }}
-        </v-chip>
-        <v-chip x-small v-if="proxy.udp" color="blue" outlined>
-          <v-icon left x-small>mdi-fire</v-icon>
-          UDP
-        </v-chip>
-        <v-chip x-small v-if="proxy.tfo" color="success" outlined>
-          <v-icon left x-small>mdi-flash</v-icon>
-          TFO
-        </v-chip>
-        <v-chip x-small v-if="proxy.scert" color="error" outlined>
-          <v-icon left x-small>error</v-icon>
-          SCERT
-        </v-chip>
-      </v-chip-group>
-    </v-list-item-content>
-    <v-list-item-action>
-      <v-btn icon>
-        <v-icon color="grey lighten-1">mdi-information</v-icon>
-      </v-btn>
-    </v-list-item-action>
-  </v-list-item>
-</v-list>
+  <v-list>
+    <v-list-item v-for="(proxy, idx) in proxies" :key="idx">
+      <v-list-item-content>
+        <v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title>
+        <v-chip-group>
+          <v-chip x-small color="primary" outlined>
+            <v-icon left x-small>mdi-server</v-icon>
+            {{ proxy.type.toUpperCase() }}
+          </v-chip>
+          <v-chip x-small v-if="proxy.udp" color="blue" outlined>
+            <v-icon left x-small>mdi-fire</v-icon>
+            UDP
+          </v-chip>
+          <v-chip x-small v-if="proxy.tfo" color="success" outlined>
+            <v-icon left x-small>mdi-flash</v-icon>
+            TFO
+          </v-chip>
+          <v-chip x-small v-if="proxy.scert" color="error" outlined>
+            <v-icon left x-small>error</v-icon>
+            SCERT
+          </v-chip>
+        </v-chip-group>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-btn icon @click="showInfo(idx)">
+          <v-icon color="grey lighten-1">mdi-information</v-icon>
+        </v-btn>
+      </v-list-item-action>
+    </v-list-item>
+    <v-dialog
+        v-model="dialog"
+    >
+      <v-card>
+        <v-card-title>
+          {{info.name}}
+        </v-card-title>
+
+        <v-card-text>
+          {{info.title}}
+          <br/>
+          {{info.subtitle}}
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-list>
 </template>
 
 <script>
 import {axios} from "@/utils";
 
+const flags = new Map([[ "AC" , "🇦🇨" ] , [ "AF" , "🇦🇫" ] , [ "AI" , "🇦🇮" ] , [ "AL" , "🇦🇱" ] , [ "AM" , "🇦🇲" ] , [ "AQ" , "🇦🇶" ] , [ "AR" , "🇦🇷" ] , [ "AS" , "🇦🇸" ] , [ "AT" , "🇦🇹" ] , [ "AU" , "🇦🇺" ] , [ "AW" , "🇦🇼" ] , [ "AX" , "🇦🇽" ] , [ "AZ" , "🇦🇿" ] , [ "BB" , "🇧🇧" ] , [ "BD" , "🇧🇩" ] , [ "BE" , "🇧🇪" ] , [ "BF" , "🇧🇫" ] , [ "BG" , "🇧🇬" ] , [ "BH" , "🇧🇭" ] , [ "BI" , "🇧🇮" ] , [ "BJ" , "🇧🇯" ] , [ "BM" , "🇧🇲" ] , [ "BN" , "🇧🇳" ] , [ "BO" , "🇧🇴" ] , [ "BR" , "🇧🇷" ] , [ "BS" , "🇧🇸" ] , [ "BT" , "🇧🇹" ] , [ "BV" , "🇧🇻" ] , [ "BW" , "🇧🇼" ] , [ "BY" , "🇧🇾" ] , [ "BZ" , "🇧🇿" ] , [ "CA" , "🇨🇦" ] , [ "CF" , "🇨🇫" ] , [ "CH" , "🇨🇭" ] , [ "CK" , "🇨🇰" ] , [ "CL" , "🇨🇱" ] , [ "CM" , "🇨🇲" ] , [ "CN" , "🇨🇳" ] , [ "CO" , "🇨🇴" ] , [ "CP" , "🇨🇵" ] , [ "CR" , "🇨🇷" ] , [ "CU" , "🇨🇺" ] , [ "CV" , "🇨🇻" ] , [ "CW" , "🇨🇼" ] , [ "CX" , "🇨🇽" ] , [ "CY" , "🇨🇾" ] , [ "CZ" , "🇨🇿" ] , [ "DE" , "🇩🇪" ] , [ "DG" , "🇩🇬" ] , [ "DJ" , "🇩🇯" ] , [ "DK" , "🇩🇰" ] , [ "DM" , "🇩🇲" ] , [ "DO" , "🇩🇴" ] , [ "DZ" , "🇩🇿" ] , [ "EA" , "🇪🇦" ] , [ "EC" , "🇪🇨" ] , [ "EE" , "🇪🇪" ] , [ "EG" , "🇪🇬" ] , [ "EH" , "🇪🇭" ] , [ "ER" , "🇪🇷" ] , [ "ES" , "🇪🇸" ] , [ "ET" , "🇪🇹" ] , [ "EU" , "🇪🇺" ] , [ "FI" , "🇫🇮" ] , [ "FJ" , "🇫🇯" ] , [ "FK" , "🇫🇰" ] , [ "FM" , "🇫🇲" ] , [ "FO" , "🇫🇴" ] , [ "FR" , "🇫🇷" ] , [ "GA" , "🇬🇦" ] , [ "GB" , "🇬🇧" ] , [ "HK" , "🇭🇰" ] ,["HU","🇭🇺"], [ "ID" , "🇮🇩" ] , [ "IE" , "🇮🇪" ] , [ "IL" , "🇮🇱" ] , [ "IM" , "🇮🇲" ] , [ "IN" , "🇮🇳" ] , [ "IS" , "🇮🇸" ] , [ "IT" , "🇮🇹" ] , [ "JP" , "🇯🇵" ] , [ "KR" , "🇰🇷" ] , [ "LU" , "🇱🇺" ] , [ "MO" , "🇲🇴" ] , [ "MX" , "🇲🇽" ] , [ "MY" , "🇲🇾" ] , [ "NL" , "🇳🇱" ] , [ "PH" , "🇵🇭" ] , [ "RO" , "🇷🇴" ] , [ "RS" , "🇷🇸" ] , [ "RU" , "🇷🇺" ] , [ "RW" , "🇷🇼" ] , [ "SA" , "🇸🇦" ] , [ "SB" , "🇸🇧" ] , [ "SC" , "🇸🇨" ] , [ "SD" , "🇸🇩" ] , [ "SE" , "🇸🇪" ] , [ "SG" , "🇸🇬" ] , [ "TH" , "🇹🇭" ] , [ "TN" , "🇹🇳" ] , [ "TO" , "🇹🇴" ] , [ "TR" , "🇹🇷" ] , [ "TV" , "🇹🇻" ] , [ "TW" , "🇨🇳" ] , [ "UK" , "🇬🇧" ] , [ "UM" , "🇺🇲" ] , [ "US" , "🇺🇸" ] , [ "UY" , "🇺🇾" ] , [ "UZ" , "🇺🇿" ] , [ "VA" , "🇻🇦" ] , [ "VE" , "🇻🇪" ] , [ "VG" , "🇻🇬" ] , [ "VI" , "🇻🇮" ] , [ "VN" , "🇻🇳" ] , [ "ZA" , "🇿🇦"]])
+
 export default {
   name: "ProxyList",
   props: ['url', 'sub'],
-  data: function (){
+  data: function () {
     return {
-      proxies: []
+      proxies: [],
+      dialog: false,
+      info: {
+        name: "",
+        title: "",
+        subtitle: "",
+      }
     }
   },
   methods: {
@@ -56,7 +79,16 @@ export default {
       }).catch(err => {
         this.$store.commit("SET_ERROR_MESSAGE", err);
       });
-    }
+    },
+
+    async showInfo(idx) {
+      const {server, name} = this.proxies[idx];
+      const res = await axios.get(`http://ip-api.com/json/${server}?lang=zh-CN`).then(resp => resp.data);
+      this.info.name = name;
+      this.info.title = `地区：${flags.get(res.countryCode)} ${res.regionName} ${res.city}`;
+      this.info.subtitle = `IP：${res.query}`
+      this.dialog = true
+    },
   },
   created() {
     this.fetch();