重构了main.html的主函数
重构了大量的页面的sidebar 优化了代码结构
This commit is contained in:
181
web/js/utils.js
Normal file
181
web/js/utils.js
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* 工具函数模块
|
||||
* 包含弹窗、消息提示等通用功能
|
||||
*/
|
||||
|
||||
// ============ 自定义消息弹窗 ============
|
||||
window.showMessage = function(title, message, type = 'info', onConfirm) {
|
||||
const modal = document.getElementById('customModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalMessage = document.getElementById('modalMessage');
|
||||
const modalIcon = document.getElementById('modalIcon');
|
||||
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
|
||||
const modalConfirmBtn2 = document.getElementById('modalConfirmBtn2');
|
||||
const modalBtnGroup = document.getElementById('modalBtnGroup');
|
||||
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
|
||||
|
||||
// 设置标题
|
||||
modalTitle.textContent = title;
|
||||
modalTitle.className = 'text-lg font-medium text-gray-800 mb-2';
|
||||
|
||||
// 设置消息
|
||||
modalMessage.innerHTML = message;
|
||||
|
||||
// 设置图标和按钮颜色
|
||||
if (type === 'success') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center"><i class="fa fa-check text-xl text-green-600"></i></div>';
|
||||
} else if (type === 'error') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center"><i class="fa fa-times text-xl text-red-600"></i></div>';
|
||||
} else if (type === 'warning') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center"><i class="fa fa-exclamation text-xl text-yellow-600"></i></div>';
|
||||
} else {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-info text-xl text-blue-600"></i></div>';
|
||||
}
|
||||
|
||||
// 单按钮模式
|
||||
modalBtnGroup.classList.add('hidden');
|
||||
modalSingleBtnGroup.classList.remove('hidden');
|
||||
const confirmBtn = modalConfirmBtn2;
|
||||
if (type === 'error') {
|
||||
confirmBtn.className = 'px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors';
|
||||
} else {
|
||||
confirmBtn.className = 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
|
||||
}
|
||||
|
||||
// 显示弹窗
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// 保存回调到按钮属性
|
||||
confirmBtn._onConfirm = onConfirm;
|
||||
|
||||
// 使用 function 而不是箭头函数
|
||||
confirmBtn.onclick = function() {
|
||||
closeModal();
|
||||
const callback = this._onConfirm;
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
this._onConfirm = null;
|
||||
};
|
||||
};
|
||||
|
||||
// 关闭消息弹窗
|
||||
function closeModal() {
|
||||
const modal = document.getElementById('customModal');
|
||||
modal.classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 确认弹窗（两个按钮）
|
||||
window.showConfirm = function(title, message, onConfirm, onCancel, type = 'info') {
|
||||
const modal = document.getElementById('customModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalMessage = document.getElementById('modalMessage');
|
||||
const modalIcon = document.getElementById('modalIcon');
|
||||
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
|
||||
const modalCancelBtn = document.getElementById('modalCancelBtn');
|
||||
const modalBtnGroup = document.getElementById('modalBtnGroup');
|
||||
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
|
||||
|
||||
if (!modalConfirmBtn) {
|
||||
console.error('modalConfirmBtn not found');
|
||||
return;
|
||||
}
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalMessage.innerHTML = message;
|
||||
|
||||
// 根据类型设置图标
|
||||
if (type === 'warning') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center"><i class="fa fa-exclamation text-xl text-yellow-600"></i></div>';
|
||||
} else {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-question text-xl text-blue-600"></i></div>';
|
||||
}
|
||||
|
||||
// 显示双按钮组，隐藏单按钮组
|
||||
modalBtnGroup.classList.remove('hidden');
|
||||
modalSingleBtnGroup.classList.add('hidden');
|
||||
modalConfirmBtn.textContent = '确定';
|
||||
modalConfirmBtn.className = 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// 保存回调到按钮属性
|
||||
modalConfirmBtn._onConfirm = onConfirm;
|
||||
modalConfirmBtn._onCancel = onCancel;
|
||||
|
||||
// 使用 function 而不是箭头函数，确保 this 指向正确
|
||||
modalConfirmBtn.onclick = function() {
|
||||
closeModal();
|
||||
const callback = this._onConfirm;
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
this._onConfirm = null;
|
||||
this._onCancel = null;
|
||||
};
|
||||
|
||||
modalCancelBtn.onclick = function() {
|
||||
closeModal();
|
||||
const callback = this._onCancel || modalConfirmBtn._onCancel;
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
modalConfirmBtn._onConfirm = null;
|
||||
modalConfirmBtn._onCancel = null;
|
||||
};
|
||||
};
|
||||
|
||||
// ============ Web日志系统 ============
|
||||
const webLogger = {
|
||||
_currentPage: 'main',
|
||||
|
||||
// 初始化当前页面名称
|
||||
init: function(pageName) {
|
||||
this._currentPage = pageName || 'unknown';
|
||||
},
|
||||
|
||||
// 发送日志到服务器
|
||||
_sendLog: async function(level, message) {
|
||||
try {
|
||||
await fetch(`${window.API_BASE}/web-log`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
level: level,
|
||||
message: message,
|
||||
page: this._currentPage,
|
||||
timestamp: new Date().toISOString()
|
||||
})
|
||||
});
|
||||
} catch (e) {
|
||||
// 发送失败时只记录到控制台
|
||||
console.warn('日志发送失败:', e);
|
||||
}
|
||||
},
|
||||
|
||||
info: function(message) {
|
||||
console.log(`[INFO] ${message}`);
|
||||
this._sendLog('info', message);
|
||||
},
|
||||
|
||||
error: function(message) {
|
||||
console.error(`[ERROR] ${message}`);
|
||||
this._sendLog('error', message);
|
||||
},
|
||||
|
||||
warning: function(message) {
|
||||
console.warn(`[WARNING] ${message}`);
|
||||
this._sendLog('warning', message);
|
||||
},
|
||||
|
||||
debug: function(message) {
|
||||
console.debug(`[DEBUG] ${message}`);
|
||||
this._sendLog('debug', message);
|
||||
}
|
||||
};
|
||||
|
||||
// 导出 webLogger 到全局
|
||||
window.webLogger = webLogger;
|
||||
Reference in New Issue
Block a user