admin-vue/src/views/config/EmailConfig.vue

<template>
  <div class="email-config-page">
    <a-card title="阿里云邮件推送配置">
      <template #extra><a-button :loading="loading" @click="loadConfig">刷新</a-button></template>
      <a-alert message="PC邮箱登录和注册共用此配置。请使用已有授权的发信地址，生产环境应开启SSL校验。" type="info" show-icon class="config-tip" />
      <a-spin :spinning="loading">
        <a-form :model="form" layout="vertical" @finish="onSubmit">
          <a-form-item label="AccessKey ID" name="access_key_id" :rules="[{ required: true, message: '请输入AccessKey ID' }]"><a-input v-model:value="form.access_key_id" :maxlength="100" autocomplete="off" /></a-form-item>
          <a-form-item label="AccessKey Secret" name="access_key_secret" :rules="[{ required: true, message: '请输入AccessKey Secret' }]"><a-input-password v-model:value="form.access_key_secret" :maxlength="200" autocomplete="new-password" /></a-form-item>
          <a-form-item label="发信地址" name="account_name" :rules="[{ required: true, type: 'email', message: '请输入正确的发信地址' }]"><a-input v-model:value="form.account_name" :maxlength="100" placeholder="no-reply@example.com" /></a-form-item>
          <a-form-item label="发信别名" name="from_alias"><a-input v-model:value="form.from_alias" :maxlength="15" placeholder="留空使用站点名称" /></a-form-item>
          <a-form-item label="允许回复"><a-switch v-model:checked="form.reply_to_address" /></a-form-item>
          <a-form-item label="SSL校验"><a-switch v-model:checked="form.ssl_verify" /></a-form-item>
          <a-button type="primary" html-type="submit" :loading="saving" :disabled="loading || !loaded">保存配置</a-button>
        </a-form>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { getPlatformConfig, saveConfig } from '@/api/config'

const loading = ref(false)
const saving = ref(false)
const loaded = ref(false)
const form = reactive({
  access_key_id: '', access_key_secret: '', account_name: '', from_alias: '',
  reply_to_address: false, ssl_verify: true
})

async function loadConfig() {
  loading.value = true
  loaded.value = false
  try {
    const response = await getPlatformConfig({ key: 'aliyun_direct_mail' })
    if (response.code !== 200) return
    Object.assign(form, response.result.value)
    loaded.value = true
  } finally {
    loading.value = false
  }
}

async function onSubmit() {
  saving.value = true
  try {
    const response = await saveConfig({ key: 'aliyun_direct_mail', name: '阿里云邮件推送配置', value: { ...form } })
    if (response.code === 200) message.success('配置已保存')
  } finally {
    saving.value = false
  }
}

onMounted(loadConfig)
</script>

<style scoped>
.email-config-page { max-width: 880px; }
.config-tip { margin-bottom: 24px; }
</style>