99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
|
|
// 通用工具函数和组件
|
||
|
|
|
||
|
|
// 显示通知
|
||
|
|
function showNotification(message, type = 'info') {
|
||
|
|
console.log('通知:', message, '类型:', type);
|
||
|
|
|
||
|
|
// 创建通知元素
|
||
|
|
const notification = document.createElement('div');
|
||
|
|
notification.className = `notification ${type}`;
|
||
|
|
notification.textContent = message;
|
||
|
|
notification.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 6px;
|
||
|
|
color: white;
|
||
|
|
font-size: 14px;
|
||
|
|
z-index: 1000;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
`;
|
||
|
|
|
||
|
|
// 根据类型设置颜色
|
||
|
|
switch(type) {
|
||
|
|
case 'success':
|
||
|
|
notification.style.backgroundColor = '#16a34a';
|
||
|
|
break;
|
||
|
|
case 'error':
|
||
|
|
notification.style.backgroundColor = '#dc2626';
|
||
|
|
break;
|
||
|
|
case 'warning':
|
||
|
|
notification.style.backgroundColor = '#d97706';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
notification.style.backgroundColor = '#3b82f6';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.body.appendChild(notification);
|
||
|
|
|
||
|
|
// 3秒后自动消失
|
||
|
|
setTimeout(() => {
|
||
|
|
notification.style.opacity = '0';
|
||
|
|
setTimeout(() => {
|
||
|
|
if (notification.parentNode) {
|
||
|
|
document.body.removeChild(notification);
|
||
|
|
}
|
||
|
|
}, 300);
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 开关切换功能
|
||
|
|
function toggleSwitch(switchElement) {
|
||
|
|
const isChecked = switchElement.checked;
|
||
|
|
console.log('开关状态:', isChecked);
|
||
|
|
|
||
|
|
// 添加视觉反馈
|
||
|
|
const slider = switchElement.nextElementSibling;
|
||
|
|
if (slider) {
|
||
|
|
if (isChecked) {
|
||
|
|
slider.style.backgroundColor = '#16a34a';
|
||
|
|
} else {
|
||
|
|
slider.style.backgroundColor = '#e5e7eb';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化开关状态
|
||
|
|
function initializeSwitches() {
|
||
|
|
const switches = document.querySelectorAll('input[type="checkbox"]');
|
||
|
|
switches.forEach(switchElement => {
|
||
|
|
// 为已选中的开关设置正确的样式
|
||
|
|
if (switchElement.checked) {
|
||
|
|
const slider = switchElement.nextElementSibling;
|
||
|
|
if (slider) {
|
||
|
|
slider.style.backgroundColor = '#16a34a';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('开关初始化完成,共', switches.length, '个开关');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 键盘快捷键支持
|
||
|
|
document.addEventListener('keydown', function(e) {
|
||
|
|
// ESC键回到首页
|
||
|
|
if (e.key === 'Escape') {
|
||
|
|
window.location.href = '../index.html';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// DOM 加载完成后初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
console.log('页面初始化完成');
|
||
|
|
initializeSwitches();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 导出全局函数
|
||
|
|
window.showNotification = showNotification;
|
||
|
|
window.toggleSwitch = toggleSwitch;
|