初始化鸿蒙应用展示平台项目 - 前后端分离架构

templates/email_settings.html

@@ -0,0 +1,165 @@
+{% extends "base.html" %}
+
+{% block content %}
+{% include 'admin_nav.html' %}
+
+<div class="admin-container">
+    <div class="admin-content">
+        <div id="toast" class="toast">
+            <span id="toastMessage"></span>
+        </div>
+        
+        <div class="admin-card">
+            <div class="card-header">
+                <div class="header-left">
+                    <i class="fas fa-envelope"></i>
+                    <h3>邮件设置</h3>
+                </div>
+            </div>
+            
+            <form onsubmit="saveEmailSettings(event)" class="admin-form">
+                <div class="form-group">
+                    <label for="smtp-server">SMTP服务器</label>
+                    <input type="text" id="smtp-server" name="smtp_server" 
+                           value="{{ settings.get('smtp_server', '') }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="smtp-port">SMTP端口</label>
+                    <input type="number" id="smtp-port" name="smtp_port" 
+                           value="{{ settings.get('smtp_port', 465) }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="smtp-user">发件人邮箱</label>
+                    <input type="email" id="smtp-user" name="smtp_user" 
+                           value="{{ settings.get('smtp_user', '') }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="smtp-password">SMTP授权码</label>
+                    <input type="password" id="smtp-password" name="smtp_password" 
+                           value="{{ settings.get('smtp_password', '') }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="test-email">测试邮箱</label>
+                    <input type="email" id="test-email" name="test_email" 
+                           value="{{ settings.get('test_email', '') }}" 
+                           placeholder="用于接收测试邮件的邮箱">
+                </div>
+                
+                <div class="form-actions">
+                    <button type="submit" class="btn-primary">
+                        <i class="fas fa-save"></i> 保存设置
+                    </button>
+                    <button type="button" class="btn-secondary" onclick="testEmail()">
+                        <i class="fas fa-paper-plane"></i> 发送测试邮件
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<style>
+/* Toast 提示样式 */
+.toast {
+    position: fixed;
+    top: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-size: 14px;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    white-space: pre-wrap;
+    max-width: calc(100% - 40px);
+}
+
+.toast.show {
+    opacity: 1;
+    visibility: visible;
+    animation: toastIn 0.3s ease forwards;
+}
+
+@keyframes toastIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -20px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+}
+
+/* 暗色模式适配 */
+[data-theme="dark"] .toast {
+    background: rgba(0, 0, 0, 0.8);
+}
+</style>
+
+<script>
+function showToast(message) {
+    const toast = document.getElementById('toast');
+    const toastMessage = document.getElementById('toastMessage');
+    toastMessage.textContent = message;
+    toast.classList.add('show');
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 2000);
+}
+
+function saveEmailSettings(event) {
+    event.preventDefault();
+    const form = event.target;
+    const data = new FormData(form);
+    
+    fetch('/admin/email/settings', {
+        method: 'POST',
+        body: data
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('保存成功');
+        } else {
+            showToast(data.error || '保存失败');
+        }
+    })
+    .catch(error => {
+        console.error('Save failed:', error);
+        showToast('保存失败，请稍后重试');
+    });
+}
+
+function testEmail() {
+    fetch('/admin/email/test', {
+        method: 'POST'
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('测试邮件已发送');
+        } else {
+            showToast(data.error || '发送失败');
+        }
+    })
+    .catch(error => {
+        console.error('Test failed:', error);
+        showToast('发送失败，请稍后重试');
+    });
+}
+</script>
+{% endblock %}