🚩 增加 Dns 切换功能
This commit is contained in:
7836246
@@ -0,0 +1,65 @@
|
||||
<script lang="ts" setup>
|
||||
import {useTimeStore} from "~/stores/time";
|
||||
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
const timeStore = useTimeStore()
|
||||
|
||||
const availableDns = [
|
||||
{ iso: '', name: '本地 DNS', flag: 'material-symbols:dns-outline' },
|
||||
{ iso: 'google', name: 'Google', flag: 'flat-color-icons:google' },
|
||||
{ iso: 'aliyun', name: 'AliYun', flag: 'ant-design:aliyun-outlined' },
|
||||
{ iso: 'tencent', name: 'Tencent', flag: 'emojione:cloud' },
|
||||
{ iso: 'cloudflare', name: 'CloudFlare', flag: 'skill-icons:cloudflare-light' },
|
||||
// 添加更多语言...
|
||||
]
|
||||
|
||||
const handlePost = async (iso: string) => {
|
||||
timeStore.setDnsServer(iso)
|
||||
//刷新数据
|
||||
await refreshNuxtData('dns')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<HeadlessListbox
|
||||
v-model="timeStore.getDnsServer"
|
||||
as="div"
|
||||
class="relative flex items-center"
|
||||
>
|
||||
<HeadlessListboxLabel class="sr-only">
|
||||
Change Language
|
||||
</HeadlessListboxLabel>
|
||||
<HeadlessListboxButton type="button" title="Change Language">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
|
||||
>
|
||||
<Icon name="gg:select-o" class=" text-lg dark:text-white" size="20" />
|
||||
</div>
|
||||
</HeadlessListboxButton>
|
||||
<HeadlessListboxOptions
|
||||
class="absolute top-full right-0 z-[999] mt-2 w-40 overflow-hidden rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
|
||||
>
|
||||
<div
|
||||
v-for="lang in availableDns"
|
||||
:key="lang.iso"
|
||||
@click="handlePost(lang.iso)"
|
||||
class="flex w-full cursor-pointer items-center justify-between py-2 px-3"
|
||||
:class="{
|
||||
'text-white-500 bg-gray-200 dark:bg-gray-500/50':
|
||||
timeStore.getDnsServer === lang.iso,
|
||||
'hover:bg-gray-200 dark:hover:bg-gray-700/30':
|
||||
timeStore.getDnsServer !== lang.iso,
|
||||
}"
|
||||
>
|
||||
<span class="truncate">
|
||||
{{ lang.name }}
|
||||
</span>
|
||||
<span class="flex items-center justify-center text-sm">
|
||||
<Icon :name="lang.flag" class="text-base" size="20" />
|
||||
</span>
|
||||
</div>
|
||||
</HeadlessListboxOptions>
|
||||
</HeadlessListbox>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data:{
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {t} = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex bg-gray-100 p-8">
|
||||
<div class="w-full mx-auto">
|
||||
<div class="bg-white shadow-lg rounded-lg p-6 mb-4" v-for="item in data.Answer">
|
||||
<h2 class="text-xl font-bold">{{ item.name }}</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="font-semibold">Type</p>
|
||||
<p>{{ item.type }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">TTL</p>
|
||||
<p>{{ item.TTL }}</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<p class="font-semibold">Data</p>
|
||||
<p>{{ item.data }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 mt-4">
|
||||
<span class="bg-green-200 text-green-800 px-2 py-1 rounded">RD: {{ data.RD }}</span>
|
||||
<span class="bg-green-200 text-green-800 px-2 py-1 rounded">RA: {{ data.RA }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">TC: {{ data.TC }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">AD: {{ data.AD }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">CD: {{ data.CD }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const {t} = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div v-if="data.aRecords">
|
||||
<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
|
||||
class="list-none space-y-2">
|
||||
<li v-for="(record, index) in data.aRecords" :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 }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="data.nsRecords">
|
||||
<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
|
||||
class="list-none space-y-2">
|
||||
<li v-for="(record, index) in data.nsRecords" :key="'ns-record-' + index" class="flex justify-between items-center">
|
||||
<span class="font-normal text-gray-600">{{ record }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="data.soaRecord"
|
||||
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">nsname:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.nsname }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">hostmaster:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.hostmaster }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">serial:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.serial }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">refresh:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.refresh }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">retry:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.retry }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">expire TTL:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.expire }}</span></li>
|
||||
<li><span class="font-medium text-gray-700">minttl TTL:</span> <span class="font-normal text-gray-600">{{ data.soaRecord.minttl }}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex bg-gray-100 p-8">
|
||||
<div class="w-full mx-auto">
|
||||
<div class="bg-white shadow-lg rounded-lg p-6 mb-4" v-for="item in data.Answer">
|
||||
<h2 class="text-xl font-bold">{{ item.name }}</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="font-semibold">Type</p>
|
||||
<p>{{ item.type }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">TTL</p>
|
||||
<p>{{ item.TTL }}</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<p class="font-semibold">Data</p>
|
||||
<p>{{ item.data }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 mt-4">
|
||||
<span class="bg-green-200 text-green-800 px-2 py-1 rounded">RD: {{ data.RD }}</span>
|
||||
<span class="bg-green-200 text-green-800 px-2 py-1 rounded">RA: {{ data.RA }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">TC: {{ data.TC }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">AD: {{ data.AD }}</span>
|
||||
<span class="bg-red-200 text-red-800 px-2 py-1 rounded">CD: {{ data.CD }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user