feat(public): 实现docx库按需加载并优化邮件配置存储逻辑 将Word导出功能中的docx库从静态引入改为按需动态加载,提升页面初始加载性能。 同时重构邮件配置功能,支持将配置保存至服务器并与localStorage保持同步备份。 此外,在页面初始化时并行加载各项配置以提高整体加载效率。 ```
This commit is contained in:
149
public/app.js
149
public/app.js
@@ -202,10 +202,34 @@ function displayReport(report, container) {
|
||||
async function exportReport() {
|
||||
if (!currentReport) return;
|
||||
|
||||
// 检查docx库是否加载
|
||||
// 按需动态加载docx库
|
||||
if (!window.docx) {
|
||||
alert('Word导出库正在加载中,请稍后再试...');
|
||||
return;
|
||||
try {
|
||||
// 显示加载提示
|
||||
const loadingMsg = document.createElement('div');
|
||||
loadingMsg.textContent = '正在加载导出库...';
|
||||
loadingMsg.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:9999;';
|
||||
document.body.appendChild(loadingMsg);
|
||||
|
||||
// 动态加载docx库
|
||||
await new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/docx@7.8.2/build/index.js';
|
||||
script.onload = resolve;
|
||||
script.onerror = () => {
|
||||
// 降级到unpkg
|
||||
script.src = 'https://unpkg.com/docx@7.8.2/build/index.js';
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
document.body.removeChild(loadingMsg);
|
||||
} catch (error) {
|
||||
alert('导出库加载失败,请检查网络连接后重试');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const report = currentReport;
|
||||
@@ -356,8 +380,8 @@ async function exportReport() {
|
||||
|
||||
// ========== 邮件功能 ==========
|
||||
|
||||
// 保存邮件配置到localStorage
|
||||
function saveEmailConfig() {
|
||||
// 保存邮件配置到服务器
|
||||
async function saveEmailConfig() {
|
||||
const config = {
|
||||
smtpHost: document.getElementById('smtpHost').value,
|
||||
smtpPort: parseInt(document.getElementById('smtpPort').value) || 587,
|
||||
@@ -367,29 +391,107 @@ function saveEmailConfig() {
|
||||
};
|
||||
|
||||
// 验证配置
|
||||
if (!config.smtpHost || !config.smtpUser || !config.smtpPass || !config.recipients) {
|
||||
showEmailStatus('请填写所有必填项', 'error');
|
||||
if (!config.smtpHost || !config.smtpUser || !config.recipients) {
|
||||
showEmailStatus('请填写SMTP服务器、发件人邮箱和收件人', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存到localStorage
|
||||
localStorage.setItem('emailConfig', JSON.stringify(config));
|
||||
showEmailStatus('邮件配置已保存', 'success');
|
||||
// 如果密码为空,可能是要保持原密码不变
|
||||
const smtpPassInput = document.getElementById('smtpPass');
|
||||
if (!config.smtpPass && smtpPassInput.placeholder.includes('已配置')) {
|
||||
// 使用占位符表示保持原密码
|
||||
config.smtpPass = '***已配置***';
|
||||
} else if (!config.smtpPass) {
|
||||
showEmailStatus('请填写SMTP密码', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showEmailStatus('正在保存配置...', 'info');
|
||||
|
||||
try {
|
||||
// 先获取当前服务器配置
|
||||
const getResponse = await fetch(`${API_BASE}/config`);
|
||||
const getData = await getResponse.json();
|
||||
|
||||
let fullConfig = { email: config };
|
||||
|
||||
// 如果服务器有其他配置(如scheduler),保留它们
|
||||
if (getData.success && getData.data) {
|
||||
fullConfig = {
|
||||
...getData.data,
|
||||
email: config
|
||||
};
|
||||
}
|
||||
|
||||
// 保存到服务器
|
||||
const saveResponse = await fetch(`${API_BASE}/config`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(fullConfig)
|
||||
});
|
||||
|
||||
const saveData = await saveResponse.json();
|
||||
|
||||
if (saveData.success) {
|
||||
// 同时保存到localStorage作为备份
|
||||
localStorage.setItem('emailConfig', JSON.stringify(config));
|
||||
showEmailStatus('邮件配置已保存到服务器', 'success');
|
||||
} else {
|
||||
showEmailStatus(`保存失败: ${saveData.error}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showEmailStatus(`保存失败: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 从localStorage加载邮件配置
|
||||
function loadEmailConfig() {
|
||||
const configStr = localStorage.getItem('emailConfig');
|
||||
if (configStr) {
|
||||
try {
|
||||
const config = JSON.parse(configStr);
|
||||
// 从服务器加载邮件配置
|
||||
async function loadEmailConfig() {
|
||||
try {
|
||||
// 从服务器获取配置
|
||||
const response = await fetch(`${API_BASE}/config`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.data && data.data.email) {
|
||||
const config = data.data.email;
|
||||
document.getElementById('smtpHost').value = config.smtpHost || '';
|
||||
document.getElementById('smtpPort').value = config.smtpPort || 587;
|
||||
document.getElementById('smtpUser').value = config.smtpUser || '';
|
||||
document.getElementById('smtpPass').value = config.smtpPass || '';
|
||||
// 如果密码是占位符,保持输入框为空或显示占位符
|
||||
document.getElementById('smtpPass').value = config.smtpPass === '***已配置***' ? '' : (config.smtpPass || '');
|
||||
if (config.smtpPass === '***已配置***') {
|
||||
document.getElementById('smtpPass').placeholder = '***已配置*** (留空保持不变)';
|
||||
}
|
||||
document.getElementById('recipients').value = config.recipients || '';
|
||||
} catch (e) {
|
||||
console.error('加载邮件配置失败:', e);
|
||||
|
||||
// 同时保存到localStorage作为备份
|
||||
localStorage.setItem('emailConfig', JSON.stringify(config));
|
||||
} else {
|
||||
// 如果服务器没有配置,尝试从localStorage加载
|
||||
const configStr = localStorage.getItem('emailConfig');
|
||||
if (configStr) {
|
||||
const config = JSON.parse(configStr);
|
||||
document.getElementById('smtpHost').value = config.smtpHost || '';
|
||||
document.getElementById('smtpPort').value = config.smtpPort || 587;
|
||||
document.getElementById('smtpUser').value = config.smtpUser || '';
|
||||
document.getElementById('smtpPass').value = config.smtpPass || '';
|
||||
document.getElementById('recipients').value = config.recipients || '';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('从服务器加载邮件配置失败:', error);
|
||||
// 失败时尝试从localStorage加载
|
||||
const configStr = localStorage.getItem('emailConfig');
|
||||
if (configStr) {
|
||||
try {
|
||||
const config = JSON.parse(configStr);
|
||||
document.getElementById('smtpHost').value = config.smtpHost || '';
|
||||
document.getElementById('smtpPort').value = config.smtpPort || 587;
|
||||
document.getElementById('smtpUser').value = config.smtpUser || '';
|
||||
document.getElementById('smtpPass').value = config.smtpPass || '';
|
||||
document.getElementById('recipients').value = config.recipients || '';
|
||||
} catch (e) {
|
||||
console.error('从localStorage加载邮件配置失败:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -675,8 +777,13 @@ function updateCustomCron() {
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadEmailConfig();
|
||||
loadSchedulerConfig();
|
||||
// 并行加载配置,提高加载速度
|
||||
Promise.all([
|
||||
loadEmailConfig().catch(err => console.error('加载邮件配置失败:', err)),
|
||||
loadSchedulerConfig().catch(err => console.error('加载定时任务配置失败:', err))
|
||||
]).then(() => {
|
||||
console.log('配置加载完成');
|
||||
});
|
||||
|
||||
// 添加自定义时间输入框的事件监听
|
||||
const customHour = document.getElementById('customHour');
|
||||
|
||||
Reference in New Issue
Block a user