🚩 增加 Dns 切换功能

This commit is contained in:
7836246
2024-03-03 13:37:23 +08:00
parent 999d8b7076
commit 9a64049c60
10 changed files with 341 additions and 82 deletions
+35 -51
View File
@@ -2,6 +2,7 @@
import {useStyleStore} from "~/stores/style";
import {AdjustTimeToUTCOffset} from "~/utils/utc";
import {useTimeStore} from "~/stores/time";
import DnsInfo from "~/components/dns/InfoList.vue";
const {t} = useI18n()
@@ -9,21 +10,24 @@ const route = useRoute();
const {domain} = route.params;
const domainData = domain.replace(/_/g, '.')
const timeStore = useTimeStore()
const styleStore = useStyleStore()
const localePath = useLocalePath()
styleStore.setIsPage(true)
const {data, pending, error, refresh} = await useAsyncData(
'dns',
() => $fetch('/api/dns', {
method: 'POST',
body: JSON.stringify({domain: 'xukangr.com'})
body: {
domain: domainData,
dnsServer:timeStore.getDnsServer
}
})
)
const timeStore = useTimeStore()
const styleStore = useStyleStore()
styleStore.setIsPage(true)
const localePath = useLocalePath()
if (!error.value) {
styleStore.addOrUpdateHistory(
{
@@ -54,50 +58,30 @@ useHead({
<div class="mt-5">
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6">{{ t('dns.dnsResult') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-lg text-blue-600 mb-2">{{ t('dns.aRecord') }}</h3>
<div class="border rounded-lg p-4 bg-blue-50">
<ul
v-if="data.A.length > 0"
class="list-none space-y-2">
<li v-for="(record, index) in data.A" :key="'a-record-' + index" class="flex justify-between items-center">
<span class="font-medium text-gray-700">IP:</span>
<span class="font-normal text-gray-600">{{ record.Record }}</span>
<span class="text-sm text-gray-500">TTL: {{ record.TTL }}</span>
</li>
</ul>
</div>
</div>
<div>
<h3 class="font-semibold text-lg text-green-600 mb-2">{{ t('dns.nsRecord') }}</h3>
<div class="border rounded-lg p-4 bg-green-50">
<ul
v-if="data.NS.length > 0"
class="list-none space-y-2">
<li v-for="(record, index) in data.NS" :key="'ns-record-' + index" class="flex justify-between items-center">
<span class="font-normal text-gray-600">{{ record.Record }}</span>
<span class="text-sm text-gray-500">TTL: {{ record.TTL }}</span>
</li>
</ul>
</div>
</div>
<div class="md:col-span-2">
<h3 class="font-semibold text-lg text-purple-600 mb-2">{{ t('dns.soaRecord') }}</h3>
<div class="border rounded-lg p-4 bg-purple-50">
<ul class="list-none space-y-2">
<li><span class="font-medium text-gray-700">MName:</span> <span class="font-normal text-gray-600">{{ data.SOA.MName }}</span></li>
<li><span class="font-medium text-gray-700">Email:</span> <span class="font-normal text-gray-600">{{ data.SOA.Email }}</span></li>
<li><span class="font-medium text-gray-700">Serial:</span> <span class="font-normal text-gray-600">{{ data.SOA.Serial }}</span></li>
<li><span class="font-medium text-gray-700">Refresh:</span> <span class="font-normal text-gray-600">{{ data.SOA.Refresh }}</span></li>
<li><span class="font-medium text-gray-700">Retry:</span> <span class="font-normal text-gray-600">{{ data.SOA.Retry }}</span></li>
<li><span class="font-medium text-gray-700">Expire:</span> <span class="font-normal text-gray-600">{{ data.SOA.Expire }}</span></li>
<li><span class="font-medium text-gray-700">Minimum TTL:</span> <span class="font-normal text-gray-600">{{ data.SOA.MinimumTTL }}</span></li>
</ul>
</div>
</div>
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800"> {{ t('dns.dnsResult') }}
<span class="text-gray-300 text-sm font-normal ml-2">{{ timeStore.getDnsServer }}</span>
</h2>
<ClientOnly>
<DnsApiChanges />
</ClientOnly>
</div>
<DnsDefaultList v-if="timeStore.getDnsServer == ''"
:data="data" />
<DnsInfoList
v-if="timeStore.getDnsServer != 'cloudflare' && timeStore.getDnsServer != ''"
:data="data"
/>
<DnsCloudflareList
v-if="timeStore.getDnsServer == 'cloudflare'"
:data="data"
/>
</div>
</div>
</div>