161 lines
5.0 KiB
Vue
161 lines
5.0 KiB
Vue
<script setup>
|
||
import HelpTip from "../components/HelpTip/HelpTip.vue";
|
||
|
||
const props = defineProps({ state: { type: Object, required: true } });
|
||
const {
|
||
showForm,
|
||
formTitle,
|
||
closeForm,
|
||
saveDomain,
|
||
form,
|
||
dnsProviders,
|
||
servers,
|
||
displayLabel,
|
||
webServerLabels,
|
||
formError,
|
||
saving,
|
||
} = props.state;
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="showForm" class="modal-backdrop domain-backdrop" @click.self="closeForm">
|
||
<section
|
||
class="modal-card domain-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
:aria-label="formTitle"
|
||
>
|
||
<div class="modal-heading">
|
||
<div>
|
||
<p class="eyebrow">域名配置</p>
|
||
<h2>{{ formTitle }}</h2>
|
||
</div>
|
||
<button
|
||
class="close-button"
|
||
type="button"
|
||
aria-label="关闭"
|
||
@click="closeForm"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<form @submit.prevent="saveDomain">
|
||
<label class="field" for="domain-name"
|
||
><span>主域名</span
|
||
><input
|
||
id="domain-name"
|
||
name="name"
|
||
v-model="form.name"
|
||
type="text"
|
||
placeholder="例如 example.com"
|
||
autocomplete="off"
|
||
/></label>
|
||
<label class="field" for="certificate-type"
|
||
><span>证书类型</span
|
||
><select
|
||
id="certificate-type"
|
||
name="certificate_type"
|
||
v-model="form.certificate_type"
|
||
>
|
||
<option value="single">单域名</option>
|
||
<option value="wildcard">泛域名</option>
|
||
<option value="san">SAN 多域名</option>
|
||
</select></label
|
||
>
|
||
<label
|
||
v-if="form.certificate_type === 'san'"
|
||
class="field domain-sans-field"
|
||
for="domain-sans"
|
||
><span>附加域名 <HelpTip>每行一个，也支持逗号分隔</HelpTip></span
|
||
><textarea
|
||
id="domain-sans"
|
||
name="sans"
|
||
v-model="form.sans"
|
||
rows="2"
|
||
:placeholder="'www.example.com\napi.example.com'"
|
||
></textarea>
|
||
</label>
|
||
<div class="form-grid">
|
||
<label class="field" for="acme-environment"
|
||
><span>ACME 环境</span
|
||
><select
|
||
id="acme-environment"
|
||
name="acme_environment"
|
||
v-model="form.acme_environment"
|
||
>
|
||
<option value="staging">测试环境</option>
|
||
<option value="production">生产环境</option>
|
||
</select></label
|
||
>
|
||
<label class="field" for="dns-provider"
|
||
><span>DNS 验证服务商</span
|
||
><select
|
||
id="dns-provider"
|
||
name="dns_provider"
|
||
v-model="form.dns_provider"
|
||
>
|
||
<option value="">暂不选择</option>
|
||
<option
|
||
v-for="provider in dnsProviders"
|
||
:key="provider.value"
|
||
:value="provider.value"
|
||
>
|
||
{{ provider.label }}
|
||
</option>
|
||
</select></label
|
||
>
|
||
</div>
|
||
<label class="switch-field" for="auto-renew"
|
||
><input
|
||
id="auto-renew"
|
||
name="auto_renew"
|
||
v-model="form.auto_renew"
|
||
type="checkbox"
|
||
/><span
|
||
><strong>启用自动续期</strong
|
||
><HelpTip>证书剩余有效期达到阈值时自动创建续期任务</HelpTip></span
|
||
></label
|
||
>
|
||
<fieldset class="server-picker">
|
||
<legend>关联部署服务器</legend>
|
||
<label
|
||
v-for="server in servers"
|
||
:key="server.id"
|
||
class="server-option"
|
||
><input
|
||
v-model="form.server_ids"
|
||
type="checkbox"
|
||
:value="server.id"
|
||
/><span
|
||
><strong>{{ server.name }}</strong
|
||
><small
|
||
>{{ server.address }} ·
|
||
{{ displayLabel(webServerLabels, server.web_server) }}</small
|
||
></span
|
||
></label
|
||
>
|
||
<p v-if="servers.length === 0" class="muted">
|
||
暂无服务器配置，可先保存域名后添加服务器。
|
||
</p>
|
||
</fieldset>
|
||
<p v-if="formError" class="form-error">{{ formError }}</p>
|
||
<div class="modal-actions">
|
||
<button
|
||
class="secondary-button"
|
||
type="button"
|
||
:disabled="saving"
|
||
@click="closeForm"
|
||
>
|
||
取消</button
|
||
><button class="primary-button" type="submit" :disabled="saving">
|
||
{{ saving ? "保存中……" : "保存配置" }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped src="./Dashboard.css"></style>
|
||
<style scoped src="./DomainModal.css"></style>
|