✨Feat: 增加前端页面核心内容

frontend/src/App.vue

@@ -1,7 +1,9 @@
-<script setup></script>
+<script setup>
+import EmailSender from './components/EmailSender.vue'
+</script>
 
 <template>
-  <h1>Hello World</h1>
+  <EmailSender />
 </template>
 
 <style scoped></style>

frontend/src/components/EmailSender.vue

@@ -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>