feat: show ip address

Author: savokiss

components/AppFooter.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="w-100 inset-x-0 mx-auto p-2 text-center fixed bottom-10">
+    <p class="text-gray-400 text-sm">
+      Current IP: {{ data?.ip }} ({{ data?.province }} {{ data?.city }} {{ data?.distinct }} {{ data?.isp }})
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LocationInfo } from '@/types'
+
+const { data } = useFetch<LocationInfo>('https://forge.speedtest.cn/api/location/info')
+</script>

pages/index.vue

@@ -147,5 +147,6 @@ function onDeleteKey(row: KeyData) {
         </template>
       </ClientOnly>
     </section>
+    <AppFooter />
   </div>
 </template>

types/index.ts

@@ -7,4 +7,12 @@ export type KeyData = {
   expiryDate: string
   hasGPT4: boolean
   hasPayment: boolean
+}
+
+export type LocationInfo = {
+  ip: string
+  province: string
+  city: string
+  distinct: string
+  isp: string
 }