jcloud/dashboard/src2/components/AddDomainDialog.vue

<template>
	<Dialog
		v-model="showDialog"
		:modelValue="true"
		:options="{ title: '添加域名' }"
	>
		<template v-slot:body-content>
			<div class="space-y-4">
				<p class="text-p-base">
					要添加自定义域名，您必须已经拥有该域名。如果您还没有域名，请先购买后再回到这里。
				</p>
				<FormControl
					placeholder="www.example.com"
					v-model="newDomain"
					:readonly="dnsVerified"
					autocomplete="off"
				/>

				<div
					v-if="newDomain && !dnsVerified"
					class="prose prose-sm space-y-2 prose-strong:text-gray-800"
				>
					<p>创建以下DNS记录之一：</p>
					<ul>
						<li>
							<strong>CNAME</strong> 记录从
							<strong>{{ newDomain }}</strong>
							指向
							<strong>{{ site.name }}</strong>
						</li>
						<li>
							<strong>A</strong> 记录从
							<strong>{{ newDomain }}</strong>
							指向
							<strong>{{ site.inbound_ip }}</strong>
						</li>
					</ul>
				</div>
				<div v-if="dnsResult && !dnsResult.matched" class="space-y-2">
					<p class="text-base">
						收到以下DNS查询响应：
						<span class="font-semibold text-gray-700">{{ newDomain }}</span
						>.
					</p>
					<div
						v-if="newDomain && dnsResult.CNAME && !dnsResult.CNAME.matched"
						class="space-y-2"
					>
						<p class="text-base">
							<span class="font-semibold text-gray-700">CNAME</span>
						</p>
						<div
							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
						>
							<p
								class="select-all overflow-hidden font-mono text-sm text-gray-800"
							>
								{{ dnsResult.CNAME.answer }}
							</p>
						</div>
					</div>
					<div
						v-if="newDomain && dnsResult.A && !dnsResult.A.matched"
						class="space-y-2"
					>
						<p class="text-base">
							<span class="font-semibold text-gray-700">A</span>
						</p>
						<div
							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
						>
							<p
								class="select-all overflow-hidden font-mono text-sm text-gray-800"
							>
								{{ dnsResult.A.answer }}
							</p>
						</div>
					</div>
				</div>
				<p class="flex text-base" v-if="dnsVerified === false">
					<FeatherIcon
						name="x"
						class="mr-2 h-5 w-5 rounded-full bg-red-100 p-1 text-red-500"
					/>
					DNS验证失败
				</p>
				<p class="flex text-base" v-if="dnsVerified === true">
					<FeatherIcon
						name="check"
						class="mr-2 h-5 w-5 rounded-full bg-green-100 p-1 text-green-500"
					/>
					DNS记录验证成功。点击添加域名。
				</p>
				<ErrorMessage :message="$resources.checkDNS.error" />
				<ErrorMessage :message="$resources.addDomain.error" />
				<ErrorMessage :message="$resources.retryAddDomain.error" />
			</div>
		</template>

		<template #actions>
			<Button
				v-if="!dnsVerified"
				class="mt-2 w-full"
				variant="solid"
				:loading="$resources.checkDNS.loading"
				@click="
					$resources.checkDNS.submit({
						name: site.name,
						domain: newDomain
					})
				"
			>
				验证DNS
			</Button>
			<Button
				v-if="dnsVerified"
				class="mt-2 w-full"
				variant="solid"
				:loading="$resources.addDomain.loading"
				@click="
					$resources.addDomain.submit({
						name: site.name,
						domain: newDomain
					})
				"
			>
				添加域名
			</Button>
		</template>
	</Dialog>
</template>
<script>
import { DashboardError } from '../utils/error';

export default {
	name: 'AddDomainDialog',
	props: {
		site: {
			type: Object,
			required: true
		}
	},
emits: ['domainAdded'],
	data() {
		return {
			showDialog: true,
			newDomain: null
		};
	},
	resources: {
		checkDNS: {
			url: 'jcloud.api.site.check_dns',
			validate() {
				if (!this.newDomain) throw new DashboardError('域名不能为空');
			}
		},
		addDomain: {
			url: 'jcloud.api.site.add_domain',
			onSuccess() {
				this.$resources.checkDNS.reset();
				this.$emit('domainAdded');
				this.showDialog = false;
			}
		},
		retryAddDomain: {
			url: 'jcloud.api.site.retry_add_domain',
			onSuccess() {
				this.$emit('domainAdded');
				// this.$resources.domains.fetch();
			}
		}
	},
	computed: {
		dnsVerified() {
			return this.dnsResult?.matched;
		},
		dnsResult() {
			return this.$resources.checkDNS.data;
		}
	}
};
</script>