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