✨Feat: 增加前端页面核心内容
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="email-sender">
|
||||
<h2>Mini Email Sender</h2>
|
||||
<el-form
|
||||
:model="emailForm"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-width="100px"
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<!-- 收件人 -->
|
||||
<el-form-item label="收件人" prop="to">
|
||||
<el-input
|
||||
v-model="emailForm.to"
|
||||
placeholder="请输入收件人邮箱地址"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 邮件标题 -->
|
||||
<el-form-item label="标题" prop="subject">
|
||||
<el-input
|
||||
v-model="emailForm.subject"
|
||||
placeholder="请输入邮件标题"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 邮件内容 -->
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input
|
||||
v-model="emailForm.content"
|
||||
type="textarea"
|
||||
placeholder="请输入邮件内容"
|
||||
:rows="6"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 附件 -->
|
||||
<el-form-item label="附件">
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
action="/api/upload"
|
||||
:auto-upload="false"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
multiple
|
||||
:limit="5"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-button type="primary">选择文件</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
支持格式：.jpg, .png, .pdf, .docx，最多5个文件，每个文件不超过10MB
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
:loading="submitting"
|
||||
:disabled="submitting"
|
||||
>
|
||||
{{ submitting ? '发送中...' : '发送邮件' }}
|
||||
</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 状态提示 -->
|
||||
<el-alert
|
||||
v-if="message"
|
||||
:title="message"
|
||||
:type="messageType"
|
||||
show-icon
|
||||
closable
|
||||
style="margin-top: 20px;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElForm, ElFormItem, ElInput, ElButton, ElUpload, ElAlert } from 'element-plus'
|
||||
import axios from 'axios'
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const emailForm = reactive({
|
||||
to: '',
|
||||
subject: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
// 文件列表
|
||||
const fileList = ref([])
|
||||
|
||||
// 提交状态
|
||||
const submitting = ref(false)
|
||||
|
||||
// 消息提示
|
||||
const message = ref('')
|
||||
const messageType = ref('success')
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
to: [
|
||||
{ required: true, message: '请输入收件人邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
subject: [
|
||||
{ required: true, message: '请输入邮件标题', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入邮件内容', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 处理文件变化
|
||||
const handleFileChange = (file, fileList) => {
|
||||
// 可以在这里添加文件验证逻辑
|
||||
console.log('文件变化:', file, fileList)
|
||||
}
|
||||
|
||||
// 处理文件移除
|
||||
const handleFileRemove = (file, fileList) => {
|
||||
console.log('文件移除:', file, fileList)
|
||||
}
|
||||
|
||||
// 处理文件超出限制
|
||||
const handleExceed = () => {
|
||||
ElMessage.warning('最多只能上传5个文件')
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields()
|
||||
fileList.value = []
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
// 验证表单
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
|
||||
// 构建发送数据
|
||||
const formData = new FormData()
|
||||
formData.append('to', emailForm.to)
|
||||
formData.append('subject', emailForm.subject)
|
||||
formData.append('content', emailForm.content)
|
||||
|
||||
// 添加附件
|
||||
fileList.value.forEach(file => {
|
||||
formData.append('attachments', file.raw)
|
||||
})
|
||||
|
||||
submitting.value = true
|
||||
message.value = ''
|
||||
|
||||
// 发送请求
|
||||
const response = await axios.post('/api/email/send', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
// 处理响应
|
||||
if (response.data.status === 200) {
|
||||
messageType.value = 'success'
|
||||
message.value = '邮件已成功发送'
|
||||
resetForm()
|
||||
} else {
|
||||
messageType.value = 'error'
|
||||
message.value = response.data.message || '邮件发送失败'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发送邮件错误:', error)
|
||||
messageType.value = 'error'
|
||||
message.value = error.response?.data?.message || '邮件发送失败，请检查网络连接'
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.email-sender {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.email-sender h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.email-sender .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.email-sender .el-alert {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user