mirror of
https://github.com/certd/certd.git
synced 2026-05-17 05:37:30 +08:00
More translation
This commit is contained in:
Lorenzo
@@ -1,73 +1,86 @@
|
||||
<template>
|
||||
<fs-page class="page-setting-email">
|
||||
<template #header>
|
||||
<div class="title">
|
||||
邮件服务器设置
|
||||
<span class="sub">设置邮件发送服务器</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-page class="page-setting-email">
|
||||
<template #header>
|
||||
<div class="title">
|
||||
{{ t('certd.emailServerSettings') }}
|
||||
<span class="sub">{{ t('certd.setEmailSendingServer') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex-o">
|
||||
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" class="email-form-box" @finish="onFinish" @finish-failed="onFinishFailed">
|
||||
<div v-if="!formState.usePlus" class="email-form">
|
||||
<a-form-item label="使用自定义邮件服务器"> </a-form-item>
|
||||
<a-form-item label="SMTP域名" name="host" :rules="[{ required: true, message: '请输入smtp域名或ip' }]">
|
||||
<a-input v-model:value="formState.host" />
|
||||
</a-form-item>
|
||||
<div class="flex-o">
|
||||
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
|
||||
autocomplete="off" class="email-form-box" @finish="onFinish" @finish-failed="onFinishFailed">
|
||||
<div v-if="!formState.usePlus" class="email-form">
|
||||
<a-form-item :label="t('certd.useCustomEmailServer')"> </a-form-item>
|
||||
<a-form-item :label="t('certd.smtpDomain')" name="host"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterSmtpDomain') }]">
|
||||
<a-input v-model:value="formState.host" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="SMTP端口" name="port" :rules="[{ required: true, message: '请输入smtp端口号' }]">
|
||||
<a-input v-model:value="formState.port" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.smtpPort')" name="port"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterSmtpPort') }]">
|
||||
<a-input v-model:value="formState.port" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="用户名" :name="['auth', 'user']" :rules="[{ required: true, message: '请输入用户名' }]">
|
||||
<a-input v-model:value="formState.auth.user" />
|
||||
</a-form-item>
|
||||
<a-form-item label="密码" :name="['auth', 'pass']" :rules="[{ required: true, message: '请输入密码' }]">
|
||||
<a-input-password v-model:value="formState.auth.pass" />
|
||||
<div class="helper">如果是qq邮箱，需要到qq邮箱的设置里面申请授权码作为密码</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="发件邮箱" name="sender" :rules="[{ required: true, message: '请输入发件邮箱' }]">
|
||||
<a-input v-model:value="formState.sender" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否ssl" name="secure">
|
||||
<a-switch v-model:checked="formState.secure" />
|
||||
<div class="helper">ssl和非ssl的smtp端口是不一样的，注意修改端口</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="忽略证书校验" :name="['tls', 'rejectUnauthorized']">
|
||||
<a-switch v-model:checked="formState.tls.rejectUnauthorized" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.username')" :name="['auth', 'user']"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterUsername') }]">
|
||||
<a-input v-model:value="formState.auth.user" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.password')" :name="['auth', 'pass']"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterPassword') }]">
|
||||
<a-input-password v-model:value="formState.auth.pass" />
|
||||
<div class="helper">{{ t('certd.qqEmailAuthCodeHelper') }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.senderEmail')" name="sender"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterSenderEmail') }]">
|
||||
<a-input v-model:value="formState.sender" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.useSsl')" name="secure">
|
||||
<a-switch v-model:checked="formState.secure" />
|
||||
<div class="helper">{{ t('certd.sslPortNote') }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('certd.ignoreCertValidation')" :name="['tls', 'rejectUnauthorized']">
|
||||
<a-switch v-model:checked="formState.tls.rejectUnauthorized" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button type="primary" html-type="submit">保存</a-button>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="email-form">
|
||||
<a-form-item label="使用官方邮件服务器" name="usePlus">
|
||||
<div class="flex-o">
|
||||
<a-switch v-model:checked="formState.usePlus" :disabled="!settingStore.isPlus" @change="onUsePlusChanged" />
|
||||
<vip-button class="ml-5" mode="button"></vip-button>
|
||||
</div>
|
||||
<div class="helper">使用官方邮箱服务器直接发邮件，免除繁琐的配置</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="email-form">
|
||||
<a-form :model="testFormState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onTestSend">
|
||||
<a-form-item label="测试收件邮箱" name="receiver" :rules="[{ required: true, message: '请输入测试收件邮箱' }]">
|
||||
<a-input v-model:value="testFormState.receiver" />
|
||||
<div class="helper">保存后再点击测试</div>
|
||||
<div class="helper">发送失败？？？<a href="https://certd.docmirror.cn/guide/use/email/" target="_blank">邮件配置帮助文档</a></div>
|
||||
<div class="helper">您还可以试试使用官方邮件服务器↗↗↗↗↗↗↗↗</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button type="primary" :loading="testFormState.loading" html-type="submit">测试</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</fs-page>
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button type="primary" html-type="submit">{{ t('certd.save') }}</a-button>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="email-form">
|
||||
<a-form-item :label="t('certd.useOfficialEmailServer')" name="usePlus">
|
||||
<div class="flex-o">
|
||||
<a-switch v-model:checked="formState.usePlus" :disabled="!settingStore.isPlus"
|
||||
@change="onUsePlusChanged" />
|
||||
<vip-button class="ml-5" mode="button"></vip-button>
|
||||
</div>
|
||||
<div class="helper">{{ t('certd.useOfficialEmailServerHelper') }}</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="email-form">
|
||||
<a-form :model="testFormState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
|
||||
autocomplete="off" @finish="onTestSend">
|
||||
<a-form-item :label="t('certd.testReceiverEmail')" name="receiver"
|
||||
:rules="[{ required: true, message: t('certd.pleaseEnterTestReceiverEmail') }]">
|
||||
<a-input v-model:value="testFormState.receiver" />
|
||||
<div class="helper">{{ t('certd.saveBeforeTest') }}</div>
|
||||
<div class="helper">{{ t('certd.sendFailHelpDoc') }}<a
|
||||
href="https://certd.docmirror.cn/guide/use/email/" target="_blank">{{
|
||||
t('certd.emailConfigHelpDoc') }}</a></div>
|
||||
<div class="helper">{{ t('certd.tryOfficialEmailServer') }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button type="primary" :loading="testFormState.loading" html-type="submit">{{ t('certd.test')
|
||||
}}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
import * as api from "../api";
|
||||
@@ -75,96 +88,102 @@ import * as emailApi from "./api.email";
|
||||
import { notification } from "ant-design-vue";
|
||||
import { useSettingStore } from "/src/store/settings";
|
||||
import * as _ from "lodash-es";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
defineOptions({
|
||||
name: "EmailSetting",
|
||||
name: "EmailSetting",
|
||||
});
|
||||
|
||||
interface FormState {
|
||||
host: string;
|
||||
port: number;
|
||||
auth: {
|
||||
user: string;
|
||||
pass: string;
|
||||
};
|
||||
secure: boolean; // use TLS
|
||||
tls: {
|
||||
// do not fail on invalid certs
|
||||
rejectUnauthorized?: boolean;
|
||||
};
|
||||
sender: string;
|
||||
usePlus: boolean;
|
||||
host: string;
|
||||
port: number;
|
||||
auth: {
|
||||
user: string;
|
||||
pass: string;
|
||||
};
|
||||
secure: boolean; // use TLS
|
||||
tls: {
|
||||
// do not fail on invalid certs
|
||||
rejectUnauthorized?: boolean;
|
||||
};
|
||||
sender: string;
|
||||
usePlus: boolean;
|
||||
}
|
||||
|
||||
const formState = reactive<Partial<FormState>>({
|
||||
auth: {
|
||||
user: "",
|
||||
pass: "",
|
||||
},
|
||||
tls: {},
|
||||
usePlus: false,
|
||||
auth: {
|
||||
user: "",
|
||||
pass: "",
|
||||
},
|
||||
tls: {},
|
||||
usePlus: false,
|
||||
});
|
||||
|
||||
async function load() {
|
||||
const data: any = await api.EmailSettingsGet();
|
||||
_.merge(formState, data);
|
||||
const data: any = await api.EmailSettingsGet();
|
||||
_.merge(formState, data);
|
||||
}
|
||||
|
||||
load();
|
||||
|
||||
const onFinish = async (form: any) => {
|
||||
console.log("Success:", form);
|
||||
await api.EmailSettingsSave(form);
|
||||
notification.success({
|
||||
message: "保存成功",
|
||||
});
|
||||
console.log("Success:", form);
|
||||
await api.EmailSettingsSave(form);
|
||||
notification.success({
|
||||
message: t("certd.saveSuccess"),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
// console.log("Failed:", errorInfo);
|
||||
// console.log("Failed:", errorInfo);
|
||||
};
|
||||
|
||||
async function onUsePlusChanged() {
|
||||
await api.EmailSettingsSave(formState);
|
||||
await api.EmailSettingsSave(formState);
|
||||
}
|
||||
|
||||
interface TestFormState {
|
||||
receiver: string;
|
||||
loading: boolean;
|
||||
receiver: string;
|
||||
loading: boolean;
|
||||
}
|
||||
const testFormState = reactive<TestFormState>({
|
||||
receiver: "",
|
||||
loading: false,
|
||||
receiver: "",
|
||||
loading: false,
|
||||
});
|
||||
async function onTestSend() {
|
||||
testFormState.loading = true;
|
||||
try {
|
||||
await emailApi.TestSend(testFormState.receiver);
|
||||
notification.success({
|
||||
message: "发送成功",
|
||||
});
|
||||
} finally {
|
||||
testFormState.loading = false;
|
||||
}
|
||||
testFormState.loading = true;
|
||||
try {
|
||||
await emailApi.TestSend(testFormState.receiver);
|
||||
notification.success({
|
||||
message: t("certd.sendSuccess"),
|
||||
});
|
||||
} finally {
|
||||
testFormState.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-setting-email {
|
||||
.email-form-box {
|
||||
display: flex;
|
||||
}
|
||||
.email-form {
|
||||
width: 500px;
|
||||
margin: 20px;
|
||||
}
|
||||
.email-form-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.helper {
|
||||
padding: 1px;
|
||||
margin: 0px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
.email-form {
|
||||
width: 500px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.helper {
|
||||
padding: 1px;
|
||||
margin: 0px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user