send-mail/frontend/src/components/EmailSender.vue

<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('http:localhost:8080/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>