192 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
		
		
			
		
	
	
			192 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
|  | // 主页面的JavaScript逻辑 - 简化版
 | ||
|  | 
 | ||
|  | // 全局状态管理
 | ||
|  | let currentExpandedMenus = []; | ||
|  | 
 | ||
|  | // DOM 加载完成后初始化
 | ||
|  | document.addEventListener('DOMContentLoaded', function() { | ||
|  |     console.log('大数集市商户端主页面初始化完成'); | ||
|  |      | ||
|  |     // 初始化菜单状态
 | ||
|  |     initializeMenus(); | ||
|  |      | ||
|  |     // 初始化开关状态
 | ||
|  |     initializeSwitches(); | ||
|  |      | ||
|  |     // 添加搜索功能
 | ||
|  |     initializeSearch(); | ||
|  | }); | ||
|  | 
 | ||
|  | // 菜单展开/收起功能
 | ||
|  | function toggleMenu(menuId) { | ||
|  |     const arrow = document.getElementById(menuId + '-arrow'); | ||
|  |     const submenu = document.getElementById(menuId + '-submenu'); | ||
|  |      | ||
|  |     if (currentExpandedMenus.includes(menuId)) { | ||
|  |         // 收起菜单
 | ||
|  |         currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId); | ||
|  |          | ||
|  |         if (arrow) { | ||
|  |             arrow.classList.remove('rotate-180'); | ||
|  |         } | ||
|  |          | ||
|  |         if (submenu) { | ||
|  |             submenu.classList.add('hidden'); | ||
|  |         } | ||
|  |     } else { | ||
|  |         // 展开菜单
 | ||
|  |         currentExpandedMenus.push(menuId); | ||
|  |          | ||
|  |         if (arrow) { | ||
|  |             arrow.classList.add('rotate-180'); | ||
|  |         } | ||
|  |          | ||
|  |         if (submenu) { | ||
|  |             submenu.classList.remove('hidden'); | ||
|  |             submenu.classList.add('fade-in'); | ||
|  |         } | ||
|  |     } | ||
|  |      | ||
|  |     console.log('菜单状态更新:', menuId, currentExpandedMenus); | ||
|  | } | ||
|  | 
 | ||
|  | // 开关切换功能
 | ||
|  | 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 initializeMenus() { | ||
|  |     // 会员管理菜单默认展开
 | ||
|  |     toggleMenu('member'); | ||
|  |      | ||
|  |     console.log('菜单初始化完成'); | ||
|  | } | ||
|  | 
 | ||
|  | // 初始化开关状态
 | ||
|  | 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, '个开关'); | ||
|  | } | ||
|  | 
 | ||
|  | // 搜索功能
 | ||
|  | function initializeSearch() { | ||
|  |     const searchInput = document.querySelector('input[placeholder*="搜索"]'); | ||
|  |     if (searchInput) { | ||
|  |         searchInput.addEventListener('input', function(e) { | ||
|  |             const searchTerm = e.target.value.toLowerCase(); | ||
|  |             filterMenuItems(searchTerm); | ||
|  |         }); | ||
|  |     } | ||
|  | } | ||
|  | 
 | ||
|  | // 过滤菜单项
 | ||
|  | function filterMenuItems(searchTerm) { | ||
|  |     const menuItems = document.querySelectorAll('nav div'); | ||
|  |      | ||
|  |     menuItems.forEach(item => { | ||
|  |         const text = item.textContent.toLowerCase(); | ||
|  |         if (text.includes(searchTerm) || searchTerm === '') { | ||
|  |             item.style.display = ''; | ||
|  |         } else { | ||
|  |             item.style.display = 'none'; | ||
|  |         } | ||
|  |     }); | ||
|  |      | ||
|  |     console.log('搜索筛选:', searchTerm); | ||
|  | } | ||
|  | 
 | ||
|  | // 显示通知
 | ||
|  | 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); | ||
|  | } | ||
|  | 
 | ||
|  | // 键盘快捷键支持
 | ||
|  | document.addEventListener('keydown', function(e) { | ||
|  |     // Ctrl+F 聚焦搜索框
 | ||
|  |     if (e.ctrlKey && e.key === 'f') { | ||
|  |         e.preventDefault(); | ||
|  |         const searchInput = document.querySelector('input[placeholder*="搜索"]'); | ||
|  |         if (searchInput) { | ||
|  |             searchInput.focus(); | ||
|  |         } | ||
|  |     } | ||
|  | }); | ||
|  | 
 | ||
|  | // 窗口大小变化时的响应式处理
 | ||
|  | window.addEventListener('resize', function() { | ||
|  |     const sidebar = document.querySelector('aside'); | ||
|  |     if (window.innerWidth < 768 && sidebar) { | ||
|  |         console.log('切换到移动端布局'); | ||
|  |         // 可以在这里添加移动端特定的逻辑
 | ||
|  |     } | ||
|  | }); | ||
|  | 
 | ||
|  | // 导出全局函数
 | ||
|  | window.toggleMenu = toggleMenu; | ||
|  | window.toggleSwitch = toggleSwitch; | ||
|  | window.showNotification = showNotification; |