// 全局状态管理 let currentExpandedMenus = []; let currentSelectedMenuItem = ''; // 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 showLevelSettings() { // 隐藏默认内容 const defaultContent = document.getElementById('default-content'); const levelSettingsContent = document.getElementById('level-settings-content'); if (defaultContent) { defaultContent.classList.add('hidden'); } if (levelSettingsContent) { levelSettingsContent.classList.remove('hidden'); levelSettingsContent.classList.add('fade-in'); } currentSelectedMenuItem = 'level-settings'; console.log('切换到等级设置页面'); } // 显示默认页面 function showDefaultContent() { const defaultContent = document.getElementById('default-content'); const levelSettingsContent = document.getElementById('level-settings-content'); if (levelSettingsContent) { levelSettingsContent.classList.add('hidden'); } if (defaultContent) { defaultContent.classList.remove('hidden'); defaultContent.classList.add('fade-in'); } currentSelectedMenuItem = ''; console.log('切换到默认页面'); } // 开关切换功能 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'); // 添加首页点击事件 const homeMenuItem = document.querySelector('[onclick*="首页"]'); if (homeMenuItem) { homeMenuItem.addEventListener('click', showDefaultContent); } 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(() => { document.body.removeChild(notification); }, 300); }, 3000); } // 等级明细设置功能 function showLevelDetail(shopName) { showNotification(`正在设置 ${shopName} 的等级明细`, 'info'); console.log('设置等级明细:', shopName); } // 添加表格行的点击事件 document.addEventListener('DOMContentLoaded', function() { const levelDetailButtons = document.querySelectorAll('button'); levelDetailButtons.forEach(button => { if (button.textContent.includes('设置等级明细')) { button.addEventListener('click', function() { const row = this.closest('tr'); const shopName = row.querySelector('td').textContent; showLevelDetail(shopName); }); } }); }); // 键盘快捷键支持 document.addEventListener('keydown', function(e) { // ESC键回到首页 if (e.key === 'Escape') { showDefaultContent(); } // 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('切换到移动端布局'); // 可以在这里添加移动端特定的逻辑 } }); // 导出一些全局函数供HTML调用 window.toggleMenu = toggleMenu; window.showLevelSettings = showLevelSettings; window.showDefaultContent = showDefaultContent; window.toggleSwitch = toggleSwitch; window.showLevelDetail = showLevelDetail;