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